@extends('layouts.app')

@section('title','Penjualan')

@section('content')

<style>
    .card-modern {
        border: none;
        border-radius: 18px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, .05);
    }

    .table-modern th {
        background: #f8fafc;
        border: none;
    }

    .table-modern td {
        vertical-align: middle;
        border-color: #f1f5f9;
    }

    .search-box {
        border-radius: 14px;
        padding: 12px;
        border: 1px solid #e5e7eb;
    }

    .total-tag {
        background: #dcfce7;
        color: #166534;
        padding: 6px 12px;
        border-radius: 20px;
        font-weight: 600;
        font-size: 13px;
    }

    .date-tag {
        background: #eff6ff;
        color: #1d4ed8;
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 13px;
    }

    .action-btn {
        width: 36px;
        height: 36px;
        border: none;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .empty-state {
        text-align: center;
        padding: 50px 20px;
        color: #6b7280;
    }

    .stat-card {
        border: none;
        border-radius: 16px;
        padding: 18px;
        background: white;
        box-shadow: 0 10px 25px rgba(0, 0, 0, .05);
    }
</style>

@php
$totalOmzet = $sales->sum('total');
$todaySales = $sales->where('date_sale', today()->format('Y-m-d'))->count();
@endphp

<!-- STAT -->
<div class="row g-3 mb-4">

    <div class="col-md-4">

        <div class="stat-card">

            <small class="text-muted">
                Total Penjualan
            </small>

            <h4>
                {{ $sales->count() }}
            </h4>

        </div>

    </div>

    <div class="col-md-4">

        <div class="stat-card">

            <small class="text-muted">
                Omzet
            </small>

            <h4>
                Rp {{ number_format($totalOmzet,0,',','.') }}
            </h4>

        </div>

    </div>

    <div class="col-md-4">

        <div class="stat-card">

            <small class="text-muted">
                Transaksi Hari Ini
            </small>

            <h4>
                {{ $todaySales }}
            </h4>

        </div>

    </div>

</div>

<!-- MAIN CARD -->
<div class="card card-modern p-4">

    <!-- HEADER -->
    <div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-2">

        <div>

            <h4 class="mb-1">
                🧾 Data Penjualan
            </h4>

            <small class="text-muted">
                Semua transaksi penjualan Kathles
            </small>

        </div>

        <a href="/sales/create"
            class="btn btn-primary rounded-4">

            <i class="bi bi-plus-lg"></i>
            Transaksi Baru

        </a>

    </div>

    <!-- SEARCH -->
    <div class="mb-4">

        <input type="text"
            id="search"
            class="form-control search-box"
            placeholder="Cari tanggal atau total...">

    </div>

    <!-- TABLE -->
    <div class="table-responsive">

        <table class="table table-modern align-middle">

            <thead>

                <tr>
                    <th width="60">#</th>
                    <th>Tanggal</th>
                    <th>Total</th>
                    <th width="120">Aksi</th>
                </tr>

            </thead>

            <tbody>

                @forelse($sales as $s)

                <tr class="sale-row">

                    <td>
                        {{ $loop->iteration }}
                    </td>

                    <td>

                        <span class="date-tag">

                            {{ \Carbon\Carbon::parse($s->date_sale)->format('d M Y') }}

                        </span>

                    </td>

                    <td>

                        <span class="total-tag">

                            Rp {{ number_format($s->total,0,',','.') }}

                        </span>

                    </td>

                    <td>

                        <div class="d-flex gap-2">

                            <!-- STRUK -->
                            <a href="/sales/{{ $s->id }}/receipt"
                                target="_blank"
                                class="btn btn-primary action-btn">

                                <i class="bi bi-receipt"></i>

                            </a>

                        </div>

                    </td>

                </tr>

                @empty

                <tr>

                    <td colspan="4">

                        <div class="empty-state">

                            <div style="font-size:50px;">
                                🧾
                            </div>

                            <h5>
                                Belum ada transaksi
                            </h5>

                            <p>
                                Mulai transaksi pertama Anda
                            </p>

                        </div>

                    </td>

                </tr>

                @endforelse

            </tbody>

        </table>

    </div>

</div>

<script>
    document.getElementById('search')
        .addEventListener('keyup', function() {

            let value = this.value.toLowerCase();

            document.querySelectorAll('.sale-row')
                .forEach(row => {

                    row.style.display =
                        row.innerText.toLowerCase().includes(value) ?
                        '' :
                        'none';

                });

        });
</script>

@endsection