@extends('layouts.app')

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

@section('content')
<div class="space-y-4">
    <div class="flex items-center justify-between">
        <!-- <h1 class="text-xl font-bold text-gray-800">Locker Expiry Report</h1> -->
        <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.expiry.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>
            <!-- <a href="{{ route('reports.lockers.expiry.export-txt', request()->query()) }}" class="px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                <i class="fas fa-file-alt mr-2"></i>
                Download
            </a> -->
            @endif
            <div class="text-xs font-medium px-2 py-1 bg-gray-100 rounded text-gray-600">
                {{ method_exists($records, 'total') ? $records->total() : $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' => '30', 'label' => 'Next 30d', 'count' => $count30, 'color' => 'blue'],
            ['val' => '15', 'label' => 'Next 15d', 'count' => $count15, 'color' => 'yellow'],
            ['val' => '1', 'label' => 'Next 1d', 'count' => $count1, 'color' => 'orange'],
            ['val' => 'expired', 'label' => 'Expired', 'count' => $countExpired, 'color' => 'red'],
            ];
            @endphp

            @foreach($ranges as $range)
            <a href="{{ route('reports.lockers.expiry', ['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.expiry') }}" 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">Report</button>
                <a href="{{ route('reports.lockers.expiry') }}" 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">Locker</th>
                        <th class="px-4 py-3 font-semibold text-gray-700">Client Info</th>
                        <th class="px-4 py-3 font-semibold text-gray-700">Authentication Members</th>
                        <th class="px-4 py-3 font-semibold text-gray-700">Dates</th>
                        <th class="px-4 py-3 font-semibold text-gray-700">Amount</th>
                        <th class="px-4 py-3 font-semibold text-gray-700 text-right">Status</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 font-bold text-gray-900">
                            #{{ optional($record->locker)->locker_number ?? 'N/A' }}
                        </td>
                        <td class="px-4 py-3">
                            @php($client = optional($record->registration)->client)
                            @if($client)
                                <a href="{{ route('clients.show', $client) }}"
                                    class="font-medium text-blue-600 hover:text-blue-800 hover:underline">
                                    {{ $client->name }}
                                </a>
                            @else
                                <div class="font-medium text-gray-800">N/A</div>
                            @endif
                            <div class="text-xs text-gray-500">Phone - {{ $client->phone ?? 'N/A' }}</div>
                        </td>
                        <td class="px-4 py-3">
                            @forelse(optional(optional($record->registration)->client)->customerMembers ?? collect() as $member)
                                <div class="mb-1 last:mb-0 text-xs">
                                    <div class="font-medium text-gray-800">{{ $member->name }}</div>
                                    <div class="text-gray-500">
                                        {{ $member->proof_number ?: 'N/A' }} -
                                        {{ $member->proof_type === 'ic_number'
                                            ? 'IC Number'
                                            : ucwords(str_replace('_', ' ', $member->proof_type ?: 'N/A')) }}
                                    </div>
                                </div>
                            @empty
                                <span class="text-xs text-gray-400">N/A</span>
                            @endforelse
                        </td>
                        <td class="px-4 py-3">
                            <div class="text-xs flex items-center gap-1">
                                <span class="text-gray-400">Exp:</span>
                                <span class="{{ $record->end_date?->isPast() ? 'text-red-600 font-bold' : 'text-gray-700 font-medium' }}">
                                    {{ $record->end_date?->format('d M, Y') ?? 'N/A' }}
                                </span>
                            </div>
                        </td>
                        <td class="px-4 py-3 font-medium text-gray-700">
                            ${{ number_format($record->amount, 2) }}
                        </td>
                        <td class="px-4 py-3 text-right">
                            <span class="inline-block rounded-full px-2 py-0.5 text-[10px] font-bold uppercase tracking-tight
                                    {{ $record->status === 'active' ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-600' }}">
                                {{ $record->status }}
                            </span>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="6" class="py-12 text-center text-gray-400 italic">No records found.</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if(method_exists($records, 'hasPages') && $records->hasPages())
            <div class="border-t border-gray-200 px-4 py-3">
                {{ $records->links() }}
            </div>
        @endif
    </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