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

@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">Geo Report</div>

        <div class="d-flex align-items-center">
            
            <a href="{{ route('horeca.reports.geo.csv', request()->all()) }}" 
               class="btn btn-de-dark fixed-nav-btn rounded-circle p-1 d-inline-flex align-items-center justify-content-center mx-1" 
               title="Export CSV" style="width: 32px; height: 32px;">
                <i class="fa-solid fa-file-csv"></i>
            </a>
            <a href="{{ route('horeca.reports.geo.excel', request()->all()) }}" 
               class="btn btn-de-dark fixed-nav-btn rounded-circle p-1 d-inline-flex align-items-center justify-content-center mx-1" 
               title="Export Excel" style="width: 32px; height: 32px;">
                <i class="fa-solid fa-file-excel"></i>
            </a>
            <a href="{{ route('horeca.reports.geo.pdf', request()->all()) }}" 
               class="btn btn-de-dark fixed-nav-btn rounded-circle p-1 d-inline-flex align-items-center justify-content-center mx-1" 
               title="Export PDF" style="width: 32px; height: 32px;">
                <i class="fa-solid fa-file-pdf"></i>
            </a>
            <button
                class="btn btn-de-dark fixed-nav-btn rounded-circle p-1 d-inline-flex align-items-center justify-content-center mx-1"
                title="Refresh" onclick="window.location.reload();" style="width: 32px; height: 32px;">
                <i class="fa-solid fa-sync"></i>
            </button>

            </div>
    </div>

    <div class="card mt-3 rounded-border">
        <div class="card-body">
            <form id="filtersForm" action="{{ route('horeca.reports.geo') }}" method="GET">

                {{-- Filters Section --}}
                <div id="filtersCollapse">
                    <div class="row align-items-end">
                        <div class="col-md-3 mb-3">
                             <label class="form-label">Date Range</label>
                             <input type="text" id="logDateRange" name="log_date_range" class="form-control" 
                                    value="{{ request('log_date_range', $startDate . ' to ' . $endDate) }}" 
                                    placeholder="Select Date Range..." readonly>
                        </div>
                        <div class="col-md-3 mb-3">
                             <label class="form-label">User / Name</label>
                             <select name="user_id" class="form-control select2" onchange="this.form.submit()">
                                 <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 mb-3">
                             <label class="form-label">Outlet</label>
                             <select name="outlet_id" class="form-control select2" onchange="this.form.submit()">
                                 <option value="">All Outlets</option>
                                  @foreach($outlets as $id => $name)
                                     <option value="{{ $id }}" {{ request('outlet_id') == $id ? 'selected' : '' }}>{{ $name }}</option>
                                  @endforeach
                             </select>
                         </div>
                         <div class="col-md-3 mb-3">
                             <label class="form-label">Territory / Market</label>
                             <select name="territory_id" class="form-control select2" onchange="this.form.submit()">
                                 <option value="">All Territories</option>
                                  @foreach($territories as $territory)
                                     <option value="{{ $territory->id }}" {{ request('territory_id') == $territory->id ? 'selected' : '' }}>{{ $territory->name }}</option>
                                  @endforeach
                             </select>
                         </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-md-12">
                             <a href="{{ route('horeca.reports.geo') }}" 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>
            </form>
        </div>
    </div>


    {{-- Content Row --}}
    <div class="row g-4 mb-5 mt-2">
         <div class="col-12 order-1 mb-4">
             <div class="card border-0 shadow-sm rounded-border h-100">
                <div class="card-header bg-white border-0 py-3 px-4 rounded-top-4 d-flex justify-content-between align-items-center">
                    <h6 class="fw-bold mb-0 text-dark">Geo Variation Analysis</h6>
                    <div class="d-flex align-items-center gap-2">
                        @if(!request()->has('view_all'))
                            <a href="{{ route('horeca.reports.geo', array_merge(request()->all(), ['view_all' => 1])) }}" class="btn btn-sm btn-ghost-primary rounded-pill">View All</a>
                        @else
                            <a href="{{ route('horeca.reports.geo', request()->except('view_all')) }}" class="btn btn-sm btn-ghost-primary rounded-pill">Show Paginated</a>
                        @endif
                    </div>
                </div>
                 <div class="table-responsive">
                     <table class="table table-hover align-middle mb-0">
                         <thead class="bg-light text-muted">
                             <tr>
                                 @foreach($headers as $header)
                                    <th class="text-uppercase small fw-bold border-0 text-center">{{ $header }}</th>
                                 @endforeach
                             </tr>
                         </thead>
                         <tbody>
                             @forelse($visits as $row)
                                 <tr>
                                    <td class="text-center">{{ $row->date }}</td>
                                    <td class="text-center fw-bold">{{ $row->full_name }}</td>
                                    <td class="text-center">{{ $row->market }}</td>
                                    <td class="text-center fw-bold text-dark">{{ $row->outlet_name }}</td>
                                    <td class="text-center">{{ $row->checked_in_time }}</td>
                                    <td class="text-center">{{ $row->checked_out_time }}</td>
                                    <td class="text-center small">{{ $row->outlet_geo }}</td>
                                    <td class="text-center small">{{ $row->checked_in_geo }}</td>
                                    
                                    @php
                                        // Gradient Logic: 0-50m: green/normal, 50-100m: yellow/orange, >100m: red
                                        $var = $row->variation;
                                        $bgStyle = '';
                                        $textClass = '';
                                        
                                        if ($var !== null) {
                                            if ($var > 100) {
                                                // Dark Red
                                                $bgStyle = 'background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); color: white;';
                                            } elseif ($var > 50) {
                                                // Orange to Yellow
                                                $bgStyle = 'background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%); color: white;';
                                            } else {
                                                // Light Green
                                                $bgStyle = 'background: linear-gradient(135deg, #a7f3d0 0%, #34d399 100%); color: #064e3b;';
                                            }
                                        }
                                    @endphp

                                    <td class="text-center">
                                        @if($var !== null)
                                            <span class="badge rounded-pill" style="padding: 0.5em 0.8em; font-size: 0.85em; {{ $bgStyle }}">
                                                {{ $row->formatted_variation }}
                                            </span>
                                        @else
                                            <span class="text-muted">-</span>
                                        @endif
                                    </td>
                                 </tr>
                             @empty
                                 <tr>
                                     <td colspan="{{ count($headers) }}" class="text-center py-4 text-muted border-light">No data available for this view.</td>
                                 </tr>
                             @endforelse
                         </tbody>
                     </table>
                 </div>
                 <div class="card-footer bg-white border-0 rounded-bottom-4 py-3 d-flex flex-column align-items-center">
                     @if($visits->count() > 0)
                        @if($visits instanceof \Illuminate\Pagination\LengthAwarePaginator)
                            <div class="mb-2">
                                {{ $visits->links() }}
                            </div>
                        @endif
                        <small class="text-muted">Showing Geo Variations</small>
                     @endif
                 </div>
             </div>
         </div>
    </div>
