@extends('layouts.main')

@section('content')
    @if (!Auth::user()->hasRole(['penilai', 'surveyor', 'pemohon-ao', 'pemohon-eo']))
        <div class="grid gap-6 mx-auto w-full">
            <!-- Header Section -->
            <div class="flex flex-wrap gap-5 justify-between items-center pb-8 lg:items-end">
                <div class="flex flex-col gap-3 justify-center">
                    <h1 class="text-2xl font-bold leading-none text-gray-800">
                        Dashboard
                    </h1>
                    <div class="flex gap-2 items-center text-sm font-medium text-gray-600">
                        <i class="ki-filled ki-clipboard"></i>
                        Selamat datang, <span class="font-semibold text-primary">{{ auth()->user()->name }}</span>
                    </div>
                </div>
                <div class="flex items-center gap-3 w-[30%]">
                    <div class="flex gap-2 items-center w-full">
                        <input type="date" class="input" name="start_date" id="start_date">
                        <input type="date" class="input" name="end_date" id="end_date">
                    </div>
                    <button class="btn btn-primary" id="filter" type="button" onclick="filterDashboard()">
                        <i class="ki-outline ki-filter fs-2 me-1"></i>
                        Filter</button>
                </div>
            </div>

            <!-- Stats Cards -->
            <div class="grid grid-cols-1 gap-6 md:grid-cols-2">

                @foreach ($dashboard['count_resume'] as $status => $count)
                    @php

                        $gradientFrom = $status === 'batal' ? 'from-red-50' : 'from-amber-50';
                        $gradientTo = $status === 'batal' ? 'to-red-100' : 'to-amber-100';
                        $borderColor = $status === 'batal' ? 'border-red-200' : 'border-amber-200';
                        $iconBg = $status === 'batal' ? 'bg-red-500' : 'bg-amber-500';
                        $iconColor = $status === 'batal' ? 'text-red-500' : 'text-amber-500';
                        $textColor = $status === 'batal' ? 'text-red-800' : 'text-amber-800';
                        $cardTitle = $status === 'batal' ? 'Batal dari Cabang' : 'Menunggu Keputusan Cabang';
                    @endphp

                    <div class="card bg-gradient-to-br {{ $gradientFrom }} {{ $gradientTo }} {{ $borderColor }}">
                        <div class="card-header border-b {{ $borderColor }}">
                            <div class="flex gap-3 items-center">
                                <div class="w-10 h-10 {{ $iconBg }} rounded-lg flex items-center justify-center">
                                    <i
                                        class="ki-filled {{ $status === 'batal' ? 'ki-cross-circle text-white' : 'ki-time text-white' }}"></i>
                                </div>
                                <h3 class="card-title {{ $textColor }} font-semibold">{{ $cardTitle }}</h3>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
                                <div
                                    class="bg-white rounded-xl p-4 shadow-sm border {{ $borderColor }} hover:shadow-md transition-shadow">
                                    <div class="flex justify-between items-center">
                                        <div>
                                            <h4 class="mb-1 text-sm font-semibold text-gray-700">Jabodetabek</h4>
                                            <span
                                                class="text-2xl font-bold {{ $status === 'batal' ? 'text-red-600' : 'text-amber-600' }}">
                                                {{ $count['jabodetabek']['count_report'] ?? 0 }}
                                            </span>
                                        </div>
                                        <div
                                            class="w-8 h-8 {{ $gradientFrom }} rounded-full flex items-center justify-center">
                                            <i class="ki-filled {{ $iconColor }}"></i>
                                        </div>
                                    </div>
                                </div>
                                <div
                                    class="bg-white rounded-xl p-4 shadow-sm border {{ $borderColor }} hover:shadow-md transition-shadow">
                                    <div class="flex justify-between items-center">
                                        <div>
                                            <h4 class="mb-1 text-sm font-semibold text-gray-700">Luar Jabodetabek</h4>
                                            <span
                                                class="text-2xl font-bold {{ $status === 'batal' ? 'text-red-600' : 'text-amber-600' }}">
                                                {{ $count['non-jabodetabek']['count_report'] ?? 0 }}
                                            </span>
                                        </div>
                                        <div
                                            class="w-8 h-8 {{ $gradientFrom }} rounded-full flex items-center justify-center">
                                            <i class="ki-filled {{ $iconColor }}"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach

            </div>
            <!-- Chart Section -->
            <div class="card">
                <div class="border-b border-blue-200 card-header">
                    <div class="flex justify-between items-center">
                        <div class="flex gap-3 items-center">
                            <div class="flex justify-center items-center w-10 h-10 bg-blue-500 rounded-lg">
                                <i class="text-white ki-filled ki-chart-simple-2"></i>
                            </div>
                            <h3 class="text-lg font-semibold text-blue-800">Pendapatan Appraisal</h3>
                        </div>

                    </div>
                </div>
                <div class="card-body">
                    <div class="p-4 bg-white rounded-xl shadow-sm">
                        <table class="table w-full table-auto">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th
                                        class="px-4 py-3 text-xs font-semibold tracking-wider text-left text-gray-700 uppercase border-r border-gray-200">
                                        Bulan
                                    </th>
                                    <th
                                        class="px-4 py-3 text-xs font-semibold tracking-wider text-center text-gray-700 uppercase border-r border-gray-200">
                                        Jumlah
                                    </th>
                                    <th
                                        class="px-4 py-3 text-xs font-semibold tracking-wider text-center text-gray-700 uppercase">
                                        Akumulasi
                                    </th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200">
                                @foreach ($dashboard['count_pendapatan'] as $month => $data)
                                    <tr class="transition-colors hover:bg-gray-50">
                                        <!-- Kolom Nama month -->
                                        <td class="px-4 py-3 text-sm font-medium text-gray-900 border-r border-gray-200">
                                            {{ ucfirst($month) }}
                                        </td>

                                        <!-- Kolom Total Laporan -->
                                        <td class="px-4 py-3 text-sm text-center text-gray-700 border-r border-gray-200">
                                            {{ $data['total_jumlah'] ?? '-' }}
                                        </td>

                                        <!-- Kolom Total Debitur -->
                                        <td class="px-4 py-3 text-sm text-center text-gray-700 border-r border-gray-200">
                                            {{ $data['total_akumulasi'] ?? '-' }}
                                        </td>
                                    </tr>
                                @endforeach
                                <!-- Add more rows as needed -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- Tables Section -->
            <div class="flex gap-6 w-full">
                <!-- Laporan Internal -->
                <div class="card w-[60%] ">
                    <div class="border-b border-green-200 card-header">
                        <div class="flex gap-3 items-center">
                            <div class="flex justify-center items-center w-10 h-10 bg-green-500 rounded-lg">
                                <i class="text-white ki-filled ki-document"></i>
                            </div>
                            <h3 class="text-lg font-semibold text-green-800">Laporan Internal</h3>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="overflow-hidden bg-white rounded-xl shadow-sm">
                            <table class="table w-full table-auto">
                                <thead class="bg-gray-50">
                                    <tr>
                                        <th rowspan="2"
                                            class="px-4 py-3 text-xs font-semibold tracking-wider text-left text-gray-700 uppercase border-r border-gray-200">
                                            Bulan
                                        </th>
                                        <th colspan="2"
                                            class="px-4 py-3 text-xs font-semibold tracking-wider text-center text-gray-700 uppercase border-r border-gray-200">
                                            Jabodetabek
                                        </th>
                                        <th colspan="2"
                                            class="px-4 py-3 text-xs font-semibold tracking-wider text-center text-gray-700 uppercase">
                                            Luar Jabodetabek
                                        </th>
                                    </tr>
                                    <tr class="border-t border-gray-200">
                                        <th
                                            class="px-4 py-3 text-xs font-semibold tracking-wider text-center text-gray-700 uppercase border-r border-gray-200">
                                            Laporan
                                        </th>
                                        <th
                                            class="px-4 py-3 text-xs font-semibold tracking-wider text-center text-gray-700 uppercase border-r border-gray-200">
                                            Debitur
                                        </th>
                                        <th
                                            class="px-4 py-3 text-xs font-semibold tracking-wider text-center text-gray-700 uppercase border-r border-gray-200">
                                            Laporan
                                        </th>
                                        <th
                                            class="px-4 py-3 text-xs font-semibold tracking-wider text-center text-gray-700 uppercase">
                                            Debitur
                                        </th>
                                    </tr>
                                </thead>
                                <tbody class="bg-white divide-y divide-gray-200">
                                    @foreach ($dashboard['count_lpj_internal'] as $month => $regions)
                                        <tr class="transition-colors hover:bg-gray-50">
                                            <td class="px-4 py-2 text-sm font-medium text-gray-900">
                                                {{ ucfirst($month) }}
                                            </td>
                                            <td class="px-4 py-2 text-sm text-center text-gray-700">
                                                {{ $regions['jabodetabek']['total_laporan'] ?? '-' }}
                                            </td>
                                            <td class="px-4 py-2 text-sm text-center text-gray-700">
                                                {{ $regions['jabodetabek']['total_debiture'] ?? '-' }}
                                            </td>
                                            <td class="px-4 py-2 text-sm text-center text-gray-700">
                                                {{ $regions['non-jabodetabek']['total_laporan'] ?? '-' }}
                                            </td>
                                            <td class="px-4 py-2 text-sm text-center text-gray-700">
                                                {{ $regions['non-jabodetabek']['total_debiture'] ?? '-' }}
                                            </td>
                                        </tr>
                                    @endforeach
                                    <!-- Add more rows as needed -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- Laporan Eksternal -->
                <div class="card  w-[40%]">
                    <div class="border-b border-purple-200 card-header">
                        <div class="flex gap-3 items-center">
                            <div class="flex justify-center items-center w-10 h-10 bg-purple-500 rounded-lg">
                                <i class="text-white ki-filled ki-tab-tablet"></i>
                            </div>
                            <h3 class="text-lg font-semibold text-purple-800">Laporan Eksternal</h3>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="overflow-hidden bg-white rounded-xl shadow-sm">
                            <table class="table w-full table-auto">
                                <thead class="bg-gray-50">
                                    <tr>
                                        <th
                                            class="px-4 py-3 text-xs font-semibold tracking-wider text-left text-gray-700 uppercase border-r border-gray-200">
                                            Bulan
                                        </th>
                                        <th
                                            class="px-4 py-3 text-xs font-semibold tracking-wider text-center text-gray-700 uppercase border-r border-gray-200">
                                            Laporan
                                        </th>
                                        <th
                                            class="px-4 py-3 text-xs font-semibold tracking-wider text-center text-gray-700 uppercase">
                                            Debitur
                                        </th>
                                    </tr>
                                </thead>
                                <tbody class="bg-white divide-y divide-gray-200">
                                    @foreach ($dashboard['count_lpj_eksternal'] as $month => $data)
                                        <tr class="transition-colors hover:bg-gray-50">
                                            <!-- Kolom Nama month -->
                                            <td
                                                class="px-4 py-3 text-sm font-medium text-gray-900 border-r border-gray-200">
                                                {{ ucfirst($month) }}
                                            </td>

                                            <!-- Kolom Total Laporan -->
                                            <td
                                                class="px-4 py-3 text-sm text-center text-gray-700 border-r border-gray-200">
                                                {{ $data['total_laporan'] ?? '-' }}
                                            </td>

                                            <!-- Kolom Total Debitur -->
                                            <td
                                                class="px-4 py-3 text-sm text-center text-gray-700 border-r border-gray-200">
                                                {{ $data['total_debiture'] ?? '-' }}
                                            </td>
                                        </tr>
                                    @endforeach
                                    <!-- Add more rows as needed -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Chart.js CDN -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>

        <script>
            function filterDashboard() {
                const start_date = document.getElementById('start_date').value;
                const end_date = document.getElementById('end_date').value;
                window.location.href = `?start_date=${start_date}&end_date=${end_date}`;
            }
        </script>
        <!-- Chart initialization script -->
    @endif
@endsection