@extends('layouts.app')


@section('title', 'Complaint Cell Dashboard')


@section('content')

<div class="container-fluid dashboard-container">


    {{-- ========================================================= --}}
    {{-- HEADER --}}
    {{-- ========================================================= --}}

    <div class="dashboard-header mb-4">

        <div>
            <!-- <span class="header-eyebrow">Home &amp; Tribal Affairs Department, KP</span> -->
            <h3 class="fw-bold mb-1">
                <i class="bi bi-speedometer2"></i>
                Complaint Cell Dashboard
            </h3>

            <small class="text-muted">
                Complaint Management &amp; Resolution Overview
            </small>
        </div>


        <div>
            @if(request()->hasAny(['status', 'type', 'filter']))
                <a href="{{ route('dashboard') }}" class="btn btn-outline-secondary btn-sm">
                    <i class="bi bi-arrow-counterclockwise"></i>
                    Clear Filters
                </a>
            @endif
        </div>

    </div>


    {{-- ========================================================= --}}
    {{-- MAIN SUMMARY CARDS --}}
    {{-- ========================================================= --}}

    <div class="row g-3 mb-4">

        {{-- TOTAL COMPLAINTS --}}
        <div class="col-xl-3 col-md-6">
            <a href="{{ route('complaint.index') }}" class="text-decoration-none">
                <div class="stat-card stat-card-primary">
                    <div>
                        <h6>Total Complaints</h6>
                        <h2>{{ $totalComplaints }}</h2>
                    </div>
                    <i class="bi bi-file-earmark-text"></i>
                </div>
            </a>
        </div>

        {{-- TODAY / NEW COMPLAINTS --}}
        <div class="col-xl-3 col-md-6">
            <a href="{{ route('complaint.index', ['filter' => 'today']) }}" class="text-decoration-none">
                <div class="stat-card stat-card-neutral">
                    <div>
                        <h6>Today's Complaints</h6>
                        <h2>{{ $todayComplaints }}</h2>
                    </div>
                    <i class="bi bi-calendar-day"></i>
                </div>
            </a>
        </div>

        {{-- IN PROGRESS --}}
        <div class="col-xl-3 col-md-6">
            <a href="{{ route('complaint.index', ['status' => 'In Progress']) }}" class="text-decoration-none">
                <div class="stat-card stat-card-warning">
                    <div>
                        <h6>Pending</h6>
                        <h2>{{ $pending }}</h2>
                    </div>
                    <i class="bi bi-hourglass-split"></i>
                </div>
            </a>
        </div>

        {{-- RESOLVED --}}
        <div class="col-xl-3 col-md-6">
            <a href="{{ route('complaint.index', ['status' => 'Resolved']) }}" class="text-decoration-none">
                <div class="stat-card stat-card-success">
                    <div>
                        <h6>Resolved</h6>
                        <h2>{{ $resolved }}</h2>
                    </div>
                    <i class="bi bi-check-circle"></i>
                </div>
            </a>
        </div>

    </div>

    {{-- ========================================================= --}}
{{-- RECENT STATUS UPDATES --}}
{{-- ========================================================= --}}

