@extends('layouts.admin')

@section('title', 'Laporan Penjualan & Pendapatan')

@section('styles')
<style>
    .stat-card {
        border-radius: 1rem;
        border: 1px solid #e2e8f0;
        background: #fff;
    }
    .badge-status {
        font-size: .75rem;
        padding: .35em .75em;
        border-radius: .5rem;
        font-weight: 600;
    }
    @media print {
        body {
            background-color: #fff !important;
            color: #000 !important;
        }
        .navbar-admin, footer, .no-print, .btn, .breadcrumb, form {
            display: none !important;
        }
        .card {
            border: 1px solid #ddd !important;
            box-shadow: none !important;
        }
        .print-header {
            display: block !important;
            margin-bottom: 2rem;
        }
    }
    .print-header {
        display: none;
    }
</style>
@endsection

@section('content')

{{-- Print Only Header --}}
<div class="print-header text-center">
    <h2 class="fw-bold mb-1">SHAZKABAGS - LAPORAN PENJUALAN</h2>
    <p class="text-muted small mb-0">Periode: {{ \Carbon\Carbon::parse($startDate)->format('d/m/Y') }} s/d {{ \Carbon\Carbon::parse($endDate)->format('d/m/Y') }}</p>
    <hr>
</div>

{{-- Header Halaman --}}
<div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-2 no-print">
    <div>
        <h1 class="fw-bold fs-3 mb-1">
            <i class="bi bi-file-earmark-bar-graph-fill me-2 text-warning"></i> Laporan Penjualan
        </h1>
        <p class="text-muted mb-0 small">Rekapitulasi transaksi, pendapatan toko, dan analisis penjualan per periode.</p>
    </div>
    <div class="d-flex gap-2">
        <button type="button" onclick="window.print()" class="btn btn-outline-dark rounded-pill px-3 shadow-sm">
            <i class="bi bi-printer me-1"></i> Cetak / Simpan PDF
        </button>
        <a href="{{ route('admin.dashboard') }}" class="btn btn-outline-secondary rounded-pill px-3">
            <i class="bi bi-arrow-left me-1"></i> Dashboard
        </a>
    </div>
</div>

{{-- Filter Periode & Status --}}
<div class="card card-custom mb-4 no-print">
    <div class="card-body p-3">
        <form method="GET" action="{{ route('admin.reports.index') }}" class="row g-2 align-items-end">
            <div class="col-md-3">
                <label class="form-label small fw-semibold text-muted mb-1">Dari Tanggal</label>
                <input type="date" name="start_date" class="form-control" value="{{ $startDate }}">
            </div>
            <div class="col-md-3">
                <label class="form-label small fw-semibold text-muted mb-1">Sampai Tanggal</label>
                <input type="date" name="end_date" class="form-control" value="{{ $endDate }}">
            </div>
            <div class="col-md-3">
                <label class="form-label small fw-semibold text-muted mb-1">Status Pesanan</label>
                <select name="status" class="form-select">
                    <option value="all" {{ $status === 'all' ? 'selected' : '' }}>Semua Status</option>
                    <option value="completed" {{ $status === 'completed' ? 'selected' : '' }}>Selesai (Completed)</option>
                    <option value="shipped" {{ $status === 'shipped' ? 'selected' : '' }}>Dikirim (Shipped)</option>
                    <option value="processing" {{ $status === 'processing' ? 'selected' : '' }}>Diproses (Processing)</option>
                    <option value="pending" {{ $status === 'pending' ? 'selected' : '' }}>Pending (Menunggu)</option>
                    <option value="cancelled" {{ $status === 'cancelled' ? 'selected' : '' }}>Dibatalkan (Cancelled)</option>
                </select>
            </div>
            <div class="col-md-3 d-flex gap-2">
                <button type="submit" class="btn btn-warning text-dark fw-semibold rounded-pill px-4 flex-grow-1">
                    <i class="bi bi-funnel me-1"></i> Tampilkan
                </button>
                <a href="{{ route('admin.reports.index') }}" class="btn btn-light rounded-pill border" title="Reset Filter">
                    <i class="bi bi-arrow-counterclockwise"></i>
                </a>
            </div>
        </form>
    </div>
</div>

{{-- Metrik Ringkasan --}}
<div class="row g-3 mb-4">
    <div class="col-6 col-md-3">
        <div class="stat-card p-3">
            <div class="text-muted small">Total Pendapatan (Selesai)</div>
            <div class="fs-4 fw-bold text-success mt-1">Rp {{ number_format($totalRevenue, 0, ',', '.') }}</div>
            <div class="text-muted small mt-1">{{ $completedOrders }} transaksi selesai</div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="stat-card p-3">
            <div class="text-muted small">Total Pesanan Tercatat</div>
            <div class="fs-4 fw-bold text-dark mt-1">{{ $totalOrders }}</div>
            <div class="text-muted small mt-1">Semua status di periode ini</div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="stat-card p-3">
            <div class="text-muted small">Total Produk Terjual</div>
            <div class="fs-4 fw-bold text-primary mt-1">{{ $totalItemsSold }} Unit</div>
            <div class="text-muted small mt-1">Dari pesanan berstatus selesai</div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="stat-card p-3">
            <div class="text-muted small">Total Ongkos Kirim</div>
            <div class="fs-4 fw-bold text-secondary mt-1">Rp {{ number_format($totalShipping, 0, ',', '.') }}</div>
            <div class="text-muted small mt-1">Ekspedisi & kurir</div>
        </div>
    </div>