@endsection

@push('js')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Initialize Date Range Picker
        flatpickr("#logDateRange", {
            mode: "range",
            dateFormat: "Y-m-d",
            defaultDate: [
                "{{ explode(' to ', request('log_date_range', $startDate . ' to ' . $endDate))[0] ?? $startDate }}", 
                "{{ explode(' to ', request('log_date_range', $startDate . ' to ' . $endDate))[1] ?? $endDate }}"
            ],
            onClose: function(selectedDates, dateStr, instance) {
                if (selectedDates.length === 2) {
                    document.getElementById('filtersForm').submit();
                }
            }
        });

        $('.select2').select2({
            placeholder: "Select an option",
            allowClear: true,
            width: '100%'
        }).on('change', function() {
            document.getElementById('filtersForm').submit();
        });
    });
</script>
<style>
    /* Styling Reuse + New Report Styles */
    .bg-soft-primary { background-color: rgba(69, 122, 218, 0.1); }
    .bg-soft-success { background-color: rgba(16, 185, 129, 0.1); }
    .bg-soft-warning { background-color: rgba(245, 158, 11, 0.1); }
    .bg-soft-danger { background-color: rgba(239, 68, 68, 0.1); }

    .rounded-border { 
        border-radius: 12px;
        border: 1px solid #e0e0e0; 
    }
    .rounded-4 { border-radius: 1rem !important; }

    .btn-ghost-primary {
        background: transparent; color: #3b82f6; border: 1px solid transparent;
    }
    .btn-ghost-primary:hover {
        background: rgba(59, 130, 246, 0.1); color: #2563eb;
    }

    /* 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;
    }

    /* Table Styling overrides */
    .table thead th { font-weight: 600; letter-spacing: 0.03em; color: #64748b; background-color: #f8fafc; }
    .table tbody td { color: #334155; }
    .table-hover tbody tr:hover { background-color: #f8fafc; }

    /* Fix action bar z-index if needed */
    .fixed-action-bar {
        z-index: 100;
    }
</style>
@endpush