<div class="dashboard-card mb-4">

    <div class="card-header-custom d-flex justify-content-between align-items-center">

        <span>
            <i class="bi bi-bell-fill me-1"></i>
            Recently Updated Complaints
        </span>

        <span class="badge bg-success">
            Last 24 Hours
        </span>

    </div>


    <div class="card-body p-0">

        @if($recentStatusUpdates->count() > 0)

            <div class="table-responsive">

                <table class="table table-hover align-middle mb-0">

                    <thead class="table-light">

                        <tr>

                            <th class="ps-3">
                                Complaint #
                            </th>

                            <th>
                                Complainant
                            </th>

                            <th>
                                Type
                            </th>

                            <th>
                                Status
                            </th>

                            <th>
                                Remarks
                            </th>

                            <th>
                                Updated By
                            </th>

                            <th>
                                Updated
                            </th>

                            <th class="text-center">
                                Action
                            </th>

                        </tr>

                    </thead>


                    <tbody>

                        @foreach($recentStatusUpdates as $update)

                            <tr>

                                {{-- Complaint ID --}}

                                <td class="ps-3 fw-bold">

                                    #{{ $update->complaint_id }}

                                </td>


                                {{-- Complainant --}}

                                <td>

                                    {{ $update->complaint->complainant_name ?? 'N/A' }}

                                </td>


                                {{-- Complaint Type --}}

                                <td>

                                    {{ $update->complaint->complaintType->type_name ?? 'N/A' }}

                                </td>


                                {{-- Status --}}

                                <td>

                                    @php

                                        $statusClass = match($update->status) {

                                            'Resolved' => 'bg-success',

                                            'Closed' => 'bg-dark',

                                            'In Progress' => 'bg-warning text-dark',

                                            'Pending' => 'bg-secondary',

                                            default => 'bg-primary'

                                        };

                                    @endphp


                                    <span class="badge {{ $statusClass }}">

                                        {{ $update->status }}

                                    </span>

                                </td>


                                {{-- Remarks --}}

                                <td style="max-width:250px;">

                                    <span
                                        title="{{ $update->remarks }}"
                                        class="text-muted">

                                        {{ \Illuminate\Support\Str::limit($update->remarks, 50) }}

                                    </span>

                                </td>


                                {{-- Updated By --}}

                                <td>

                                    {{ $update->user->name ?? 'System' }}

                                </td>


                                {{-- Updated Time --}}

                                <td>

                                    <span class="text-muted">

                                        {{ $update->created_at->diffForHumans() }}

                                    </span>

                                    <br>

                                    <small class="text-muted">

                                        {{ $update->created_at->format('d M Y h:i A') }}

                                    </small>

                                </td>


                                {{-- View --}}

                                <td class="text-center">

                                    <a
                                        href="{{ route('complaint.print', $update->complaint_id) }}"
                                        class="btn btn-sm btn-outline-success"
                                        target="_blank"
                                        title="View Complaint">

                                        <i class="bi bi-eye"></i>

                                    </a>

                                </td>

                            </tr>

                        @endforeach

                    </tbody>

                </table>

            </div>

        @else

            <div class="text-center py-5 text-muted">

                <i
                    class="bi bi-bell-slash"
                    style="font-size: 35px;">
                </i>

                <h6 class="mt-3">
                    No recent status updates
                </h6>

                <p class="mb-0">
                    No complaint status has been updated during the last 24 hours.
                </p>

            </div>

        @endif

    </div>

