@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])

    <div class="container-fluid py-4 min-vh-100 d-flex flex-column">

        {{-- Filter Section --}}
        <div class="row mb-4">
            <div class="col-12">
                <div class="card p-4">
                    <div
                        class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center flex-wrap gap-2">
                        <h5 class="mb-0 fw-bold">Dashboard</h5>
                        <form method="GET" class="w-100 w-md-auto">
                            <div
                                class="d-flex flex-column flex-md-row justify-content-end align-items-start align-items-md-center gap-2 w-100">
                                {{-- Filter Role --}}
                                        @php
                                            $role = DB::table('users')
                                                ->where('username', Session('username'))
                                                ->value('idroles');
                                            $isAdmin = ($role === 'admins' || $role === 'admhrd');
                                        @endphp

                                        {{-- button add --}}
                                        @if ($isAdmin)
                                            <div class="w-100 w-md-auto">
                                                <select name="filter_role" class="form-select" onchange="this.form.submit()">
                                                    <option value="">-- Pilih Role --</option>
                                                    <option value="kurir" {{ request('filter_role') == 'kurir' ? 'selected' : '' }}>Kurir
                                                    </option>
                                                    <option value="driver" {{ request('filter_role') == 'driver' ? 'selected' : '' }}>Driver
                                                    </option>
                                                </select>
                                            </div>
                                        @endif
                                {{-- Filter Waktu --}}
                                <div class="w-100 w-md-auto">
                                    <select name="filter" class="form-select" onchange="this.form.submit()">
                                        <option value="">-- Filter Waktu --</option>
                                        <option value="today" {{ request('filter') == 'today' ? 'selected' : '' }}>Today</option>
                                        <option value="this_week" {{ request('filter') == 'this_week' ? 'selected' : '' }}>This
                                            Week</option>
                                        <option value="this_month" {{ request('filter') == 'this_month' ? 'selected' : '' }}>This
                                            Month</option>
                                        <option value="this_year" {{ request('filter') == 'this_year' ? 'selected' : '' }}>This
                                            Year</option>
                                    </select>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        {{-- Tugas Summary --}}
        <div class="row g-3">
            <div class="col-6 col-md-3">
                <div class="card text-center p-3 shadow-sm hoverable">
                    <h6 class="text-muted fw-semibold fs-6 mb-1">Tugas Planning</h6>
                    <h3 class="text-dark fw-bold">{{ $tugasPlanning }}</h3>
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="card text-center p-3 shadow-sm hoverable">
                    <h6 class="text-muted fw-semibold fs-6 mb-1">Tugas In Progress</h6>
                    <h3 class="text-dark fw-bold">{{ $tugasInProgress }}</h3>
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="card text-center p-3 shadow-sm hoverable">
                    <h6 class="text-muted fw-semibold fs-6 mb-1">Tugas Selesai</h6>
                    <h3 class="text-dark fw-bold">{{ $tugasSelesai }}</h3>
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="card text-center p-3 shadow-sm hoverable">
                    <h6 class="text-muted fw-semibold fs-6 mb-1">Total Tugas</h6>
                    <h3 class="text-dark fw-bold">{{ $totalTugas }}</h3>
                </div>
            </div>
        </div>


        
<div class="row align-items-start mt-4">
{{-- Diagram Pie --}}
<div class="col-12 col-md-6 mb-4 d-flex">
    <div class="card p-4 shadow-sm w-100 h-100" id="pie-card">
                    <h6 class="fw-semibold mb-3">Diagram Tugas</h6>
                    <div class="chart-container">
                        <canvas id="pieChart" class="chart-size"></canvas>
                    </div>
                </div>
            </div>

            {{-- Data Tugas Kurir/Driver --}}
            {{-- Data Tugas Kurir/Driver --}}
@php
    $role = DB::table('users')
        ->where('username', Session('username'))
        ->value('idroles');
