@extends('layouts.app')

@section('title', 'Dashboard')

@section('breadcrumb')
    <span>Dashboard</span>
@endsection

@section('content')

{{-- Page Header --}}
<div class="pf-page-header mb-4">
    <div>
        <h1 class="pf-page-title mb-1">
            Selamat Datang, {{ auth()->user()->name ?? 'Admin' }} 👋
        </h1>
        <p class="pf-page-subtitle text-muted">
            {{ \Carbon\Carbon::now('Asia/Jakarta')->isoFormat('dddd, D MMMM Y') }} — Ringkasan operasional PrintFlow ERP
        </p>
    </div>
    <div class="d-flex gap-2 align-items-center">
        <select class="form-select form-select-sm shadow-sm" id="dashPeriod" style="width:160px">
            <option value="today">Hari Ini</option>
            <option value="week" selected>Minggu Ini</option>
            <option value="month">Bulan Ini</option>
            <option value="year">Tahun Ini</option>
        </select>
        <button class="btn btn-primary btn-sm" onclick="refreshDashboard()">
            <i class="bi bi-arrow-clockwise"></i> Refresh
        </button>
    </div>
</div>

{{-- STAT CARDS --}}
<div class="row g-3 mb-4">
    @php
    $stats_data = [
        ['icon' => 'bi-cart-check-fill', 'label' => 'Total Sales Order', 'value' => $stats['total_so'] ?? 148, 'change' => '+12%', 'color' => '#1B4FD8', 'bg' => '#EEF3FF'],
        ['icon' => 'bi-cash-stack', 'label' => 'Omset Bulan Ini', 'value' => 'Rp ' . number_format($stats['omset'] ?? 248500000, 0, ',', '.'), 'change' => '+8.4%', 'color' => '#059669', 'bg' => '#D1FAE5'],
        ['icon' => 'bi-kanban-fill', 'label' => 'Job Order Aktif', 'value' => $stats['job_aktif'] ?? 24, 'change' => $stats['jo_selesai_hari_ini'] ?? 6 . ' selesai', 'color' => '#D97706', 'bg' => '#FEF3C7'],
        ['icon' => 'bi-exclamation-triangle-fill', 'label' => 'Stok Hampir Habis', 'value' => $stats['stok_kritis'] ?? 7, 'change' => 'Perlu reorder', 'color' => '#DC2626', 'bg' => '#FEE2E2'],
    ];
    @endphp

    @foreach($stats_data as $stat)
    <div class="col-12 col-sm-6 col-xl-3">
        <div class="pf-stat-card shadow-sm" style="--pf-stat-color:{{ $stat['color'] }};--pf-stat-bg:{{ $stat['bg'] }}">
            <div class="pf-stat-icon"><i class="bi {{ $stat['icon'] }}"></i></div>
            <div class="pf-stat-body">
                <div class="pf-stat-label">{{ $stat['label'] }}</div>
                <div class="pf-stat-value" style="font-weight:700">{{ $stat['value'] }}</div>
                <div class="pf-stat-change {{ strpos($stat['change'], '-') ? 'down' : 'up' }}">
                    <i class="bi {{ strpos($stat['change'], '-') ? 'bi-arrow-down-short' : 'bi-arrow-up-short' }}"></i>
                    <span>{{ $stat['change'] }}</span>
                </div>
            </div>
        </div>
    </div>
    @endforeach
</div>

{{-- CHARTS ROW --}}
<div class="row g-3 mb-4">
    <div class="col-12 col-xl-8">
        <div class="pf-card shadow-sm h-100">
            <div class="pf-card-header border-bottom">
                <h6 class="pf-card-title mb-0">
                    <i class="bi bi-bar-chart-fill me-2"></i>Omset & Laba Bulanan
                </h6>
                <button class="btn btn-sm btn-outline-secondary" onclick="exportChart('chartOmset')">
                    <i class="bi bi-download me-1"></i>Export
                </button>
            </div>
            <div class="pf-card-body">
                <div id="chartOmset" style="height:280px"></div>
            </div>
        </div>
    </div>

    <div class="col-12 col-xl-4">
        <div class="pf-card shadow-sm h-100">
            <div class="pf-card-header border-bottom">
                <h6 class="pf-card-title mb-0">
                    <i class="bi bi-pie-chart-fill me-2"></i>Komposisi Produk
                </h6>
            </div>
            <div class="pf-card-body">
                <div id="chartProduk" style="height:280px"></div>
            </div>
        </div>
    </div>
