@extends('layouts.app')

@section('title', 'Locker Update Report')

@section('content')
<div class="space-y-4">
    <div class="flex items-center justify-between">
        <div class="flex items-center gap-2">
            @php
            $hasSearch = request()->filled('range') || request()->filled('from_date') || request()->filled('to_date');
            @endphp

            @if($hasSearch)
            <a href="{{ route('reports.lockers.update.export', request()->query()) }}" class="px-4 py-2 bg-green-600 text-white text-sm font-medium rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
                <i class="fas fa-file-excel mr-2"></i>
                Download Report
            </a>
            @endif
            <div class="text-xs font-medium px-2 py-1 bg-gray-100 rounded text-gray-600">
                {{ $records->count() }} Results
            </div>
        </div>
    </div>

    <div class="grid grid-cols-12 gap-3">
        <div class="col-span-12 lg:col-span-7 grid grid-cols-2 md:grid-cols-4 gap-2">
            @php
            $ranges = [
            ['val' => '3', 'label' => 'Last 3d', 'count' => $count3, 'color' => 'blue'],
            ['val' => '7', 'label' => 'Last 7d', 'count' => $count7, 'color' => 'yellow'],
            ['val' => '15', 'label' => 'Last 15d', 'count' => $count15, 'color' => 'orange'],
            ['val' => '30', 'label' => 'Last 30d', 'count' => $count30, 'color' => 'red'],
            ];
            @endphp

            @foreach($ranges as $range)
            <a href="{{ route('reports.lockers.update', ['range' => $range['val']]) }}"
                class="group relative flex flex-col justify-center rounded-xl border p-2 transition-all hover:shadow-md 
                   {{ $selectedRange === $range['val'] 
                      ? "border-{$range['color']}-500 bg-{$range['color']}-50 ring-1 ring-{$range['color']}-500" 
                      : "border-gray-200 bg-white hover:border-{$range['color']}-300" }}">
                <span class="text-[10px] font-bold uppercase tracking-wider text-gray-500 group-hover:text-{{ $range['color'] }}-600 transition-colors">
                    {{ $range['label'] }}
                </span>
                <span class="text-xl font-black text-gray-900 leading-tight">{{ $range['count'] }}</span>
            </a>
            @endforeach
        </div>

        <div class="col-span-12 lg:col-span-5 bg-white rounded-xl border border-gray-200 p-3 shadow-sm">
            <form method="GET" action="{{ route('reports.lockers.update') }}" class="flex items-end gap-2">
                <div class="flex-1">
                    <label class="sr-only">Date Range</label>
                    <div class="flex gap-2">
                        <input type="hidden" name="from_date" id="from_date" value="{{ $fromDate }}">
                        <input type="hidden" name="to_date" id="to_date" value="{{ $toDate }}">
                        <input type="text" id="from_date_display" value="" placeholder="From Date" class="w-full rounded-md border-gray-200 p-2 text-xs focus:ring-primary-500" autocomplete="off">
                        <input type="text" id="to_date_display" value="" placeholder="To Date" class="w-full rounded-md border-gray-200 p-2 text-xs focus:ring-primary-500" autocomplete="off">
                    </div>
                </div>
                <button type="submit" class="inline-flex items-center justify-center rounded-md bg-primary-600 px-3 py-2 text-xs font-bold text-white hover:bg-primary-700">View</button>
                <a href="{{ route('reports.lockers.update') }}" class="inline-flex items-center justify-center rounded-md border border-gray-300 bg-white px-3 py-2 text-xs font-bold text-gray-700 hover:bg-gray-50">Reset</a>
            </form>
        </div>
    </div>

    <div class="overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm">
        <div class="overflow-x-auto">
            <table class="w-full text-left text-sm">
                <thead class="bg-gray-50 border-b border-gray-200">
                    <tr>
                        <th class="px-4 py-3 font-semibold text-gray-700">S.No</th>
                        <th class="px-4 py-3 font-semibold text-gray-700">Locker Info</th>
                        <th class="px-4 py-3 font-semibold text-gray-700">OLD</th>
                        <th class="px-4 py-3 font-semibold text-gray-700">NEW</th>
                        <th class="px-4 py-3 font-semibold text-gray-700">Date</th>
                        <th class="px-4 py-3 font-semibold text-gray-700">Time</th>
                        <th class="px-4 py-3 font-semibold text-gray-700 text-center">Action</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    @forelse($records as $record)
                    <tr class="hover:bg-gray-50/50 transition-colors">
                        <td class="px-4 py-3">{{ $loop->iteration }}</td>
                        <td class="px-4 py-3">
                            <div class="flex items-center space-x-2">
                                <div class="flex-shrink-0">
                                    <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center">
                                        <i class="fas fa-lock text-blue-600 text-xs"></i>
                                    </div>
                                </div>
                                <div class="flex-1 min-w-0">
                                    <div class="text-sm font-medium text-gray-900 truncate">
                                        {{ $record->locker->locker_number }}
                                    </div>
                                    <div class="text-xs text-gray-500">
                                        {{ $record->locker->lockerGroup->name ?? 'N/A' }} • {{ ucfirst($record->locker->locker_size) }}
                                    </div>
                                </div>
                            </div>
                        </td>
                        <td class="px-4 py-3">
                            <div class="space-y-2">
                                <!-- <div class="text-xs font-medium text-gray-700 mb-2">OLD VALUES</div> -->
                                @if($record->old_value !== null)
                                <div class="flex items-center justify-between py-1">
                                    <span class="text-xs text-red-600 font-medium">
                                        @switch($record->old_value)
                                        @case('available')
                                        <span class="inline-flex items-center px-1.5 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-tight bg-green-100 text-green-700">
                                            {{ $record->old_value }}
                                        </span>
                                        @case('occupied')
                                        <span class="inline-flex items-center px-1.5 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-tight bg-red-100 text-red-700">
                                            {{ $record->old_value }}
                                        </span>
                                        @case('maintenance')
                                        <span class="inline-flex items-center px-1.5 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-tight bg-yellow-100 text-yellow-700">
                                            {{ $record->old_value }}
                                        </span>
                                        @default
                                        {{ $record->old_value }}
                                        @endswitch
                                    </span>
                                </div>
                                @endif
                            </div>
                        </td>
                        <td class="px-4 py-3">
                            <div class="space-y-2">
                                <!-- <div class="text-xs font-medium text-gray-700 mb-2">NEW VALUES</div> -->
                                @if($record->new_value !== null)
                                <div class="flex items-center justify-between py-1">
                                    <span class="text-xs text-green-600 font-medium">
                                        @switch($record->new_value)
                                        @case('available')
                                        <span class="inline-flex items-center px-1.5 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-tight bg-green-100 text-green-700">
                                            {{ $record->new_value }}
                                        </span>
                                        @case('occupied')
                                        <span class="inline-flex items-center px-1.5 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-tight bg-red-100 text-red-700">
                                            {{ $record->new_value }}
                                        </span>
                                        @case('maintenance')
                                        <span class="inline-flex items-center px-1.5 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-tight bg-yellow-100 text-yellow-700">
                                            {{ $record->new_value }}
                                        </span>
                                        @default
                                        {{ $record->new_value }}
                                        @endswitch
                                    </span>
                                </div>
                                @endif
                            </div>
                        </td>
                        <td class="px-4 py-3">
                            {{ $record->create_date ? \Carbon\Carbon::parse($record->create_date)->format('d-m-Y') : '-' }}
                        <td class="px-4 py-3">
                           {{ $record->create_time ? \Carbon\Carbon::parse($record->create_time)->format('H:i:s') : '' }}
                        </td>
                        <td class="px-4 py-3 text-center">
                            <div class="flex justify-center space-x-2">
                                <a href="{{ route('lockers.show', $record->locker_id) }}"
                                    class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-blue-100 text-blue-600 hover:bg-blue-200 transition-colors"
                                    title="View Details">
                                    <i class="fas fa-eye text-xs"></i>
                                </a>
                                <!-- <a href="{{ route('lockers.edit', $record->locker_id) }}" 
                                   class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-green-100 text-green-600 hover:bg-green-200 transition-colors"
                                   title="Edit Locker">
                                    <i class="fas fa-edit text-xs"></i>
                                </a> -->
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="4" class="py-12 text-center text-gray-400 italic">No locker updates found.</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>

