@extends('layouts.app')

<style>
    body {
        font-family: 'Inter', 'Roboto', sans-serif;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        min-height: 100vh;
    }

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

    .dashboard-main {
        display: grid;
        grid-template-columns: 1fr 350px;
        gap: 20px;
        margin-bottom: 25px;
        margin-top: 50px; /* Added this to replace the header's margin-bottom */
    }

    .metrics-container {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
    }

    .metric-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 8px;
    padding: 10px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    min-height: 85px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    transition: all 0.3s ease;
    }

    .metric-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 5px;
        background: linear-gradient(90deg, var(--card-color), var(--card-color-light));
        border-radius: 8px 8px 0 0;
    }

    .metric-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    }

    .metric-card.status-black {
        --card-color: #2c3e50;
        --card-color-light: #34495e;
    }

    .metric-card.status-orange {
        --card-color: #f39c12;
        --card-color-light: #e67e22;
    }

    .metric-card.status-red {
        --card-color: #e74c3c;
        --card-color-light: #c0392b;
    }

    .metric-card.status-green {
        --card-color: #27ae60;
        --card-color-light: #2ecc71;
    }

    .metric-card.status-blue {
        --card-color: #3498db;
        --card-color-light: #2980b9;
    }

    .card-title {
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0px;
    }

    .metric-value {
    font-size: 36px;
    font-weight: 700;
    color: var(--card-color);
    line-height: 1;
    margin-bottom: 4px;
    }

    .chart-card {
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        border: none;
        border-radius: 12px;
        padding: 20px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        height: fit-content;
    }

    .chart-card .card-title {
        font-size: 18px;
        font-weight: 700;
        color: #1e293b;
        margin-bottom: 20px;
        text-transform: none;
        letter-spacing: 0;
    }

    #donut-chart {
        width: 100%;
        height: 250px;
    }

    .metric-link {
        text-decoration: none;
        color: inherit;
        display: block;
        height: 100%;
        width: 100%;
    }

    .metric-link:hover {
        color: inherit;
        text-decoration: none;
    }

    .summary-stats {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 15px;
    }

    .stat-card {
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        border-radius: 12px;
        padding: 15px;
        text-align: center;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    }

    .stat-card .stat-number {
        font-size: 24px;
        font-weight: 700;
        color: #1e293b;
    }

    .stat-card .stat-label {
        font-size: 12px;
        color: #64748b;
        font-weight: 500;
        margin-top: 5px;
    }

    /* Responsive Design */
    @media (max-width: 1200px) {
        .dashboard-main {
            grid-template-columns: 1fr;
        }
        
        .metrics-container {
            grid-template-columns: repeat(4, 1fr);
            margin-bottom: 20px;
        }
        
        .chart-card {
            max-width: 400px;
            margin: 0 auto;
        }
    }

    @media (max-width: 768px) {
        .pcoded-main-container {
            padding: 15px;
        }
        
        .metrics-container {
            grid-template-columns: repeat(2, 1fr);
            gap: 6px;
        }
        
        .summary-stats {
            grid-template-columns: repeat(2, 1fr);
        }
        
        .metric-card {
            min-height: 70px;
            padding: 10px 6px;
            gap: 6px;
        }

        .card-title {
            font-size: 12px;
        }

        .metric-value {
            font-size: 28px;
        }
    }

    @media (max-width: 480px) {
        .metrics-container {
            grid-template-columns: repeat(2, 1fr);
            gap: 5px;
        }
        
        .summary-stats {
            grid-template-columns: 1fr;
        }
        
        .metric-card {
            min-height: 65px;
            padding: 8px 4px;
            gap: 4px;
        }
        
        .metric-value {
            font-size: 24px;
        }
        
        .card-title {
            font-size: 11px;
        }
    }
