@extends('layouts.app')
@section('title', 'Outlet Visits Report')

@section('content')
    <div class="fixed-action-bar d-flex align-items-center justify-content-between">
        <div class="fw-semibold fixed-nav-title">@yield('title')</div>
        <div class="d-flex align-items-center">
            <!-- Additional Actions (Left) -->
            <!-- Excel Export -->
            <a href="{{ route('posm.reports.outlet-visits.excel', request()->all()) }}">
                <i class="fa-solid fa-file-excel fixed-nav-btn fixed-nav-btn-active p-1 d-inline-flex align-items-center justify-content-center mx-1 theme-green"
                    data-toggle="tooltip" title="Export to Excel"></i>
            </a>

            <div class="ms-auto d-flex align-items-center">
                <!-- Mandatory Action Set (Right) -->
                <!-- Add -->
                <i class="fa-regular fa-plus fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1" data-toggle="tooltip" title="Add" style="cursor: default;"></i>

                <!-- Save -->
                <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" style="cursor: default;"></i>

                <!-- Edit -->
                <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" style="cursor: default;"></i>

                <!-- Delete -->
                <i 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" style="cursor: default;"></i>

                <!-- Close -->
                <a href="{{ route('posm.reports.dashboard') }}">
                    <i class="fa-solid fa-xmark fixed-nav-btn fixed-nav-btn-active p-1 d-inline-flex align-items-center justify-content-center mx-1"
                        data-toggle="tooltip" title="Close"></i>
                </a>

                <!-- Column Visibility -->
                <i class="fa-solid fa-columns fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1" data-toggle="tooltip" title="Columns" style="cursor: default;"></i>
            </div>
        </div>
    </div>

    <div class="card mt-3 rounded-border">
        <div class="card-body">
            <form id="filtersForm" action="{{ route('posm.reports.outlet-visits') }}" method="GET">
                <div class="row">
                    <div class="col-md-8">
                        <div class="input-group mb-3">
                            <input type="text" class="form-control" placeholder="Type and press enter to search"
                                aria-label="Search Visits" name="search"
                                value="{{ request('search') }}">
                        </div>
                    </div>
                    <div class="col-md-2 d-grid">
                        <button type="button" class="btn btn-de-dark filter-btn"
                            data-toggle="collapse" data-target="#filtersCollapse" aria-expanded="false"
                            aria-controls="filtersCollapse">Filters</button>
                    </div>
                    <div class="col-md-2">
                        <select id="perPageFilter" class="form-control" aria-label="select example">
                            <option value="10" {{ session('perPage', 10)==10 ? 'selected' : '' }}>10 Rows</option>
                            <option value="25" {{ session('perPage')==25 ? 'selected' : '' }}>25 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>
                @php
                    $displayDate = request('visit_date');
                    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="collapse {{ request()->hasAny(['visit_date','user_id','period']) ? 'show' : '' }}" id="filtersCollapse">
                    <div class="row mt-2">
                        <div class="col-md-3">
                            <label for="visit_date" class="form-label">Visit Date</label>
                            <input type="text" class="form-control bg-white" id="visit_date" name="visit_date"
                                value="{{ $displayDate }}" placeholder="Select Date Range..." readonly>
                        </div>
                        <div class="col-md-3">
                            <label for="user_id" class="form-label">LSR / TM</label>
                            <select class="form-control" id="user_id" name="user_id">
                                <option value="">All Users</option>
                                @foreach($users as $user)
                                    <option value="{{ $user->id }}" {{ request('user_id') == $user->id ? 'selected' : '' }}>
                                        {{ $user->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3 d-flex align-items-end gap-2">
                            <button type="submit" class="btn btn-de-dark">Apply</button>
                        </div>
                    </div>
                    <br>
                    <a href="{{ route('posm.reports.outlet-visits') }}" class="btn btn-primary">Clear</a>
                </div>
            </form>

            <div class="table-responsive">
                <table class="table table-striped">
                    <thead class="bg-light">
                        <tr>
                            <th scope="col">Visit Date</th>
                            <th scope="col">Outlet</th>
                            <th scope="col">Submitted By</th>
                            <th scope="col" class="text-center">Geo Tag Status</th>
                            <th scope="col">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($visits as $visit)
                            <tr>
                                <td>
                                    <span class="fw-bold" style="color: #381710;">
                                        {{ $visit->submitted_at ? $visit->submitted_at->format('Y-m-d') : 'N/A' }}
                                    </span>
                                    <div class="text-muted small">{{ $visit->submitted_at ? $visit->submitted_at->format('H:i A') : '' }}</div>
                                </td>
                                <td>
                                    <div class="fw-bold">{{ $visit->outlet->name ?? 'Unknown Outlet' }}</div>
                                    <small class="text-muted">{{ $visit->outlet->address ?? '' }}</small>
                                </td>
                                <td>{{ $visit->submittedBy->name ?? 'System' }}</td>
                                <td class="text-center">
                                    @if($visit->geo_tag_match)
                                        <span class="badge bg-soft-success text-success rounded-pill px-3"><i
                                                class="fa-solid fa-location-crosshairs me-1"></i> Verified</span>
                                    @else
                                        <span class="badge bg-soft-warning text-warning rounded-pill px-3"
                                            title="Distance: {{ $visit->geo_tag_distance }}m">
                                            <i class="fa-solid fa-triangle-exclamation me-1"></i> Mismatch
                                        </span>
                                    @endif
                                </td>
                                <td>
                                    <div class="d-inline-flex table-action-btns">
                                        <span class="action-btn">
                                            <a href="{{ route('posm.reports.outlet-visits.show', $visit->id) }}" title="View Details">
                                                <i class="fa-regular fa-eye rounded-5 p-1 d-inline-flex align-items-center justify-content-center action-btn theme-blue"></i>
                                            </a>
                                        </span>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="text-center py-4 text-muted">No visit records found matching your filters.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <div class="d-flex justify-content-between mt-4 align-items-center">
                <div style="font-size: 14px;" class="fw-normal">
                    Showing {{ $visits->firstItem() ?? 0 }} to {{ $visits->lastItem() ?? 0 }} of {{ $visits->total() }} entries
                </div>
                <div>
                    {{ $visits->appends(request()->query())->links() }}
                </div>
            </div>
        </div>
    </div>
@endsection

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

@push('js')
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script>
        $(document).ready(function () {
            flatpickr("#visit_date", {
                mode: "range",
                dateFormat: "Y-m-d",
                onClose: function(selectedDates, dateStr, instance) {
                    if(selectedDates.length === 2 || selectedDates.length === 1) {
                        document.getElementById('filtersForm').submit();
                    }
                }
            });
        });
        if (document.getElementById('perPageFilter')) {
            document.getElementById('perPageFilter').addEventListener('change', function () {
                const perPage = this.value;
                const urlParams = new URLSearchParams(window.location.search);
                urlParams.set('perPage', perPage);
                window.location.href = '{{ route("posm.reports.outlet-visits") }}?' + urlParams.toString();
            });
        }

        function exportToCSV() {
            const table = document.querySelector('table');
            let csv = [];
            const rows = table.querySelectorAll('tr');

            for (let i = 0; i < rows.length; i++) {
                const row = [], cols = rows[i].querySelectorAll('td, th');

                for (let j = 0; j < cols.length - 1; j++) {
                    let data = cols[j].innerText.replace(/(\r\n|\n|\r)/gm, ' ').replace(/\s+/g, ' ').trim();
                    row.push('"' + data + '"');
                }

                csv.push(row.join(','));
            }

            const csvFile = new Blob([csv.join('\n')], { type: 'text/csv' });
            const downloadLink = document.createElement('a');
            downloadLink.download = 'outlet_visits_report_' + new Date().toISOString().split('T')[0] + '.csv';
            downloadLink.href = window.URL.createObjectURL(csvFile);
            downloadLink.style.display = 'none';
            document.body.appendChild(downloadLink);
            downloadLink.click();
            document.body.removeChild(downloadLink);
        }
    </script>
@endpush