</div>

{{-- Ringkasan Status Pesanan --}}
<div class="card card-custom mb-4 no-print">
    <div class="card-body p-3">
        <h6 class="fw-bold mb-3 small text-muted text-uppercase">Distribusi Status Pesanan</h6>
        <div class="row g-2 text-center">
            <div class="col">
                <div class="p-2 bg-warning bg-opacity-10 rounded-3">
                    <span class="d-block fw-bold fs-5 text-warning-emphasis">{{ $statusCounts['pending'] }}</span>
                    <span class="small text-muted">Pending</span>
                </div>
            </div>
            <div class="col">
                <div class="p-2 bg-info bg-opacity-10 rounded-3">
                    <span class="d-block fw-bold fs-5 text-info">{{ $statusCounts['processing'] }}</span>
                    <span class="small text-muted">Diproses</span>
                </div>
            </div>
            <div class="col">
                <div class="p-2 bg-primary bg-opacity-10 rounded-3">
                    <span class="d-block fw-bold fs-5 text-primary">{{ $statusCounts['shipped'] }}</span>
                    <span class="small text-muted">Dikirim</span>
                </div>
            </div>
            <div class="col">
                <div class="p-2 bg-success bg-opacity-10 rounded-3">
                    <span class="d-block fw-bold fs-5 text-success">{{ $statusCounts['completed'] }}</span>
                    <span class="small text-muted">Selesai</span>
                </div>
            </div>
            <div class="col">
                <div class="p-2 bg-danger bg-opacity-10 rounded-3">
                    <span class="d-block fw-bold fs-5 text-danger">{{ $statusCounts['cancelled'] }}</span>
                    <span class="small text-muted">Batal</span>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Tabel Detail Transaksi --}}
<div class="card card-custom">
    <div class="card-header bg-white py-3 border-bottom d-flex justify-content-between align-items-center">
        <h5 class="fw-bold mb-0">Rincian Transaksi Penjualan</h5>
        <span class="badge bg-secondary rounded-pill">{{ $orders->count() }} Transaksi</span>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead class="table-light">
                    <tr>
                        <th class="ps-4">No. Pesanan</th>
                        <th>Tanggal</th>
                        <th>Pelanggan</th>
                        <th>Metode Bayar</th>
                        <th>Status</th>
                        <th class="text-end">Subtotal</th>
                        <th class="text-end">Ongkir</th>
                        <th class="text-end pe-4">Total</th>
                    </tr>
                </thead>
                <tbody>
                    @php
                        $grandTotal = 0;
                    @endphp
                    @forelse ($orders as $order)
                        @php
                            if ($order->status === 'completed') {
                                $grandTotal += $order->total;
                            }
                        @endphp
                        <tr>
                            <td class="ps-4 font-monospace fw-semibold">
                                <a href="{{ route('admin.orders.show', $order->id) }}" class="text-decoration-none text-dark">
                                    {{ $order->order_number }}
                                </a>
                            </td>
                            <td class="text-muted small">
                                {{ $order->created_at->format('d/m/Y H:i') }}
                            </td>
                            <td>
                                <div class="fw-semibold text-dark">{{ $order->customer_name }}</div>
                                <div class="text-muted small">{{ $order->customer_email }}</div>
                            </td>
                            <td>
                                <span class="small">{{ $order->payment_method ?? 'Transfer' }}</span>
                            </td>
                            <td>
                                @php
                                    $bMap = [
                                        'pending' => 'bg-warning text-dark',
                                        'processing' => 'bg-info text-dark',
                                        'shipped' => 'bg-primary text-white',
                                        'completed' => 'bg-success text-white',
                                        'cancelled' => 'bg-danger text-white',
                                    ];
                                @endphp
                                <span class="badge-status {{ $bMap[$order->status] ?? 'bg-secondary text-white' }}">
                                    {{ ucfirst($order->status) }}
                                </span>
                            </td>
                            <td class="text-end">
                                Rp {{ number_format($order->subtotal, 0, ',', '.') }}
                            </td>
                            <td class="text-end text-muted small">
                                Rp {{ number_format($order->shipping_fee, 0, ',', '.') }}
                            </td>
                            <td class="text-end pe-4 fw-bold text-dark">
                                Rp {{ number_format($order->total, 0, ',', '.') }}
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="text-center py-5 text-muted">
                                Tidak ada data transaksi pada rentang tanggal yang dipilih.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
                @if($orders->count() > 0)
                    <tfoot class="table-light fw-bold">
                        <tr>
                            <td colspan="7" class="text-end ps-4 py-3">Total Pendapatan Transaksi Selesai:</td>
                            <td class="text-end pe-4 py-3 text-success fs-6">Rp {{ number_format($grandTotal, 0, ',', '.') }}</td>
                        </tr>
                    </tfoot>
                @endif
            </table>
        </div>
    </div>
</div>

@endsection