@extends('examples.modern-layout-v2')
@section('title', __('messages.menu.monthly report'))
@section('report', 'bg-blue-50 text-blue-700')
@section('monthly_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="monthlyReport()" 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.monthly report')}}</h2>
            <p class="text-gray-600">{{__('messages.reports.monthly_report_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 id="monthly_form" action="{{ \App\Helpers\UrlHelper::routeWithCityBuilding('monthly_report') }}" 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>
            
            <!-- Filter Fields Row 1 -->
            <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
                <!-- Service -->
                <div>
                    <label for="service_id" 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.select service')}}
                    </label>
                    <select 
                        name="service_id" 
                        id="service_id" 
                        x-model="filters.service"
                        @change="updateActiveFilters()"
                        class="block w-full px-4 py-2.5 pr-10 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-300 transition-all duration-200 bg-white appearance-none cursor-pointer hover:bg-gray-50 hover:border-blue-300 shadow-sm hover:shadow-md @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif"
                    >
                        <option value="">{{__('messages.reports.all services')}}</option>
                        @foreach($services as $service)
                        <option value="{{$service->id}}" {{ $service->id == $selected['service'] ?'selected':''}}>{{$service->name}}</option>
                        @endforeach
                    </select>
                </div>
                
                <!-- Counter -->
                <div>
                    <label for="counter_id" 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.select counter')}}
                    </label>
                    <select 
                        name="counter_id" 
                        id="counter_id" 
                        x-model="filters.counter"
                        @change="updateActiveFilters()"
                        class="block w-full px-4 py-2.5 pr-10 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-300 transition-all duration-200 bg-white appearance-none cursor-pointer hover:bg-gray-50 hover:border-blue-300 shadow-sm hover:shadow-md @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif"
                    >
                        <option value="">{{__('messages.reports.all counters')}}</option>
                        @foreach($counters as $counter)
                        <option value="{{$counter->id}}" {{ $counter->id == $selected['counter'] ?'selected':''}}>{{$counter->name}}</option>
                        @endforeach
                    </select>
                </div>
                
                <!-- User -->
                <div>
                    <label for="user_id" 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.select user')}}
                    </label>
                    <select 
                        name="user_id" 
                        id="user_id" 
                        x-model="filters.user"
                        @change="updateActiveFilters()"
                        class="block w-full px-4 py-2.5 pr-10 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-300 transition-all duration-200 bg-white appearance-none cursor-pointer hover:bg-gray-50 hover:border-blue-300 shadow-sm hover:shadow-md @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif"
                    >
                        <option value="">{{__('messages.reports.all users')}}</option>
                        @foreach($users as $user)
                        <option value="{{$user->id}}" {{ $user->id == $selected['user'] ?'selected':''}}>{{$user->name}}</option>
                        @endforeach
                    </select>
                </div>
                
                <!-- Status -->
                <div>
                    <label for="call_status" 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.select status')}}
                    </label>
                    <select 
                        name="call_status" 
                        id="call_status" 
                        x-model="filters.status"
                        @change="updateActiveFilters()"
                        class="block w-full px-4 py-2.5 pr-10 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-300 transition-all duration-200 bg-white appearance-none cursor-pointer hover:bg-gray-50 hover:border-blue-300 shadow-sm hover:shadow-md @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif"
                    >
                        <option value="">{{__('messages.reports.all statuses')}}</option>
                        @foreach($statuses as $status)
                        <option value="{{$status->id}}" {{ $status->id == $selected['status'] ?'selected':''}}>
                            @if($status->name === 'served')
                                {{__('messages.reports.served')}}
                            @elseif($status->name === 'noshow')
                                {{__('messages.reports.no_show')}}
                            @else
                                {{$status->name}}
                            @endif
                        </option>
                        @endforeach
                    </select>
                </div>
            </div>
            
            <!-- Date Range and Submit -->
            <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>
            
            <!-- Active Filters Display -->
            <div x-show="activeFilters.length > 0" class="pt-4 border-t border-gray-200">
                <div class="flex flex-wrap items-center gap-2">
                    <span class="text-xs font-semibold text-gray-500 uppercase">{{__('messages.reports.active_filters')}}:</span>
                    <template x-for="filter in activeFilters" :key="filter.id">
                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                            <span x-text="filter.label"></span>
                            <button @click="clearFilter(filter.id)" class="ml-2 hover:text-blue-600">
                                <span class="material-icons text-sm">close</span>
                            </button>
                        </span>
                    </template>
                </div>
            </div>
        </form>
    </div>
    
    @if($reports)
    <!-- Statistics Cards -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
        <div class="bg-white rounded-2xl shadow-sm border-l-4 border-cyan-500 p-6 hover:shadow-md transition-shadow duration-200">
            <div class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">{{__('messages.reports.waiting_people')}}</div>
            <div class="text-3xl font-bold text-cyan-500">{{$token_count['queue'] ?? 0}}</div>
        </div>
        <div class="bg-white rounded-2xl shadow-sm border-l-4 border-green-500 p-6 hover:shadow-md transition-shadow duration-200">
            <div class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">{{__('messages.reports.tickets_in_serving')}}</div>
            <div class="text-3xl font-bold text-green-500">{{$token_count['serving'] ?? 0}}</div>
        </div>
        <div class="bg-white rounded-2xl shadow-sm border-l-4 border-orange-500 p-6 hover:shadow-md transition-shadow duration-200">
            <div class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">{{__('messages.reports.no_show')}}</div>
            <div class="text-3xl font-bold text-orange-500">{{$token_count['noshow'] ?? 0}}</div>
        </div>
        <div class="bg-white rounded-2xl shadow-sm border-l-4 border-red-500 p-6 hover:shadow-md transition-shadow duration-200">
            <div class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">{{__('messages.reports.served')}}</div>
            <div class="text-3xl font-bold text-red-500">{{$token_count['served'] ?? 0}}</div>
        </div>
    </div>
    
    <!-- Data Table Card -->
    <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 && ($reports instanceof \Illuminate\Pagination\LengthAwarePaginator ? $reports->total() > 0 : count($reports) > 0))
            <a href="{{ \App\Helpers\UrlHelper::routeWithCityBuilding('export_monthly_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>
            <a href="{{ \App\Helpers\UrlHelper::routeWithCityBuilding('export_monthly_pdf', $request_params ?? []) }}" target="_blank" class="inline-flex items-center px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors duration-200 text-sm font-medium">
                <span class="material-icons text-base mr-2">picture_as_pdf</span>
                {{__('messages.reports.export_pdf')}}
            </a>
            @endif
        </div>
        
        <div class="overflow-x-auto p-4">
            <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.user')}}</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.service')}}</th>
                        <th class="px-6 py-4 text-left text-xs font-bold text-white uppercase tracking-wider">{{__('messages.reports.counter')}}</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.called at')}}</th>
                        <th class="px-6 py-4 text-left text-xs font-bold text-white uppercase tracking-wider">{{__('messages.reports.served at')}}</th>
                        <th class="px-6 py-4 text-left text-xs font-bold text-white uppercase tracking-wider">{{__('messages.reports.waiting time')}}</th>
                        <th class="px-6 py-4 text-left text-xs font-bold text-white uppercase tracking-wider">{{__('messages.reports.served time')}}</th>
                        <th class="px-6 py-4 text-left text-xs font-bold text-white uppercase tracking-wider">{{__('messages.reports.total time')}}</th>
                        <th class="px-6 py-4 text-left text-xs font-bold text-white uppercase tracking-wider">{{__('messages.counter_page.status')}}</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">{{$reports instanceof \Illuminate\Pagination\LengthAwarePaginator ? ($reports->firstItem() + $key) : ($key + 1)}}</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 font-bold text-gray-900">{{$report->token_letter}}-{{$report->token_number}}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">{{$report->service_name}}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">{{$report->counter_name ? $report->counter_name : 'Nil'}}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">{{$report->date ? \Carbon\Carbon::parse($report->date)->timezone($timezone)->format('d-m-Y H:i') : 'Nil'}}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">{{$report->called_at ? \Carbon\Carbon::parse($report->called_at)->timezone($timezone)->format('d-m-Y H:i') :'Nil'}}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">{{$report->served_at ? \Carbon\Carbon::parse($report->served_at)->timezone($timezone)->format('d-m-Y H:i') : 'Nil'}}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">{{$report->waiting_time ? \App\Helpers\TimeHelper::formatTimeDurationForReport($report->waiting_time) : 'Nil'}}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">{{$report->served_time ? \App\Helpers\TimeHelper::formatTimeDurationForReport($report->served_time) : 'Nil'}}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">{{$report->total_time ? \App\Helpers\TimeHelper::formatTimeDurationForReport($report->total_time) : 'Nil'}}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm">
                            @if($report->status)
                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-blue-100 text-blue-800">
                                    @if($report->status === 'served')
                                        {{__('messages.reports.served')}}
                                    @elseif($report->status === 'noshow')
                                        {{__('messages.reports.no_show')}}
                                    @else
                                        {{$report->status}}
                                    @endif
                                </span>
                            @else
                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold {{$report->counter_name ? 'bg-green-100 text-green-800' : 'bg-orange-100 text-orange-800'}}">
                                    {{$report->counter_name ? __('messages.reports.tickets_in_serving') : __('messages.reports.waiting_people')}}
                                </span>
                            @endif
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        
        @if($reports instanceof \Illuminate\Pagination\LengthAwarePaginator && $reports->hasPages())
        <!-- Pagination -->
        <div class="px-6 py-4 border-t border-gray-200 bg-white shadow-sm">
            <div class="flex flex-col sm:flex-row items-center justify-between gap-4">
                <div class="text-sm text-gray-700 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                    <span>
                        {{__('messages.common.showing')}} 
                        <span class="font-semibold">{{$reports->firstItem()}}</span> 
                        {{__('messages.common.to')}} 
                        <span class="font-semibold">{{$reports->lastItem()}}</span> 
                        {{__('messages.common.of')}} 
                        <span class="font-semibold">{{$reports->total()}}</span> 
                        {{__('messages.common.results')}}
                    </span>
                </div>
                
                <div class="flex items-center gap-2 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') flex-row-reverse @endif">
                    @if($reports->onFirstPage())
                        <span class="px-3 py-2 text-sm font-medium text-gray-400 bg-white border border-gray-300 rounded-lg cursor-not-allowed @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') order-last @endif">
                            {{__('messages.common.previous')}}
                        </span>
                    @else
                        <a href="{{ $reports->appends($request_params)->previousPageUrl() }}" class="px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') order-last @endif">
                            {{__('messages.common.previous')}}
                        </a>
                    @endif
                    
                    @foreach($reports->appends($request_params)->getUrlRange(max(1, $reports->currentPage() - 2), min($reports->lastPage(), $reports->currentPage() + 2)) as $page => $url)
                        @if($page == $reports->currentPage())
                            <span class="px-3 py-2 text-sm font-medium text-white bg-blue-600 border border-blue-600 rounded-lg">{{ $page }}</span>
                        @else
                            <a href="{{ $url }}" class="px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">{{ $page }}</a>
                        @endif
                    @endforeach
                    
                    @if($reports->hasMorePages())
                        <a href="{{ $reports->appends($request_params)->nextPageUrl() }}" class="px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
                            {{__('messages.common.next')}}
                        </a>
                    @else
                        <span class="px-3 py-2 text-sm font-medium text-gray-400 bg-white border border-gray-300 rounded-lg cursor-not-allowed">
                            {{__('messages.common.next')}}
                        </span>
                    @endif
                </div>
            </div>
        </div>
        @endif
    </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 monthlyReport() {
    return {
        loading: false,
        quickDate: null,
        startingDate: '{{$selected['starting_date']}}',
        endingDate: '{{$selected['ending_date']}}',
        filters: {
            service: '{{$selected['service']}}',
            counter: '{{$selected['counter']}}',
            user: '{{$selected['user']}}',
            status: '{{$selected['status']}}'
        },
        activeFilters: [],
        init() {
            this.updateActiveFilters();
            this.updateButtonState();
            
            // Initialize form validation
            $('#monthly_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();
                }
            });
            
            @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({
                "autoHeight": true,
                "scrollX": true,
                "responsive": true,
                @if($reports instanceof \Illuminate\Pagination\LengthAwarePaginator)
                "paging": false,
                "info": false,
                "lengthChange": false,
                @else
                "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, window.datatablesLang ? window.datatablesLang.all : "All"]],
                "pageLength": 25,
                @endif
                "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
        },
        updateActiveFilters() {
            this.activeFilters = [];
            if (this.filters.service) {
                const serviceText = document.querySelector('#service_id option:selected')?.text || '';
                this.activeFilters.push({ id: 'service_id', label: `Service: ${serviceText}` });
            }
            if (this.filters.counter) {
                const counterText = document.querySelector('#counter_id option:selected')?.text || '';
                this.activeFilters.push({ id: 'counter_id', label: `Counter: ${counterText}` });
            }
            if (this.filters.user) {
                const userText = document.querySelector('#user_id option:selected')?.text || '';
                this.activeFilters.push({ id: 'user_id', label: `User: ${userText}` });
            }
            if (this.filters.status) {
                const statusText = document.querySelector('#call_status option:selected')?.text || '';
                this.activeFilters.push({ id: 'call_status', label: `Status: ${statusText}` });
            }
        },
        clearFilter(fieldId) {
            this.filters[fieldId.replace('_id', '').replace('call_', '')] = '';
            document.getElementById(fieldId).value = '';
            this.updateActiveFilters();
        }
    }
}

</script>
@endpush
@endsection