@extends('layouts.app')
@section('title', 'Red Flags Dashboard')

@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">Red Flags Dashboard</div>

        <div class="d-flex align-items-center gap-2">

            <a href="{{ route('horeca.reports.red-flags.csv') }}"
                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.red-flags.excel') }}"
                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.red-flags.pdf') }}"
                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>

    {{-- Intro / Summary --}}
    <div class="card mt-4 rounded-border border-0 shadow-sm mb-4">
        <div class="card-body p-4">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h6 class="fw-bold mb-0 text-dark d-flex align-items-center">
                    <i class="fa-solid fa-triangle-exclamation text-danger me-2"></i> Critical Operations Overview
                </h6>
                <small class="text-muted">Real-time alerts requiring immediate action</small>
            </div>

            {{-- Summary Cards (Acting as Tabs) --}}
            <div class="row row-cols-1 row-cols-md-3 row-cols-xl-5 g-3 flexible-tabs" id="redFlagsTab">

                {{-- 1. Overdue Audits --}}
                <div class="col">
                    <div class="tab-trigger active w-100 h-100" onclick="activateTab(this, 'overdue')"
                        style="cursor: pointer;">
                        <div class="card border-0 shadow-sm h-100 card-hover summary-card">
                            <div class="card-body p-3 d-flex flex-column justify-content-between text-start">
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <span class="text-muted small fw-bold text-uppercase">Overdue Audits</span>
                                    <div class="icon-circle bg-soft-danger text-danger summary-icon">
                                        <i class="fa-solid fa-triangle-exclamation"></i>
                                    </div>
                                </div>
                                <h3 class="fw-bold mb-0 text-dark">{{ $overdueAudits->count() }}</h3>
                                <small class="text-danger"><i class="fa-solid fa-arrow-up me-1"></i>Action Required</small>
                            </div>
                            <div class="active-indicator"></div>
                        </div>
                    </div>
                </div>

                {{-- 2. SLA Breached --}}
                <div class="col">
                    <div class="tab-trigger w-100 h-100" onclick="activateTab(this, 'sla')" style="cursor: pointer;">
                        <div class="card border-0 shadow-sm h-100 card-hover summary-card">
                            <div class="card-body p-3 d-flex flex-column justify-content-between text-start">
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <span class="text-muted small fw-bold text-uppercase">SLA Breached Services</span>
                                    <div class="icon-circle bg-soft-danger text-danger summary-icon">
                                        <i class="fa-solid fa-clock-rotate-left"></i>
                                    </div>
                                </div>
                                <h3 class="fw-bold mb-0 text-dark">{{ $slaBreachedSRs->count() }}</h3>
                                <small class="text-muted">Total Breaches</small>
                            </div>
                            <div class="active-indicator"></div>
                        </div>
                    </div>
                </div>

                {{-- 3. Must-Have Stockouts --}}
                <div class="col">
                    <div class="tab-trigger w-100 h-100" onclick="activateTab(this, 'stockouts')" style="cursor: pointer;">
                        <div class="card border-0 shadow-sm h-100 card-hover summary-card">
                            <div class="card-body p-3 d-flex flex-column justify-content-between text-start">
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <span class="text-muted small fw-bold text-uppercase">Stockouts</span>
                                    <div class="icon-circle bg-soft-warning text-warning summary-icon">
                                        <i class="fa-solid fa-wine-bottle"></i>
                                    </div>
                                </div>
                                <h3 class="fw-bold mb-0 text-dark">{{ $stockoutSRs->count() }}</h3>
                                <small class="text-muted">Must Have Base</small>
                            </div>
                            <div class="active-indicator"></div>
                        </div>
                    </div>
                </div>

                {{-- 4. Unvisited Outlets --}}
                <div class="col">
                    <div class="tab-trigger w-100 h-100" onclick="activateTab(this, 'unvisited')" style="cursor: pointer;">
                        <div class="card border-0 shadow-sm h-100 card-hover summary-card">
                            <div class="card-body p-3 d-flex flex-column justify-content-between text-start">
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <span class="text-muted small fw-bold text-uppercase">Unvisited Outlets</span>
                                    <div class="icon-circle bg-soft-warning text-warning summary-icon">
                                        <i class="fa-solid fa-store-slash"></i>
                                    </div>
                                </div>
                                <h3 class="fw-bold mb-0 text-dark">{{ $unvisitedOutlets->count() }}</h3>
                                <small class="text-muted">> 30 Days</small>
                            </div>
                            <div class="active-indicator"></div>
                        </div>
                    </div>
                </div>

                {{-- 5. High Priority SRs --}}
                <div class="col">
                    <div class="tab-trigger w-100 h-100" onclick="activateTab(this, 'priority')" style="cursor: pointer;">
                        <div class="card border-0 shadow-sm h-100 card-hover summary-card">
                            <div class="card-body p-3 d-flex flex-column justify-content-between text-start">
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <span class="text-muted small fw-bold text-uppercase">High Priority SRs</span>
                                    <div class="icon-circle bg-soft-danger text-danger summary-icon">
                                        <i class="fa-solid fa-circle-exclamation"></i>
                                    </div>
                                </div>
                                <h3 class="fw-bold mb-0 text-dark">{{ $pendingHighPrioritySRs->count() }}</h3>
                                <small class="text-danger">Pending Resolution</small>
                            </div>
                            <div class="active-indicator"></div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>


    {{-- Tab Content --}}
    <div class="tab-content" id="redFlagsTabContent">

        {{-- 1. Overdue POSM Audits --}}
        <div class="tab-pane fade show active" id="overdue" role="tabpanel" aria-labelledby="overdue-tab">
            <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">Overdue POSM Audits</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 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 text-center">Days Overdue</th>
                                <th class="pe-4 border-0 text-center">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($overdueAudits as $audit)
                                <tr>
                                    <td class="ps-4 fw-bold text-dark">{{ $audit->outlet->name ?? 'Unknown Outlet' }}</td>
                                    <td>{{ $audit->tm->name ?? 'Unassigned' }}</td>
                                    <td>{{ optional($audit->scheduled_date)->format('Y-m-d') }}</td>
                                    <td>{{ optional($audit->due_date)->format('Y-m-d') }}</td>
                                    <td class="text-center">
                                        <span class="badge bg-soft-danger text-danger">
                                            {{ optional($audit->due_date)->diffInDays(now()) }} Days
                                        </span>
                                    </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">View Audit</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-check-circle text-success mb-2" style="font-size: 2rem;"></i>
                                            <p class="mb-0">No overdue audits found. Good job!</p>
                                        </div>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        {{-- 2. SLA Breached SRs --}}
        <div class="tab-pane fade" id="sla" role="tabpanel" aria-labelledby="sla-tab">
            <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">SLA Breached Service Requests</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 border-0">SR Number</th>
                                <th class="border-0">Title</th>
                                <th class="border-0">Outlet</th>
                                <th class="border-0">Assigned To</th>
                                <th class="border-0">SLA Due</th>
                                <th class="border-0 text-center">Breach Time</th>
                                <th class="pe-4 border-0 text-center">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($slaBreachedSRs as $sr)
                                <tr>
                                    <td class="ps-4 fw-bold text-dark">#{{ $sr->sr_number ?? $sr->id }}</td>
                                    <td>{{ $sr->title }}</td>
                                    <td>{{ $sr->outlet->name ?? '-' }}</td>
                                    <td>{{ $sr->assignee->name ?? 'Unassigned' }}</td>
                                    <td>{{ optional($sr->sla_due_date)->format('Y-m-d H:i') }}</td>
                                    <td class="text-center">
                                        <span class="badge bg-soft-danger text-danger">
                                            {{ optional($sr->sla_due_date)->diffForHumans() }}
                                        </span>
                                    </td>
                                    <td class="pe-4 text-center">
                                        <a href="{{ route('horeca.service-requests.show', $sr->id) }}"
                                            class="btn btn-sm btn-ghost-primary rounded-pill">View Request</a>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="7" class="text-center py-5 text-muted">
                                        <div class="d-flex flex-column align-items-center">
                                            <i class="fa-solid fa-check-circle text-success mb-2" style="font-size: 2rem;"></i>
                                            <p class="mb-0">No SLA breaches found.</p>
                                        </div>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        {{-- 3. Must-Have Stockouts --}}
        <div class="tab-pane fade" id="stockouts" role="tabpanel" aria-labelledby="stockouts-tab">
            <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">Must Have Base Stockouts</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 border-0">Outlet</th>
                                <th class="border-0">Brand / Item</th>
                                <th class="border-0">Reported By</th>
                                <th class="border-0">Reported At</th>
                                <th class="border-0">Status</th>
                                <th class="pe-4 border-0 text-center">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($stockoutSRs as $sr)
                                <tr>
                                    <td class="ps-4 fw-bold text-dark">{{ $sr->outlet->name ?? '-' }}</td>
                                    <td>{{ $sr->title }}</td>
                                    <td>{{ $sr->creator->name ?? 'System' }}</td>
                                    <td>{{ $sr->created_at->format('Y-m-d H:i') }}</td>
                                    <td><span class="badge bg-soft-warning text-warning">{{ ucfirst($sr->status) }}</span></td>
                                    <td class="pe-4 text-center">
                                        <a href="{{ route('horeca.service-requests.show', $sr->id) }}"
                                            class="btn btn-sm btn-ghost-primary rounded-pill">View 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-check-circle text-success mb-2" style="font-size: 2rem;"></i>
                                            <p class="mb-0">No critical stockouts reported.</p>
                                        </div>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        {{-- 4. Unvisited Outlets --}}
        <div class="tab-pane fade" id="unvisited" role="tabpanel" aria-labelledby="unvisited-tab">
            <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">Unvisited Outlets (> 30 Days)</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 border-0">Outlet Name</th>
                                <th class="border-0">Territory</th>
                                <th class="border-0">Assigned LSR</th>
                                <th class="border-0">Last Visit</th>
                                <th class="pe-4 border-0 text-center">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($unvisitedOutlets as $outlet)
                                <tr>
                                    <td class="ps-4 fw-bold text-dark">{{ $outlet->name }}</td>
                                    <td>{{ $outlet->territory->name ?? '-' }}</td>
                                    <td>{{ $outlet->lsr->name ?? 'Unassigned' }}</td>
                                    <td>
                                        @php $lastVisit = $outlet->visits()->latest('check_in_time')->first(); @endphp
                                        {{ $lastVisit ? $lastVisit->check_in_time->format('Y-m-d') : 'Never' }}
                                    </td>
                                    <td class="pe-4 text-center">
                                        <a href="{{ route('horeca.outlets.edit', $outlet->id) }}"
                                            class="btn btn-sm btn-ghost-primary rounded-pill">View Outlet</a>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5" class="text-center py-5 text-muted">
                                        <div class="d-flex flex-column align-items-center">
                                            <i class="fa-solid fa-check-circle text-success mb-2" style="font-size: 2rem;"></i>
                                            <p class="mb-0">No unvisited outlets found.</p>
                                        </div>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        {{-- 5. Pending High Priority SRs --}}
        <div class="tab-pane fade" id="priority" role="tabpanel" aria-labelledby="priority-tab">
            <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">Pending High Priority Requests</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 border-0">SR Number</th>
                                <th class="border-0">Title</th>
                                <th class="border-0">Status</th>
                                <th class="border-0">Assigned To</th>
                                <th class="border-0">SLA Due</th>
                                <th class="pe-4 border-0 text-center">Update Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($pendingHighPrioritySRs as $sr)
                                <tr>
                                    <td class="ps-4 fw-bold text-dark">#{{ $sr->sr_number ?? $sr->id }}</td>
                                    <td><a href="{{ route('horeca.service-requests.show', $sr->id) }}"
                                            class="text-dark">{{ $sr->title }}</a></td>
                                    <td>
                                        <span class="badge bg-soft-primary text-primary">
                                            {{ ucfirst(str_replace('_', ' ', $sr->status)) }}
                                        </span>
                                    </td>
                                    <td>{{ $sr->assignee->name ?? 'Unassigned' }}</td>
                                    <td>{{ optional($sr->sla_due_date)->format('Y-m-d H:i') }}</td>
                                    <td class="pe-4 text-center">
                                        <div class="dropdown d-inline-block">
                                            <button class="btn btn-sm btn-ghost-primary rounded-pill dropdown-toggle"
                                                type="button" id="statusDrop{{ $sr->id }}" data-toggle="dropdown"
                                                aria-haspopup="true" aria-expanded="false">
                                                Update
                                            </button>
                                            <div class="dropdown-menu dropdown-menu-right shadow-lg border-0"
                                                aria-labelledby="statusDrop{{ $sr->id }}">
                                                <form action="{{ route('horeca.service-requests.update', $sr->id) }}"
                                                    method="POST">
                                                    @csrf @method('PUT')
                                                    <input type="hidden" name="title" value="{{ $sr->title }}">
                                                    <input type="hidden" name="description" value="{{ $sr->description }}">
                                                    <input type="hidden" name="category_id" value="{{ $sr->category_id }}">
                                                    <input type="hidden" name="outlet_id" value="{{ $sr->outlet_id }}">
                                                    <input type="hidden" name="priority" value="{{ $sr->priority }}">
                                                    <input type="hidden" name="assigned_to" value="{{ $sr->assigned_to }}">

                                                    <button name="status" value="in_progress"
                                                        class="dropdown-item d-flex align-items-center py-2">
                                                        <i class="fa-solid fa-spinner fa-fw text-info me-3"></i> In Progress
                                                    </button>
                                                    <button name="status" value="resolved"
                                                        class="dropdown-item d-flex align-items-center py-2">
                                                        <i class="fa-solid fa-check-circle fa-fw text-success me-3"></i>
                                                        Resolved
                                                    </button>
                                                    <button name="status" value="closed"
                                                        class="dropdown-item d-flex align-items-center py-2">
                                                        <i class="fa-solid fa-archive fa-fw text-secondary me-3"></i> Closed
                                                    </button>
                                                </form>
                                            </div>
                                        </div>
                                    </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-check-circle text-success mb-2" style="font-size: 2rem;"></i>
                                            <p class="mb-0">No high priority pending requests.</p>
                                        </div>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>
