@extends('layouts.app')
<style>
    body {
        font-family: 'Roboto', sans-serif;
    }

    .pcoded-main-container {
        padding: 20px;
    }

    .card {
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        margin-bottom: 20px;
    }

    .card-body {
        padding: 20px;
    }

    .card-title {
        font-size: 18px;
        font-weight: 600;
    }

    .card .icon {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 40px;
        width: 40px;
        border-radius: 50%;
        font-size: 20px;
        color: #fff;
    }

    .icon-box-success {
        background-color: #28a745;
    }

    .icon-box-danger {
        background-color: #dc3545;
    }

    .icon-box-warning {
        background-color: #ffc107;
    }

    .icon-item {
        font-size: 20px;
    }

    .text-muted {
        color: #6c757d;
    }

   /* Enhanced custom table styles with better spacing and appearance */
    .table-bordered-custom {
        border: 1px solid #dee2e6;
        table-layout: fixed;
        width: 100%;
        border-collapse: collapse;
        font-size: 14px;
        line-height: 1.5;
    }

    .table-bordered-custom th,
    .table-bordered-custom td {
        border: 1px solid #dee2e6;
        padding: 16px 12px; /* Increased padding for better spacing */
        vertical-align: middle; /* Changed to middle for better alignment */
        word-wrap: break-word;
        word-break: break-word;
        overflow-wrap: break-word;
        text-align: left;
    }

    .table-bordered-custom thead th {
        background-color: #f8f9fa;
        font-weight: 600;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #495057;
        border-bottom: 2px solid #dee2e6;
        height: 50px; /* Fixed header height */
    }

    .table-bordered-custom tbody tr {
        background-color: #ffffff;
        min-height: 60px; /* Minimum row height */
    }

    .table-bordered-custom tbody tr:nth-child(even) {
        background-color: #f8f9fa;
    }

    .table-bordered-custom tbody tr:hover {
        background-color: #e9ecef;
        transition: background-color 0.2s ease;
    }

    .table-bordered-custom tbody td {
        height: 60px; /* Fixed row height for consistency */
        font-size: 14px;
        color: #495057;
    }

    /* Specific column styling with better proportions */
    .table-bordered-custom td:nth-child(1), 
    .table-bordered-custom th:nth-child(1) { /* No. column */
        text-align: center;
        width: 6%;
        font-weight: 600;
    }

    .table-bordered-custom td:nth-child(2), 
    .table-bordered-custom th:nth-child(2) { /* Tajuk column */
        width: 45%;
        white-space: normal;
        line-height: 1.4;
    }

    .table-bordered-custom td:nth-child(3), 
    .table-bordered-custom th:nth-child(3) { /* Pemohon column */
        width: 25%;
        white-space: normal;
        line-height: 1.4;
    }

    .table-bordered-custom td:nth-child(4), 
    .table-bordered-custom th:nth-child(4) { /* Tarikh column */
        width: 14%;
        white-space: nowrap;
        text-align: center;
    }

    .table-bordered-custom td:nth-child(5), 
    .table-bordered-custom th:nth-child(5) { /* Masa Respons column */
        width: 10%;
        text-align: center;
    }

    /* Response status text colors */
    .response-fast {
        color: #28a745;
        font-weight: 600;
    }

    .response-medium {
        color: #fd7e14;
        font-weight: 600;
    }

    .response-slow {
        color: #dc3545;
        font-weight: 600;
    }

    .response-pending {
        color: #6c757d;
        font-weight: 500;
        font-style: italic;
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
        .table-bordered-custom {
            font-size: 12px;
        }
        
        .table-bordered-custom th,
        .table-bordered-custom td {
            padding: 12px 8px;
        }
        
        .table-bordered-custom td:nth-child(2) { /* Tajuk column */
            width: 40%;
        }
        
        .table-bordered-custom td:nth-child(3) { /* Pemohon column */
            width: 30%;
        }
        
        .response-fast,
        .response-medium,
        .response-slow,
        .response-pending {
            font-size: 12px;
        }
    }

    /* Remove nowrap for specific table cells */
    #dom-table {
        table-layout: fixed;
        width: 100%;
        border-collapse: collapse;
    }

    #dom-table th,
    #dom-table td {
        white-space: normal !important;
        word-break: break-word;
        overflow-wrap: break-word;
        padding: 8px;
        vertical-align: top;
        font-size: 14px;
        max-width: 200px;
    }

    /* Optional: specify column widths */
    #dom-table th:nth-child(1),
    #dom-table td:nth-child(1) {
        width: 5%;
    }
    #dom-table th:nth-child(2),
    #dom-table td:nth-child(2) {
        width: 20%;
    }
    #dom-table th:nth-child(3),
    #dom-table td:nth-child(3) {
        width: 20%;
    }
    #dom-table th:nth-child(4),
    #dom-table td:nth-child(4) {
        width: 10%;
    }
    #dom-table th:nth-child(5),
    #dom-table td:nth-child(5) {
        width: 10%;
    }
    #dom-table th:nth-child(6),
    #dom-table td:nth-child(6) {
        width: 10%;
    }

