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

@section('content')
<div x-data="reportFormData()" 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.user report')}}</h2>
            <p class="text-gray-600">{{__('messages.reports.user_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 action="{{ \App\Helpers\UrlHelper::routeWithCityBuilding('user_report') }}" id="user_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
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <!-- User Selection -->
                <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')}} <span class="text-red-500">*</span>
                    </label>
                    <select 
                        name="user_id" 
                        id="user_id" 
                        x-model="user_id"
                        @change="user_id = $event.target.value"
                        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 @error('user_id') border-red-500 @enderror @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif"
                        required
                    >
                        <option value="">{{__('messages.reports.all users')}}</option>
                        @foreach ($users as $user)
                            <option value="{{$user->id}}" {{$selected_user_id==$user->id ? 'selected' : ''}}>{{$user->name}}</option>
                        @endforeach
                    </select>
                    @error('user_id')
                        <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>

                <!-- Date Selection -->
                <div>
                    <label for="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.date')}} <span class="text-red-500">*</span>
                    </label>
                    <input 
                        id="date" 
                        name="date" 
                        type="date" 
                        x-model="date"
                        @change="date = $event.target.value"
                        value="{{$selected_date}}"
                        class="block w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors @error('date') border-red-500 @enderror @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif"
                        required
                    >
                    @error('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="isFormInvalid || 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>

    <!-- Statistics Cards -->
    @if(isset($stats) && $stats && isset($reports) && $reports && count($reports) > 0)
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
        <!-- Total Calls Card -->
        <div class="bg-gradient-to-br from-blue-600 to-blue-500 rounded-2xl p-6 text-white shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-105">
            <div class="flex items-center justify-between mb-4">
                <div class="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center backdrop-blur-sm">
                    <span class="material-icons text-2xl">phone</span>
                </div>
            </div>
            <div class="text-sm font-semibold opacity-90 mb-2 uppercase tracking-wide">{{__('messages.reports.total_calls')}}</div>
            <div class="text-4xl font-bold mb-2">{{ $stats['total_calls'] ?? 0 }}</div>
            <div class="text-sm opacity-75">{{__('messages.reports.calls_today')}}</div>
        </div>

        <!-- Served Card -->
        <div class="bg-gradient-to-br from-green-600 to-green-500 rounded-2xl p-6 text-white shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-105">
            <div class="flex items-center justify-between mb-4">
                <div class="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center backdrop-blur-sm">
                    <span class="material-icons text-2xl">check_circle</span>
                </div>
            </div>
            <div class="text-sm font-semibold opacity-90 mb-2 uppercase tracking-wide">{{__('messages.reports.served')}}</div>
            <div class="text-4xl font-bold mb-2">{{ $stats['served'] ?? 0 }}</div>
            <div class="text-sm opacity-75">
                @if(($stats['total_calls'] ?? 0) > 0)
                    {{ round((floatval($stats['served'] ?? 0) / floatval($stats['total_calls'] ?? 1)) * 100, 1) }}% {{__('messages.reports.success_rate')}}
                @else
                    -
                @endif
            </div>
        </div>

        <!-- No Show Card -->
        <div class="bg-gradient-to-br from-red-600 to-red-500 rounded-2xl p-6 text-white shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-105">
            <div class="flex items-center justify-between mb-4">
                <div class="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center backdrop-blur-sm">
                    <span class="material-icons text-2xl">cancel</span>
                </div>
            </div>
            <div class="text-sm font-semibold opacity-90 mb-2 uppercase tracking-wide">{{__('messages.reports.no_show')}}</div>
            <div class="text-4xl font-bold mb-2">{{ $stats['noshow'] ?? 0 }}</div>
            <div class="text-sm opacity-75">
                @if(($stats['total_calls'] ?? 0) > 0)
                    {{ round((floatval($stats['noshow'] ?? 0) / floatval($stats['total_calls'] ?? 1)) * 100, 1) }}% {{__('messages.reports.missed')}}
                @else
                    -
                @endif
            </div>
        </div>

        <!-- Performance Card -->
        <div class="bg-gradient-to-br from-purple-600 to-purple-500 rounded-2xl p-6 text-white shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-105">
            <div class="flex items-center justify-between mb-4">
                <div class="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center backdrop-blur-sm">
                    <span class="material-icons text-2xl">speed</span>
                </div>
            </div>
            <div class="text-sm font-semibold opacity-90 mb-2 uppercase tracking-wide">{{__('messages.reports.performance')}}</div>
            <div class="text-2xl font-bold mb-2">
                @if(isset($stats['performance']) && $stats['performance'] === 'fast')
                    <span class="inline-flex items-center px-3 py-1 rounded-full bg-green-500/30 text-white text-sm font-semibold">
                        ⚡ {{ $stats['performance_label'] ?? 'Fast' }}
                    </span>
                @elseif(isset($stats['performance']) && $stats['performance'] === 'slow')
                    <span class="inline-flex items-center px-3 py-1 rounded-full bg-red-500/30 text-white text-sm font-semibold">
                        🐌 {{ $stats['performance_label'] ?? 'Slow' }}
                    </span>
                @elseif(isset($stats['performance']))
                    <span class="inline-flex items-center px-3 py-1 rounded-full bg-yellow-500/30 text-white text-sm font-semibold">
                        ⏱️ {{ $stats['performance_label'] ?? 'Normal' }}
                    </span>
                @else
                    <span class="inline-flex items-center px-3 py-1 rounded-full bg-gray-500/30 text-white text-sm font-semibold">
                        -
                    </span>
                @endif
            </div>
            <div class="text-sm opacity-75">
                @if(floatval($stats['avg_service_time'] ?? 0) > 0)
                    {{ round(floatval($stats['avg_service_time'] ?? 0) / 60, 1) }} {{__('messages.reports.min_avg')}}
                @else
                    {{__('messages.reports.no_data')}}
                @endif
            </div>
        </div>
    </div>

    <!-- Detailed Statistics -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
        <!-- Average Service Time -->
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 hover:shadow-md transition-shadow">
            <div class="flex items-center gap-4 mb-4 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') flex-row-reverse @endif">
                <div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center">
                    <span class="material-icons text-blue-600">timer</span>
                </div>
                <div>
                    <div class="text-sm font-semibold text-gray-600 uppercase tracking-wide">{{__('messages.reports.avg_service_time')}}</div>
                    <div class="text-2xl font-bold text-gray-900">
                        @if(floatval($stats['avg_service_time'] ?? 0) > 0)
                            {{ round(floatval($stats['avg_service_time'] ?? 0) / 60, 1) }} {{__('messages.reports.minutes')}}
                            <span class="text-sm text-gray-500 font-normal">({{ round(floatval($stats['avg_service_time'] ?? 0), 0) }}s)</span>
                        @else
                            -
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <!-- Average Waiting Time -->
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 hover:shadow-md transition-shadow">
            <div class="flex items-center gap-4 mb-4 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') flex-row-reverse @endif">
                <div class="w-12 h-12 bg-orange-100 rounded-xl flex items-center justify-center">
                    <span class="material-icons text-orange-600">schedule</span>
                </div>
                <div>
                    <div class="text-sm font-semibold text-gray-600 uppercase tracking-wide">{{__('messages.reports.avg_waiting_time')}}</div>
                    <div class="text-2xl font-bold text-gray-900">
                        @if(floatval($stats['avg_waiting_time'] ?? 0) > 0)
                            {{ round(floatval($stats['avg_waiting_time'] ?? 0) / 60, 1) }} {{__('messages.reports.minutes')}}
                            <span class="text-sm text-gray-500 font-normal">({{ round(floatval($stats['avg_waiting_time'] ?? 0), 0) }}s)</span>
                        @else
                            -
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <!-- Service Time Range -->
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 hover:shadow-md transition-shadow">
            <div class="flex items-center gap-4 mb-4 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') flex-row-reverse @endif">
                <div class="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center">
                    <span class="material-icons text-purple-600">trending_up</span>
                </div>
                <div>
                    <div class="text-sm font-semibold text-gray-600 uppercase tracking-wide">{{__('messages.reports.service_time_range')}}</div>
                    <div class="text-lg font-bold text-gray-900">
                        @if(floatval($stats['min_service_time'] ?? 0) > 0 && floatval($stats['max_service_time'] ?? 0) > 0)
                            {{ round(floatval($stats['min_service_time'] ?? 0) / 60, 1) }} - {{ round(floatval($stats['max_service_time'] ?? 0) / 60, 1) }} {{__('messages.reports.minutes')}}
                        @else
                            -
                        @endif
                    </div>
                    <div class="text-xs text-gray-500 mt-1">
                        {{__('messages.reports.min')}}: {{ round(floatval($stats['min_service_time'] ?? 0), 0) }}s / 
                        {{__('messages.reports.max')}}: {{ round(floatval($stats['max_service_time'] ?? 0), 0) }}s
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif

    <!-- Results Table -->
    @if(isset($reports) && $reports && count($reports) > 0)
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden hover:shadow-md transition-shadow duration-200">
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gradient-to-r from-blue-600 to-blue-500">
                    <tr>
                        <th class="px-6 py-4 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif text-xs font-bold text-white uppercase tracking-wider">#</th>
                        <th class="px-6 py-4 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif text-xs font-bold text-white uppercase tracking-wider">{{__('messages.reports.service')}}</th>
                        <th class="px-6 py-4 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif text-xs font-bold text-white uppercase tracking-wider">{{__('messages.reports.token number')}}</th>
                        <th class="px-6 py-4 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif text-xs font-bold text-white uppercase tracking-wider">{{__('messages.reports.counter')}}</th>
                        <th class="px-6 py-4 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif 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 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">{{ $key+1}}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">{{$report->service_name}}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">{{$report->token_letter}}-{{$report->token_number}}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">{{$report->counter_name ? $report->counter_name : '-'}}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                            @if($report->status)
                                @if($report->status === 'served')
                                    <span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                        {{__('messages.reports.served')}}
                                    </span>
                                @elseif($report->status === 'noshow')
                                    <span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
                                        {{__('messages.reports.no_show')}}
                                    </span>
                                @else
                                    <span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">
                                        {{$report->status}}
                                    </span>
                                @endif
                            @else
                                @if($report->counter_name)
                                    <span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-orange-100 text-orange-800">
                                        {{__('messages.reports.tickets_in_serving')}}
                                    </span>
                                @else
                                    <span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">
                                        {{__('messages.reports.waiting_people')}}
                                    </span>
                                @endif
                            @endif
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
    @elseif(request()->has('user_id') && request()->has('date'))
    <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">description</span>
        </div>
        <h3 class="text-lg font-semibold text-gray-900 mb-2">{{__('messages.reports.no_data')}}</h3>
        <p class="text-gray-600">{{__('messages.reports.no_data_description')}}</p>
    </div>
    @endif
</div>

@push('scripts')
<script>
function reportFormData() {
    return {
        loading: false,
        user_id: @if($selected_user_id) '{{$selected_user_id}}' @else '' @endif,
        date: @if($selected_date) '{{$selected_date}}' @else '' @endif,
        get isFormInvalid() {
            // Check if user_id is empty or 'All Users' (empty string)
            const hasUser = this.user_id && this.user_id !== '';
            // Check if date is empty
            const hasDate = this.date && this.date !== '';
            
            // Form is invalid if either is missing
            return !hasUser || !hasDate;
        },
        init() {
            const self = this;
            
            // Sync initial values from form fields
            this.$nextTick(() => {
                const userSelect = document.getElementById('user_id');
                const dateInput = document.getElementById('date');
                
                if (userSelect) {
                    this.user_id = userSelect.value || '';
                }
                if (dateInput) {
                    this.date = dateInput.value || '';
                }
            });
            
            // Handle form submission
            const form = document.getElementById('user_report_form');
            if (form) {
                form.addEventListener('submit', function(e) {
                    // Basic validation
                    const userSelect = document.getElementById('user_id');
                    const dateInput = document.getElementById('date');
                    
                    if (!userSelect || !userSelect.value || userSelect.value === '') {
                        e.preventDefault();
                        alert('Please select a user');
                        return false;
                    }
                    
                    if (!dateInput || !dateInput.value || dateInput.value === '') {
                        e.preventDefault();
                        alert('Please select a date');
                        return false;
                    }
                    
                    self.loading = true;
                });
            }
        }
    }
}
</script>
@endpush
@endsection