@extends('layouts.app')

@section('title','Harga Harian')

@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;
    }

    .price-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>

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

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

        <div class="stat-card">

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

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

        </div>

    </div>

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

        <div class="stat-card">

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

            <h4>
                {{ $prices->where('date_price', today()->format('Y-m-d'))->count() }}
            </h4>

        </div>

    </div>

</div>

<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">
                💰 Harga Harian
            </h4>

            <small class="text-muted">
                Kelola harga jual produk harian
            </small>

        </div>

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

            <i class="bi bi-plus-lg"></i>
            Tambah Harga

        </a>

    </div>

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

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

    </div>

    <!-- TABLE -->
    @foreach($prices as $date => $items)

    <div class="card card-modern mb-4">

        <div class="card-header bg-white d-flex justify-content-between align-items-center">

            <div>

                <h5 class="mb-0">
                    📅 {{ \Carbon\Carbon::parse($date)->format('d M Y') }}
                </h5>

                <small>
                    {{ count($items) }} produk
                </small>

            </div>

            <a href="/prices/{{ $date }}/edit-daily"
                class="btn btn-warning">

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

                Edit Semua

            </a>

        </div>

        <div class="card-body">

            @foreach($items as $price)

            <div class="d-flex justify-content-between py-2 border-bottom">

                <span>

                    {{ $price->product->name }}

                </span>

                <strong>

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

                </strong>

            </div>

            @endforeach

        </div>

    </div>

    @endforeach

</div>

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

            let value = this.value.toLowerCase();

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

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

                });

        });
</script>

@endsection