@extends('layouts.app')

@section('title', 'Locker Access Records')

@section('content')
<div class="container mx-auto px-4 py-6">
    <!-- Header -->
    <!-- <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6">
        <h1 class="text-2xl font-bold text-gray-800">Locker Access Records</h1>
    </div> -->

    <!-- Advanced Filters Card -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 mb-6">
        <div class="p-5">
            <form action="{{ route('access.index') }}" method="GET" id="filterForm" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 items-end">
                <!-- Search -->
                <div class="space-y-1">
                    <label class="block text-sm font-semibold text-gray-700">General Search</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-400">
                            <i class="fas fa-search"></i>
                        </span>
                        <input type="text" name="search" id="search-filter" value="{{ request('search') }}" placeholder="Client, box, or admin..."
                            class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm transition">
                    </div>
                </div>

                <!-- Client Selection -->
                <!-- <div class="space-y-1">
                    <label class="block text-sm font-semibold text-gray-700">Client Filter</label>
                    <select name="client_id" id="client-filter" class="block w-full border border-gray-300 rounded-lg py-2 px-3 focus:ring-2 focus:ring-blue-500 text-sm appearance-none bg-no-repeat bg-right pr-8" style="background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%236B7280%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'); background-size: .65em auto;">
                        <option value="">All Clients</option>
                        @foreach($clients as $client)
                            <option value="{{ $client->id }}" {{ request('client_id') == $client->id ? 'selected' : '' }}>{{ $client->name }}</option>
                        @endforeach
                    </select>
                </div> -->

                <!-- Status Filter -->
                <div class="space-y-1">
                    <label class="block text-sm font-semibold text-gray-700">Visit Status</label>
                    <select name="status" id="status-filter" class="block w-full border border-gray-300 rounded-lg py-2 px-3 focus:ring-2 focus:ring-blue-500 text-sm">
                        <option value="">All Statuses</option>
                        <option value="inprogress" {{ request('status') == 'inprogress' ? 'selected' : '' }}>In Progress</option>
                        <option value="completed" {{ request('status') == 'completed' ? 'selected' : '' }}>Completed</option>
                    </select>
                </div>

                <!-- Date Range -->
                <div class="space-y-1">
                    <label class="block text-sm font-semibold text-gray-700">Activity Period</label>
                    <div class="flex items-center gap-3">
                        <input type="hidden" id="from-date" name="from_date" value="{{ request('from_date') }}">
                        <input type="text" id="from-date-display" placeholder="From" class="w-full border border-gray-300 rounded-lg py-2 px-3 text-sm focus:ring-2 focus:ring-blue-500 cursor-pointer" autocomplete="off">
                        
                        <input type="hidden" id="to-date" name="to_date" value="{{ request('to_date') }}">
                        <input type="text" id="to-date-display" placeholder="To" class="w-full border border-gray-300 rounded-lg py-2 px-3 text-sm focus:ring-2 focus:ring-blue-500 cursor-pointer" autocomplete="off">
                    </div>
                </div>

                <!-- Action Buttons -->
                 <div class="space-y-2">
                <div class="flex gap-2">
                    <button type="submit" class="flex-1 bg-blue-600 text-white px-4 py-2 rounded-lg font-medium hover:bg-blue-700 transition shadow-sm text-sm">
                        Filters
                    </button>
                    <a href="{{ route('access.index') }}" class="px-4 py-2 bg-gray-100 text-gray-600 rounded-lg font-medium hover:bg-gray-200 transition text-sm">
                        Reset
                    </a>
                </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Download Button -->
    <div class="flex justify-end mb-4">
        <button type="button" onclick="downloadReport()" class="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 text-sm">
            <i class="fas fa-file-excel mr-2"></i>Download Excel
        </button>
    </div>

    <!-- Table -->
    <div id="access-records-table">
        @include('partials.access-records-table')
    </div>

    <!-- View Details Modal -->
    <div id="viewModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden z-50 overflow-y-auto">
        <div class="flex items-center justify-center min-h-screen p-4">
            <div class="bg-white rounded-lg shadow-xl max-w-5xl w-full">
                <div class="flex justify-between items-center px-5 py-4 border-b">
                    <h3 class="text-lg font-semibold text-gray-900">Locker Access Details</h3>
                    <button onclick="closeModal()" class="text-gray-400 hover:text-gray-600">
                        <i class="fas fa-times text-xl"></i>
                    </button>
                </div>
                <div id="modalContent" class="p-4">
                    <!-- Content loaded via AJAX -->
                </div>
            </div>
    </div>
