@extends('layouts.main')

@section('content')
    <div class="w-full grid gap-6 mx-auto">
        <!-- Header Section -->
        <div class="flex flex-wrap items-center lg:items-end justify-between gap-5 pb-8">
            <div class="flex flex-col justify-center gap-3">
                <h1 class="text-2xl font-bold leading-none text-gray-800">
                    Dashboard
                </h1>
                <div class="flex items-center gap-2 text-sm font-medium text-gray-600">
                    <i class="ki-filled ki-clipboard"></i>
                    Selamat datang, <span class="text-primary font-semibold">{{ auth()->user()->name }}</span>
                </div>
            </div>
            <div class="flex items-center gap-3 w-[30%]">
                <div class="flex items-center gap-2 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 md:grid-cols-2 gap-6">

            @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 items-center gap-3">
                            <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 md:grid-cols-2 gap-4">
                            <div
                                class="bg-white rounded-xl p-4 shadow-sm border {{ $borderColor }} hover:shadow-md transition-shadow">
                                <div class="flex items-center justify-between">
                                    <div>
                                        <h4 class="text-sm font-semibold text-gray-700 mb-1">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 items-center justify-between">
                                    <div>
                                        <h4 class="text-sm font-semibold text-gray-700 mb-1">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="card-header border-b border-blue-200">
                <div class="flex items-center justify-between">
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 bg-blue-500 rounded-lg flex items-center justify-center">
                            <i class="ki-filled ki-chart-simple-2 text-white"></i>
                        </div>
                        <h3 class="text-lg font-semibold text-blue-800">Pendapatan Appraisal</h3>
                    </div>

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

                                        <!-- Kolom Total Debitur -->
                                        <td class="px-4 py-3 text-sm text-gray-700 text-center 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 w-full gap-6">
            <!-- Laporan Internal -->
            <div class="card w-[60%] ">
                <div class="card-header border-b border-green-200">
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 bg-green-500 rounded-lg flex items-center justify-center">
                            <i class="ki-filled ki-document text-white"></i>
                        </div>
                        <h3 class="text-lg font-semibold text-green-800">Laporan Internal</h3>
                    </div>
                </div>
                <div class="card-body">
                    <div class="bg-white rounded-xl overflow-hidden shadow-sm">
                        <table class="table table-auto w-full">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th rowspan="2"
                                        class="px-4 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider border-r border-gray-200">
                                        Bulan
                                    </th>
                                    <th colspan="2"
                                        class="px-4 py-3 text-center text-xs font-semibold text-gray-700 uppercase tracking-wider border-r border-gray-200">
                                        Jabodetabek
                                    </th>
                                    <th colspan="2"
                                        class="px-4 py-3 text-center text-xs font-semibold text-gray-700 uppercase tracking-wider">
                                        Luar Jabodetabek
                                    </th>
                                </tr>
                                <tr class="border-t border-gray-200">
                                    <th
                                        class="px-4 py-3 text-center text-xs font-semibold text-gray-700 uppercase tracking-wider border-r border-gray-200">
                                        Laporan
                                    </th>
                                    <th
                                        class="px-4 py-3 text-center text-xs font-semibold text-gray-700 uppercase tracking-wider border-r border-gray-200">
                                        Debitur
                                    </th>
                                    <th
                                        class="px-4 py-3 text-center text-xs font-semibold text-gray-700 uppercase tracking-wider border-r border-gray-200">
                                        Laporan
                                    </th>
                                    <th
                                        class="px-4 py-3 text-center text-xs font-semibold text-gray-700 uppercase tracking-wider">
                                        Debitur
                                    </th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200">
                                @foreach ($dashboard['count_lpj_internal'] as $month => $regions)
                                    <tr class="hover:bg-gray-50 transition-colors">
                                        <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="card-header border-b border-purple-200">
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 bg-purple-500 rounded-lg flex items-center justify-center">
                            <i class="ki-filled ki-tab-tablet text-white"></i>
                        </div>
                        <h3 class="text-lg font-semibold text-purple-800">Laporan Eksternal</h3>
                    </div>
                </div>
                <div class="card-body">
                    <div class="bg-white rounded-xl overflow-hidden shadow-sm">
                        <table class="table table-auto w-full">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th
                                        class="px-4 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider border-r border-gray-200">
                                        Bulan
                                    </th>
                                    <th
                                        class="px-4 py-3 text-center text-xs font-semibold text-gray-700 uppercase tracking-wider border-r border-gray-200">
                                        Laporan
                                    </th>
                                    <th
                                        class="px-4 py-3 text-center text-xs font-semibold text-gray-700 uppercase tracking-wider">
                                        Debitur
                                    </th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200">
                                @foreach ($dashboard['count_lpj_eksternal'] as $month => $data)
                                    <tr class="hover:bg-gray-50 transition-colors">
                                        <!-- 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-gray-700 text-center border-r border-gray-200">
                                            {{ $data['total_laporan'] ?? '-' }}
                                        </td>

                                        <!-- Kolom Total Debitur -->
                                        <td class="px-4 py-3 text-sm text-gray-700 text-center 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 -->

@endsection