@extends('layouts.app')

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

@section('content')

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

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

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

    .label-title {
        font-weight: 600;
        margin-bottom: 8px;
    }

    .icon-box {
        width: 70px;
        height: 70px;
        border-radius: 20px;
        background: #eff6ff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 32px;
        margin: auto;
    }
</style>

<div class="row justify-content-center">

    <div class="col-lg-7">

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

            <!-- HEADER -->
            <div class="text-center mb-4">

                <div class="icon-box mb-3">
                    📦
                </div>

                <h3 class="mb-1">
                    Tambah Produk
                </h3>

                <small class="text-muted">
                    Tambahkan produk baru ke sistem Kathles
                </small>

            </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 -->
            <form method="POST"
                action="/products"
                enctype="multipart/form-data">

                @csrf

                <!-- NAMA -->
                <div class="mb-3">

                    <label class="label-title">
                        Nama Produk
                    </label>

                    <input type="text"
                        name="name"
                        class="form-control"
                        placeholder="Contoh: Telur Omega"
                        value="{{ old('name') }}"
                        required>

                </div>

                <!-- KATEGORI -->
                <div class="mb-3">

                    <label class="label-title">
                        Kategori
                    </label>

                    <input type="text"
                        name="category"
                        class="form-control"
                        placeholder="Contoh: Telur Ayam"
                        value="{{ old('category') }}">

                </div>

                <!-- UNIT -->
                <div class="mb-3">

                    <label class="label-title">
                        Satuan
                    </label>

                    <select name="unit_id"
                        class="form-select">

                        <option value="">
                            Pilih Unit
                        </option>

                        @foreach($units as $unit)

                        <option value="{{ $unit->id }}"
                            {{ old('unit_id',$product->unit_id ?? '') == $unit->id ? 'selected' : '' }}>

                            {{ $unit->name }}
                            ({{ $unit->symbol }})

                        </option>

                        @endforeach

                    </select>

                </div>

                <!-- STOK -->
                <div class="mb-3">

                    <label class="label-title">
                        Stok Awal
                    </label>

                    <input type="number"
                        name="stock"
                        class="form-control"
                        placeholder="0"
                        value="{{ old('stock') }}"
                        required>

                </div>

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

                    <label class="label-title">
                        Harga Modal
                    </label>

                    <div class="input-group">

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

                        <input type="number"
                            name="cost"
                            class="form-control"
                            placeholder="15000"
                            value="{{ old('cost') }}"
                            required>

                    </div>

                </div>

                <div class="mb-3">

                    <label class="form-label">
                        Foto Produk
                    </label>

                    <input
                        type="file"
                        name="image"
                        class="form-control"
                        accept="image/*">

                </div>

                <!-- BUTTON -->
                <div class="d-grid gap-2">

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

                        <i class="bi bi-save"></i>
                        Simpan Produk

                    </button>

                    <a href="/products"
                        class="btn btn-light rounded-4">

                        Kembali

                    </a>

                </div>

            </form>

        </div>

    </div>

</div>

@endsection