@extends('examples.modern-layout-v2')
@section('title', __('messages.menu.queue list'))
@section('report', 'bg-blue-50 text-blue-700')
@section('queue_list_report', 'bg-blue-50 text-blue-700')

@push('styles')
<link rel="stylesheet" type="text/css" href="{{asset('app-assets/vendors/data-tables/css/jquery.dataTables.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('app-assets/vendors/data-tables/extensions/responsive/css/responsive.dataTables.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('app-assets/vendors/data-tables/css/select.dataTables.min.css')}}">
<style>
    .dataTables_wrapper .dataTables_filter {
        float: right;
        text-align: right;
        margin-bottom: 20px;
    }
    
    .dataTables_wrapper .dataTables_length {
        float: left;
        margin-bottom: 20px;
    }
</style>
@endpush

@section('content')
<div x-data="queueListReport()" x-init="init()">
    <!-- Page Header -->
    <div class="mb-8">
        <div class="@if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
            <h2 class="text-3xl font-bold text-gray-900 mb-2">{{__('messages.menu.queue list')}}</h2>
            <p class="text-gray-600">{{__('messages.reports.queue_list_description')}}</p>
        </div>
    </div>

    <!-- Filter Form Card -->
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 hover:shadow-md transition-shadow duration-200 mb-6">
        <form action="{{ \App\Helpers\UrlHelper::routeWithCityBuilding('queue_list_report') }}" id="queue_list_report_form" autocomplete="off" class="space-y-6">
            @if(\App\Helpers\ServerHelper::isApiServer() && request()->query('city'))
                <input type="hidden" name="city" value="{{ request()->query('city') }}">
            @endif
            @if(request()->query('building'))
                <input type="hidden" name="building" value="{{ request()->query('building') }}">
            @endif
            <!-- Quick Date Range Buttons -->
            <div>
                <label class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                    {{__('messages.reports.quick_date_range')}}
                </label>
                <div class="flex flex-wrap gap-2">
                    <button type="button" @click="setQuickDate('today')" :class="quickDate === 'today' ? 'bg-blue-600 text-white border-blue-600' : 'bg-white text-gray-700 border-gray-200 hover:bg-blue-50 hover:border-blue-300'" class="px-4 py-2 rounded-full border-2 transition-all duration-200 text-sm font-medium">
                        {{__('messages.reports.today')}}
                    </button>
                    <button type="button" @click="setQuickDate('yesterday')" :class="quickDate === 'yesterday' ? 'bg-blue-600 text-white border-blue-600' : 'bg-white text-gray-700 border-gray-200 hover:bg-blue-50 hover:border-blue-300'" class="px-4 py-2 rounded-full border-2 transition-all duration-200 text-sm font-medium">
                        {{__('messages.reports.yesterday')}}
                    </button>
                    <button type="button" @click="setQuickDate('this_week')" :class="quickDate === 'this_week' ? 'bg-blue-600 text-white border-blue-600' : 'bg-white text-gray-700 border-gray-200 hover:bg-blue-50 hover:border-blue-300'" class="px-4 py-2 rounded-full border-2 transition-all duration-200 text-sm font-medium">
                        {{__('messages.reports.this_week')}}
                    </button>
                    <button type="button" @click="setQuickDate('last_week')" :class="quickDate === 'last_week' ? 'bg-blue-600 text-white border-blue-600' : 'bg-white text-gray-700 border-gray-200 hover:bg-blue-50 hover:border-blue-300'" class="px-4 py-2 rounded-full border-2 transition-all duration-200 text-sm font-medium">
                        {{__('messages.reports.last_week')}}
                    </button>
                    <button type="button" @click="setQuickDate('this_month')" :class="quickDate === 'this_month' ? 'bg-blue-600 text-white border-blue-600' : 'bg-white text-gray-700 border-gray-200 hover:bg-blue-50 hover:border-blue-300'" class="px-4 py-2 rounded-full border-2 transition-all duration-200 text-sm font-medium">
                        {{__('messages.reports.this_month')}}
                    </button>
                    <button type="button" @click="setQuickDate('last_month')" :class="quickDate === 'last_month' ? 'bg-blue-600 text-white border-blue-600' : 'bg-white text-gray-700 border-gray-200 hover:bg-blue-50 hover:border-blue-300'" class="px-4 py-2 rounded-full border-2 transition-all duration-200 text-sm font-medium">
                        {{__('messages.reports.last_month')}}
                    </button>
                </div>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-5 gap-6">
                <!-- Starting Date -->
                <div class="md:col-span-2">
                    <label for="starting_date" class="block text-sm font-medium text-gray-700 mb-2 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                        {{__('messages.reports.starting date')}} <span class="text-red-500">*</span>
                    </label>
                    <input 
                        id="starting_date" 
                        name="starting_date" 
                        type="date" 
                        x-model="startingDate"
                        @change="updateButtonState()"
                        class="block w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-300 transition-all duration-200 bg-white hover:bg-gray-50 hover:border-blue-300 shadow-sm hover:shadow-md @error('starting_date') border-red-500 @enderror @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif"
                        required
                    >
                    @error('starting_date')
                        <p class="mt-2 text-sm text-red-600 flex items-center @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') flex-row-reverse @endif">
                            <span class="material-icons text-base @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') ml-1 @else mr-1 @endif">error_outline</span>
                            {{ $message }}
                        </p>
                    @enderror
                </div>
                
                <!-- Ending Date -->
                <div class="md:col-span-2">
                    <label for="ending_date" class="block text-sm font-medium text-gray-700 mb-2 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                        {{__('messages.reports.ending date')}} <span class="text-red-500">*</span>
                    </label>
                    <input 
                        id="ending_date" 
                        name="ending_date" 
                        type="date" 
                        x-model="endingDate"
                        @change="updateButtonState()"
                        class="block w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-300 transition-all duration-200 bg-white hover:bg-gray-50 hover:border-blue-300 shadow-sm hover:shadow-md @error('ending_date') border-red-500 @enderror @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif"
                        required
                    >
                    @error('ending_date')
                        <p class="mt-2 text-sm text-red-600 flex items-center @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') flex-row-reverse @endif">
                            <span class="material-icons text-base @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') ml-1 @else mr-1 @endif">error_outline</span>
                            {{ $message }}
                        </p>
                    @enderror
                </div>
                
                <!-- Submit Button -->
                <div class="flex items-end">
                    <button 
                        type="submit" 
                        id="gobtn"
                        :disabled="!startingDate || !endingDate || loading"
                        class="w-full inline-flex items-center justify-center px-6 py-3 bg-gradient-to-r from-blue-600 to-blue-500 text-white font-semibold rounded-xl hover:from-blue-700 hover:to-blue-600 transition-all duration-300 shadow-lg hover:shadow-xl transform hover:scale-105 active:scale-95 border border-blue-400/20 disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none" dir="ltr"
                    >
                        <span x-show="!loading" class="material-icons mr-2">search</span>
                        <span x-show="loading" class="animate-spin rounded-full h-5 w-5 border-2 border-white border-t-transparent mr-2"></span>
                        <span x-text="loading ? '{{__('messages.common.loading')}}...' : '{{__('messages.reports.go')}}'"></span>
                    </button>
                </div>
            </div>
        </form>
    </div>

    <!-- Results Table -->
    @if($reports)
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden hover:shadow-md transition-shadow duration-200">
        <!-- Export Buttons -->
        <div class="p-4 border-b border-gray-200 flex flex-wrap gap-3">
            @if($reports && count($reports) > 0)
            <a href="{{ \App\Helpers\UrlHelper::routeWithCityBuilding('export_queue_list_csv', $request_params ?? []) }}" class="inline-flex items-center px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors duration-200 text-sm font-medium">
                <span class="material-icons text-base mr-2">file_download</span>
                {{__('messages.reports.export_csv')}}
            </a>
            @endif
        </div>
        <div class="overflow-x-auto">
            <table id="page-length-option" class="min-w-full divide-y divide-gray-200 display dataTable" style="width:100%">
                <thead class="bg-gradient-to-r from-blue-600 to-blue-500">
                    <tr>
                        <th class="px-6 py-4 text-left text-xs font-bold text-white uppercase tracking-wider">#</th>
                        <th class="px-6 py-4 text-left text-xs font-bold text-white uppercase tracking-wider">{{__('messages.reports.service')}}</th>
                        <th class="px-6 py-4 text-left text-xs font-bold text-white uppercase tracking-wider">{{__('messages.reports.date')}}</th>
                        <th class="px-6 py-4 text-left text-xs font-bold text-white uppercase tracking-wider">{{__('messages.reports.token number')}}</th>
                        <th class="px-6 py-4 text-left text-xs font-bold text-white uppercase tracking-wider">{{__('messages.reports.called')}}</th>
                        <th class="px-6 py-4 text-left text-xs font-bold text-white uppercase tracking-wider">{{__('messages.reports.user')}}</th>
                        <th class="px-6 py-4 text-left text-xs font-bold text-white uppercase tracking-wider">{{__('messages.reports.counter')}}</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    @foreach($reports as $key=>$report)
                    <tr class="hover:bg-blue-50/50 transition-colors duration-150">
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ $key+1 }}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{$report->service_name}}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">{{\Carbon\Carbon::parse($report->date)->timezone($timezone)->format('d-m-Y')}}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-gray-900">{{$report->token_letter}}-{{$report->token_number}}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm">
                            @if($report->called == 1)
                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-green-100 text-green-800">{{__('messages.reports.yes')}}</span>
                            @else
                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-orange-100 text-orange-800">{{__('messages.reports.no')}}</span>
                            @endif
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">{{$report->user_name ? $report->user_name : 'Nil' }}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">{{$report->counter_name ? $report->counter_name : 'Nil' }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
    @else
    <!-- Empty State -->
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-12 text-center">
        <div class="inline-flex items-center justify-center w-20 h-20 rounded-full bg-gray-100 mb-4">
            <span class="material-icons text-4xl text-gray-400">assessment</span>
        </div>
        <h3 class="text-lg font-semibold text-gray-900 mb-2">{{__('messages.reports.no_data_available')}}</h3>
        <p class="text-gray-600">{{__('messages.reports.select_date_range_to_view_report')}}</p>
    </div>
    @endif
</div>

@push('scripts')
<script src="{{asset('app-assets/vendors/data-tables/js/jquery.dataTables.min.js')}}"></script>
<script src="{{asset('app-assets/vendors/data-tables/extensions/responsive/js/dataTables.responsive.min.js')}}"></script>
<script src="{{asset('app-assets/vendors/data-tables/js/dataTables.select.min.js')}}"></script>
<script src="{{asset('app-assets/vendors/jquery-validation/jquery.validate.min.js')}}"></script>
<script>
function queueListReport() {
    return {
        loading: false,
        quickDate: null,
        startingDate: '{{$selected_starting_date}}',
        endingDate: '{{$selected_ending_date}}',
        init() {
            // Initialize form validation
            $('#queue_list_report_form').validate({
                rules: {
                    starting_date: { required: true },
                    ending_date: { required: true },
                },
                errorElement: 'div',
                errorPlacement: function(error, element) {
                    error.addClass('mt-2 text-sm text-red-600');
                    error.insertAfter(element);
                },
                submitHandler: (form) => {
                    this.loading = true;
                    form.submit();
                }
            });
            
            this.updateButtonState();
            
            @if($reports)
            // Initialize DataTable
            window.datatablesLang = {
                search: '{{__('messages.datatables.search')}}',
                searchPlaceholder: '{{__('messages.datatables.searchPlaceholder')}}',
                lengthMenu: '{{__('messages.datatables.lengthMenu')}}',
                info: '{{__('messages.datatables.info')}}',
                infoEmpty: '{{__('messages.datatables.infoEmpty')}}',
                infoFiltered: '{{__('messages.datatables.infoFiltered')}}',
                zeroRecords: '{{__('messages.datatables.zeroRecords')}}',
                emptyTable: '{{__('messages.datatables.emptyTable')}}',
                paginate: {
                    first: '{{__('messages.datatables.first')}}',
                    previous: '{{__('messages.datatables.previous')}}',
                    next: '{{__('messages.datatables.next')}}',
                    last: '{{__('messages.datatables.last')}}'
                },
                processing: '{{__('messages.datatables.processing')}}',
                all: '{{__('messages.datatables.all')}}'
            };
            
            $('#page-length-option').DataTable({
                "responsive": true,
                "autoHeight": true,
                "scrollX": true,
                "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, window.datatablesLang ? window.datatablesLang.all : "All"]],
                "pageLength": 25,
                "language": window.datatablesLang || {},
                "order": [[0, "asc"]]
            });
            @endif
        },
        setQuickDate(range) {
            this.quickDate = range;
            const today = new Date();
            let startDate, endDate;
            
            switch(range) {
                case 'today':
                    startDate = endDate = new Date(today);
                    break;
                case 'yesterday':
                    const yesterday = new Date(today);
                    yesterday.setDate(yesterday.getDate() - 1);
                    startDate = endDate = yesterday;
                    break;
                case 'this_week':
                    const dayOfWeek = today.getDay();
                    startDate = new Date(today);
                    startDate.setDate(today.getDate() - dayOfWeek);
                    endDate = new Date(today);
                    break;
                case 'last_week':
                    const dayOfWeek2 = today.getDay();
                    startDate = new Date(today);
                    startDate.setDate(today.getDate() - dayOfWeek2 - 7);
                    endDate = new Date(today);
                    endDate.setDate(today.getDate() - dayOfWeek2 - 1);
                    break;
                case 'this_month':
                    startDate = new Date(today.getFullYear(), today.getMonth(), 1);
                    endDate = new Date(today);
                    break;
                case 'last_month':
                    startDate = new Date(today.getFullYear(), today.getMonth() - 1, 1);
                    endDate = new Date(today.getFullYear(), today.getMonth(), 0);
                    break;
            }
            
            const formatDate = (date) => {
                const year = date.getFullYear();
                const month = String(date.getMonth() + 1).padStart(2, '0');
                const day = String(date.getDate()).padStart(2, '0');
                return `${year}-${month}-${day}`;
            };
            
            this.startingDate = formatDate(startDate);
            this.endingDate = formatDate(endDate);
            this.updateButtonState();
        },
        updateButtonState() {
            // Button state is handled by :disabled binding
        }
    }
}
</script>
@endpush
@endsection