</style>

@section('content')
<section class="pcoded-main-container">
    <div class="pcoded-wrapper">
        <div class="pcoded-content">
            <div class="pcoded-inner-content">
                <div class="main-body">
                    <div class="page-wrapper">
                        <!-- Page Header -->
                        <div class="page-header">
                            <div class="page-block">
                                <div class="row align-items-center">
                                    <div class="col-md-12">
                                        <div class="page-header-title">
                                            <h5 class="m-b-10">JKR Hulu Langat</h5>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Permohonan & Aduan Cards -->
                        <div class="row">
                            <div class="col-xl-6 col-sm-6 grid-margin stretch-card">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="d-flex align-items-center justify-content-between">
                                            <h3 class="mb-0">{{ $totalSurat }} Surat Permohonan</h3>
                                            <a href="{{ route('kelulusan.index', ['type' => 'surat']) }}" title="Lihat permohonan baru">
                                                <span class="badge badge-pill badge-danger">
                                                    <i class="fas fa-bell text-warning mr-2"></i>{{ $surat }}
                                                </span>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-6 col-sm-6 grid-margin stretch-card">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="d-flex align-items-center justify-content-between">
                                            <h3 class="mb-0">{{ $totalAduan }} Aduan</h3>
                                            <a href="{{ route('kelulusan.index', ['type' => 'projek']) }}" title="Lihat permohonan baru">
                                                <span class="badge badge-pill badge-danger">
                                                    <i class="fas fa-bell text-warning mr-2"></i>{{ $aduan }}
                                                </span>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Charts FIRST -->
                        <div class="row">
                            <div class="col-md-6 grid-margin stretch-card">
                                <div class="card">
                                    <div class="card-body">
                                        <h4 class="card-title mb-0">Surat Permohonan & Aduan</h4>
                                        <div class="d-flex justify-content-center mt-4">
                                            <div id="donut-chart" style="max-width: 400px; width: 100%; height: 400px;"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 grid-margin stretch-card">
                                <div class="card">
                                    <div class="card-body">
                                        <h4 class="card-title mb-0">Masa Respons Aplikasi</h4>
                                        <div class="d-flex justify-content-center mt-4">
                                            <div id="response-time-chart" style="max-width: 400px; width: 100%; height: 400px;"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Response Time Summary Cards -->
                        <div class="row">
                            <div class="col-xl-4 col-md-6 grid-margin stretch-card">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="d-flex align-items-center justify-content-between">
                                            <div>
                                                <h3 class="mb-0 text-success">{{ $responseTimeData['fastResponseCount'] ?? '0' }}</h3>
                                                <h6 class="text-muted font-weight-normal">Respons Pantas</h6>
                                                <small class="text-muted">≤ 10 hari</small>
                                            </div>
                                            <div class="icon icon-box-success">
                                                <i class="fas fa-tachometer-alt icon-item"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-4 col-md-6 grid-margin stretch-card">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="d-flex align-items-center justify-content-between">
                                            <div>
                                                <h3 class="mb-0 text-warning">{{ $responseTimeData['mediumResponseCount'] ?? '0' }}</h3>
                                                <h6 class="text-muted font-weight-normal">Respons Sederhana</h6>
                                                <small class="text-muted">11-14 hari</small>
                                            </div>
                                            <div class="icon icon-box-warning">
                                                <i class="fas fa-hourglass-half icon-item"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-4 col-md-6 grid-margin stretch-card">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="d-flex align-items-center justify-content-between">
                                            <div>
                                                <h3 class="mb-0 text-danger">{{ $responseTimeData['slowResponseCount'] ?? '0' }}</h3>
                                                <h6 class="text-muted font-weight-normal">Respons Lambat</h6>
                                                <small class="text-muted">> 14 hari</small>
                                            </div>
                                            <div class="icon icon-box-danger">
                                                <i class="fas fa-exclamation-triangle icon-item"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Recent Applications Table -->
                        <!-- <div class="row">
                            <div class="col-md-12 grid-margin stretch-card">
                                <div class="card">
                                    <div class="card-body">
                                        <h4 class="card-title mb-4">Aplikasi Terkini & Masa Respons</h4>
                                        <table id="dom-table" class="table table-bordered-custom">
                                            <thead>
                                                <tr>
                                                    <th>No.</th>
                                                    <th>No. Surat</th>
                                                    <th>Jenis Surat</th>
                                                    <th>Pegawai Bertugas</th>
                                                    <th>Tarikh Terima</th>
                                                    <th>Tempoh Masa</th>
                                                    <th>Status</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @php $counter = 1 @endphp
                                                @forelse($recentApplications ?? [] as $application)
                                                    @php
                                                        $tempoh = $application->tempoh_masa ?? 0;
                                                        $rowClass = '';
                                                        if (!is_null($application->tempoh_masa)) {
                                                            if ($application->tempoh_masa <= 10) {
                                                                $rowClass = 'table-success';
                                                            } elseif ($application->tempoh_masa >= 11 && $application->tempoh_masa <= 14) {
                                                                $rowClass = 'table-warning';
                                                            } else {
                                                                $rowClass = 'table-danger';
                                                            }
                                                        }
                                                    @endphp
                                                    <tr class="{{ $rowClass }}">
                                                        <td>{{ $counter++ }}</td>
                                                        <td>{{ $application->no_siri_rujukan }}</td>
                                                        <td>{{ $application->type }}</td>
                                                        <td>{{ $application->assignedUser->name ?? 'Tiada' }}</td>
                                                        <td>{{ $application->tarikh_permohonan ? \Carbon\Carbon::parse($application->tarikh_permohonan)->format('d/m/Y') : 'N/A' }}</td>
                                                        <td>{{ $application->tempoh_masa ?? 0 }} hari</td>
                                                        <td>{{ config('optionHandler.status.' . $application->status, 'Tiada Tindakan') }}</td>
                                                    </tr>
                                                @empty
                                                    <tr>
                                                        <td colspan="7" class="text-center">Tiada aplikasi terkini</td>
                                                    </tr>
                                                @endforelse
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div> -->

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

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        var combinedData = [{{ $totalSurat ?? 0 }}, {{ $totalAduan ?? 0 }}];
        var donutOptions = {
            chart: { type: 'donut', height: 400, width: '100%' },
            series: combinedData,
            labels: ['Surat Permohonan', 'Aduan'],
            colors: ['#BC8F8F', '#C70039'],
            legend: { position: 'bottom' }
        };
        var donutChart = new ApexCharts(document.querySelector("#donut-chart"), donutOptions);
        donutChart.render();

        var responseTimeData = [{{ $responseTimeData['fastResponseCount'] ?? 0 }}, {{ $responseTimeData['mediumResponseCount'] ?? 0 }}, {{ $responseTimeData['slowResponseCount'] ?? 0 }}];
        var responseTimeOptions = {
            chart: { type: 'donut', height: 400, width: '100%' },
            series: responseTimeData,
            labels: ['Pantas (≤10 hari)', 'Sederhana (4-7 hari)', 'Lambat (>14 hari)'],
            colors: ['#28a745', '#ffc107', '#dc3545'],
            legend: { position: 'bottom' },
            plotOptions: {
                pie: {
                    donut: {
                        labels: {
                            show: true,
                            total: {
                                show: true,
                                label: 'Total',
                                formatter: function (w) {
                                    return w.globals.seriesTotals.reduce((a, b) => a + b, 0) + " aplikasi";
                                }
                            }
                        }
                    }
                }
            }
        };
        var responseTimeChart = new ApexCharts(document.querySelector("#response-time-chart"), responseTimeOptions);
        responseTimeChart.render();
    });
</script>
@endsection