{{-- Dashboard with Fixed Chart Styling --}}
<div class="content-body">
    <div class="page-titles">
        <h5 class="dashboard_bar">Visitor</h5>
        <ul class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ url('index') }}">
                    Home </a>
            </li>
            <li class="breadcrumb-item active"><a href="javascript:void(0)">Visitor</a></li>
        </ul>
    </div>
    <div class="container">
        <div class="demo-view">
            <div class="container-fluid">
                {{-- FILTER CARD --}}
                <div class="card mb-3">
                    <div class="card-body">
                        <div class="row g-3 align-items-end">
                            <div class="col-md-3">
                                <label class="form-label">Search</label>
                                <input type="text" class="form-control form-control-sm" placeholder=""
                                    wire:model.defer="search">
                            </div>
                            @if ($user->hasRole('superadmin'))
                                {{-- Organization --}}
                                <div class="col md-3">
                                    <label class="form-label">Organization</label>
                                    <div wire:ignore x-data x-init="const org = $refs.org;
                                    
                                    $(org).select2({ width: '100%', placeholder: 'Select Organization' });
                                    
                                    $(org).on('change', function() {
                                        $wire.set('organizationId', $(this).val());
                                    });
                                    
                                    $nextTick(() => {
                                        $(org).val(@js($organizationId)).trigger('change.select2');
                                    });">
                                        <select x-ref="org" class="form-select">
                                            <option value="">Select Organization</option>
                                            @foreach ($organizations as $o)
                                                <option value="{{ $o->id }}">{{ $o->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    @error('organizationId')
                                        <small class="text-danger">{{ $message }}</small>
                                    @enderror
                                </div>
                            @endif
                            {{-- Site --}}
                            <div class="col md-2">
                                <label class="form-label">Site</label>

                                <div wire:ignore x-data x-init="const site = $refs.site;
                                
                                $(site).select2({ width: '100%' });
                                
                                // bila user pilih site -> update livewire
                                $(site).on('change', function() {
                                    $wire.set('siteId', $(this).val());
                                });
                                
                                // bila Livewire hantar site list baru
                                Livewire.on('update-sites', data => {
                                    $(site).empty();
                                
                                    $(site).append(new Option('Select Sites', ''));
                                
                                    data.sites.forEach(s => {
                                        $(site).append(new Option(s.site_name, s.id));
                                    });
                                
                                    $(site).trigger('change');
                                });">

                                    <select x-ref="site" class="form-select"></select>
                                </div>
                                @error('siteId')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>

                            {{-- Vehicle Type --}}
                            <div class="col-md-2">
                                <label class="form-label">Vehicle Type</label>
                                <div wire:ignore x-data x-init="const el = $refs.vehicleType;
                                $(el).select2({
                                    placeholder: 'Select Vehicle Type',
                                    allowClear: true,
                                    width: '100%'
                                });
                                
                                $(el).on('change', () => {
                                    $wire.set('vehicleTypeId', $(el).val(), true);
                                });
                                
                                $nextTick(() => {
                                    $(el).val(@js($vehicleTypeId)).trigger('change.select2');
                                });
                                
                                window.addEventListener('clear-filters', () => {
                                    $(el).val('').trigger('change.select2');
                                    $wire.set('vehicleTypeId', '');
                                });">
                                    <select x-ref="vehicleType" class="form-select form-select-md">
                                        <option value="Car">Car</option>
                                        <option value="Motorcycle">Motorcycle</option>
                                        <option value="Van">Van</option>
                                        <option value="Lorry">Lorry</option>
                                    </select>
                                </div>
                            </div>

                            <div class="col-md-3">
                                <label class="form-label">Visit Date</label>
                                <div x-data x-init="const p = new Litepicker({
                                    element: $refs.range,
                                    singleMode: false,
                                    numberOfMonths: 2,
                                    numberOfColumns: 2,
                                    format: 'MM/DD/YYYY',
                                    autoApply: true,
                                    setup: (picker) => {
                                        picker.on('selected', (d1, d2) => {
                                            if (d1 && d2) {
                                                const v = `${d1.format('MM/DD/YYYY')} - ${d2.format('MM/DD/YYYY')}`;
                                                $refs.range.value = v;
                                                @this.set('dateRangeDraft', v);
                                            }
                                        });
                                        picker.on('clear:selection', () => {
                                            setTimeout(() => setToday(), 0); // wait a tick
                                            //   @this.set('dateRangeDraft', v);
                                            // $dispatch('ev-date-range', v);
                                
                                        });
                                    }
                                });
                                // listen to the SAME event name you dispatch in PHP
                                window.addEventListener('clear-filters', () => {
                                    p.clearSelection();
                                    setTimeout(() => setToday(), 0);
                                });
                                
                                function setToday() {
                                    const d = new Date();
                                    const y = d.getFullYear();
                                    const m = String(d.getMonth() + 1).padStart(2, '0');
                                    const dd = String(d.getDate()).padStart(2, '0');
                                
                                    const display = `${m}/${dd}/${y} - ${m}/${dd}/${y}`;
                                
                                    p.setDateRange(
                                        new Date(y, d.getMonth(), d.getDate()),
                                        new Date(y, d.getMonth(), d.getDate())
                                    );
                                
                                    $refs.range.value = display;
                                
                                    @this.set('dateRangeDraft', display);
                                
                                }">
                                    <input x-ref="range" class="form-control form-control-sm"
                                        value="{{ $dateRangeDraft }}" placeholder="MM/DD/YYYY - MM/DD/YYYY"
                                        name="dateRangeDraft" wire:model.live="dateRangeDraft">
                                </div>
                            </div>


                            <div class="col-md-3 d-flex gap-2">
                                {{-- <button type="button" class="btn btn-md btn-primary w-50" wire:click="searchNow">
                            Search
                        </button> --}}
                                <button type="button" class="btn btn-md btn-light w-50" wire:click="resetFilters"
                                    @click="window.dispatchEvent(new Event('clear-filters'))">
                                    Reset
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">Visitor</h4>
                        <a href="{{ url('visitor/create') }}" class="btn btn-primary btn-md">New Visitor</a>
                    </div>
                    <div class="card-body table-responsive">
                        <div class="alert alert-warning alert-dismissible fade show">
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
                            </button>
                            {{ $this->pendingVisitor }} visitor applications require
                            your approval !
                        </div>
                        <table class="table table-responsive-md">
                            <thead class="table-light">
                                <tr>
                                    <th>
                                        <div class="d-flex align-items-center gap-2">
                                            <span>Site Name</span>
                                        </div>
                                    </th>
                                    <th>
                                        <div class="d-flex align-items-center gap-2">
                                            <span>Type</span>
                                        </div>
                                    </th>
                                    <th>
                                        <div class="d-flex align-items-center gap-2">
                                            <span>Vehicle Registration</span>
                                        </div>
                                    </th>
                                    <th style="min-width: 140px;">
                                        <div class="d-flex align-items-center gap-2">
                                            <span>Visit Purpose</span>
                                        </div>
                                    </th>
                                    <th>
                                        <div class="d-flex align-items-center gap-2">
                                            <span>Visitor Name</span>
                                        </div>
                                    </th>
                                    <th>
                                        <div class="d-flex align-items-center gap-2">
                                            <span>Visit Date</span>
                                        </div>
                                    </th>
                                    <th style="min-width: 140px;">
                                        <div class="d-flex align-items-center gap-2">
                                            <span>Approval Status</span>
                                        </div>
                                    </th>
                                    {{-- <th style="min-width: 140px;">
                                        <div class="d-flex align-items-center gap-2">
                                            <span>Entry Status</span>
                                        </div>
                                    </th> --}}

                                    {{-- <th>
                                        <div class="d-flex align-items-center gap-2">
                                            <span>Entry Date</span>
                                        </div>
                                    </th> --}}

                                    {{-- <th>
                                        <div class="d-flex align-items-center gap-2">
                                            <span>Exit Date</span>
                                        </div>
                                    </th> --}}
                                    <th style="min-width: 140px;">
                                        <div class="d-flex align-items-center gap-2">
                                            <span>Action</span>
                                        </div>
                                    </th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($visitors as $visitor)
                                    <tr>
                                        <td>
                                            <strong>{{ data_get($visitor, 'site.site_name') ?? '-' }}</strong>
                                        </td>
                                        <td>{{ data_get($visitor, 'vehicle_type') }}</td>
                                        <td>{{ data_get($visitor, 'vehicle_no') }}</td>
                                        <td>Visit Purpose</td>
                                        <td>{{ data_get($visitor, 'name') }}</td>
                                        <td>{{ \Carbon\Carbon::parse(data_get($visitor, 'visit_start_date'))->format('d/m/Y') }}
                                        </td>
                                        <td>
                                            @php
                                                $status = data_get($visitor, 'approval_status');
                                                $badgeClass = match ($status) {
                                                    'approved' => 'bg-success',
                                                    'rejected' => 'bg-danger',
                                                    'pending' => 'bg-warning ',
                                                    default => 'bg-secondary',
                                                };
                                            @endphp
                                            <span class="badge {{ $badgeClass }}">
                                                {{ ucfirst($status) }}
                                            </span>
                                        </td>
                                        <td>
                                            @if (data_get($visitor, 'approval_status') == 'pending' &&
                                                    \Carbon\Carbon::parse(data_get($visitor, 'visit_start_date'))->gte(\Carbon\Carbon::today()))
                                                <button type="button" class="btn btn-sm btn-primary"
                                                    onclick="confirmVisitorAction({{ $visitor->id }}, 'approve')">
                                                    Approve
                                                </button>
                                                <button type="button" class="btn btn-sm btn-danger"
                                                    onclick="confirmVisitorAction({{ $visitor->id }}, 'reject')">
                                                    Reject
                                                </button>
                                            @elseif(data_get($visitor, 'approval_status') == 'approved' &&
                                                    \Carbon\Carbon::parse(data_get($visitor, 'visit_start_date'))->gte(\Carbon\Carbon::today()))
                                                <button type="button" class="btn btn-sm btn-warning"
                                                    onclick="cancelVisitorAction({{ $visitor->id }}, 'cancelled')">
                                                    Cancel
                                                </button>
                                            @else
                                                <a href="{{ route('visitor.edit', $visitor->id) }}"
                                                    class="btn btn-info btn-sm ">View</a>
                                            @endif
                                        </td>
                                        <td></td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="8" class="text-center text-muted py-4">No records found</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                        <div class="d-flex justify-content-between align-items-center">
                            <div class="small text-muted">
                                Showing {{ $visitors->firstItem() ?? 0 }}–{{ $visitors->lastItem() ?? 0 }}
                                of
                                {{ $visitors->total() }}
                            </div>
                            {{ $visitors->onEachSide(1)->links('pagination::bootstrap-5') }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('local-js')
    <script>
        function confirmVisitorAction(id, action) {
            const isApprove = action === 'approve';

            Swal.fire({
                type: 'warning',
                title: isApprove ? 'Approve Visitor' : 'Reject Visitor',
                text: isApprove ? 'Are you sure you want to approve this visitor?' :
                    'Are you sure you want to reject this visitor?',
                showCancelButton: true,
                confirmButtonText: isApprove ? 'Approve' : 'Reject',
                cancelButtonText: 'Cancel',
            }).then((result) => {
                Livewire.dispatch('visitor-action-v', {
                    id: id,
                    action: action
                });

            });
        }

        function cancelVisitorAction(id, action) {
            Swal.fire({
                type: 'warning',
                title: 'Visitor',
                text: 'Are you sure you want to cancel this application?',
                showCancelButton: true,
                confirmButtonText: 'Yes',
                cancelButtonText: 'Cancel',
            }).then((result) => {
                Livewire.dispatch('visitor-cancel', {
                    id: id,
                    action: action
                });

            });
        }

        Livewire.on('visitor-approved', () => {
            Swal.fire({
                type: 'success',
                title: 'Approved',
                text: 'Visitor has been approved successfully.',
                timer: 2000,
                showConfirmButton: false,
            });
        });

        Livewire.on('visitor-rejected', () => {
            Swal.fire({
                type: 'success',
                title: 'Rejected',
                text: 'Visitor has been rejected successfully.',
                timer: 2000,
                showConfirmButton: false,
            });
        });
    </script>
@endpush