@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;
    }
}
</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">{{ $totalProjek }} 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>{{ $projek }}
                                                </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 & Projek Baru</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">{{ $fastResponseCount ?? '0' }}</h3>
                                                <h6 class="text-muted font-weight-normal">Respons Pantas</h6>
                                                <small class="text-muted">≤ 3 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">{{ $mediumResponseCount ?? '0' }}</h3>
                                                <h6 class="text-muted font-weight-normal">Respons Sederhana</h6>
                                                <small class="text-muted">4-7 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">{{ $slowResponseCount ?? '0' }}</h3>
                                                <h6 class="text-muted font-weight-normal">Respons Lambat</h6>
                                                <small class="text-muted">> 7 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>
                                        <div class="table-responsive">
                                            <table class="table table-bordered-custom">
                                                <thead>
                                                    <tr>
                                                        <th>No.</th>
                                                        <th>Tajuk</th>
                                                        <th>Pemohon</th>
                                                        <th>Tarikh Permohonan</th>
                                                        <th>Masa Respons</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @php $counter = 1 @endphp
                                                    @forelse($recentApplications ?? [] as $application)
                                                    <tr>
                                                        <td>{{ $counter++ }}</td>
                                                        <td>{{ $application->tajuk }}</td>
                                                        <td>{{ $application->pemohon }}</td>
                                                        <td>{{ $application->tarikh_permohonan ? \Carbon\Carbon::parse($application->tarikh_permohonan)->format('d/m/Y') : 'N/A' }}</td>
                                                        <td>
                                                            @if($application->response_time)
                                                                <span class="@if($application->response_time <= 3) response-fast
                                                                    @elseif($application->response_time <= 7) response-medium
                                                                    @else response-slow
                                                                    @endif">
                                                                    {{ $application->response_time }} hari
                                                                </span>
                                                            @else
                                                                <span class="response-pending">Belum respon</span>
                                                            @endif
                                                        </td>
                                                    </tr>
                                                    @empty
                                                    <tr>
                                                        <td colspan="5" class="text-center">Tiada aplikasi terkini</td>
                                                    </tr>
                                                    @endforelse
                                                </tbody>
                                            </table>
                                        </div>
                                    </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 }}, {{ $totalProjek ?? 0 }}, {{ $approvedCount ?? 0 }}];
        var donutOptions = {
            chart: { type: 'donut', height: 400, width: '100%' },
            series: combinedData,
            labels: ['Surat Permohonan', 'Projek Baru', 'Projek Diluluskan'],
            colors: ['#28a745', '#dc3545', '#007bff'],
            legend: { position: 'bottom' }
        };
        var donutChart = new ApexCharts(document.querySelector("#donut-chart"), donutOptions);
        donutChart.render();

        var responseTimeData = [{{ $fastResponseCount ?? 0 }}, {{ $mediumResponseCount ?? 0 }}, {{ $slowResponseCount ?? 0 }}];
        var responseTimeOptions = {
            chart: { type: 'donut', height: 400, width: '100%' },
            series: responseTimeData,
            labels: ['Pantas (≤3 hari)', 'Sederhana (4-7 hari)', 'Lambat (>7 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