@extends('layouts.app')

@section('title', 'Dashboard Admin')
@section('page-title', 'Dashboard Admin')

@push('styles')
<style>
    /* ── CHART BARS ── */
    .chart-wrap {
        display: flex; align-items: flex-end; gap: 10px;
        height: 160px; padding: 0 4px; margin-bottom: 8px;
    }
    .bar-group { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
    .bar-pair  { display: flex; gap: 4px; align-items: flex-end; height: 130px; }
    .bar {
        width: 16px; border-radius: 4px 4px 0 0;
        transition: opacity .2s; min-height: 4px;
    }
    .bar:hover { opacity: .75; }
    .bar-lbl { font-size: 10px; color: var(--gray-500); }
    .chart-legend { display: flex; gap: 18px; margin-top: 10px; }
    .legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--gray-500); }
    .legend-dot  { width: 10px; height: 10px; border-radius: 3px; }

    /* ── DONUT ── */
    .donut-section { display: flex; flex-direction: column; align-items: center; }
    .donut-legend  { width: 100%; margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
    .dl-row { display: flex; align-items: center; gap: 8px; }
    .dl-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
    .dl-label { flex: 1; font-size: 12px; color: var(--gray-500); }
    .dl-val { font-size: 13px; font-weight: 700; color: var(--navy); }
    .dl-pct { font-size: 11px; color: var(--gray-500); min-width: 34px; text-align: right; }

    /* ── GRID LAYOUT ── */
    .mid-grid { display: grid; grid-template-columns: 1fr 300px; gap: 20px; margin-bottom: 20px; }
    .bot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

    /* ── ACTIVITY ── */
    .act-list { display: flex; flex-direction: column; }
    .act-item {
        display: flex; gap: 12px; padding: 11px 0;
        border-bottom: 1px solid var(--gray-100); align-items: flex-start;
    }
    .act-item:last-child { border-bottom: none; }
    .act-icon {
        width: 34px; height: 34px; border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        font-size: 14px; flex-shrink: 0;
    }
    .act-body { flex: 1; }
    .act-text { font-size: 12.5px; color: var(--navy); line-height: 1.45; }
    .act-text strong { font-weight: 700; }
    .act-time { font-size: 11px; color: var(--gray-500); margin-top: 2px; }

    .card-header-sub { font-size: 12px; color: var(--gray-500); margin-top: 2px; }
    .stat-trend {
        display: inline-flex; align-items: center; gap: 3px;
        font-size: 11px; font-weight: 700; margin-top: 5px;
        padding: 2px 7px; border-radius: 20px;
    }
    .trend-up   { background: rgba(56,161,105,.12); color: var(--success); }
    .trend-down { background: rgba(229,62,62,.10);  color: var(--danger); }
    .stat-value.rupiah { font-size: 17px; }
    .stat-icon.purple  { background: rgba(128,90,213,.12); color: #6b46c1; }
</style>
@endpush

@section('sidebar-menu')
    <div class="menu-label">Menu Utama</div>
    <a href="{{ route('admin.dashboard') }}" class="menu-item active">
        <i class="fa-solid fa-gauge-high"></i> Dashboard
    </a>
    <a href="{{ route('admin.mobil') }}" class="menu-item">
        <i class="fa-solid fa-car"></i> Kelola Mobil
    </a>
    <a href="{{ route('admin.penyewaan') }}" class="menu-item">
        <i class="fa-solid fa-clipboard-list"></i> Data Penyewaan
    </a>
    <div class="menu-label" style="margin-top:10px;">Akun</div>
    <a href="{{ route('profil') }}" class="menu-item">
        <i class="fa-solid fa-circle-user"></i> Profil Saya
    </a>
@endsection

@section('content')

{{-- ═══ STAT CARDS ═══ --}}
<div class="stats-grid" style="grid-template-columns: repeat(5,1fr); margin-bottom: 24px;">

    <div class="stat-card">
        <div class="stat-icon gold"><i class="fa-solid fa-car"></i></div>
        <div>
            <div class="stat-label">Total Unit Mobil</div>
            <div class="stat-value">{{ $totalMobil }}</div>
            <div class="stat-sub">unit di armada</div>
        </div>
    </div>

    <div class="stat-card">
        <div class="stat-icon blue"><i class="fa-solid fa-key"></i></div>
        <div>
            <div class="stat-label">Sedang Disewa</div>
            <div class="stat-value">{{ $totalDisewa }}</div>
            <div class="stat-sub">transaksi aktif</div>
        </div>
    </div>

    <div class="stat-card">
        <div class="stat-icon green"><i class="fa-solid fa-circle-check"></i></div>
        <div>
            <div class="stat-label">Selesai Bulan Ini</div>
            <div class="stat-value">{{ $totalSelesai }}</div>
            <div class="stat-sub">transaksi selesai</div>
        </div>
    </div>

    <div class="stat-card">
        <div class="stat-icon red"><i class="fa-solid fa-triangle-exclamation"></i></div>
        <div>
            <div class="stat-label">Ada Denda</div>
            <div class="stat-value">{{ $totalDenda }}</div>
            <div class="stat-sub">perlu tindak lanjut</div>
        </div>
    </div>

    <div class="stat-card">
        <div class="stat-icon purple"><i class="fa-solid fa-sack-dollar"></i></div>
        <div>
            <div class="stat-label">Pendapatan Bulan Ini</div>
            <div class="stat-value rupiah">Rp {{ number_format($pendapatanBulanIni, 0, ',', '.') }}</div>
            <div class="stat-sub">
                @if($trendPendapatan >= 0)
                    <span class="stat-trend trend-up">
                        <i class="fa-solid fa-arrow-trend-up"></i> +{{ $trendPendapatan }}% vs bln lalu
                    </span>
                @else
                    <span class="stat-trend trend-down">
                        <i class="fa-solid fa-arrow-trend-down"></i> {{ $trendPendapatan }}% vs bln lalu
                    </span>
                @endif
            </div>
        </div>
    </div>

</div>

{{-- ═══ MID: BAR CHART + DONUT ═══ --}}
<div class="mid-grid">

    {{-- Bar Chart Pendapatan 6 Bulan --}}
    <div class="card">
        <div class="card-header">
            <div>
                <div class="card-title">Pendapatan & Penyewaan</div>
                <div class="card-header-sub">Statistik 6 bulan terakhir</div>
            </div>
        </div>
        <div class="card-body" style="padding: 20px 24px;">
            @php
                $maxPendapatan = $chartBulanan->max('pendapatan') ?: 1;
                $maxSewa       = $chartBulanan->max('jumlah_sewa') ?: 1;
            @endphp
            <div class="chart-wrap">
                @foreach($chartBulanan as $bulan)
                    @php
                        $tinggiP = max(round(($bulan['pendapatan'] / $maxPendapatan) * 120), 4);
                        $tinggiS = max(round(($bulan['jumlah_sewa']  / $maxSewa)       * 120), 4);
                    @endphp
                    <div class="bar-group">
                        <div class="bar-pair">
                            <div class="bar" style="height:{{ $tinggiP }}px; background:#0f2044;"
                                 title="Rp {{ number_format($bulan['pendapatan'],0,',','.') }}"></div>
                            <div class="bar" style="height:{{ $tinggiS }}px; background:#f5a623;"
                                 title="{{ $bulan['jumlah_sewa'] }} sewa"></div>
                        </div>
                        <div class="bar-lbl">{{ $bulan['label'] }}</div>
                    </div>
                @endforeach
            </div>
            <div class="chart-legend">
                <div class="legend-item">
                    <div class="legend-dot" style="background:#0f2044;"></div> Pendapatan
                </div>
                <div class="legend-item">
                    <div class="legend-dot" style="background:#f5a623;"></div> Penyewaan
                </div>
            </div>
        </div>
    </div>

    {{-- Donut Status Armada --}}
    <div class="card">
        <div class="card-header">
            <div>
                <div class="card-title">Status Armada</div>
                <div class="card-header-sub">{{ $totalMobil }} unit total</div>
            </div>
        </div>
        <div class="card-body" style="padding: 16px 24px 20px;">
            @php
                $mobilDisewa    = $totalDisewa;
                $mobilPerawatan = $mobilKondisiPerawatan;
                $mobilTersedia  = max(0, $totalMobil - $mobilDisewa - $mobilPerawatan);
                $total          = max($totalMobil, 1);
                $pctDisewa      = round(($mobilDisewa    / $total) * 100);
                $pctTersedia    = round(($mobilTersedia  / $total) * 100);
                $pctPerawatan   = round(($mobilPerawatan / $total) * 100);
                $circ = 314;
                $dashDisewa     = round(($pctDisewa    / 100) * $circ);
                $dashTersedia   = round(($pctTersedia  / 100) * $circ);
                $dashPerawatan  = max($circ - $dashDisewa - $dashTersedia, 0);
                $offsetTersedia  = -$dashDisewa;
                $offsetPerawatan = -($dashDisewa + $dashTersedia);
            @endphp
            <div class="donut-section">
                <svg width="140" height="140" viewBox="0 0 140 140">
                    <circle cx="70" cy="70" r="50" fill="none" stroke="#eef2f9" stroke-width="22"/>
                    @if($dashDisewa > 0)
                    <circle cx="70" cy="70" r="50" fill="none" stroke="#0f2044" stroke-width="22"
                        stroke-dasharray="{{ $dashDisewa }} {{ $circ - $dashDisewa }}"
                        stroke-dashoffset="0"
                        stroke-linecap="round" transform="rotate(-90 70 70)"/>
                    @endif
                    @if($dashTersedia > 0)
                    <circle cx="70" cy="70" r="50" fill="none" stroke="#f5a623" stroke-width="22"
                        stroke-dasharray="{{ $dashTersedia }} {{ $circ - $dashTersedia }}"
                        stroke-dashoffset="{{ $offsetTersedia }}"
                        stroke-linecap="round" transform="rotate(-90 70 70)"/>
                    @endif
                    @if($dashPerawatan > 0)
                    <circle cx="70" cy="70" r="50" fill="none" stroke="#e53e3e" stroke-width="22"
                        stroke-dasharray="{{ $dashPerawatan }} {{ $circ - $dashPerawatan }}"
                        stroke-dashoffset="{{ $offsetPerawatan }}"
                        stroke-linecap="round" transform="rotate(-90 70 70)"/>
                    @endif
                    <text x="70" y="65" text-anchor="middle" font-size="20" font-weight="800" fill="#0f2044">{{ $pctDisewa }}%</text>
                    <text x="70" y="80" text-anchor="middle" font-size="10" fill="#7a8db3">tersewa</text>
                </svg>
                <div class="donut-legend">
                    <div class="dl-row">
                        <div class="dl-dot" style="background:#0f2044;"></div>
                        <div class="dl-label">Sedang disewa</div>
                        <div class="dl-val">{{ $mobilDisewa }}</div>
                        <div class="dl-pct">{{ $pctDisewa }}%</div>
                    </div>
                    <div class="dl-row">
                        <div class="dl-dot" style="background:#f5a623;"></div>
                        <div class="dl-label">Tersedia</div>
                        <div class="dl-val">{{ $mobilTersedia }}</div>
                        <div class="dl-pct">{{ $pctTersedia }}%</div>
                    </div>
                    <div class="dl-row">
                        <div class="dl-dot" style="background:#e53e3e;"></div>
                        <div class="dl-label">Perawatan</div>
                        <div class="dl-val">{{ $mobilPerawatan }}</div>
                        <div class="dl-pct">{{ $pctPerawatan }}%</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

{{-- ═══ BOTTOM: TABEL + AKTIVITAS ═══ --}}
<div class="bot-grid">

    {{-- Tabel Penyewaan Terbaru --}}
    <div class="card">
        <div class="card-header">
            <div>
                <div class="card-title">Penyewaan Terbaru</div>
                <div class="card-header-sub">Transaksi berlangsung</div>
            </div>
            <a href="{{ route('admin.penyewaan') }}" class="btn btn-outline btn-sm">
                Lihat Semua <i class="fa-solid fa-arrow-right"></i>
            </a>
        </div>
        <div class="card-body">
            @if($penyewaan->isEmpty())
                <div class="empty-state">
                    <i class="fa-solid fa-inbox"></i>
                    <p>Belum ada data penyewaan.</p>
                </div>
            @else
                <table>
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Penyewa</th>
                            <th>Mobil</th>
                            <th>Kembali</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($penyewaan as $i => $p)
                        <tr>
                            <td>{{ $i + 1 }}</td>
                            <td>{{ $p->user->username ?? '-' }}</td>
                            <td>{{ $p->mobil->nama_mobil ?? '-' }}</td>
                            <td>{{ optional($p->tanggal_kembali_rencana)->format('d M Y') }}</td>
                            <td>
                                @if($p->status === 'aktif')
                                    <span class="badge badge-info">Aktif</span>
                                @elseif($p->status === 'selesai')
                                    <span class="badge badge-success">Selesai</span>
                                @elseif($p->status === 'terlambat')
                                    <span class="badge badge-danger">Terlambat</span>
                                @else
                                    <span class="badge badge-warning">{{ ucfirst($p->status) }}</span>
                                @endif
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            @endif
        </div>
    </div>

    {{-- Aktivitas Terbaru --}}
    <div class="card">
        <div class="card-header">
            <div>
                <div class="card-title">Aktivitas Terbaru</div>
                <div class="card-header-sub">Log transaksi real-time</div>
            </div>
        </div>
        <div class="card-body" style="padding: 4px 24px 8px;">
            <div class="act-list">
                @forelse($aktivitasTerbaru as $akt)
                    <div class="act-item">
                        @if($akt['tipe'] === 'selesai')
                            <div class="act-icon" style="background:rgba(56,161,105,.12);color:#38a169;">
                                <i class="fa-solid fa-check"></i>
                            </div>
                        @elseif($akt['tipe'] === 'terlambat')
                            <div class="act-icon" style="background:rgba(229,62,62,.1);color:#e53e3e;">
                                <i class="fa-solid fa-triangle-exclamation"></i>
                            </div>
                        @elseif($akt['tipe'] === 'aktif')
                            <div class="act-icon" style="background:rgba(245,166,35,.15);color:#d4891a;">
                                <i class="fa-solid fa-car"></i>
                            </div>
                        @else
                            <div class="act-icon" style="background:rgba(26,50,96,.1);color:#2a4a8a;">
                                <i class="fa-solid fa-file-circle-plus"></i>
                            </div>
                        @endif
                        <div class="act-body">
                            <div class="act-text">
                                <strong>{{ $akt['penyewa'] }}</strong> — {{ $akt['keterangan'] }}
                            </div>
                            <div class="act-time">
                                {{ $akt['waktu'] }} · {{ $akt['mobil'] }}
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="empty-state" style="padding: 40px 0;">
                        <i class="fa-solid fa-clock-rotate-left"></i>
                        <p>Belum ada aktivitas.</p>
                    </div>
                @endforelse
            </div>
        </div>
    </div>

</div>

@endsection