</div>

    {{-- ========================================================= --}}
    {{-- DEADLINE BREAKDOWN --}}
    {{-- ========================================================= --}}

    <div class="card dashboard-card mb-4">

        <div class="card-header-custom">
            <span><i class="bi bi-calendar2-week me-1"></i> Complaint Resolution Deadline</span>
            <span class="scroll-hint d-lg-none"><i class="bi bi-arrow-left-right"></i> Swipe</span>
        </div>

        <div class="card-body">

            <div class="deadline-strip">

                {{-- 1 TO 14 DAYS REMAINING --}}
                @for($days = 1; $days <= 14; $days++)
                    <a href="{{ route('complaint.index', ['deadline' => $days]) }}" class="deadline-card">
                        <div class="deadline-days">{{ $days }}</div>
                        <div class="deadline-text">{{ $days == 1 ? 'Day' : 'Days' }} Remaining</div>
                        <div class="deadline-count">{{ $deadlineCounts[$days] ?? 0 }}</div>
                    </a>
                @endfor

                {{-- OVERDUE --}}
                <a href="{{ route('complaint.index', ['deadline' => 'overdue']) }}" class="deadline-card overdue-card">
                    <i class="bi bi-exclamation-triangle-fill"></i>
                    <div class="deadline-text">Deadline Completed</div>
                    <div class="overdue-label">Not Resolved</div>
                    <div class="deadline-count">{{ $overdueComplaints }}</div>
                </a>

            </div>

        </div>

    </div>



    {{-- ========================================================= --}}
    {{-- COMPLAINT BREAKDOWN --}}
    {{-- ========================================================= --}}

    <div class="section-heading">
        <h5><i class="bi bi-bar-chart-fill"></i> Complaints Breakdown</h5>
    </div>


    <div class="row g-3 mb-4">

        {{-- TODAY --}}
        <div class="col-md-3">
            <a href="{{ route('complaint.index', ['filter' => 'today']) }}" class="dashboard-link">
                <div class="breakdown-card">
                    <span>Today's</span>
                    <strong>{{ $todayComplaints }}</strong>
                </div>
            </a>
        </div>

        {{-- THIS MONTH --}}
        <div class="col-md-3">
            <div class="breakdown-card breakdown-card-static">
                <span>This Month</span>
                <strong>{{ $currentMonthComplaints }}</strong>
            </div>
        </div>

        {{-- PENDING --}}
        <div class="col-md-3">
            <a href="{{ route('complaint.index', ['status' => 'Pending']) }}" class="dashboard-link">
                <div class="breakdown-card">
                    <span>Pending</span>
                    <strong>{{ $pending }}</strong>
                </div>
            </a>
        </div>

        {{-- RESOLVED --}}
        <div class="col-md-3">
            <a href="{{ route('complaint.index', ['status' => 'Resolved']) }}" class="dashboard-link">
                <div class="breakdown-card">
                    <span>Resolved</span>
                    <strong>{{ $resolved }}</strong>
                </div>
            </a>
        </div>

    </div>



    {{-- ========================================================= --}}
    {{-- CATEGORY SUMMARY --}}
    {{-- NOT SHOWN TO DEPARTMENT USERS --}}
    {{-- ========================================================= --}}

    @if(auth()->user()->role != 'department')

        <div class="section-heading">
            <h5><i class="bi bi-diagram-3"></i> Complaints by Category</h5>
        </div>

        <div class="row g-3 mb-4">

            @forelse($categorySummary as $category)

                @php
                    $percentage = $category['total'] > 0
                        ? ($category['resolved'] / $category['total']) * 100
                        : 0;
                @endphp

                <div class="col-md-4">
                    <a href="{{ route('complaint.index', ['type' => $category['id']]) }}" class="text-decoration-none text-dark">
                        <div class="category-card">

                            <div class="category-header">
                                <h5><i class="bi bi-building"></i> {{ $category['name'] }}</h5>
                                <div class="category-total">{{ $category['total'] }}</div>
                            </div>

                            <div class="progress mt-3">
                                <div class="progress-bar" style="width: {{ $percentage }}%"></div>
                            </div>

                            <div class="category-footer">
                                <span>Resolved: <strong>{{ $category['resolved'] }}</strong></span>
                                <span>{{ number_format($percentage, 0) }}%</span>
                            </div>

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

            @empty

                <div class="col-12">
                    <div class="alert alert-info">
                        No active complaint categories found.
                    </div>
                </div>

            @endforelse

        </div>

    @endif



    {{-- ========================================================= --}}
    {{-- GRAPHS --}}
    {{-- ========================================================= --}}

    <div class="row g-3 mb-4">

        {{-- MONTHLY TREND --}}
        <div class="col-lg-8">
            <div class="dashboard-card">
                <div class="card-header-custom">
                    <span><i class="bi bi-graph-up"></i> Monthly Complaints Trend</span>
                </div>
                <div class="card-body">
                    <canvas id="complaintChart" height="100"></canvas>
                </div>
            </div>
        </div>

        {{-- RESOLUTION STATISTICS --}}
        <div class="col-lg-4">
            <div class="dashboard-card">
                <div class="card-header-custom">
                    <span><i class="bi bi-pie-chart"></i> Complaints Resolution Stats</span>
                </div>
                <div class="card-body">
                    <canvas id="resolutionChart" height="220"></canvas>
                </div>
            </div>
        </div>

    </div>


</div>



{{-- ============================================================= --}}
{{-- CHART.JS --}}
{{-- ============================================================= --}}

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>


<script>

/*
|--------------------------------------------------------------------------
| Brand palette (kept in sync with the CSS custom properties below)
|--------------------------------------------------------------------------
*/
const kpGreen   = '#0b5e3c';
const kpMaroon  = '#7a1f2b';
const kpAmber   = '#c9922a';
const kpSlate   = '#6b7580';

/*
|--------------------------------------------------------------------------
| Monthly Complaints Chart
|--------------------------------------------------------------------------
*/

