@extends('layouts.app')
@section('title', 'Visit Coverage 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">Visit Coverage Report</div>

        <div class="d-flex align-items-center">
            
            <a href="{{ route('horeca.reports.visit-coverage.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.visit-coverage.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.visit-coverage.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.visit-coverage') }}" method="GET">
                <input type="hidden" name="level" value="{{ $level }}">
                <input type="hidden" name="parent_id" value="{{ request('parent_id') }}">

                {{-- Filters Section --}}
                <div id="filtersCollapse">
                    <div class="row">
                        <div class="col-md-3 mb-2">
                             <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-2">
                             <label class="form-label">User Role</label>
                             <select name="user_role" class="form-control" onchange="this.form.submit()">
                                 <option value="">All Roles</option>
                                 <option value="LSR" {{ request('user_role') == 'LSR' ? 'selected' : '' }}>LSR</option>
                                 <option value="TM" {{ request('user_role') == 'TM' ? 'selected' : '' }}>TM</option>
                                 <option value="SM" {{ request('user_role') == 'SM' ? 'selected' : '' }}>SM</option>
                             </select>
                         </div>
                         <div class="col-md-3 mb-2">
                             <label class="form-label">Territory</label>
                             <select name="territory_id" class="form-control" 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 class="col-md-3 mb-2">
                            <label class="form-label">Outlet Type</label>
                            <select name="outlet_type" class="form-control" onchange="this.form.submit()">
                                <option value="">All Types</option>
                                @foreach($outletTypes as $type)
                                    <option value="{{ $type }}" {{ request('outlet_type') == $type ? 'selected' : '' }}>{{ $type }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-md-12">
                             <a href="{{ route('horeca.reports.visit-coverage') }}" 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>

    {{-- Breadcrumbs --}}
    <nav aria-label="breadcrumb" class="mb-2">
        <ol class="breadcrumb">
            @foreach($breadcrumbs as $crumb)
                @if($loop->last)
                    <li class="breadcrumb-item active" aria-current="page">{{ $crumb['label'] }}</li>
                @else
                    <li class="breadcrumb-item">
                        <a href="{{ route('horeca.reports.visit-coverage', array_merge(request()->except(['level', 'parent_id']), ['level' => $crumb['level'], 'parent_id' => $crumb['id']])) }}">
                            {{ $crumb['label'] }}
                        </a>
                    </li>
                @endif
            @endforeach
        </ol>
    </nav>

    {{-- Summary Cards --}}
    <div class="row g-4 mb-4 mt-2">
         <div class="col-md-3">
             <div class="card border-0 shadow-sm rounded-4 h-100 card-hover">
                 <div class="card-body p-4 d-flex flex-column justify-content-between">
                     <div class="d-flex justify-content-between align-items-center mb-2">
                         <span class="text-muted section-label">Assigned Outlets</span>
                         <div class="icon-circle bg-soft-primary text-primary">
                             <i class="fa-solid fa-store"></i>
                         </div>
                     </div>
                     <h2 class="fw-bold mb-0 text-dark">{{ $totalOutletsAssigned }}</h2>
                     <small class="text-muted">Total potential coverage</small>
                 </div>
             </div>
         </div>
         <div class="col-md-3">
             <div class="card border-0 shadow-sm rounded-4 h-100 card-hover">
                 <div class="card-body p-4 d-flex flex-column justify-content-between">
                     <div class="d-flex justify-content-between align-items-center mb-2">
                         <span class="text-muted section-label">Visited Outlets</span>
                         <div class="icon-circle bg-soft-info text-info">
                             <i class="fa-solid fa-map-marker-alt"></i>
                         </div>
                     </div>
                     <h2 class="fw-bold mb-0 text-dark">{{ $uniqueOutletsVisited }}</h2>
                     <small class="text-muted">Unique outlets visited</small>
                 </div>
             </div>
         </div>
         <div class="col-md-3">
             <div class="card border-0 shadow-sm rounded-4 h-100 card-hover">
                 <div class="card-body p-4 d-flex flex-column justify-content-between">
                     <div class="d-flex justify-content-between align-items-center mb-2">
                         <span class="text-muted section-label">Coverage %</span>
                         <div class="icon-circle {{ $coveragePercentage > 80 ? 'bg-soft-success text-success' : ($coveragePercentage > 50 ? 'bg-soft-warning text-warning' : 'bg-soft-danger text-danger') }}">
                             <i class="fa-solid fa-chart-pie"></i>
                         </div>
                     </div>
                     <h2 class="fw-bold mb-0 text-dark">{{ $coveragePercentage }}%</h2>
                     <div class="progress mt-2" style="height: 6px;">
                         <div class="progress-bar {{ $coveragePercentage > 80 ? 'bg-success' : ($coveragePercentage > 50 ? 'bg-warning' : 'bg-danger') }}" 
                              role="progressbar" style="width: {{ $coveragePercentage }}%" aria-valuenow="{{ $coveragePercentage }}" aria-valuemin="0" aria-valuemax="100"></div>
                     </div>
                 </div>
             </div>
         </div>
         <div class="col-md-3">
             <div class="card border-0 shadow-sm rounded-4 h-100 card-hover">
                 <div class="card-body p-4 d-flex flex-column justify-content-between">
                     <div class="d-flex justify-content-between align-items-center mb-2">
                         <span class="text-muted section-label">Avg Visits / Outlet</span>
                         <div class="icon-circle bg-soft-secondary text-dark">
                             <i class="fa-solid fa-clock-rotate-left"></i>
                         </div>
                     </div>
                     <h2 class="fw-bold mb-0 text-dark">{{ $avgVisitsPerOutlet }}</h2>
                     <small class="text-muted">Frequency of engagement</small>
                 </div>
             </div>
         </div>
    </div>

    {{-- Content Row --}}
    <div class="row g-4 mb-5">
         {{-- Left: Drill-Down Table --}}
         {{-- Drill-Down Table (Full Width at Top) --}}
         <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">{{ $viewTitle }} - Analysis</h6>
                    <div class="d-flex align-items-center gap-2">
                        @if(!request()->has('view_all'))
                            <a href="{{ route('horeca.reports.visit-coverage', 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.visit-coverage', request()->except('view_all')) }}" class="btn btn-sm btn-ghost-primary rounded-pill">Show Paginated</a>
                        @endif

                        @if(count($breadcrumbs) > 1)
                            @php 
                                $parentCrumb = $breadcrumbs[count($breadcrumbs) - 2]; 
                                $backUrl = route('horeca.reports.visit-coverage', array_merge(request()->except(['level', 'parent_id']), ['level' => $parentCrumb['level'], 'parent_id' => $parentCrumb['id']]));
                            @endphp
                            <a href="{{ $backUrl }}" class="btn btn-sm btn-outline-secondary">
                                <i class="fa-solid fa-arrow-left me-1"></i> Back
                            </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($drillDownHeaders as $header)
                                    <th class="text-uppercase small fw-bold border-0 {{ $loop->first ? 'ps-4' : 'text-center' }}">{{ $header }}</th>
                                 @endforeach
                             </tr>
                         </thead>
                         <tbody>
                             @forelse($drillDownData as $row)
                                 <tr>
                                    @if(isset($row->is_visit))
                                        {{-- Visit Detail Row --}}
                                        <td class="ps-4 fw-bold text-dark">{{ $row->name }}</td>
                                        <td class="text-center">{{ $row->visit_date }}</td>
                                        <td class="text-center">{{ $row->check_in }}</td>
                                        <td class="text-center">{{ $row->check_out }}</td>
                                        <td class="text-center">{{ $row->time_spent }}</td>
                                        <td class="text-center">{{ $row->workflows }}</td>
                                        <td class="text-center"><span class="badge bg-soft-success text-success">{{ $row->outcome }}</span></td>
                                        <td class="text-center">{{ $row->geolocation }}</td>
                                        <td class="text-center">
                                            <button class="btn btn-sm btn-ghost-primary rounded-pill">View</button>
                                        </td>
                                    @else
                                        {{-- Standard Drill-Down Row --}}
                                        <td class="ps-4 py-3 border-light">
                                            <div class="fw-bold text-dark">{{ $row->name }}</div>
                                        </td>
                                        
                                        @if($level === 'territory') 
                                            {{-- User Row Extra Columns --}}
                                            <td class="text-center">{{ $row->assigned }}</td>
                                            <td class="text-center">{{ $row->visited }}</td>
                                            <td class="text-center">
                                                <div class="d-flex align-items-center justify-content-center">
                                                    <div class="me-2 fw-bold {{ $row->coverage > 80 ? 'text-success' : ($row->coverage > 50 ? 'text-warning' : 'text-danger') }}">{{ $row->coverage }}%</div>
                                                </div>
                                            </td>
                                            <td class="text-center">{{ $row->total_visits }}</td>
                                            <td class="text-center">{{ $row->avg_time }}</td>
                                            <td class="text-center small text-muted">{{ $row->last_visit }}</td>
                                        @else
                                            {{-- Region/Territory Row --}}
                                            <td class="text-center fw-bold text-dark">{{ $row->assigned }}</td>
                                            <td class="text-center fw-bold text-dark">{{ $row->visited }}</td>
                                            <td class="text-center">
                                                <div class="d-flex align-items-center justify-content-center">
                                                    <div class="me-2 fw-bold {{ $row->coverage > 80 ? 'text-success' : ($row->coverage > 50 ? 'text-warning' : 'text-danger') }}">{{ $row->coverage }}%</div>
                                                </div>
                                            </td>
                                        @endif

                                        <td class="text-center">
                                            <a href="{{ route('horeca.reports.visit-coverage', array_merge(request()->all(), ['level' => $nextLevel, 'parent_id' => $row->id])) }}" 
                                               class="btn btn-sm btn-ghost-primary rounded-pill">Drill Down</a>
                                        </td>
                                    @endif
                                 </tr>
                             @empty
                                 <tr>
                                     <td colspan="{{ count($drillDownHeaders) }}" 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($drillDownData->count() > 0)
                        @if($drillDownData instanceof \Illuminate\Pagination\LengthAwarePaginator)
                            <div class="mb-2">
                                {{ $drillDownData->links() }}
                            </div>
                        @endif
                        <small class="text-muted">Showing specific {{ $level == 'national' ? 'Regions' : ($level == 'region' ? 'Territories' : 'Records') }}</small>
                     @endif
                 </div>
             </div>
         </div>

         {{-- Chart & Performers Column --}}
         <div class="col-lg-8 order-2">
             <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">
                     <h6 class="fw-bold mb-0 text-dark">Daily Visit Trend</h6>
                 </div>
                 <div class="card-body p-4 d-flex align-items-center justify-content-center bg-light bg-opacity-50">
                       <div style="width: 100%; height: 350px; position: relative;">
                           <canvas id="visitTrendChart"></canvas>
                       </div>
                 </div>
             </div>
         </div>

         <div class="col-lg-4 order-3">
            {{-- Top Performers --}}
            <div class="card border-0 shadow-sm rounded-border mb-4">
                <div class="card-header bg-white border-0 py-3 px-4 rounded-top-4 d-flex align-items-center">
                    <div class="icon-circle bg-soft-success text-success me-2" style="width: 32px; height: 32px; font-size: 0.9rem;">
                        <i class="fa-solid fa-arrow-trend-up"></i>
                    </div>
                    <h6 class="fw-bold mb-0 text-dark">Top Performers</h6>
                </div>
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0 text-nowrap">
                        <thead class="bg-light text-muted">
                            <tr>
                                <th class="ps-4 small fw-bold border-0">LSR Name</th>
                                <th class="pe-4 text-end small fw-bold border-0">Coverage</th>
                            </tr>
                        </thead>
                        <tbody>
                            @if(isset($topPerformers))
                            @foreach($topPerformers as $performer)
                                <tr>
                                    <td class="ps-4 fw-bold text-dark">
                                        <div class="d-flex align-items-center">
                                            <div class="avatar-xs me-2">
                                                <span class="avatar-title rounded-circle bg-soft-primary text-primary fw-bold" style="font-size: 0.7rem;">
                                                    {{ substr($performer->name, 0, 1) }}
                                                </span>
                                            </div>
                                            <div class="d-flex flex-column">
                                                <span class="text-truncate" style="max-width: 140px;" title="{{ $performer->name }}">{{ $performer->name }}</span>
                                                <small class="text-muted" style="font-size: 0.75rem;">Visits: {{ $performer->visited_count }}/{{ $performer->assigned_count }}</small>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="pe-4 text-end text-success fw-bold">{{ $performer->coverage_pct }}%</td>
                                </tr>
                            @endforeach
                            @endif
                        </tbody>
                    </table>
                </div>
            </div>

            {{-- Bottom Performers --}}
            <div class="card border-0 shadow-sm rounded-border">
                <div class="card-header bg-white border-0 py-3 px-4 rounded-top-4 d-flex align-items-center">
                    <div class="icon-circle bg-soft-danger text-danger me-2" style="width: 32px; height: 32px; font-size: 0.9rem;">
                        <i class="fa-solid fa-arrow-trend-down"></i>
                    </div>
                    <h6 class="fw-bold mb-0 text-dark">Bottom Performers</h6>
                </div>
                 <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0 text-nowrap">
                        <thead class="bg-light text-muted">
                            <tr>
                                <th class="ps-4 small fw-bold border-0">LSR Name</th>
                                <th class="pe-4 text-end small fw-bold border-0">Coverage</th>
                            </tr>
                        </thead>
                        <tbody>
                            @if(isset($bottomPerformers))
                            @foreach($bottomPerformers as $performer)
                                <tr>
                                    <td class="ps-4 fw-bold text-dark">
                                        <div class="d-flex align-items-center">
                                            <div class="avatar-xs me-2">
                                                <span class="avatar-title rounded-circle bg-soft-secondary text-secondary fw-bold" style="font-size: 0.7rem;">
                                                    {{ substr($performer->name, 0, 1) }}
                                                </span>
                                            </div>
                                            <div class="d-flex flex-column">
                                                <span class="text-truncate" style="max-width: 140px;" title="{{ $performer->name }}">{{ $performer->name }}</span>
                                                <small class="text-muted" style="font-size: 0.75rem;">Visits: {{ $performer->visited_count }}/{{ $performer->assigned_count }}</small>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="pe-4 text-end text-danger fw-bold">{{ $performer->coverage_pct }}%</td>
                                </tr>
                            @endforeach
                            @endif
                        </tbody>
                    </table>
                </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 src="https://cdn.jsdelivr.net/npm/chart.js"></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();
                }
            }
        });

        const ctx = document.getElementById('visitTrendChart').getContext('2d');
        
        const labels = @json($dailyVisits->pluck('date'));
        const data = @json($dailyVisits->pluck('count'));

        new Chart(ctx, {
            type: 'line',
            data: {
                labels: labels,
                datasets: [{
                    label: 'Visits',
                    data: data,
                    borderColor: '#3b82f6',
                    backgroundColor: 'rgba(59, 130, 246, 0.1)',
                    tension: 0.4,
                    fill: true,
                    pointBackgroundColor: '#fff',
                    pointBorderColor: '#3b82f6',
                    pointBorderWidth: 2,
                    pointRadius: 4,
                    pointHoverRadius: 6
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { display: false }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        grid: { borderDash: [2, 4], color: '#f3f4f6' },
                        ticks: { stepSize: 1, color: '#9ca3af' }
                    },
                    x: {
                        grid: { display: false },
                         ticks: { color: '#9ca3af' }
                    }
                }
            }
        });
    });
