@extends('layouts.app')

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

@section('content')

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

    .form-control {
        border-radius: 12px;
        padding: 10px;
        border: 1px solid #e5e7eb;
    }

    .form-control:focus {
        box-shadow: none;
        border-color: #2563eb;
    }

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

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

    .price-input {
        max-width: 180px;
    }
</style>

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

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

        <div>

            <h4 class="mb-1">
                💰 Input Harga Harian
            </h4>

            <small class="text-muted">
                Input semua harga produk sekaligus
            </small>

        </div>

    </div>

    <!-- ERROR -->
    @if ($errors->any())

    <div class="alert alert-danger rounded-4">

        <ul class="mb-0">

            @foreach ($errors->all() as $error)

            <li>{{ $error }}</li>

            @endforeach

        </ul>

    </div>

    @endif

    <form method="POST" action="/prices">

        @csrf

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

            <label class="fw-semibold mb-2">
                Tanggal Harga
            </label>

            <input type="date"
                name="date_price"
                class="form-control"
                value="{{ date('Y-m-d') }}"
                required>

        </div>

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

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

                <thead>

                    <tr>
                        <th width="80">#</th>
                        <th>Produk</th>
                        <th width="250">Harga Hari Ini</th>
                    </tr>

                </thead>

                <tbody>

                    @foreach($products as $p)

                    <tr>

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

                        <td>

                            <div class="fw-semibold">
                                {{ $p->name }}
                            </div>

                            <small class="text-muted">
                                {{ $p->category }}
                            </small>

                        </td>

                        <td>

                            <div class="input-group price-input">

                                <span class="input-group-text">
                                    Rp
                                </span>

                                <input type="number"
                                    name="prices[{{ $p->id }}]"
                                    class="form-control"
                                    placeholder="0">

                            </div>

                        </td>

                    </tr>

                    @endforeach

                </tbody>

            </table>

        </div>

        <!-- BUTTON -->
        <div class="d-grid mt-4">

            <button type="submit"
                class="btn btn-success btn-lg rounded-4">

                <i class="bi bi-save"></i>
                Simpan Semua Harga

            </button>

        </div>

    </form>

</div>

@endsection