new Chart(

    document.getElementById('complaintChart'),

    {
        type: 'line',
        data: {
            labels: @json($labels),
            datasets: [
                {
                    label: 'Complaints',
                    data: @json($values),
                    borderWidth: 3,
                    borderColor: kpGreen,
                    backgroundColor: 'rgba(11, 94, 60, 0.12)',
                    pointBackgroundColor: kpGreen,
                    pointBorderColor: '#fff',
                    pointRadius: 4,
                    tension: 0.4,
                    fill: true
                }
            ]
        },
        options: {
            responsive: true,
            plugins: {
                legend: { display: true }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: { precision: 0 }
                }
            }
        }
    }

);

/*
|--------------------------------------------------------------------------
| Resolution Statistics
|--------------------------------------------------------------------------
*/

new Chart(

    document.getElementById('resolutionChart'),

    {
        type: 'doughnut',
        data: {
            labels: ['Resolved', 'In Progress', 'Pending', 'Closed', 'Rejected'],
            datasets: [
                {
                    data: [
                        {{ $resolved }},
                        {{ $inProgress }},
                        {{ $pending }},
                        {{ $closed }},
                        {{ $rejected }}
                    ],
                    backgroundColor: [kpGreen, kpAmber, kpSlate, '#9aa5ad', kpMaroon],
                    borderWidth: 2,
                    borderColor: '#fff'
                }
            ]
        },
        options: {
            responsive: true,
            plugins: {
                legend: { position: 'bottom' }
            }
        }
    }

);

</script>


@endsection



{{-- ============================================================= --}}
{{-- CSS --}}
{{-- ============================================================= --}}

<style>

:root {
    --kp-maroon: #7a1f2b;
    --kp-maroon-dark: #5c1620;
    --kp-green: #0b5e3c;
    --kp-green-dark: #073f28;
    --kp-amber: #c9922a;
    --kp-amber-dark: #a8781e;
    --ink: #22282b;
    --muted: #6b7580;
}

.dashboard-container * {
    font-family: 'Inter', sans-serif;
}

.dashboard-container {
    padding-bottom: 40px;
}


/* =========================================================
   HEADER
========================================================= */

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-eyebrow {
    display: block;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--kp-maroon);
    margin-bottom: .2rem;
}

.dashboard-header h3 {
    color: var(--ink);
}

.dashboard-header h3 .bi {
    color: var(--kp-green);
    margin-right: .3rem;
}


/* =========================================================
   LINKS
========================================================= */

.dashboard-link {
    text-decoration: none;
    color: inherit;
    display: block;
}


/* =========================================================
   MAIN STAT CARDS
========================================================= */

.stat-card {
    height: 110px;
    border-radius: 14px;
    padding: 20px;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 10px 22px -8px rgba(0,0,0,.25);
    transition: transform .25s ease, box-shadow .25s ease;
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 26px -8px rgba(0,0,0,.3);
}

.stat-card h6 {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    opacity: .85;
    margin-bottom: 6px;
}

.stat-card h2 {
    font-weight: 800;
    margin: 0;
}

.stat-card i {
    font-size: 40px;
    opacity: .55;
}

.stat-card-primary {
    background: linear-gradient(135deg, var(--kp-maroon) 0%, var(--kp-maroon-dark) 100%);
}

.stat-card-success {
    background: linear-gradient(135deg, var(--kp-green) 0%, var(--kp-green-dark) 100%);
}

.stat-card-warning {
    background: linear-gradient(135deg, var(--kp-amber) 0%, var(--kp-amber-dark) 100%);
}

.stat-card-neutral {
    background: #fff;
    color: var(--ink);
    border: 1px solid #e7e2df;
}

.stat-card-neutral h6 {
    color: var(--muted);
    opacity: 1;
}

.stat-card-neutral i {
    color: var(--kp-green);
    opacity: .8;
}


/* =========================================================
   BREAKDOWN
========================================================= */

.breakdown-card {
    background: #fff;
    border-radius: 10px;
    border: 1px solid #eef0f2;
    padding: 18px;
    text-align: center;
    box-shadow: 0 3px 10px rgba(0,0,0,.06);
    transition: transform .2s ease, box-shadow .2s ease;
}

.breakdown-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,.1);
}

.breakdown-card-static {
    cursor: default;
}

