@extends('layouts.app')

@section('content')
    <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] p-5 lg:p-6">
            <div class="mb-6">
                <h2 class="text-xl font-semibold text-gray-800 dark:text-white/90">{{ $title }}</h2>
                <p class="text-sm text-gray-500 dark:text-gray-400">{{ $unit->exists ? 'Edit data satuan' : 'Tambah satuan baru' }}</p>
            </div>

            <form action="{{ $unit->exists ? route('products.units.update', $unit) : route('products.units.store') }}" method="POST">
                @csrf
                @if($unit->exists)
                    @method('PUT')
                @endif

                <div class="space-y-5">
                    <div>
                        <x-form.input
                            name="name"
                            label="Nama Satuan"
                            placeholder="Contoh: Kilogram, Lembar, Meter"
                            required
                            :value="old('name', $unit->name)"
                        />
                    </div>

                    <div>
                        <x-form.input
                            name="symbol"
                            label="Simbol"
                            placeholder="Contoh: kg, lbr, m"
                            required
                            :value="old('symbol', $unit->symbol)"
                        />
                        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Singkatan yang ditampilkan di aplikasi</p>
                    </div>

                    <div class="flex items-center">
                        <input type="checkbox" name="is_active" id="is_active" value="1"
                            {{ old('is_active', $unit->is_active ?? true) ? 'checked' : '' }}
                            class="h-4 w-4 rounded border-gray-300 text-brand-600 focus:ring-brand-500">
                        <label for="is_active" class="ml-2 text-sm text-gray-700 dark:text-gray-300">
                            Aktif
                        </label>
                    </div>
                </div>

                <div class="mt-6 flex items-center justify-end gap-3">
                    <a href="{{ route('products.units.index') }}"
                        class="rounded-lg border border-gray-300 px-5 py-2.5 text-sm font-medium text-gray-700 transition hover:bg-gray-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-800">
                        Batal
                    </a>
                    <button type="submit"
                        class="rounded-lg bg-brand-500 px-5 py-2.5 text-sm font-medium text-white transition hover:bg-brand-600">
                        {{ $unit->exists ? 'Simpan Perubahan' : 'Tambah Satuan' }}
                    </button>
                </div>
            </form>
        </div>
    </div>
@endsection