@extends('layouts.app')
@section('title', 'POSM Audits 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">POSM Audits Report</div>
        <div class="d-flex align-items-center gap-2">
            <a href="{{ route('horeca.reports.posm-audits.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.posm-audits.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.posm-audits.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>

    {{-- Filter Section --}}
    <div class="card mt-3 rounded-border">
        <div class="card-body">
            <form id="filtersForm" action="{{ route('horeca.reports.posm-audits') }}" method="GET">
                <div id="filtersCollapse">
                    <div class="row">
                        <div class="col-md-4 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-4 mb-2">
                            <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>
                    <div class="row mt-3">
                        <div class="col-md-12">
                            <a href="{{ route('horeca.reports.posm-audits') }}" 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>


    {{-- Metrics Cards --}}
    <div class="row g-3 mt-4 mb-4">
        <div class="col-md-3">
            <div class="card h-100 border-0 shadow-sm rounded-border">
                <div class="card-body">
                    <h6 class="text-muted text-uppercase small fw-bold mb-3">Total Scheduled</h6>
                    <div class="d-flex align-items-center justify-content-between">
                        <h2 class="mb-0 fw-bold text-dark">{{ number_format($totalAudits) }}</h2>
                        <div class="icon-circle bg-soft-primary text-primary">
                            <i class="fa-solid fa-calendar-check"></i>
                        </div>
                    </div>
                    <small class="text-muted mt-2 d-block">Audits in period</small>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card h-100 border-0 shadow-sm rounded-border">
                <div class="card-body">
                    <h6 class="text-muted text-uppercase small fw-bold mb-3">Completed</h6>
                    <div class="d-flex align-items-center justify-content-between">
                        <h2 class="mb-0 fw-bold text-success">{{ number_format($completedAudits) }}</h2>
                        <div class="icon-circle bg-soft-success text-success">
                            <i class="fa-solid fa-check-double"></i>
                        </div>
                    </div>
                    <small class="text-muted mt-2 d-block">{{ $completionRate }}% Completion Rate</small>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card h-100 border-0 shadow-sm rounded-border">
                <div class="card-body">
                    <h6 class="text-muted text-uppercase small fw-bold mb-3">Overdue</h6>
                    <div class="d-flex align-items-center justify-content-between">
                        <h2 class="mb-0 fw-bold text-danger">{{ number_format($overdueAudits) }}</h2>
                        <div class="icon-circle bg-soft-danger text-danger">
                            <i class="fa-solid fa-circle-exclamation"></i>
                        </div>
                    </div>
                    <small class="text-muted mt-2 d-block">Action Required</small>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card h-100 border-0 shadow-sm rounded-border">
                <div class="card-body">
                    <h6 class="text-muted text-uppercase small fw-bold mb-3">Avg Variance</h6>
                    <div class="d-flex align-items-center justify-content-between">
                        <h2 class="mb-0 fw-bold text-warning">-- %</h2>
                        <div class="icon-circle bg-soft-warning text-warning">
                            <i class="fa-solid fa-percent"></i>
                        </div>
                    </div>
                    <small class="text-muted mt-2 d-block">Actual vs Norms</small>
                </div>
            </div>
        </div>
    </div>

    {{-- Audits Table --}}
    <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 justify-content-between align-items-center">
            <h6 class="fw-bold mb-0 text-dark">POSM Audit History</h6>
            @if(!request()->has('view_all'))
                <a href="{{ route('horeca.reports.posm-audits', 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.posm-audits', request()->except('view_all')) }}"
                    class="btn btn-sm btn-ghost-primary rounded-pill">Show Paginated</a>
            @endif
        </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 border-0">Outlet</th>
                        <th class="border-0">Assigned TM</th>
                        <th class="border-0">Scheduled Date</th>
                        <th class="border-0">Due Date</th>
                        <th class="border-0">Completed Date</th>
                        <th class="border-0 text-center">Status</th>
                        <th class="pe-4 border-0 text-center">Action</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($auditList as $audit)
                        <tr>
                            <td class="ps-4 fw-bold text-dark w-25 text-wrap">{{ $audit->outlet->name ?? 'Unknown Outlet' }}
                            </td>
                            <td>{{ $audit->tm->name ?? 'Unassigned' }}</td>
                            <td>{{ $audit->scheduled_date ? \Carbon\Carbon::parse($audit->scheduled_date)->format('Y-m-d') : '-' }}
                            </td>
                            <td>
                                @if($audit->due_date)
                                    <span
                                        class="{{ \Carbon\Carbon::parse($audit->due_date)->isPast() && $audit->status !== 'completed' ? 'text-danger fw-bold' : '' }}">
                                        {{ \Carbon\Carbon::parse($audit->due_date)->format('Y-m-d') }}
                                    </span>
                                @else
                                    -
                                @endif
                            </td>
                            <td>
                                @if($audit->status === 'completed' && $audit->completed_date)
                                    {{ \Carbon\Carbon::parse($audit->completed_date)->format('Y-m-d') }}
                                @else
                                    -
                                @endif
                            </td>
                            <td class="text-center">
                                @if($audit->status === 'completed')
                                    <span class="badge bg-soft-success text-success">Completed</span>
                                @elseif($audit->due_date && \Carbon\Carbon::parse($audit->due_date)->isPast())
                                    <span class="badge bg-soft-danger text-danger">Overdue</span>
                                @else
                                    <span class="badge bg-soft-warning text-warning">Pending</span>
                                @endif
                            </td>
                            <td class="pe-4 text-center">
                                <a href="{{ route('horeca.posm-audits.show', $audit->id) }}"
                                    class="btn btn-sm btn-ghost-primary rounded-pill">Details</a>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="text-center py-5 text-muted">
                                <div class="d-flex flex-column align-items-center">
                                    <i class="fa-solid fa-list-check text-muted opacity-25 mb-3" style="font-size: 2rem;"></i>
                                    <p class="mb-0">No audits found for this period.</p>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($auditList instanceof \Illuminate\Pagination\LengthAwarePaginator)
            <div class="card-footer bg-white border-0 rounded-bottom-4 py-3 d-flex justify-content-center">
                {{ $auditList->links() }}
            </div>
        @endif
    </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();
                    }
                }
            });
        });
        
        $(document).ready(function() {
            $('.select2').select2({
                placeholder: "All Outlets",
                allowClear: true,
                width: '100%'
            });
        });
    </script>
    <style>
        .fixed-action-bar {
            z-index: 100;
        }

        .rounded-border {
            border-radius: 12px;
            border: 1px solid #e0e0e0;
        }

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

        .bg-soft-primary {
            background-color: rgba(59, 130, 246, 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);
        }

        .btn-ghost-primary {
            color: #3b82f6;
            background: transparent;
            border: 1px solid transparent;
        }

        .btn-ghost-primary:hover {
            background: rgba(59, 130, 246, 0.1);
        }

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

    </style>
@endpush