.breakdown-card span {
    display: block;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.breakdown-card strong {
    display: block;
    font-size: 28px;
    font-weight: 800;
    color: var(--kp-green);
    margin-top: 6px;
}


/* =========================================================
   DEADLINE — single-row responsive strip
========================================================= */

.deadline-strip {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 10px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: var(--kp-green) #eef0f2;
}

.deadline-strip::-webkit-scrollbar {
    height: 7px;
}

.deadline-strip::-webkit-scrollbar-track {
    background: #eef0f2;
    border-radius: 10px;
}

.deadline-strip::-webkit-scrollbar-thumb {
    background: var(--kp-green);
    border-radius: 10px;
}

.deadline-card {
    flex: 0 0 auto;
    scroll-snap-align: start;
    width: 108px;
    background: #fff;
    border-radius: 10px;
    padding: 14px 10px;
    text-align: center;
    box-shadow: 0 3px 10px rgba(0,0,0,.06);
    border: 1px solid #eef0f2;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    text-decoration: none;
    display: block;
}

.deadline-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,.12);
    border-color: var(--kp-green);
}

.deadline-days {
    font-size: 24px;
    font-weight: 800;
    color: var(--kp-green);
}

.deadline-text {
    font-size: 11.5px;
    color: var(--muted);
    font-weight: 500;
}

.deadline-count {
    font-size: 22px;
    font-weight: 800;
    color: var(--ink);
    margin-top: 4px;
}

.overdue-card {
    width: 168px;
    background: linear-gradient(135deg, var(--kp-maroon) 0%, var(--kp-maroon-dark) 100%);
    color: #fff;
    border: none;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}

.overdue-card .bi {
    font-size: 22px;
    margin-bottom: 4px;
}

.overdue-card .deadline-text,
.overdue-card .deadline-count {
    color: #fff;
}

.overdue-label {
    font-size: 11px;
    opacity: .85;
}

.overdue-card .deadline-count {
    font-size: 24px;
    margin-top: 6px;
}

.scroll-hint {
    font-size: .72rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .4px;
}


/* =========================================================
   SECTION HEADING
========================================================= */

.section-heading {
    border-bottom: 2px solid #eef0f2;
    margin: 20px 0 15px;
    padding-bottom: 10px;
    position: relative;
}

.section-heading::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 54px;
    height: 2px;
    background: var(--kp-maroon);
}

.section-heading h5 {
    margin: 0;
    font-weight: 700;
    color: var(--ink);
    font-size: .98rem;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.section-heading h5 .bi {
    color: var(--kp-green);
    margin-right: .35rem;
}


/* =========================================================
   CATEGORY
========================================================= */

.category-card {
    background: #fff;
    border-radius: 10px;
    border: 1px solid #eef0f2;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,.06);
    transition: transform .2s ease, box-shadow .2s ease;
}

.category-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 22px rgba(0,0,0,.12);
}

.category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.category-header h5 {
    margin: 0;
    color: var(--kp-green-dark);
    font-weight: 700;
    font-size: 1rem;
}

.category-header h5 .bi {
    color: var(--kp-maroon);
    margin-right: .3rem;
}

.category-total {
    font-size: 28px;
    font-weight: 800;
    color: var(--ink);
}

.category-card .progress {
    height: 8px;
    border-radius: 20px;
    background-color: #eef0f2;
}

.category-card .progress-bar {
    background: linear-gradient(90deg, var(--kp-green), var(--kp-green-dark));
}

.category-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    font-size: 13px;
    color: var(--muted);
}


/* =========================================================
   GENERAL CARD
========================================================= */

.dashboard-card {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #eef0f2;
    box-shadow: 0 4px 14px rgba(0,0,0,.06);
    overflow: hidden;
}

.card-header-custom {
    padding: 14px 20px;
    border-bottom: 1px solid #eef0f2;
    font-weight: 700;
    font-size: .9rem;
    color: var(--ink);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-header-custom .bi {
    color: var(--kp-green);
    margin-right: .3rem;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 768px) {

    .dashboard-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .stat-card {
        height: 105px;
    }

    .stat-card h2 {
        font-size: 27px;
    }

    .deadline-card {
        width: 92px;
    }

    .overdue-card {
        width: 150px;
    }

}

</style>