</div>

{{-- PRODUCTION & TREND ROW --}}
<div class="row g-3 mb-4">
    <div class="col-12 col-md-6 col-xl-4">
        <div class="pf-card shadow-sm h-100">
            <div class="pf-card-header border-bottom">
                <h6 class="pf-card-title mb-0">
                    <i class="bi bi-activity me-2"></i>Status Produksi Live
                </h6>
                <span class="badge bg-success" style="font-size:10px">
                    <span class="spinner-grow spinner-grow-sm me-1"></span>Live
                </span>
            </div>
            <div class="pf-card-body p-0">
                <div class="list-group list-group-flush">
                    @php
                    $produksiStatus = [
                        ['icon'=>'bi-file-earmark-text','label'=>'Antrian Prepress','val'=>8,'color'=>'#6B7280','bg'=>'#F3F4F6'],
                        ['icon'=>'bi-printer-fill','label'=>'Sedang Cetak','val'=>5,'color'=>'#1D4ED8','bg'=>'#DBEAFE'],
                        ['icon'=>'bi-scissors','label'=>'Finishing','val'=>6,'color'=>'#D97706','bg'=>'#FEF3C7'],
                        ['icon'=>'bi-check2-circle','label'=>'QC Checking','val'=>3,'color'=>'#7C3AED','bg'=>'#EDE9FE'],
                        ['icon'=>'bi-box-seam-fill','label'=>'Siap Kirim','val'=>4,'color'=>'#059669','bg'=>'#D1FAE5'],
                    ];
                    @endphp
                    @foreach($produksiStatus as $p)
                    <div class="list-group-item d-flex align-items-center gap-3 py-3 px-4" style="border:none;border-bottom:1px solid var(--pf-border)">
                        <div style="width:40px;height:40px;border-radius:8px;background:{{ $p['bg'] }};color:{{ $p['color'] }};display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0">
                            <i class="{{ $p['icon'] }}"></i>
                        </div>
                        <span style="flex:1;font-size:13px;font-weight:500">{{ $p['label'] }}</span>
                        <span style="font-family:var(--pf-font-mono);font-weight:700;font-size:16px;color:{{ $p['color'] }}">{{ $p['val'] }}</span>
                    </div>
                    @endforeach
                </div>
            </div>
            <div class="pf-card-footer">
                <a href="{{ route('produksi.monitoring') }}" class="text-decoration-none small fw-500">
                    Lihat monitoring <i class="bi bi-arrow-right ms-1"></i>
                </a>
            </div>
        </div>
    </div>

    <div class="col-12 col-md-6 col-xl-4">
        <div class="pf-card shadow-sm h-100">
            <div class="pf-card-header border-bottom">
                <h6 class="pf-card-title mb-0">
                    <i class="bi bi-graph-up-arrow me-2"></i>Trend Order 7 Hari
                </h6>
            </div>
            <div class="pf-card-body">
                <div id="chartTrendOrder" style="height:260px"></div>
            </div>
        </div>
    </div>

    <div class="col-12 col-xl-4">
        <div class="pf-card shadow-sm h-100">
            <div class="pf-card-header border-bottom">
                <h6 class="pf-card-title mb-0">
                    <i class="bi bi-trophy-fill me-2"></i>Top 5 Pelanggan
                </h6>
                <small class="text-muted">Bulan ini</small>
            </div>
            <div class="pf-card-body">
                @php
                $topPelanggan = [
                    ['nama'=>'PT. Maju Bersama','omset'=>'48.500.000','pct'=>92,'color'=>'#1B4FD8'],
                    ['nama'=>'CV. Sinar Grafika','omset'=>'36.200.000','pct'=>69,'color'=>'#059669'],
                    ['nama'=>'PT. Indo Kencana','omset'=>'28.750.000','pct'=>55,'color'=>'#D97706'],
                    ['nama'=>'Toko Offset Jaya','omset'=>'22.100.000','pct'=>42,'color'=>'#7C3AED'],
                    ['nama'=>'UD. Percetakan Mas','omset'=>'17.800.000','pct'=>34,'color'=>'#DC2626'],
                ];
                @endphp
                @foreach($topPelanggan as $idx => $p)
                <div class="mb-3">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <div style="font-size:13px;font-weight:600">
                            <span class="text-muted me-2">#{{ $idx + 1 }}</span>{{ $p['nama'] }}
                        </div>
                        <small class="text-muted font-mono">Rp {{ $p['omset'] }}</small>
                    </div>
                    <div style="height:6px;background:var(--pf-border);border-radius:3px;overflow:hidden">
                        <div style="width:{{ $p['pct'] }}%;height:100%;background:{{ $p['color'] }};transition:width .6s ease"></div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>
