@extends('layouts.admin')

@section('content')
<div class="content container-fluid">
    <div class="page-header">
        <div class="row align-items-center">
            <div class="col">
                <ul class="breadcrumb">
                    <li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
                    <li class="breadcrumb-item active">Drafts</li>
                </ul>
            </div>
        </div>
    </div>
    @if (session('success'))
        <div class="alert alert-success alert-dismissible text-white border-0 fade show p-3" role="alert">
            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="Close"></button>
            <span class="text-success">{{ session('success') }}</span>
        </div>
    @endif

    <div class="d-flex gap-3 draft-summary">
        <div class="w-100">
            <div class="card">
                <div class="card-body">
                    <h5>Current Week</h5>
                    <h6 class="">{{ number_format($currentWeekCount) }}</h6>
                </div>
            </div>
        </div>

        <div class="w-100">
            <div class="card">
                <div class="card-body">
                    <h5>Current Month</h5>
                    <h6 class="">{{ number_format($currentMonthCount) }}</h6>
                </div>
            </div>
        </div>

        <div class="w-100">
            <div class="card">
                <div class="card-body">
                    <h5>Last 3 Months</h5>
                    <h6 class="">{{ number_format($last3MonthsCount) }}</h6>
                </div>
            </div>
        </div>

        <div class="w-100">
            <div class="card">
                <div class="card-body">
                    <h5>Current Year</h5>
                    <h6 class="">{{ number_format($currentYearCount) }}</h6>
                </div>
            </div>
        </div>

        <div class="w-100">
            <div class="card">
                <div class="card-body">
                    <h5>Total Drafts</h5>
                    <h6 class="">{{ number_format($totalCount) }}</h6>
                </div>
            </div>
        </div>
    </div>

    <div class="row pb-5">
        <div class="col-sm-12">
            <div class="card card-table">
                <div class="card-body">
                    <div class="page-header">
                        <div class="row align-items-center">
                            <div class="col">
                                <h3 class="page-title">Drafts</h3>
                            </div>
                            <div class="col-auto text-end float-end ms-auto download-grp">
                            </div>
                        </div>
                    </div>

                    <div class="table-responsive">
                        <table class="table border-0 star-student table-hover table-center mb-0 table-striped datatable" id="sorting-table">
                            <thead>
                                <tr>
                                    <th>Sr. No.</th>
                                    <th>Type</th>
                                    <th>Blue Team</th>
                                    <th>Red Team</th>
                                    <th>Date</th>
                                    <th>Blue Link</th>
                                    <th>Red Link</th>
                                    <th width="20">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($teams as $key => $team)
                                    <tr>
                                        <td>{{ ++$key }}</td>
                                        <td>{{ $team->type == 'HardFearless' ? 'Hard Fearless' : $team->type  }}</td>
                                        <td>{{ $team->blue_name }}</td>
                                        <td>{{ $team->red_name }}</td>
                                        <td>{{ date('M d, Y', strtotime($team->created_at)) }}</td>
                                        <td>
                                            @php
                                                $blueLink = route('game-players', [$team->room_id, $team->blue_team]);
                                                $redLink = route('game-players', [$team->room_id, $team->red_team]);
                                            @endphp
                                            <button class="btn btn-sm btn-info text-white">
                                                <a href="{{ $blueLink }}" target="_blank" class="text-white">
                                                    <i class="fa fa-external-link text-blue" aria-hidden="true"></i> Open
                                                </a>
                                            </button>
                                            <button class="btn btn-sm btn-info text-white" onclick="copyToClipboard(this)" data-link="{{ $blueLink }}">
                                                <i class="fa fa-clone text-blue clone-icon" aria-hidden="true" data-toggle="" data-placement="top"></i> Copy
                                            </button>
                                        </td>
                                        <td>
                                            <button class="btn btn-sm btn-primary">
                                                <a href="{{ $redLink }}" target="_blank" class="text-white">
                                                    <i class="fa fa-external-link text-red" aria-hidden="true"></i> Open
                                                </a>
                                            </button>
                                            <button class="btn btn-sm btn-primary" onclick="copyToClipboard(this)" data-link="{{ $redLink }}">
                                                <i class="fa fa-clone text-red clone-icon" aria-hidden="true" data-toggle="" data-placement="top"></i> Copy
                                            </button>
                                        </td>
                                        <td>
                                            <div>
                                                <a href="javascript:void(0)" data-href="{{ route('admin.drafts.destroy', $team->id) }}" class="btn btn-sm bg-danger-light confirm-delete" onclick="confirmDelete(this)" data-name="Draft" title="Delete">
                                                    <i class="feather-trash-2"></i>
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('script')
<script type="text/javascript">
    function copyText(text) {
        if (navigator.clipboard) {
            navigator.clipboard.writeText(text);
        } else {
            var textarea = document.createElement('textarea');
            textarea.value = text;
            document.body.appendChild(textarea);
            textarea.select();
            document.execCommand('copy');
            document.body.removeChild(textarea);
        }
    }

    function copyToClipboard(el) {
        var link = $(el).data('link');

        copyText(link);

        $(el).find('i').attr('title', "Link copied to clipboard!");
        $(el).find('i').tooltip('show');
        setTimeout(function () {
            $(el).find('i').tooltip('hide');
        }, 2000);
    }
</script>
@endpush