@endphp
<div class="col-12 col-md-6 mb-4 d-flex">
    <div class="card p-4 shadow-sm w-100 h-100" id="side-card">
        <h6 class="fw-semibold mb-3">Data Tugas</h6>

        {{-- Tabs hanya untuk admin --}}
        @if ($role === 'admins' || $role === 'admhrd')
            <ul class="nav nav-tabs mb-3" role="tablist">
                @if ($kurir->count() > 0)
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#kurir" type="button"
                            role="tab">Kurir</button>
                    </li>
                @endif
                @if ($driver->count() > 0)
                    <li class="nav-item" role="presentation">
                        <button class="nav-link {{ $kurir->count() == 0 ? 'active' : '' }}" data-bs-toggle="tab" data-bs-target="#driver" type="button"
                            role="tab">Driver</button>
                    </li>
                @endif
            </ul>
        @endif

        <div class="tab-content">
            {{-- Kurir Tab --}}
            @if (($role === 'kurir' && $kurir->count() > 0) || ($role === 'admins' && $kurir->count() > 0) || ($role === 'admhrd' && $kurir->count() > 0))
                <div class="tab-pane fade show active"
                    id="kurir" role="tabpanel">
                    <div class="table-responsive mt-3">
                        <table class="table table-hover table-sm text-center align-middle">
                            <thead class="thead-light" style="background-color: #00b7bd4f;">
                                <tr>
                                    <th>Nama</th>
                                    <th>Tanggal</th>
                                    <th>Status Tugas</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($kurir as $item)
                                    @if ($item->isactive == 1)
                                        <tr>
                                            <td>{{ $item->nama }}</td>
                                            <td>{{ \Carbon\Carbon::parse($item->tanggal)->format('d-m-Y') }}</td>
                                            <td>
                                                @php
                                                    $status = strtolower($item->status);
                                                    $badgeClass = match ($status) {
                                                        'planning' => 'text-dark',
                                                        'in progress', 'complete' => 'text-white',
                                                        default => 'text-white',
                                                    };
                                                    $bgColor = match ($status) {
                                                        'planning' => '#ffc107',
                                                        'in progress' => '#fd7e14',
                                                        'complete' => '#28a745',
                                                        default => '#6c757d',
                                                    };
                                                @endphp
                                                <span class="badge {{ $badgeClass }}" style="background-color: {{ $bgColor }}">{{ strtoupper($item->status) }}</span>
                                            </td>
                                        </tr>
                                    @endif
                                @endforeach
                            </tbody>
                        </table>
                        {{ $kurir->withQueryString()->fragment('kurir')->links('pagination::bootstrap-5') }}
                    </div>
                </div>
            @endif

            {{-- Driver Tab --}}
            @if (($role === 'driver' && $driver->count() > 0) || ($role === 'admins' || $role === 'admhrd' && $driver->count() > 0))
                <div class="tab-pane fade {{ $role === 'driver' || ($role === 'admhrd' && $kurir->count() == 0) || ($role === 'admins' && $kurir->count() == 0) ? 'show active' : '' }}"
                    id="driver" role="tabpanel">
                    <div class="table-responsive mt-3">
                        <table class="table table-hover table-sm text-center align-middle">
                            <thead class="thead-light" style="background-color: #00b7bd4f;">
                                <tr>
                                    <th>Nama</th>
                                    <th>Tanggal</th>
                                    <th>Status Tugas</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($driver as $item)
                                    @if ($item->isactive == 1)
                                        <tr>
                                            <td>{{ $item->nama }}</td>
                                            <td>{{ \Carbon\Carbon::parse($item->tanggal)->format('d-m-Y') }}</td>
                                            <td>
                                                @php
                                                    $status = strtolower($item->status);
                                                    $badgeClass = match ($status) {
                                                        'planning' => 'text-dark',
                                                        'in progress', 'complete' => 'text-white',
                                                        default => 'text-white',
                                                    };
                                                    $bgColor = match ($status) {
                                                        'planning' => '#ffc107',
                                                        'in progress' => '#fd7e14',
                                                        'complete' => '#28a745',
                                                        default => '#6c757d',
                                                    };
                                                @endphp
                                                <span class="badge {{ $badgeClass }}" style="background-color: {{ $bgColor }}">{{ strtoupper($item->status) }}</span>
                                            </td>
                                        </tr>
                                    @endif
                                @endforeach
                            </tbody>
                        </table>
                        {{ $driver->withQueryString()->fragment('driver')->links('pagination::bootstrap-5') }}
                    </div>
                </div>
            @endif
        </div>
    </div>
</div>

@endsection

@push('css')
<style>
    .card.hoverable:hover {
        transform: scale(1.02);
        transition: all 0.2s ease-in-out;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    }

    .chart-container {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
    }

    .chart-size {
        max-width: 300px;
        max-height: 300px;
        width: 100% !important;
        height: auto !important;
    }

    .table-hover tbody tr:hover {
        background-color: #ffffff !important;
    }

    .min-vh-100 {
        min-height: 100vh;
    }

    #pie-card {
        display: flex;
        flex-direction: column;
        height: 450px;
    }

    #pie-card .chart-container {
        flex-grow: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #side-card table {
        margin-bottom: 0;
        border-collapse: collapse;
    }

    #side-card .table-responsive {
        overflow-y: auto;
    }

    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table-responsive table {
        white-space: nowrap;
    }

    @media (max-width: 767.98px) {
        .chart-size {
            max-width: 250px;
        }

        .form-select {
            width: 100% !important;
        }
    }
</style>
@endpush


@push('js')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
document.addEventListener("DOMContentLoaded", function () {
    const canvas = document.getElementById('pieChart');
    if (!canvas) return;

    const ctx = canvas.getContext('2d');

    if (window.pieChartInstance) {
        window.pieChartInstance.destroy();
    }

    window.pieChartInstance = new Chart(ctx, {
        type: 'doughnut',
        data: {
            labels: ['Complete', 'Planning', 'In Progress'],
            datasets: [{
                data: [{{ $tugasSelesai }}, {{ $tugasPlanning }}, {{ $tugasInProgress }}],
                backgroundColor: ['#28a745', '#ffc107', '#fd7e14']
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false
        }
    });
});
</script>

<script>
document.addEventListener("DOMContentLoaded", function () {
    const hash = window.location.hash;
    if (hash) {
        const tabTrigger = document.querySelector(a[data-bs-toggle="tab"][href="${hash}"]);
        if (tabTrigger) {
            new bootstrap.Tab(tabTrigger).show();
        }
    }
});
</script>
@endpush