</div>

{{-- RECENT ORDERS TABLE --}}
<div class="row g-3">
    <div class="col-12">
        <div class="pf-card shadow-sm">
            <div class="pf-card-header border-bottom">
                <h6 class="pf-card-title mb-0">
                    <i class="bi bi-table me-2"></i>Sales Order Terbaru
                </h6>
                <div class="d-flex gap-2">
                    <a href="{{ route('sales-orders.create') }}" class="btn btn-primary btn-sm">
                        <i class="bi bi-plus-lg me-1"></i>SO Baru
                    </a>
                    <a href="{{ route('sales-orders.index') }}" class="btn btn-outline-secondary btn-sm">
                        Lihat Semua
                    </a>
                </div>
            </div>
            <div class="pf-card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover mb-0" id="tblRecentSO">
                        <thead class="table-light">
                            <tr>
                                <th style="font-weight:600">No. Order</th>
                                <th style="font-weight:600">Pelanggan</th>
                                <th style="font-weight:600">Produk</th>
                                <th style="font-weight:600">Total</th>
                                <th style="font-weight:600">Tgl Order</th>
                                <th style="font-weight:600">Deadline</th>
                                <th style="font-weight:600">Status</th>
                                <th style="font-weight:600" class="text-center">Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php
                            $recentOrders = [
                                ['no'=>'SO-2406-0148','cust'=>'PT. Maju Bersama','produk'=>'Brosur A4 Full Color','total'=>'3.250.000','tgl'=>'19 Jun 2024','deadline'=>'25 Jun 2024','status'=>'proses'],
                                ['no'=>'SO-2406-0147','cust'=>'CV. Sinar Grafika','produk'=>'Kalender Meja 2025','total'=>'12.800.000','tgl'=>'18 Jun 2024','deadline'=>'30 Jun 2024','status'=>'selesai'],
                                ['no'=>'SO-2406-0146','cust'=>'PT. Indo Kencana','produk'=>'Kartu Nama Laminasi','total'=>'850.000','tgl'=>'18 Jun 2024','deadline'=>'22 Jun 2024','status'=>'kirim'],
                                ['no'=>'SO-2406-0145','cust'=>'Toko Offset Jaya','produk'=>'Spanduk Banner 3x1m','total'=>'2.100.000','tgl'=>'17 Jun 2024','deadline'=>'21 Jun 2024','status'=>'pending'],
                                ['no'=>'SO-2406-0144','cust'=>'UD. Percetakan Mas','produk'=>'Nota Bon 2ply NCR','total'=>'1.650.000','tgl'=>'17 Jun 2024','deadline'=>'24 Jun 2024','status'=>'draft'],
                            ];
                            @endphp
                            @foreach($recentOrders as $o)
                            <tr>
                                <td><a href="{{ route('sales-orders.show', $o['no']) }}" class="text-primary fw-600 text-decoration-none font-mono">{{ $o['no'] }}</a></td>
                                <td>{{ $o['cust'] }}</td>
                                <td>{{ $o['produk'] }}</td>
                                <td class="font-mono fw-500">Rp {{ $o['total'] }}</td>
                                <td>{{ $o['tgl'] }}</td>
                                <td>{{ $o['deadline'] }}</td>
                                <td><span class="pf-status pf-status-{{ $o['status'] }} badge">{{ ucfirst($o['status']) }}</span></td>
                                <td class="text-center">
                                    <div class="btn-group btn-group-sm" role="group">
                                        <a href="{{ route('sales-orders.show', $o['no']) }}" class="btn btn-outline-secondary" title="Detail"><i class="bi bi-eye"></i></a>
                                        <a href="{{ route('sales-orders.edit', $o['no']) }}" class="btn btn-outline-primary" title="Edit"><i class="bi bi-pencil"></i></a>
                                        <button class="btn btn-outline-danger" onclick="confirmDelete('{{ $o['no'] }}')" title="Hapus"><i class="bi bi-trash"></i></button>
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script src="https://code.highcharts.com/highcharts.js"></script>
<script>
Highcharts.setOptions({
    lang: {
        months: ['Januari','Februari','Maret','April','Mei','Juni','Juli','Agustus','September','Oktober','November','Desember'],
        shortMonths: ['Jan','Feb','Mar','Apr','Mei','Jun','Jul','Agu','Sep','Okt','Nov','Des'],
        weekdays: ['Minggu','Senin','Selasa','Rabu','Kamis','Jumat','Sabtu'],
        thousandsSep: '.',
        decimalPoint: ','
    }
});