@endsection

@push('js')
    <script>
        function activateTab(element, tabId) {
            // 1. Deactivate all tabs
            document.querySelectorAll('.tab-trigger').forEach(el => {
                el.classList.remove('active');
            });
            document.querySelectorAll('.tab-pane').forEach(el => {
                el.classList.remove('show', 'active');
            });

            // 2. Activate clicked tab
            if (element) {
                element.classList.add('active');
            }

            // 3. Show target content
            const targetPane = document.getElementById(tabId);
            if (targetPane) {
                targetPane.classList.add('show', 'active');
            }
        }
    </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;
        }

        /* Tab Styling */
        /* Updated Tab Styling for Cards */
        .flexible-tabs .nav-link {
            border-radius: 1rem !important;
            /* Match Cards */
            transition: all 0.3s ease;
            background: transparent !important;
            border: none !important;
        }

        .summary-card {
            border: 2px solid transparent !important;
            transition: all 0.2s ease-in-out;
            position: relative;
            overflow: hidden;
        }

        /* Active Effect for Summary Cards */
        .tab-trigger.active .summary-card {
            border-color: #3b82f6 !important;
            background-color: #f0f9ff !important;
            /* Very light blue background */
            transform: translateY(-2px);
            box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.1), 0 4px 6px -2px rgba(59, 130, 246, 0.05) !important;
        }

        .tab-trigger.active .summary-icon {
            transform: scale(1.1);
            transition: transform 0.2s;
        }

        .active-indicator {
            height: 4px;
            width: 0%;
            background-color: #3b82f6;
            position: absolute;
            bottom: 0;
            left: 0;
            transition: width 0.3s ease;
        }

        .tab-trigger.active .active-indicator {
            width: 100%;
        }

        /* Remove old pill styling interference */
        .nav-pills .nav-link.active {
            background-color: transparent;
            color: inherit;
            box-shadow: none;
        }

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