</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">
                        <!-- Main Dashboard Layout -->
                        <div class="dashboard-main">
                            <!-- Metrics Grid -->
                            <div class="metrics-container">
                                <!-- Request Form -->
                                <div class="metric-card status-black">
                                    <a href="{{ route('pending') }}" class="metric-link">
                                        <div class="card-title">Request Form</div>
                                        <div class="metric-value">7</div>
                                    </a>
                                </div>

                                 <!-- Rejected -->
                                <div class="metric-card status-red">
                                    <a href="{{ route('rejected') }}" class="metric-link">
                                        <div class="card-title">Rejected</div>
                                        <div class="metric-value">4</div>
                                    </a>
                                </div>

                                <!-- Pending Record -->
                                <div class="metric-card status-orange">
                                    <a href="{{ route('accepted') }}" class="metric-link">
                                        <div class="card-title">In Progress</div>
                                        <div class="metric-value">5</div>
                                    </a>
                                </div>

                                <!-- Pending Payment -->
                                <div class="metric-card status-orange">
                                    <a href="{{ route('pendingpayment') }}" class="metric-link">
                                        <div class="card-title">Pending Payment</div>
                                        <div class="metric-value">2</div>
                                    </a>
                                </div>

                                <!-- Overdue -->
                                <div class="metric-card status-red">
                                    <a href="{{ route('overdue') }}" class="metric-link">
                                        <div class="card-title">Overdue</div>
                                        <div class="metric-value">6</div>
                                    </a>
                                </div>

                                <!-- Pickup -->
                                <div class="metric-card status-blue">
                                    <a href="{{ route('pickup') }}" class="metric-link">
                                        <div class="card-title">Pickup</div>
                                        <div class="metric-value">3</div>
                                    </a>
                                </div>

                                <!-- Delivery -->
                                <div class="metric-card status-blue">
                                    <a href="{{ route('delivery') }}" class="metric-link">
                                        <div class="card-title">Delivery</div>
                                        <div class="metric-value">4</div>
                                    </a>
                                </div>

                                

                               

                                <!-- Completed -->
                                <div class="metric-card status-green">
                                    <a href="{{ route('completed') }}" class="metric-link">
                                        <div class="card-title">Completed</div>
                                        <div class="metric-value">10</div>
                                    </a>
                                </div>
                            </div>

                            <!-- Chart Card -->
                            <div class="chart-card">
                                <div class="card-title">Report Status Overview</div>
                                <div id="donut-chart"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- ApexCharts JS -->
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        var options = {
            chart: {
                type: 'donut',
                height: 250,
                fontFamily: 'Inter, Roboto, sans-serif'
            },
            series: [10, 7, 7, 10],
            labels: ['Completed', 'Pending', 'Request Forms', 'Rejected/Overdue'],
            colors: ['#27ae60', '#f39c12', '#2c3e50', '#e74c3c'],
            legend: {
                position: 'bottom',
                fontSize: '13px',
                fontWeight: 500,
                offsetY: 5
            },
            dataLabels: {
                enabled: true,
                style: {
                    fontSize: '12px',
                    fontWeight: 'bold',
                    colors: ['#fff']
                },
                dropShadow: {
                    enabled: true,
                    top: 1,
                    left: 1,
                    blur: 1,
                    opacity: 0.8
                }
            },
            plotOptions: {
                pie: {
                    donut: {
                        size: '70%',
                        labels: {
                            show: true,
                            total: {
                                show: true,
                                label: 'Total',
                                fontSize: '14px',
                                fontWeight: 600,
                                color: '#64748b'
                            },
                            value: {
                                show: true,
                                fontSize: '24px',
                                fontWeight: 700,
                                color: '#1e293b'
                            }
                        }
                    }
                }
            },
            responsive: [{
                breakpoint: 480,
                options: {
                    chart: {
                        height: 250
                    },
                    legend: {
                        fontSize: '11px'
                    }
                }
            }]
        };

        var chart = new ApexCharts(document.querySelector("#donut-chart"), options);
        chart.render();
    });
</script>
@endsection