const isDark = document.documentElement.getAttribute('data-bs-theme') === 'dark';
const pfChartTheme = {
    chart: { backgroundColor: 'transparent', style: { fontFamily: 'DM Sans, system-ui, sans-serif' } },
    title: { text: null },
    credits: { enabled: false },
    legend: { itemStyle: { color: isDark ? '#9CA3AF' : '#374151', fontWeight: '500', fontSize: '12px' } },
    xAxis: {
        lineColor: isDark ? '#374151' : '#E5E7EB',
        tickColor: 'transparent',
        labels: { style: { color: isDark ? '#9CA3AF' : '#6B7280', fontSize: '12px' } }
    },
    yAxis: {
        gridLineColor: isDark ? '#1F2937' : '#F3F4F6',
        labels: { style: { color: isDark ? '#9CA3AF' : '#6B7280', fontSize: '12px' } }
    }
};

Highcharts.chart('chartOmset', Highcharts.merge(pfChartTheme, {
    chart: { type: 'column' },
    xAxis: { categories: ['Jan','Feb','Mar','Apr','Mei','Jun','Jul','Agu','Sep','Okt','Nov','Des'], crosshair: true },
    yAxis: { title: { text: null }, labels: { formatter: function() { return 'Rp ' + Highcharts.numberFormat(this.value / 1e6, 0) + 'jt'; } } },
    plotOptions: { column: { borderRadius: 5, pointPadding: 0.1, groupPadding: 0.15 } },
    series: [
        { name: 'Omset', data: [180, 210, 195, 240, 225, 248, 235, 260, 278, 295, 310, 320].map(v => v * 1e6), color: '#1B4FD8' },
        { name: 'Laba Kotor', data: [45, 58, 51, 68, 62, 72, 65, 78, 82, 88, 95, 102].map(v => v * 1e6), color: '#059669' }
    ]
}));

Highcharts.chart('chartProduk', Highcharts.merge(pfChartTheme, {
    chart: { type: 'pie' },
    plotOptions: { pie: { innerSize: '55%', borderWidth: 0, dataLabels: { format: '{point.name}<br><b>{point.percentage:.1f}%</b>', style: { fontSize: '11px' } } } },
    series: [{
        colorByPoint: true,
        data: [
            { name: 'Brosur & Leaflet', y: 68500000, color: '#1B4FD8' },
            { name: 'Kalender', y: 52000000, color: '#059669' },
            { name: 'Kartu Nama', y: 28200000, color: '#D97706' },
            { name: 'Spanduk / Banner', y: 41800000, color: '#7C3AED' },
            { name: 'Buku & Majalah', y: 35000000, color: '#DC2626' },
            { name: 'Lainnya', y: 23000000, color: '#6B7280' }
        ]
    }]
}));

Highcharts.chart('chartTrendOrder', Highcharts.merge(pfChartTheme, {
    chart: { type: 'areaspline' },
    xAxis: { categories: ['Senin','Selasa','Rabu','Kamis','Jumat','Sabtu','Minggu'] },
    series: [
        { name: 'Order Masuk', data: [12, 18, 15, 22, 19, 8, 5], color: '#1B4FD8' },
        { name: 'Order Selesai', data: [10, 14, 13, 19, 17, 7, 3], color: '#059669' }
    ]
}));

function refreshDashboard() {
    Swal.fire({ title: 'Memuat ulang...', timer: 1200, timerProgressBar: true, showConfirmButton: false, didOpen: () => Swal.showLoading(), willClose: () => location.reload() });
}

function confirmDelete(id) {
    Swal.fire({ title: 'Hapus Sales Order?', html: `Order <b>${id}</b> akan dihapus permanen.`, icon: 'warning', showCancelButton: true, confirmButtonColor: '#DC2626', confirmButtonText: '<i class="bi bi-trash"></i> Hapus', cancelButtonText: 'Batal' }).then(result => {
        if (result.isConfirmed) Swal.fire({ icon: 'success', title: 'Dihapus!', timer: 1500, showConfirmButton: false });
    });
}
</script>
@endpush