@extends('admin.layouts.app')
@section('title')
    {{ __('Report') }}
@endsection

@section('content')
    <div class="row clearfix">
        <div class="col-lg-12 col-md-12 col-sm-12">
            <div class="card">
                <div class="block-header">
                    <div class="header d-flex gap-4">
                        <h2>
                            {{ request('where') }} Report ({{ $progressData['name']['total'] ?? 0 }})
                        </h2>
                        @if(request('where') == 'Universities')
                        <select name="country" id="country" class="select2bs4">
                            <option value="">Select country</option>
                            @foreach($country as $data)
                            <option value="{{ $data['id'] }}" {{ (request('country') == $data['id']) ? 'selected' : '' }}>{{ $data['name'] }}</option>
                            @endforeach
                        </select>
                        <a href="#" id="searchLink" class="btn btn-primary"><i class="fas fa fa-search"></i></a>
                        @endif
                    </div>
                </div>                
                @isset($progressData)
                @if($progressData['name']['total'] != 0)
                <div class="card-body row">
                    <div class="card shadow mb-4 col-4">
                        <div class="card-header py-3">
                            <h6 class="m-0 font-weight-bold text-primary">Course Progress</h6>
                        </div>
                        <div class="card-body">
                            @php $fieldCount = 0; @endphp
                            @foreach ($progressData as $field => $data)
                                @if ($fieldCount > 0 && $fieldCount % 10 == 0)
                        </div>
                    </div>
                    <div class="card shadow mb-4 col-4">
                        <div class="card-header py-3">
                            <h6 class="m-0 font-weight-bold text-primary">{{ request('where') }} Progress</h6>
                        </div>
                        <div class="card-body">
                            @endif
                            <h4 class="small font-weight-bold fs-5 mt-3">
                                {{ ucwords(str_replace(['_'], [' '], $field)) }}

                                    @if(request('where') == 'Course')
                                    <a href="{{ route('course.index') }}?{{ $field }}=null" title="Blank {{ $field }}">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                    @elseif (request('where') == 'Universities')
                                    <a href="{{ route('university.index') }}?{{ $field }}=null" title="Blank {{ $field }}">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                    @endif
                                <span class="float-right">{{ number_format($data['percentage'], 2) }}%</span>
                            </h4>
                            <div class="progress">
                                <div class="progress-bar {{ $data['colorClass'] }}" role="progressbar"
                                    style="width: {{ $data['percentage'] }}%" aria-valuenow="{{ $data['percentage'] }}"
                                    aria-valuemin="0" aria-valuemax="100">
                                </div>
                            </div>
                            <span> {{ $data['filled'] }} out of {{ $data['total'] }} courses have {{ $field }} filled. </span>
                            @php $fieldCount++; @endphp
                            @endforeach
                        </div>
                    </div>
                </div>
                @else
                <div class="card-body row ml-2">
                    Sorry Nothing to Show
                </div>
                @endif
                @endisset
            </div>
        </div>
    </div>
@endsection

@section('style')
    <link href="https://cdn.jsdelivr.net/npm/@sweetalert2/theme-dark@4/dark.css" rel="stylesheet">
    <link rel="stylesheet" href="{{ asset('backend') }}/plugins/datatables-responsive/css/responsive.bootstrap4.min.css">
    <link rel="stylesheet" href="{{ asset('backend') }}/plugins/select2/css/select2.min.css">
    <link rel="stylesheet" href="{{ asset('backend') }}/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css">
    <style>
        .help {
            color: #666;
            font-size: 11px;
            font-weight: normal;
            font-family: Verdana, Geneva, sans-serif;
            display: block;
        }

        tr th {
            display: table-cell;
        }

        .btn-round {
            border-width: 1px;
            border-radius: 30px !important;
            padding: 10px 20px;
        }

        .card .header {
            border-bottom: 2px solid #868686;
        }



        .row {
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            margin-right: -15px;
            margin-left: -15px;
        }

        .form-group {
            position: relative;
        }

        .input-group,
        .form-group {
            margin-bottom: 10px;
        }

        .pr-3,
        .px-3 {
            padding-right: 1rem !important;
        }

        .card .header {
            color: #000;
            padding: 20px;
            position: relative;
            box-shadow: none;
            background: #d3d7da;
        }

        .card .header .header-dropdown {
            position: absolute;
            top: 5px;
            right: 20px;
            list-style: none;
        }

        .card .body {
            font-size: 14px;
            color: #424242;
            padding: 20px;
            font-weight: 400;
        }

        .m-2 {
            margin: 0.5rem !important;
        }

        .table-responsive {
            display: block;
            width: 100%;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

        .white-text {
            color: white;
        }
    </style>
@endsection

@section('script')
    <script src="{{ asset('backend') }}/plugins/bootstrap-switch/js/bootstrap-switch.min.js"></script>
    <script src="{{ asset('backend/plugins/select2/js/select2.full.min.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#searchLink').click(function(e) {
                e.preventDefault(); // Prevent the default action of the anchor tag
                var selectedCountryId = $('#country').val(); // Get the selected country ID
                var searchUrl = "{{ route('report') }}?where=Universities"; // Base search URL with existing query parameter
                if (selectedCountryId) {
                    searchUrl += "&country=" + selectedCountryId; // Append the selected country ID to the search URL
                }
                window.location.href = searchUrl; // Redirect to the updated search URL
            });
            $('.select2bs4').select2({
                theme: 'bootstrap4'
            })
        });
    </script>
@endsection