@extends('layouts.app')

@section('content')
<style>
    .laporan-container {
        max-width: 1100px;
        margin: auto;
    }

    .card {
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 8px 20px rgba(0,0,0,0.06);
        padding: 20px;
        margin-bottom: 20px;
    }

    .title {
        font-size: 22px;
        font-weight: 600;
        color: #1f7a4c;
        margin-bottom: 15px;
    }

    .filter-box {
        display: flex;
        gap: 15px;
        flex-wrap: wrap;
        align-items: end;
    }

    .filter-box input {
        padding: 10px;
        border-radius: 8px;
        border: 1px solid #ccc;
    }

    .btn-filter {
        background: #1f7a4c;
        color: white;
        border: none;
        padding: 10px 18px;
        border-radius: 8px;
        cursor: pointer;
    }

    .summary-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 20px;
    }

    .summary-card {
        background: #f8faf9;
        border-left: 6px solid #1f7a4c;
        border-radius: 10px;
        padding: 15px;
    }

    .summary-card h3 {
        margin: 0;
        font-size: 14px;
        color: #555;
        font-weight: normal;
    }

    .summary-card h2 {
        margin: 8px 0 0;
        color: #1f7a4c;
        font-size: 22px;
    }

    table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 10px;
    }

    thead {
        background: #1f7a4c;
        color: white;
    }

    th, td {
        padding: 12px 10px;
        text-align: center;
    }

    tbody tr:nth-child(even) {
        background: #f8faf9;
    }

    .trx-link {
        color: #1f7a4c;
        font-weight: 600;
        text-decoration: none;
    }

    .trx-link:hover {
        text-decoration: underline;
    }

    .profit-plus {
        color: #1f7a4c;
        font-weight: bold;
    }

    .profit-minus {
        color: red;
        font-weight: bold;
    }
</style>

<div class="laporan-container">

    <!-- FILTER -->
    <div class="card">
        <div class="title">📅 Filter Laporan</div>
        <form method="GET" action="/laporan" class="filter-box">
            <div>
                <label>Dari Tanggal</label><br>
                <input type="date" name="start" value="{{ request('start') }}">
            </div>
            <div>
                <label>Sampai Tanggal</label><br>
                <input type="date" name="end" value="{{ request('end') }}">
            </div>
            <button class="btn-filter">Tampilkan</button>
        </form>
    </div>

    <!-- RINGKASAN -->
    <div class="summary-grid">
        <div class="summary-card">
            <h3>Total Transaksi</h3>
            <h2>{{ $totalTransactions }}</h2>
        </div>

        <div class="summary-card">
            <h3>Total Omzet</h3>
            <h2>Rp {{ number_format($totalRevenue, 0, ',', '.') }}</h2>
        </div>

        <div class="summary-card">
            <h3>Rata-rata Transaksi</h3>
            <h2>Rp {{ number_format($averageSale, 0, ',', '.') }}</h2>
        </div>

        {{-- ✅ KARTU TOTAL PROFIT --}}
        <div class="summary-card">
            <h3>Total Profit</h3>
            <h2>Rp {{ number_format($totalProfit, 0, ',', '.') }}</h2>
        </div>
    </div>

    <!-- TABEL LAPORAN -->
    <div class="card">
        <div class="title">📊 Detail Penjualan</div>

        <table>
            <thead>
                <tr>
                    <th>Tanggal</th>
                    <th>Kode Transaksi</th>
                    <th>Total Item</th>
                    <th>Total Belanja</th>
                    <th>Dibayar</th>
                    <th>Kembalian</th>
                    <th>Profit</th> {{-- KOLOM BARU --}}
                </tr>
            </thead>
            <tbody>
            @forelse($transactions as $trx)
            <tr>
                <td>{{ \Carbon\Carbon::parse($trx->date)->format('d-m-Y H:i') }}</td>
                <td>
                    <a href="{{ route('laporan.detail', $trx->id) }}" class="trx-link">
                        {{ $trx->invoice_number }}
                    </a>
                </td>
                <td>{{ $trx->total_items }}</td>
                <td>Rp {{ number_format($trx->total_amount, 0, ',', '.') }}</td>
                <td>Rp {{ number_format($trx->paid_amount, 0, ',', '.') }}</td>
                <td>Rp {{ number_format($trx->change_amount, 0, ',', '.') }}</td>

                {{-- ✅ PROFIT PER TRANSAKSI --}}
                <td class="{{ $trx->profit >= 0 ? 'profit-plus' : 'profit-minus' }}">
                    Rp {{ number_format($trx->profit, 0, ',', '.') }}
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="7">Belum ada data transaksi</td>
            </tr>
            @endforelse
            </tbody>
        </table>
    </div>

</div>
@endsection