@extends('layouts.app')

@section('content')
    <x-common.page-breadcrumb pageTitle="{{ $title ?? 'Tambah Bahan' }}" />

    <div class="mx-auto max-w-2xl">
        <div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
            <div class="border-b border-gray-200 px-5 py-4 dark:border-gray-800">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">Tambah Bahan Baru</h3>
            </div>
            <div class="p-5">
                <form action="{{ route('settings.materials.store') }}" method="POST">
                    @csrf
                    <div class="space-y-4">
                        <x-form.input
                            name="name"
                            label="Nama Bahan"
                            placeholder="Cth: Flexy China"
                            :required="true"
                        />

                        <x-form.input
                            name="category"
                            label="Kategori"
                            placeholder="Cth: Banner, Sticker"
                        />

                        <x-form.input
                            name="base_price"
                            label="Harga Dasar"
                            type="number"
                            placeholder="0"
                            :required="true"
                            prefix="Rp"
                            min="0"
                            step="100"
                        />

                        <x-form.select
                            name="unit"
                            label="Satuan"
                            placeholder="Pilih Satuan"
                            :required="true"
                            :options="['m2' => 'Per Meter Persegi (m²)', 'lembar' => 'Per Lembar', 'pcs' => 'Per Pcs', 'meter' => 'Per Meter']"
                        />

                        <div class="flex items-center gap-3 pt-2">
                            <label class="flex items-center gap-2 text-sm cursor-pointer">
                                <input type="checkbox" name="track_clicks" value="1" class="rounded border-gray-300 text-brand-500 focus:ring-brand-500">
                                <span class="text-gray-700 dark:text-gray-300">Catat Laporan Klik</span>
                            </label>
                        </div>
                    </div>

                    <div class="mt-6 flex items-center gap-3">
                        <button type="submit" class="rounded-lg bg-brand-500 px-4 py-2.5 text-sm font-medium text-white hover:bg-brand-600">
                            Simpan
                        </button>
                        <a href="{{ route('settings.materials') }}" class="rounded-lg border border-gray-300 px-4 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-800">
                            Batal
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection