@extends('layouts.admin')

@section('content')
<style>
    .admin-header {
        background: linear-gradient(90deg, #9c27b0 0%, #e91e63 50%, #f44336 100%);
        color: white;
        padding: 30px;
        border-radius: 15px;
        margin-top: 20px;
        margin-bottom: 30px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    }
    .admin-header h1 {
        font-weight: 700;
        font-size: 2.2rem;
        margin-bottom: 5px;
        display: flex;
        align-items: center;
    }
    .admin-header h1 i {
        font-size: 1.8rem;
        margin-right: 15px;
    }
    .admin-header p {
        font-size: 1.1rem;
        opacity: 0.9;
        margin-bottom: 5px;
    }
    .admin-header .date-text {
        font-size: 0.9rem;
        opacity: 0.8;
    }

    /* Metric Cards */
    .metric-card {
        border-radius: 15px;
        border: 1px solid rgba(0,0,0,0.05);
        padding: 20px;
        height: 100%;
        transition: transform 0.3s ease;
    }
    .metric-card:hover {
        transform: translateY(-5px);
    }
    .metric-card .card-top {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 20px;
    }
    .metric-card .card-label {
        color: #616161;
        font-weight: 600;
        font-size: 0.95rem;
    }
    .metric-card .card-icon {
        width: 35px;
        height: 35px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .metric-card .card-value {
        font-size: 1.8rem;
        font-weight: 800;
        margin-bottom: 5px;
    }
    .metric-card .card-subtext {
        font-size: 0.85rem;
        color: #757575;
    }

    /* Theme variations */
    .metric-purple { background-color: #fdf5ff; border-left: 5px solid #9c27b0; }
    .metric-purple .card-icon { background-color: #f3e5f5; color: #9c27b0; }
    .metric-purple .card-value { color: #7b1fa2; }

    .metric-green { background-color: #f5fdf7; border-left: 5px solid #4caf50; }
    .metric-green .card-icon { background-color: #e8f5e9; color: #4caf50; }
    .metric-green .card-value { color: #2e7d32; }

    .metric-blue { background-color: #f5faff; border-left: 5px solid #2196f3; }
    .metric-blue .card-icon { background-color: #e3f2fd; color: #2196f3; }
    .metric-blue .card-value { color: #1565c0; }

    .metric-orange { background-color: #fffaf5; border-left: 5px solid #ff9800; }
    .metric-orange .card-icon { background-color: #fff3e0; color: #ff9800; }
    .metric-orange .card-value { color: #ef6c00; }

    /* Chart Cards */
    .chart-card {
        border-radius: 15px;
        border: none;
        box-shadow: 0 4px 12px rgba(0,0,0,0.05);
        margin-bottom: 30px;
    }
    .chart-card .card-header {
        background: transparent;
        border-bottom: 1px solid #f0f0f0;
        padding: 20px;
    }
    .chart-card .card-title {
        font-weight: 700;
        color: #4a4a4a;
        font-size: 1.1rem;
    }
</style>

<div class="container-fluid px-4">
    <!-- Header Admin -->
    <div class="admin-header shadow">
        <h1><i class="fas fa-chart-bar"></i> Dashboard Admin</h1>
        <p>Monitoring seluruh cabang Warkop Cak Imin</p>
        <div class="date-text">{{ \Carbon\Carbon::now()->translatedFormat('l, d F Y') }}</div>
    </div>

    <!-- Metrics Section -->
    <div class="row mb-4">
        <div class="col-lg-3 col-md-6 col-sm-12 mb-4">
            <div class="metric-card metric-purple bg-white shadow-sm">
                <div class="card-top">
                    <span class="card-label">Total Omzet Semua Cabang</span>
                    <div class="card-icon"><i class="fas fa-dollar-sign"></i></div>
                </div>
                <div class="card-value">Rp {{ number_format($totalOmzetAll, 0, ',', '.') }}</div>
                <div class="card-subtext">Hari ini</div>
            </div>
        </div>
        <div class="col-lg-3 col-md-6 col-sm-12 mb-4">
            <div class="metric-card metric-green bg-white shadow-sm">
                <div class="card-top">
                    <span class="card-label">Total Laba Bersih</span>
                    <div class="card-icon"><i class="fas fa-bolt"></i></div>
                </div>
                <div class="card-value">Rp {{ number_format($netProfit, 0, ',', '.') }}</div>
                <div class="card-subtext">Hari ini</div>
            </div>
        </div>
        <div class="col-lg-3 col-md-6 col-sm-12 mb-4">
            <div class="metric-card metric-blue bg-white shadow-sm">
                <div class="card-top">
                    <span class="card-label">Jumlah Cabang</span>
                    <div class="card-icon"><i class="fas fa-warehouse"></i></div>
                </div>
                <div class="card-value">{{ $branchCount }}</div>
                <div class="card-subtext">Cabang aktif</div>
            </div>
        </div>
        <div class="col-lg-3 col-md-6 col-sm-12 mb-4">
            <div class="metric-card metric-orange bg-white shadow-sm">
                <div class="card-top">
                    <span class="card-label">Rata-rata per Cabang</span>
                    <div class="card-icon"><i class="fas fa-chart-line"></i></div>
                </div>
                <div class="card-value">Rp {{ number_format($averageSales, 0, ',', '.') }}</div>
                <div class="card-subtext">Hari ini</div>
            </div>
        </div>
    </div>

    <!-- Charts Section -->
    <div class="row">
        <!-- Weekly Sales Line Chart -->
        <div class="col-lg-7 mb-4">
            <div class="card chart-card bg-white">
                <div class="card-header border-0">
                    <h3 class="card-title">Grafik Penjualan Mingguan</h3>
                </div>
                <div class="card-body">
                    <div class="chart">
                        <canvas id="weeklySalesChart" style="min-height: 350px; height: 350px; max-height: 350px; max-width: 100%;"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <!-- Profit per Branch Bar Chart -->
        <div class="col-lg-5 mb-4">
            <div class="card chart-card bg-white">
                <div class="card-header border-0">
                    <h3 class="card-title">Omzet per Cabang</h3>
                </div>
                <div class="card-body">
                    <div class="chart">
                        <canvas id="branchProfitChart" style="min-height: 350px; height: 350px; max-height: 350px; max-width: 100%;"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Quick Access Section (Matching standard admin style) -->
    <div class="card shadow-sm border-0 mb-4" style="border-radius: 15px;">
        <div class="card-header bg-white py-3 border-0">
            <h5 class="mb-0 font-weight-bold">Akses Cepat Monitoring</h5>
        </div>
        <div class="card-body pt-0 px-4 pb-4">
             <div class="d-flex flex-wrap">

                <a href="/laporan/pembelian" class="btn btn-outline-info m-1 px-4 py-2" style="border-radius: 10px;"><i class="fas fa-shopping-cart mr-2"></i> Laporan Pembelian</a>
                <a href="/laporan/penjualan" class="btn btn-outline-success m-1 px-4 py-2" style="border-radius: 10px;"><i class="fas fa-cash-register mr-2"></i> Laporan Penjualan</a>
                <!-- Tombol Manajemen Akun dihapus -->
             </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Line Chart: Weekly Sales
        var lineCtx = document.getElementById('weeklySalesChart').getContext('2d');
        var lineChart = new Chart(lineCtx, {
            type: 'line',
            data: {
                labels: @json($weeklyLabels),
                datasets: [
                    {
                        label: 'Cabang 1',
                        borderColor: '#9c27b0',
                        pointBackgroundColor: '#9c27b0',
                        fill: false,
                        data: @json($branch1Data),
                        borderWidth: 3,
                        tension: 0.2
                    },
                    {
                        label: 'Cabang 2',
                        borderColor: '#e91e63',
                        pointBackgroundColor: '#e91e63',
                        fill: false,
                        data: @json($branch2Data),
                        borderWidth: 3,
                        tension: 0.2
                    },
                    {
                        label: 'Cabang 3',
                        borderColor: '#ff9800',
                        pointBackgroundColor: '#ff9800',
                        fill: false,
                        data: @json($branch3Data),
                        borderWidth: 3,
                        tension: 0.2
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                legend: { position: 'bottom', labels: { usePointStyle: true, padding: 20 } },
                scales: {
                    yAxes: [{ gridLines: { color: "#f3f3f3", borderDash: [2, 5] }, ticks: { beginAtZero: true } }],
                    xAxes: [{ gridLines: { display: false } }]
                }
            }
        });

        // Bar Chart: Omzet per Branch
        var barCtx = document.getElementById('branchProfitChart').getContext('2d');
        var barChart = new Chart(barCtx, {
            type: 'bar',
            data: {
                labels: ['Cabang 1', 'Cabang 2', 'Cabang 3'],
                datasets: [
                    {
                        label: 'omzet',
                        backgroundColor: '#e91e63',
                        data: @json($branchOmzet)
                    },
                    {
                        label: 'laba',
                        backgroundColor: '#10b981',
                        data: @json($branchProfit)
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                legend: { position: 'bottom', labels: { usePointStyle: true, padding: 20 } },
                scales: {
                    yAxes: [{ gridLines: { color: "#f3f3f3", borderDash: [2, 5] }, ticks: { beginAtZero: true } }],
                    xAxes: [{ gridLines: { display: false } }]
                }
            }
        });
    });
</script>
@endsection