</div>



@push('styles')
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<style>
    .ui-datepicker { z-index: 9999 !important; }
</style>
@endpush


<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<script>
    // Initialize on page load
    document.addEventListener('DOMContentLoaded', function() {
        const viewBtn = document.getElementById('access-view-btn');
        if (viewBtn) {
            viewBtn.addEventListener('click', function(e) {
                e.preventDefault();
                generateReport();
            });
        }
    });

    // Initialize datepicker on page load
    $(document).ready(function() {
        $('#from-date-display, #to-date-display').datepicker({
            dateFormat: 'dd-mm-yy',
            changeMonth: true,
            changeYear: true,
            yearRange: '-10:+10',
            onSelect: function(dateText, inst) {
                var parts = dateText.split('-');
                var isoDate = parts[2] + '-' + parts[1] + '-' + parts[0];
                if (this.id === 'from-date-display') {
                    $('#from-date').val(isoDate);
                } else {
                    $('#to-date').val(isoDate);
                }
            }
        });

        // Sync display to hidden on manual input
        $('#from-date-display').on('change', function() {
            var val = $(this).val();
            if (val) {
                var parts = val.split('-');
                if (parts.length === 3) {
                    var isoDate = parts[2] + '-' + parts[1] + '-' + parts[0];
                    $('#from-date').val(isoDate);
                }
            } else {
                $('#from-date').val('');
            }
        });

        $('#to-date-display').on('change', function() {
            var val = $(this).val();
            if (val) {
                var parts = val.split('-');
                if (parts.length === 3) {
                    var isoDate = parts[2] + '-' + parts[1] + '-' + parts[0];
                    $('#to-date').val(isoDate);
                }
            } else {
                $('#to-date').val('');
            }
        });
    });

    // Modal functions
    function viewDetails(id) {
        const modal = document.getElementById('viewModal');
        const content = document.getElementById('modalContent');

        // Show modal
        modal.classList.remove('hidden');

        // Load content via AJAX
        content.innerHTML = '<div class="text-center py-4"><i class="fas fa-spinner fa-spin"></i> Loading...</div>';

        fetch(`/access/${id}`, {
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(response => response.text())
        .then(html => {
            content.innerHTML = html;
        })
        .catch(error => {
            content.innerHTML = '<div class="text-red-600">Error loading details.</div>';
        });
    }

    function closeModal() {
        document.getElementById('viewModal').classList.add('hidden');
    }

    let accessRecordsRefreshInProgress = false;

    function refreshAccessRecords() {
        if (accessRecordsRefreshInProgress) return;

        const tableContainer = document.getElementById('access-records-table');
        if (!tableContainer) return;

        accessRecordsRefreshInProgress = true;

        fetch(window.location.href, {
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'text/html'
            },
            cache: 'no-store'
        })
        .then(response => {
            if (!response.ok) throw new Error('Unable to refresh access records.');
            return response.text();
        })
        .then(html => {
            tableContainer.innerHTML = html;
        })
        .catch(error => {
            console.error(error);
        })
        .finally(() => {
            accessRecordsRefreshInProgress = false;
        });
    }

    // Refresh the listing and its statuses without reloading the whole page.
    setInterval(refreshAccessRecords, 30000);

    // Close modal when clicking outside
    document.getElementById('viewModal').addEventListener('click', function(e) {
        if (e.target === this) {
            closeModal();
        }
    });

    // Download report function
   // Download report function
    function downloadReport() {
        const filters = {
            from_date: document.getElementById('from-date')?.value || '',
            to_date: document.getElementById('to-date')?.value || '',
            status: document.getElementById('status-filter')?.value || '',
            search: document.getElementById('search-filter')?.value || ''
        };

        const queryString = new URLSearchParams(filters).toString();
        window.location.href = `{{ route('access.export') }}` + (queryString ? `?${queryString}` : '');
    }
</script>


@endsection