@extends('layouts.app')

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

@section('content')
    <div class="space-y-3 text-sm">
        <div class="flex items-center justify-between">
            <div class="flex items-center gap-2 ml-auto">
                <a href="{{ route('reports.lockers-change.export-excel', request()->query()) }}"
                    class="px-3 py-1.5 bg-green-600 text-white text-xs 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-1"></i>
                    Download Report
                </a>
                <div class="text-xs font-medium px-2 py-1 bg-gray-100 rounded text-gray-600">
                    {{ $records->total() }} Results
                </div>
            </div>
        </div>

        <div class="rounded-lg border border-gray-200 bg-white p-3 shadow-sm space-y-3">
            {{-- <div class="flex flex-wrap gap-1.5">
            @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'],
            ];
            @endphp

            @foreach ($ranges as $range)
            <a href="{{ route('reports.lockers-change', array_merge(request()->except('page'), ['range' => $range['val']])) }}"
                class="inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1.5 transition-colors
                   {{ $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-[11px] font-medium text-gray-600">
                    {{ $range['label'] }}
                </span>
                <span class="rounded bg-gray-100 px-1.5 text-[11px] font-semibold text-gray-800">{{ $range['count'] }}</span>
            </a>
            @endforeach
        </div> --}}

            <form method="GET" action="{{ route('reports.lockers-change') }}"
                class="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-12 lg:items-end">
                <div class="lg:col-span-2">
                    <label for="search_type" class="mb-1 block text-[11px] font-medium text-gray-600">Search by</label>
                    <select id="search_type" name="search_type"
                        class="w-full rounded-md border-gray-300 px-2 py-1.5 text-xs focus:border-primary-500 focus:ring-primary-500">
                        <option value="name" {{ $searchType === 'name' ? 'selected' : '' }}>Name</option>
                        <option value="passport" {{ $searchType === 'passport' ? 'selected' : '' }}>Passport</option>
                        <option value="ic_number" {{ $searchType === 'ic_number' ? 'selected' : '' }}>IC Number</option>
                    </select>
                </div>
                <div class="lg:col-span-3">
                    <label for="search" class="mb-1 block text-[11px] font-medium text-gray-600">Customer</label>
                    <input id="search" name="search" value="{{ $search }}" placeholder="Enter name or ID number"
                        class="w-full rounded-md border-gray-300 px-2 py-1.5 text-xs focus:border-primary-500 focus:ring-primary-500">
                </div>
                <div class="lg:col-span-2">
                    <label for="start_date_display" class="mb-1 block text-[11px] font-medium text-gray-600">From
                        date</label>
                    <input type="hidden" name="start_date" id="start_date" value="{{ $startDate }}">
                    <input type="text" id="start_date_display" value="" placeholder="dd-mm-yyyy"
                        class="w-full rounded-md border-gray-300 px-2 py-1.5 text-xs focus:ring-primary-500"
                        autocomplete="off">
                </div>
                <div class="lg:col-span-2">
                    <label for="end_date_display" class="mb-1 block text-[11px] font-medium text-gray-600">To date</label>
                    <input type="hidden" name="end_date" id="end_date" value="{{ $endDate }}">
                    <input type="text" id="end_date_display" value="" placeholder="dd-mm-yyyy"
                        class="w-full rounded-md border-gray-300 px-2 py-1.5 text-xs focus:ring-primary-500"
                        autocomplete="off">
                </div>
                <div class="flex gap-1.5 lg:col-span-3">
                    <button type="submit"
                        class="inline-flex items-center justify-center rounded-md bg-primary-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-primary-700"><i
                            class="fas fa-search mr-1"></i>Filter</button>
                    <a href="{{ route('reports.lockers-change') }}"
                        class="inline-flex items-center justify-center rounded-md border border-gray-300 bg-white px-3 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-50">Reset</a>
                </div>
            </form>
        </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-xs">
                    <thead class="bg-gray-50 border-b border-gray-200">
                        <tr>
                            {{-- <th class="px-3 py-2 font-semibold text-gray-700">S.No</th> --}}
                            <th class="px-3 py-2 font-semibold text-gray-700">Account No.</th>
                            <th class="px-3 py-2 font-semibold text-gray-700">Client Info</th>
                            <th class="px-3 py-2 font-semibold text-gray-700">Locker Change</th>
                            <th class="px-3 py-2 font-semibold text-gray-700">Reason</th>
                            <th class="px-3 py-2 font-semibold text-gray-700">Date</th>
                            <th class="px-3 py-2 font-semibold text-gray-700">Term</th>
                            <th class="px-3 py-2 font-semibold text-gray-700">Amount</th>
                            <th class="px-3 py-2 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-3 py-2">{{ $records->firstItem() + $loop->index }}</td> --}}
                                <td class="px-3 py-2">
                                    {{ str_pad($record['client_id'], 4, '0', STR_PAD_LEFT) }}-{{ str_pad($record['account_type_id'], 2, '0', STR_PAD_LEFT) }}
                                </td>
                                </td>
                                <td class="px-3 py-2">

                                    <div class="font-medium text-gray-800">{{ $record['client_name'] ?? 'N/A' }}</div>
                                    <div class="text-xs text-gray-500">{{ $record['client_phone'] ?? 'N/A' }}</div>
                                    {{-- <div class="text-[10px] text-gray-400">Client ID: {{ $record['client_id'] ?? 'N/A' }} ·
                                        Account Type: {{ $record['account_type_id'] ?? 'N/A' }}</div> --}}
                                </td>
                                <td class="px-3 py-2">
                                    <div class="flex items-center gap-2">
                                        <span
                                            class="text-red-600 font-medium">{{ $record['old_locker_number'] ?? 'N/A' }}</span>
                                        <i class="fas fa-arrow-right text-gray-400 text-xs"></i>
                                        <span
                                            class="text-green-600 font-medium">{{ $record['new_locker_number'] ?? 'N/A' }}</span>
                                    </div>
                                </td>
                                <td class="px-3 py-2">
                                    <div class="text-xs text-gray-500 italic">{{ $record['reason'] ?? 'N/A' }}</div>
                                </td>
                                <td class="px-3 py-2">
                                    <div class="text-xs text-gray-700">
                                        {{ isset($record['created_at']) ? \Carbon\Carbon::parse($record['created_at'])->format('d M, Y') : 'N/A' }}
                                    </div>
                                </td>
                                <td class="px-3 py-2">
                                    <div class="text-xs text-gray-700">
                                        {{ isset($record['new_payment_terms']) ? number_format($record['new_payment_terms']) . ' Y' : 'N/A' }}
                                    </div>
                                </td>
                                <td class="px-3 py-2">
                                    <div class="text-xs text-gray-700">
                                        {{ isset($record['new_final_amount']) ? 'RM ' . number_format($record['new_final_amount'], 2) : 'N/A' }}
                                    </div>
                                </td>
                                <td class="px-3 py-2 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'] ?? 'N/A' }}
                                    </span>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="9" class="py-8 text-center text-gray-400 italic">No records found.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            @if ($records->hasPages())
                <div class="locker-pagination border-t border-gray-100 px-3 py-2 text-xs">
                    {{ $records->onEachSide(1)->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;
        }

        .locker-pagination nav p,
        .locker-pagination nav a,
        .locker-pagination nav span {
            font-size: 11px;
        }

        .locker-pagination nav a,
        .locker-pagination nav span[aria-current] span {
            padding: .35rem .55rem;
        }
    </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 startIsoEl = document.getElementById('start_date');
                var endIsoEl = document.getElementById('end_date');
                var startDisplayEl = document.getElementById('start_date_display');
                var endDisplayEl = document.getElementById('end_date_display');

                if (!startIsoEl || !endIsoEl || !startDisplayEl || !endDisplayEl) return;

                startDisplayEl.value = formatIsoToDisplay(startIsoEl.value);
                endDisplayEl.value = formatIsoToDisplay(endIsoEl.value);

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

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

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

                startDisplayEl.addEventListener('change', function() {
                    startIsoEl.value = formatDisplayToIso(this.value);
                });

                endDisplayEl.addEventListener('change', function() {
                    endIsoEl.value = formatDisplayToIso(this.value);
                });
            }

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