</script>
<style>
    /* Styling Reuse + New Report Styles */
    .avatar-xs {
        height: 1.5rem;
        width: 1.5rem;
    }

    .avatar-title {
        align-items: center;
        display: flex;
        font-weight: 500;
        height: 100%;
        justify-content: center;
        width: 100%;
        font-size: 0.75rem;
    }

    .bg-soft-primary { background-color: rgba(69, 122, 218, 0.1); }
    .bg-soft-success { background-color: rgba(16, 185, 129, 0.1); }
    .bg-soft-info { background-color: rgba(59, 130, 246, 0.1); }
    .bg-soft-warning { background-color: rgba(245, 158, 11, 0.1); }
    .bg-soft-danger { background-color: rgba(239, 68, 68, 0.1); }
    .bg-soft-secondary { background-color: rgba(148, 163, 184, 0.1); }


    .card-hover { transition: transform 0.2s ease, box-shadow 0.2s ease; }
    .card-hover:hover { transform: translateY(-4px); box-shadow: 0 10px 20px -3px rgba(0,0,0,0.1) !important; }

    .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;
    }

    .section-label {
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05rem;
        color: #94a3b8;
    }

    .icon-circle {
        width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
        border-radius: 50%; font-size: 1.1rem;
    }

    /* Standardized Form Styles for Filters - MATCHING OTHER PAGES */
    .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