@extends('layouts.app')
@section('title', 'Outlets')

@section('content')

    {{-- Fixed Top Action Bar --}}
    <div class="fixed-action-bar d-flex align-items-center justify-content-between">
        <div class="fw-semibold fixed-nav-title">Outlets</div>

        <div class="d-flex align-items-center">
            
            {{-- Import/Export Logic --}}
            <div class="dropdown d-inline-block">
                <i class="fa-solid fa-file-import fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1" 
                   id="importDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="Import/Export"></i>
                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="importDropdown">
                    <a class="dropdown-item" href="#" data-toggle="modal" data-target="#importModal">Import CSV</a>
                    <a class="dropdown-item" href="#">Export All</a>
                    <a class="dropdown-item" href="#" id="exportSelected">Export Selected</a>
                </div>
            </div>

            @can('HoReCa Outlets create')
            <a href="{{ route('horeca.outlets.create') }}" data-toggle="tooltip" title="Add">
                <i class="fa-regular fa-plus fixed-nav-btn fixed-nav-btn-active p-1 d-inline-flex align-items-center justify-content-center mx-1"></i>
            </a>
            @endcan

            <i class="fa-regular fa-save fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1" data-toggle="tooltip" title="Save"></i>
            <i class="fa-regular fa-edit fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1" data-toggle="tooltip" title="Edit"></i>
            
            @can('HoReCa Outlets delete')
                <i id="confirmBulkDeleteHeader" class="fa-regular fa-trash-can fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1" data-toggle="tooltip" title="Delete"></i>
            @endcan
            
            <i class="fa-solid fa-xmark fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center ms-1" data-toggle="tooltip" title="Close"></i>

            <!-- Column Visibility Dropdown Button -->
            <div class="dropdown">
                <i class="fa-solid fa-columns fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1"
                    id="columnVisibilityDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="Column Visibility"></i>
                <div class="dropdown-menu dropdown-menu-right columns-menu" aria-labelledby="columnVisibilityDropdown"
                    style="min-width: 200px; max-height: 400px; overflow-y: auto;">
                    <li><label class="px-2"><input type="checkbox" class="columnCheckbox" data-column="rt_code" checked> RT Code</label></li>
                    <li><label class="px-2"><input type="checkbox" class="columnCheckbox" data-column="name" checked> Outlet Name</label></li>
                    <li><label class="px-2"><input type="checkbox" class="columnCheckbox" data-column="distribution_point" checked> Distribution Point</label></li>
                    <li><label class="px-2"><input type="checkbox" class="columnCheckbox" data-column="type" checked> Type</label></li>
                    <li><label class="px-2"><input type="checkbox" class="columnCheckbox" data-column="visit_frequency" checked> Visit Frequency</label></li>
                    <li><label class="px-2"><input type="checkbox" class="columnCheckbox" data-column="address" checked> Address</label></li>
                    <li><label class="px-2"><input type="checkbox" class="columnCheckbox" data-column="territory" checked> Territory</label></li>
                    <li><label class="px-2"><input type="checkbox" class="columnCheckbox" data-column="template" checked> Template</label></li>
                    <li><label class="px-2"><input type="checkbox" class="columnCheckbox" data-column="lsr" checked> Assigned LSR</label></li>
                    <li><label class="px-2"><input type="checkbox" class="columnCheckbox" data-column="tm" checked> Assigned TM</label></li>
                    <li><label class="px-2"><input type="checkbox" class="columnCheckbox" data-column="last-visit" checked> Last Visit</label></li>
                    <li><label class="px-2"><input type="checkbox" class="columnCheckbox" data-column="indicators" checked> Indicators</label></li>
                    <li><label class="px-2"><input type="checkbox" class="columnCheckbox" data-column="status" checked> Status</label></li>
                    <li><label class="px-2"><input type="checkbox" class="columnCheckbox" data-column="action" checked> Actions</label></li>
                </div>
            </div>
        </div>
    </div>

    <div class="card mt-3 rounded-border">
        <div class="card-body">
            <form id="filtersForm" action="{{ route('horeca.outlets.index') }}" method="GET">
                <input type="hidden" name="user_lat" id="user_lat" value="{{ request('user_lat') }}">
                <input type="hidden" name="user_lng" id="user_lng" value="{{ request('user_lng') }}">
                <div class="row align-items-center">
                    {{-- Search Input --}}
                    <div class="col-md-5">
                        <div class="input-group search-input-group">
                            <input type="text" class="form-control"
                                placeholder="Search by name, address, code or LSR..." name="search"
                                value="{{ request('search') }}" id="search_input">
                            <button class="btn btn-link search-btn" type="submit">
                                <i class="fa-solid fa-magnifying-glass"></i>
                            </button>
                        </div>
                    </div>

                    {{-- Bulk Actions Dropdown --}}
                    <div class="col-md-2">
                        <div class="dropdown">
                            <button class="btn btn-de-dark filter-btn dropdown-toggle w-100" type="button" id="bulkActionsButton"
                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" disabled>
                                Bulk Actions
                            </button>
                            <div class="dropdown-menu" aria-labelledby="bulkActionsButton">
                                <a class="dropdown-item" href="#" data-toggle="modal" data-target="#bulkAssignModal">Assign Template</a>
                            </div>
                        </div>
                    </div>

                    {{-- Filters & Map Buttons --}}
                    <div class="col-md-3">
                        <div class="d-flex align-items-center">
                            <button type="button" class="btn btn-de-dark filter-btn flex-fill" style="margin-right: 10px !important;" data-toggle="collapse"
                                data-target="#filtersCollapse" aria-expanded="false" aria-controls="filtersCollapse">
                                Filters
                            </button>
                            <button type="button" id="mapViewToggle" class="btn btn-de-dark filter-btn flex-fill" title="Show on Map">
                                Map
                            </button>
                        </div>
                    </div>

                    {{-- Per Page Select --}}
                    <div class="col-md-2">
                        <select name="perPage" class="form-control" onchange="this.form.submit()">
                            <option value="10" {{ session('perPage', 10) == 10 ? 'selected' : '' }}>10 Rows</option>
                            <option value="20" {{ session('perPage') == 20 ? 'selected' : '' }}>20 Rows</option>
                            <option value="50" {{ session('perPage') == 50 ? 'selected' : '' }}>50 Rows</option>
                            <option value="100" {{ session('perPage') == 100 ? 'selected' : '' }}>100 Rows</option>
                        </select>
                    </div>
                </div>

                {{-- Collapsible Filters Section --}}
                <div class="row">
                    <div class="col-md-12 mt-2">
                        <div class="collapse {{ request()->hasAny(['region_id', 'territory_id', 'outlet_type', 'status', 'assigned_lsr_id', 'template_id', 'has_overdue_audit', 'has_pending_sr', 'last_visit_range', 'created_at', 'period']) ? 'show' : '' }}" id="filtersCollapse">
                            <div class="row">
                                <div class="col-md-3 mb-2">
                                    <label for="territory_id" class="form-label">Territory</label>
                                    <select name="territory_id" id="territory_id" class="form-control select2" onchange="document.getElementById('filtersForm').submit()">
                                        <option value="">All Territories</option>
                                        @foreach($regions as $region)
                                            <optgroup label="{{ $region->name }}">
                                                @foreach($territories->where('region_id', $region->id) as $territory)
                                                    <option value="{{ $territory->id }}" {{ request('territory_id') == $territory->id ? 'selected' : '' }}>{{ $territory->name }}</option>
                                                @endforeach
                                            </optgroup>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-3 mb-2">
                                    <label for="region_id" class="form-label">Region</label>
                                    <select name="region_id" id="region_id" class="form-control select2" onchange="document.getElementById('filtersForm').submit()">
                                        <option value="">All Regions</option>
                                        @foreach($regions as $region)
                                            <option value="{{ $region->id }}" {{ request('region_id') == $region->id ? 'selected' : '' }}>{{ $region->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-3 mb-2">
                                    <label for="outlet_type" class="form-label">Outlet Type</label>
                                    <select name="outlet_type" id="outlet_type" class="form-control" onchange="document.getElementById('filtersForm').submit()">
                                        <option value="">All Types</option>
                                        <option value="restaurant" {{ request('outlet_type') == 'restaurant' ? 'selected' : '' }}>Restaurant</option>
                                        <option value="hotel" {{ request('outlet_type') == 'hotel' ? 'selected' : '' }}>Hotel</option>
                                        <option value="cafe" {{ request('outlet_type') == 'cafe' ? 'selected' : '' }}>Café</option>
                                        <option value="bar" {{ request('outlet_type') == 'bar' ? 'selected' : '' }}>Bar</option>
                                        <option value="other" {{ request('outlet_type') == 'other' ? 'selected' : '' }}>Other</option>
                                    </select>
                                </div>
                                <div class="col-md-3 mb-2">
                                    <label for="status" class="form-label">Status</label>
                                    <select name="status" id="status" class="form-control" onchange="document.getElementById('filtersForm').submit()">
                                        <option value="">All Statuses</option>
                                        <option value="active" {{ request('status') == 'active' ? 'selected' : '' }}>Active</option>
                                        <option value="inactive" {{ request('status') == 'inactive' ? 'selected' : '' }}>Inactive</option>
                                    </select>
                                </div>
                                <div class="col-md-3 mb-2">
                                    <label for="assigned_lsr_id" class="form-label">Assigned LSR</label>
                                    <select name="assigned_lsr_id" id="assigned_lsr_id" class="form-control select2" onchange="document.getElementById('filtersForm').submit()">
                                        <option value="">All LSRs</option>
                                        @foreach($lsrs as $lsr)
                                            <option value="{{ $lsr->id }}" {{ request('assigned_lsr_id') == $lsr->id ? 'selected' : '' }}>{{ $lsr->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-3 mb-2">
                                    <label for="assigned_tm_id" class="form-label">Assigned TM</label>
                                    <select name="assigned_tm_id" id="assigned_tm_id" class="form-control select2" onchange="document.getElementById('filtersForm').submit()">
                                        <option value="">All TMs</option>
                                        @foreach($tms as $tm)
                                            <option value="{{ $tm->id }}" {{ request('assigned_tm_id') == $tm->id ? 'selected' : '' }}>{{ $tm->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-3 mb-2">
                                    <label for="assigned_sm_id" class="form-label">Assigned SM</label>
                                    <select name="assigned_sm_id" id="assigned_sm_id" class="form-control select2" onchange="document.getElementById('filtersForm').submit()">
                                        <option value="">All SMs</option>
                                        @foreach($sms as $sm)
                                            <option value="{{ $sm->id }}" {{ request('assigned_sm_id') == $sm->id ? 'selected' : '' }}>{{ $sm->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-3 mb-2">
                                    <label for="template_id" class="form-label">Template</label>
                                    <select name="template_id" id="template_id" class="form-control select2" onchange="document.getElementById('filtersForm').submit()">
                                        <option value="">All Templates</option>
                                        @foreach($templates as $template)
                                            <option value="{{ $template->id }}" {{ request('template_id') == $template->id ? 'selected' : '' }}>{{ $template->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            {{-- Advanced Filters Section --}}
                            <div class="row mt-4 align-items-end">
                                <div class="col-md-12">
                                    <h6 class="text-muted fw-bold mb-3 d-flex align-items-center" style="font-size: 0.85rem; letter-spacing: 0.5px;">
                                        <i class="fa-solid fa-sliders text-primary me-2"></i>ADVANCED FILTERS
                                    </h6>
                                </div>
                                @php
                                    $displayDate = request('created_at');
                                    if (!$displayDate && request('period')) {
                                        if (request('period') == 'today') {
                                            $displayDate = \Carbon\Carbon::today()->format('Y-m-d');
                                        } elseif (request('period') == '7_days') {
                                            $displayDate = \Carbon\Carbon::now()->subDays(7)->format('Y-m-d') . ' to ' . \Carbon\Carbon::now()->format('Y-m-d');
                                        } elseif (request('period') == '30_days') {
                                            $displayDate = \Carbon\Carbon::now()->subDays(30)->format('Y-m-d') . ' to ' . \Carbon\Carbon::now()->format('Y-m-d');
                                        } elseif (request('period') == 'custom' && request('custom_range')) {
                                            $displayDate = request('custom_range');
                                        }
                                    }
                                @endphp
                                <div class="col-md-3 mb-2">
                                    <label for="created_at" class="form-label">Created At</label>
                                    <input type="text" name="created_at" id="created_at" class="form-control bg-white"
                                        value="{{ $displayDate }}" placeholder="Select Date Range..." readonly>
                                </div>
                                <div class="col-md-3 mb-2">
                                    <label for="last_visit_range" class="form-label">Last Visited</label>
                                    <input type="text" name="last_visit_range" id="last_visit_range" class="form-control bg-white" value="{{ request('last_visit_range') }}" placeholder="Select Date Range..." readonly>
                                </div>
                                <div class="col-md-3 mb-2">
                                    <label for="distance" class="form-label">Distance from me (km)</label>
                                    <div class="d-flex align-items-center">
                                        <select name="distance" id="distance" class="form-control flex-grow-1">
                                            <option value="">Any distance</option>
                                            <option value="5" {{ request('distance') == '5' ? 'selected' : '' }}>Within 5 km</option>
                                            <option value="10" {{ request('distance') == '10' ? 'selected' : '' }}>Within 10 km</option>
                                            <option value="25" {{ request('distance') == '25' ? 'selected' : '' }}>Within 25 km</option>
                                            <option value="50" {{ request('distance') == '50' ? 'selected' : '' }}>Within 50 km</option>
                                        </select>
                                        <button type="button" class="btn btn-sm btn-link text-primary p-0 ms-2" id="btn_manual_location" 
                                                title="Set reference location manually" style="height: 30px; margin-top: 5px;">
                                            <i class="fa-solid fa-location-dot fs-5"></i>
                                        </button>
                                    </div>
                                    <div id="location_status_text" class="small text-muted mt-1 {{ request('user_lat') ? '' : 'd-none' }}">
                                        <i class="fa-solid fa-check-circle text-success me-1"></i>Reference set
                                    </div>
                                </div>
                                <div class="col-md-2 mb-3">
                                    <div class="custom-control custom-checkbox text-nowrap">
                                        <input type="checkbox" class="custom-control-input" id="has_overdue_audit" name="has_overdue_audit" value="1" {{ request('has_overdue_audit') ? 'checked' : '' }} onchange="document.getElementById('filtersForm').submit()">
                                        <label class="custom-control-label fw-medium text-dark" for="has_overdue_audit" style="font-size: 0.85rem;">Has Overdue Audit</label>
                                    </div>
                                </div>
                                <div class="col-md-2 mb-3">
                                    <div class="custom-control custom-checkbox text-nowrap">
                                        <input type="checkbox" class="custom-control-input" id="has_pending_sr" name="has_pending_sr" value="1" {{ request('has_pending_sr') ? 'checked' : '' }} onchange="document.getElementById('filtersForm').submit()">
                                        <label class="custom-control-label fw-medium text-dark" for="has_pending_sr" style="font-size: 0.85rem;">Has Pending SR</label>
                                    </div>
                                </div>
                            </div>
                            <div class="row mt-3">
                                <div class="col-md-12">
                                    <a href="{{ route('horeca.outlets.index') }}" class="btn btn-primary" style="background-color: #FABB1E; border-color: #FABB1E; font-weight: 600; padding: 0.5rem 2rem; border-radius: 8px;">Clear</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>

            {{-- Map View Container --}}
            <div id="mapViewContainer" style="display: none; height: 600px; margin-top: 20px; border-radius: 12px; border: 1px solid #e0e0e0;">
                <div id="outletsMap" style="height: 100%; border-radius: 12px;"></div>
            </div>

            <div class="table-responsive table-fixed-width" id="tableViewContainer">
                <table class="table mt-3 table-striped table-hover text-nowrap" id="outletsTable">
                    <thead class="bg-light">
                        <tr>
                            <th scope="col" style="width: 10px;"><input type="checkbox" id="selectAll"></th>
                            <th scope="col" class="rt_code-index">RT Code</th>
                            <th scope="col" class="name-index">Outlet Name</th>
                            <th scope="col" class="distribution_point-index">Distribution Point</th>
                            <th scope="col" class="type-index">Type</th>
                            <th scope="col" class="visit_frequency-index">Visit Frequency</th>
                            <th scope="col" class="address-index">Address</th>
                            <th scope="col" class="territory-index">Territory</th>
                            <th scope="col" class="template-index">Template</th>
                            <th scope="col" class="lsr-index">Assigned LSR</th>
                            <th scope="col" class="tm-index">Assigned TM</th>
                            <th scope="col" class="last-visit-index">Last Visit</th>
                            <th scope="col" class="indicators-index">Indicators</th>
                            <th scope="col" class="status-index">Status</th>
                            <th scope="col" class="action-index">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($outlets as $outlet)
                            <tr>
                                <td><input type="checkbox" class="recordCheckbox" value="{{ $outlet->id }}"></td>
                                <td class="rt_code-index">
                                    {{ $outlet->rt_code ?? 'N/A' }}
                                </td>
                                <td class="name-index">
                                    <a href="{{ route('horeca.outlets.edit', $outlet->id) }}" class="fw-bold text-primary">{{ $outlet->name }}</a>
                                </td>
                                <td class="distribution_point-index">
                                    {{ $outlet->distributionPoint->name ?? 'N/A' }}
                                </td>
                                <td class="type-index">
                                    <span class="badge bg-secondary">{{ $outlet->outlet_type }}</span>
                                </td>
                                <td class="visit_frequency-index text-center">
                                    {{ $outlet->visit_frequency ?? '0' }}
                                </td>
                                <td class="address-index">
                                    <span title="{{ $outlet->address }}">{{ Str::limit($outlet->address, 25) }}</span>
                                </td>
                                <td class="territory-index">
                                    {{ $outlet->territory->name ?? 'N/A' }}
                                </td>
                                <td class="template-index">
                                    {{ $outlet->template->name ?? 'None' }}
                                </td>
                                <td class="lsr-index">
                                    <div class="d-flex align-items-center">
                                        <div class="avatar-xs me-2">
                                            <span class="avatar-title rounded-circle bg-soft-primary text-primary">
                                                {{ substr($outlet->lsr->name ?? 'U', 0, 1) }}
                                            </span>
                                        </div>
                                        <span>{{ $outlet->lsr->name ?? 'Unassigned' }}</span>
                                    </div>
                                </td>
                                <td class="tm-index">
                                    <div class="d-flex align-items-center">
                                        <div class="avatar-xs me-2">
                                            <span class="avatar-title rounded-circle bg-soft-primary text-primary">
                                                {{ substr($outlet->tm->name ?? 'U', 0, 1) }}
                                            </span>
                                        </div>
                                        <span>{{ $outlet->tm->name ?? 'Unassigned' }}</span>
                                    </div>
                                </td>
                                <td class="last-visit-index">
                                    @php
                                        $lastVisitDate = $outlet->visits_max_check_in_time;
                                        if (!$lastVisitDate || ($outlet->last_visit_date && $outlet->last_visit_date > $lastVisitDate)) {
                                            $lastVisitDate = $outlet->last_visit_date;
                                        }
                                    @endphp
                                    @if($lastVisitDate)
                                        <div class="d-flex flex-column">
                                            <span class="fw-semibold">{{ \Carbon\Carbon::parse($lastVisitDate)->format('d M Y') }}</span>
                                            <small class="text-muted">{{ \Carbon\Carbon::parse($lastVisitDate)->diffForHumans() }}</small>
                                            @if(\Carbon\Carbon::parse($lastVisitDate)->isToday())
                                                <span class="badge bg-soft-success text-success mt-1" style="font-size: 0.65rem; width: fit-content;">Visited Today</span>
                                            @endif
                                        </div>
                                    @else
                                        <span class="text-muted">No visits</span>
                                    @endif
                                </td>
                                <td class="indicators-index">
                                    @if($outlet->status !== 'draft')
                                        <div class="d-flex align-items-center">
                                            @if($outlet->overdue_audits_count > 0)
                                                <i class="fa-solid fa-triangle-exclamation text-warning me-2" data-toggle="tooltip" title="Overdue Audit ({{ $outlet->overdue_audits_count }})"></i>
                                            @endif
                                            @if($outlet->pending_sr_count > 0)
                                                <i class="fa-solid fa-wrench text-danger me-2" data-toggle="tooltip" title="Pending Service Request ({{ $outlet->pending_sr_count }})"></i>
                                            @endif
                                            @if($outlet->overdue_audits_count == 0 && $outlet->pending_sr_count == 0)
                                                <i class="fa-solid fa-circle-check text-success" data-toggle="tooltip" title="All clear"></i>
                                            @endif
                                        </div>
                                    @else
                                        <span class="text-muted">—</span>
                                    @endif
                                </td>
                                <td class="status-index">
                                    @if($outlet->status === 'draft')
                                        <span class="badge badge-warning badge-same-width py-2">Draft</span>
                                    @else
                                        <div class="custom-control custom-switch">
                                            <input type="checkbox" class="custom-control-input status-toggle" 
                                                   id="statusSwitch{{ $outlet->id }}" 
                                                   data-id="{{ $outlet->id }}"
                                                   {{ $outlet->status === 'active' ? 'checked' : '' }}>
                                            <label class="custom-control-label" for="statusSwitch{{ $outlet->id }}">
                                                <span class="status-label-{{ $outlet->id }} badge {{ $outlet->status === 'active' ? 'badge-blue' : 'badge-danger' }} badge-same-width">
                                                    {{ ucfirst($outlet->status) }}
                                                </span>
                                            </label>
                                        </div>
                                    @endif
                                </td>
                                <td class="action-index">
                                    <div class="d-inline-flex table-action-btns">
                                        @can('HoReCa Outlets update')
                                        <a href="{{ route('horeca.outlets.edit', $outlet->id) }}" title="Edit">
                                            <i class="fa-solid fa-pencil rounded-5 p-1 d-inline-flex align-items-center justify-content-center action-btn theme-blue"></i>
                                        </a>
                                        @endcan

                                        <a href="{{ route('horeca.outlets.edit', $outlet->id) }}#history" title="View Details">
                                            <i class="fa-solid fa-eye rounded-5 p-1 d-inline-flex align-items-center justify-content-center action-btn theme-muted"></i>
                                        </a>

                                        <a href="#" title="Assign Template" class="assign-template-btn" data-toggle="modal" data-target="#bulkAssignModal" data-id="{{ $outlet->id }}">
                                            <i class="fa-solid fa-layer-group rounded-5 p-1 d-inline-flex align-items-center justify-content-center action-btn theme-green"></i>
                                        </a>

                                        @can('HoReCa Outlets delete')
                                        <a href="#" title="Delete" onclick="event.preventDefault(); confirmDelete('{{ $outlet->id }}');">
                                            <i class="fa-solid fa-trash-can rounded-5 p-1 d-inline-flex align-items-center justify-content-center action-btn theme-red"></i>
                                        </a>
                                        <form id="delete-form-{{ $outlet->id }}"
                                            action="{{ route('horeca.outlets.destroy', $outlet->id) }}"
                                            method="POST" style="display: none;">
                                            @csrf
                                            @method('DELETE')
                                        </form>
                                        @endcan
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="15" class="text-center py-4">
                                    <div class="text-muted">
                                        <i class="fa-solid fa-store fa-3x mb-3"></i>
                                        <p>No outlets found matching your criteria.</p>
                                    </div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <div class="d-flex justify-content-between mt-4 align-items-center" id="paginationContainer">
                @if ($outlets->total() > 0)
                    <div style="font-size: 14px;" class="fw-normal">
                        Showing {{ $paginationDetails['firstItem'] }} to {{ $paginationDetails['lastItem'] }} of {{ $paginationDetails['total'] }} entries
                    </div>
                @endif
                <div>
                    {{ $outlets->appends(request()->query())->links() }}
                </div>
            </div>
        </div>
    </div>

    <!-- Import Modal -->
    <div class="modal fade" id="importModal" tabindex="-1" role="dialog" aria-labelledby="importModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <form action="{{ route('horeca.outlets.import') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title" id="importModalLabel">Import Outlets</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="file">Select CSV File</label>
                            <input type="file" name="file" id="file" class="form-control" accept=".csv" required>
                        </div>
                        <div class="mt-3">
                            <small class="text-muted">Download <a href="#">Sample Template</a></small>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Start Import</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <!-- Bulk Assign Template Modal -->
    <div class="modal fade" id="bulkAssignModal" tabindex="-1" role="dialog" aria-labelledby="bulkAssignModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <form action="{{ route('horeca.outlets.bulk-assign-template') }}" method="POST">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title" id="bulkAssignModalLabel">Bulk Assign Template</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                         <div class="alert alert-info">
                            You are assigning a workflow template to <span id="bulkSelectedCount">0</span> selected outlets.
                            Existing assignments will be overridden.
                        </div>
                        <input type="hidden" name="outlet_ids" id="bulkOutletIds">
                        <div class="form-group">
                            <label>Select Template</label>
                            <select name="template_id" class="form-control select2" required style="width:100%">
                                <option value="">Select Template</option>
                                @foreach($templates as $template)
                                    <option value="{{ $template->id }}">{{ $template->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Assign Template</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Manual Location Picker Modal -->
    <div class="modal fade" id="locationPickerModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Select Reference Location</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body p-0">
                    <div id="pickerMap" style="height: 400px; width: 100%;"></div>
                    <div class="p-3 bg-light">
                        <p class="small text-muted mb-0"><i class="fa-solid fa-info-circle me-1"></i> Click anywhere on the map to set your "Current Location" for distance filtering.</p>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" id="save_manual_location" disabled>Set This Location</button>
                </div>
            </div>
        </div>
    </div>

@endsection

@push('css')
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
@endpush

@push('js')
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script>
    function confirmDelete(id) {
        Swal.fire({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
            if (result.isConfirmed) {
                document.getElementById('delete-form-' + id).submit();
            }
        });
    }

    $(document).ready(function() {
        // Initialize Select2 if available
        if ($.fn.select2) {
            $('.select2').select2({
                placeholder: "Select an option",
                allowClear: true,
                theme: 'bootstrap-5'
            });
        }

        // Column Visibility
        $('.columnCheckbox').on('change', function() {
            var column = $(this).data('column');
            $(`.${column}-index`).toggle(this.checked);
        });

        // Ensure column visibility state is applied on page load
        $('.columnCheckbox').each(function() {
            var column = $(this).data('column');
            var isChecked = $(this).is(':checked');
            $(`.${column}-index`).toggle(isChecked);
        });

        // --- Bulk Actions Logic (matching Corporate) ---
        const bulkActionsButton = $('#bulkActionsButton');
        const selectAllCheckbox = $('#selectAll');
        const recordCheckboxes = $('.recordCheckbox');

        function updateUI() {
             const selected = [];
             $('.recordCheckbox:checked').each(function() {
                 selected.push($(this).val());
             });
             
             const selectedCount = selected.length;
             bulkActionsButton.prop('disabled', selectedCount === 0);
             
             if (selectedCount > 0) {
                 bulkActionsButton.text(`Bulk Actions (${selectedCount})`);
                 $('#bulkOutletIds').val(selected.join(','));
                 $('#bulkSelectedCount').text(selectedCount);
             } else {
                 bulkActionsButton.text('Bulk Actions');
                 $('#bulkOutletIds').val('');
             }
             
             // Update Select All Checkbox state
             if (recordCheckboxes.length > 0 && recordCheckboxes.length === selectedCount) {
                  selectAllCheckbox.prop('checked', true);
             } else {
                  selectAllCheckbox.prop('checked', false);
             }
        }
        
        // Select All Toggle
        selectAllCheckbox.on('change', function() {
            $('.recordCheckbox').prop('checked', $(this).prop('checked'));
            updateUI();
        });
        
        // Individual Checkbox Toggle
        $(document).on('change', '.recordCheckbox', function() {
            updateUI();
        });

        // Single Assign Template Button
        $(document).on('click', '.assign-template-btn', function() {
            const id = $(this).data('id');
            $('#bulkOutletIds').val(id);
            $('#bulkSelectedCount').text('1');
            $('#bulkAssignModalLabel').text('Assign Template');
        });

        // Reset label when bulk actions clicked
        $('#bulkActionsButton').on('click', function() {
             $('#bulkAssignModalLabel').text('Bulk Assign Template');
             updateUI();
        });

        // Status Toggle
        $('.status-toggle').on('change', function() {
            const id = $(this).data('id');
            const checkbox = $(this);
            const label = $(`.status-label-${id}`);
            
            $.ajax({
                url: `{{ url('horeca/outlets') }}/${id}/toggle-status`,
                type: 'PATCH',
                data: {
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    if (response.success) {
                        if (response.status === 'active') {
                            label.text('Active').removeClass('badge-danger').addClass('badge-blue');
                        } else {
                            label.text('Inactive').removeClass('badge-blue').addClass('badge-danger');
                        }
                        $.toast({
                            heading: 'Success',
                            text: 'Status updated successfully',
                            position: 'top-right',
                            bgColor: '#1ecab8',
                            loaderBg: '#ecf0f1',
                            icon: 'success',
                            hideAfter: 3000,
                            stack: 6
                        });
                    }
                },
                error: function() {
                    checkbox.prop('checked', !checkbox.prop('checked'));
                    Swal.fire('Error', 'Failed to update status', 'error');
                }
            });
        });
        
        // Initialize Last Visit Range Picker
        flatpickr("#last_visit_range", {
            mode: "range",
            dateFormat: "Y-m-d",
            onClose: function(selectedDates, dateStr, instance) {
                if (dateStr) {
                    $('#filtersForm').submit();
                }
            }
        });

        // Initialize Created At Range Picker
        flatpickr("#created_at", {
            mode: "range",
            dateFormat: "Y-m-d",
            onClose: function(selectedDates, dateStr, instance) {
                if (dateStr) {
                    $('#filtersForm').submit();
                }
            }
        });

        // Search Input Enter Key Handling
        $('#search_input').on('keypress', function(e) {
            if (e.which == 13) {
                e.preventDefault();
                $('#filtersForm').submit();
            }
        });

        // Distance Filter Logic
        $('#distance').on('change', function() {
            const distance = $(this).val();
            if (distance === '') {
                $('#user_lat').val('');
                $('#user_lng').val('');
                $('#filtersForm').submit();
                return;
            }

            // If coordinates are already set (manually), just submit
            const existingLat = $('#user_lat').val();
            const existingLng = $('#user_lng').val();
            if (existingLat && existingLng) {
                $('#filtersForm').submit();
                return;
            }

            if ("geolocation" in navigator) {
                // Show loading indicator or toast
                $.toast({
                    heading: 'Location',
                    text: 'Getting your current location...',
                    position: 'top-right',
                    loaderBg: '#FABB1E',
                    icon: 'info',
                    hideAfter: 2000
                });

                navigator.geolocation.getCurrentPosition(
                    function(position) {
                        $('#user_lat').val(position.coords.latitude);
                        $('#user_lng').val(position.coords.longitude);
                        $('#filtersForm').submit();
                    },
                    function(error) {
                        let msg = "Unable to retrieve your location.";
                        console.error("Geolocation error:", error);
                        
                        if (error.code == 1) {
                            msg = "Please allow location access in your browser settings to use this filter.";
                        } else if (error.code == 2) {
                            msg = "Location information is unavailable. This usually happens if Wi-Fi/GPS is disabled on your device, or if your network blocks positioning. Would you like to select your location manually on a map?";
                            
                            Swal.fire({
                                title: 'Location Unavailable',
                                text: msg,
                                icon: 'warning',
                                showCancelButton: true,
                                confirmButtonText: 'Select Manually',
                                cancelButtonText: 'Cancel'
                            }).then((result) => {
                                if (result.isConfirmed) {
                                    $('#btn_manual_location').click();
                                }
                            });
                        } else if (error.code == 3) {
                            msg = "Location request timed out. Please try again.";
                            Swal.fire('Location Access', msg, 'warning');
                        }
                        
                        $('#distance').val(''); // Reset select
                    },
                    { 
                        enableHighAccuracy: false, 
                        timeout: 10000,            
                        maximumAge: 60000          
                    }
                );
            } else {
                Swal.fire('Error', 'Geolocation is not supported by your browser.', 'error');
                $(this).val('');
            }
        });

        // Manual Location Picker Logic
        let pickerMap, pickerMarker;
        let selectedLat, selectedLng;

        $('#btn_manual_location').on('click', function() {
            $('#locationPickerModal').modal('show');
            
            setTimeout(() => {
                if (!pickerMap) {
                    const defaultPos = [6.9271, 79.8612]; // Colombo
                    pickerMap = L.map('pickerMap').setView(defaultPos, 12);
                    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(pickerMap);

                    pickerMap.on('click', function(e) {
                        const { lat, lng } = e.latlng;
                        selectedLat = lat;
                        selectedLng = lng;

                        if (pickerMarker) {
                            pickerMarker.setLatLng(e.latlng);
                        } else {
                            pickerMarker = L.marker(e.latlng).addTo(pickerMap);
                        }
                        $('#save_manual_location').prop('disabled', false);
                    });
                }
                pickerMap.invalidateSize();
            }, 500);
        });

        $('#save_manual_location').on('click', function() {
            $('#user_lat').val(selectedLat);
            $('#user_lng').val(selectedLng);
            $('#location_status_text').removeClass('d-none');
            $('#locationPickerModal').modal('hide');
            
            // If distance is already selected, submit. If not, don't submit yet.
            if ($('#distance').val() !== '') {
                $('#filtersForm').submit();
            } else {
                $.toast({
                    heading: 'Location Set',
                    text: 'Reference location updated. Now select a distance to filter.',
                    position: 'top-right',
                    bgColor: '#1ecab8',
                    loaderBg: '#ecf0f1',
                    icon: 'success'
                });
            }
        });

        // Map View Toggle Logic
        let mapInitialized = false;
        let map;
        const mapOutlets = @json($mapOutlets);

        $('#mapViewToggle').on('click', function() {
            const isMapView = $('#mapViewContainer').is(':visible');
            
            if (isMapView) {
                // Switch to Table
                $('#mapViewContainer').hide();
                $('#tableViewContainer').show();
                $('#paginationContainer').show();
                $(this).text('Map').removeClass('btn-primary').addClass('btn-de-dark');
            } else {
                // Switch to Map
                $('#tableViewContainer').hide();
                $('#paginationContainer').hide();
                $('#mapViewContainer').show();
                $(this).text('Table').removeClass('btn-de-dark').addClass('btn-primary');
                
                if (!mapInitialized) {
                    initMap();
                    mapInitialized = true;
                } else {
                    setTimeout(() => map.invalidateSize(), 100);
                }
            }
        });

        function initMap() {
            // Default center if no outlets exist (e.g., Colombo, SL)
            const defaultPos = [6.9271, 79.8612];
            map = L.map('outletsMap').setView(defaultPos, 13);

            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '&copy; OpenStreetMap contributors'
            }).addTo(map);

            const markers = [];
            
            mapOutlets.forEach(outlet => {
                if (outlet.lat && outlet.lng) {
                    const marker = L.marker([outlet.lat, outlet.lng]).addTo(map);
                    
                    const popupContent = `
                        <div style="min-width: 200px; padding: 5px;">
                            <h6 class="fw-bold mb-1">${outlet.name}</h6>
                            <p class="small text-muted mb-2"><i class="fa fa-map-marker-alt me-1"></i> ${outlet.address}</p>
                            <div class="d-flex justify-content-between align-items-center">
                                <span class="badge badge-soft-primary" style="background-color: rgba(69, 122, 218, 0.15); color: #4489e4;">${outlet.type}</span>
                                <a href="${outlet.route}" class="btn btn-sm btn-primary text-white" style="font-size: 10px;">View Details</a>
                            </div>
                        </div>
                    `;
                    
                    marker.bindPopup(popupContent);
                    markers.push([outlet.lat, outlet.lng]);
                }
            });

            if (markers.length > 0) {
                const bounds = L.latLngBounds(markers);
                map.fitBounds(bounds, { padding: [50, 50] });
            }
        }

    });
</script>
<style>
    .avatar-xs {
        height: 2rem;
        width: 2rem;
    }
    .avatar-title {
        align-items: center;
        display: flex;
        font-weight: 500;
        height: 100%;
        justify-content: center;
        width: 100%;
    }
    .bg-soft-primary {
        background-color: rgba(69, 122, 218, 0.15);
    }
    .theme-green {
        color: #28a745;
    }
    .theme-blue {
        color: #4489e4;
    }
    .theme-red {
        color: #f06548;
    }
    .theme-muted {
        color: #8D99AE;
    }
    .fixed-nav-btn {
        width: 32px !important;
        height: 32px !important;
        font-size: 14px !important;
        background-color: #F6F6F6 !important;
        color: #000000 !important;
        border-radius: 50% !important;
        border: none !important;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0 4px;
        transition: all 0.2s;
    }

    .fixed-nav-btn:hover {
        opacity: 0.85;
        transform: scale(1.05);
    }

    .fixed-nav-btn-active {
        background-color: #FFC107 !important;
        color: #000000 !important;
    }
    .badge-same-width {
        width: 70px;
        display: inline-block;
        text-align: center;
    }
    .rounded-border {
         border-radius: 12px; border: 1px solid #e0e0e0; 
    }

    /* Standardized Form Styles for Filters */
    .form-label {
        color: #8D99AE;
        font-weight: 500;
        font-size: 0.85rem;
        margin-bottom: 8px;
        display: block;
    }

    .form-control {
        border: none !important;
        border-bottom: 1px solid #E5E9F2 !important;
        border-radius: 0 !important;
        padding: 0.4rem 0 !important;
        font-size: 0.95rem !important;
        background: transparent !important;
        color: #4E5E7A !important;
        box-shadow: none !important;
    }

    .form-control:focus {
        border-bottom-color: #FABB1E !important;
    }

    .form-control[readonly] {
        background-color: transparent !important;
        opacity: 1;
    }
    
    .select2-container--default .select2-selection--single {
        border: none !important;
        border-bottom: 1px solid #E5E9F2 !important;
        border-radius: 0 !important;
        height: auto !important;
        padding: 0.4rem 0 !important;
    }
    
    .select2-container--default .select2-selection--single .select2-selection__rendered {
        padding-left: 0 !important;
        color: #4E5E7A !important;
        font-size: 0.95rem !important;
    }
    
    .select2-container--default .select2-selection--single .select2-selection__arrow {
        top: 8px !important;
    }

    /* Search Bar Enhancements */
    .search-input-group {
        position: relative;
        display: flex;
        align-items: center;
    }

    .search-btn {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        color: #8D99AE;
        border: none;
        padding: 5px 10px;
        z-index: 5;
    }

    .search-btn:hover {
        color: #FABB1E;
    }

    #search_input {
        padding-right: 35px !important;
    }

</style>
@endpush