<style>
    .ui-datepicker {
        z-index: 9999 !important;
    }
</style>

<script>
    (function() {
        function formatIsoToDisplay(isoDate) {
            if (!isoDate) return '';
            var parts = isoDate.split('-');
            if (parts.length !== 3) return '';
            return parts[2] + '-' + parts[1] + '-' + parts[0];
        }

        function formatDisplayToIso(displayDate) {
            if (!displayDate) return '';
            var parts = displayDate.split('-');
            if (parts.length !== 3) return '';
            return parts[2] + '-' + parts[1] + '-' + parts[0];
        }

        function init() {
            var fromIsoEl = document.getElementById('from_date');
            var toIsoEl = document.getElementById('to_date');
            var fromDisplayEl = document.getElementById('from_date_display');
            var toDisplayEl = document.getElementById('to_date_display');

            if (!fromIsoEl || !toIsoEl || !fromDisplayEl || !toDisplayEl) return;

            fromDisplayEl.value = formatIsoToDisplay(fromIsoEl.value);
            toDisplayEl.value = formatIsoToDisplay(toIsoEl.value);

            if (!window.jQuery || !jQuery.fn || !jQuery.fn.datepicker) return;

            jQuery(fromDisplayEl).datepicker({
                dateFormat: 'dd-mm-yy',
                onSelect: function(dateText) {
                    fromIsoEl.value = formatDisplayToIso(dateText);
                }
            });

            jQuery(toDisplayEl).datepicker({
                dateFormat: 'dd-mm-yy',
                onSelect: function(dateText) {
                    toIsoEl.value = formatDisplayToIso(dateText);
                }
            });

            fromDisplayEl.addEventListener('change', function() {
                fromIsoEl.value = formatDisplayToIso(this.value);
            });

            toDisplayEl.addEventListener('change', function() {
                toIsoEl.value = formatDisplayToIso(this.value);
            });
        }

        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', init);
        } else {
            init();
        }
    })();
</script>
@endsection