@extends('layouts.app')
@section('title', $formMode === 'create' ? 'Tambah Lensa' : 'Edit Lensa')
@section('hide_navbar', true)
@section('content')
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 space-y-6">
    <div class="flex items-center justify-between gap-3 flex-wrap">
        <div>
            <h1 class="text-2xl font-bold text-gray-900">{{ $formMode === 'create' ? 'Tambah Lensa Baru' : 'Edit Data Lensa' }}</h1>
            <p class="mt-1 text-sm text-gray-600">Perubahan data lensa di admin akan otomatis ikut tampil pada halaman user dan pilihan paket sewa.</p>
        </div>
        <a href="{{ route('dashboard') }}" class="inline-flex items-center rounded-lg border border-gray-200 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50">
            Kembali ke Dashboard
        </a>
    </div>

    @if($errors->any())
        <div class="rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
            {{ $errors->first() }}
        </div>
    @endif

    <section class="surface-card rounded-[1.8rem] p-6">
        <form method="POST" action="{{ $formMode === 'create' ? route('dashboard.lensas.store') : route('dashboard.lensas.update', $lensa) }}" class="space-y-5">
            @csrf
            @if($formMode === 'edit')
                @method('PATCH')
            @endif

            <div class="grid gap-4 md:grid-cols-3">
                <div>
                    <label class="block text-sm font-medium text-gray-700">Kode Lensa</label>
                    <input value="{{ $lensa->kode_lensa ?? 'Otomatis dibuat setelah data lensa disimpan' }}" readonly class="mt-1 w-full rounded-lg border-gray-300 bg-gray-50 text-gray-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700">Nama Lensa</label>
                    <input name="nama" value="{{ old('nama', $lensa->nama) }}" required class="mt-1 w-full rounded-lg border-gray-300 focus:border-[#edc039] focus:ring-[#edc039]">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700">Merek</label>
                    <input name="merek" value="{{ old('merek', $lensa->merek) }}" required class="mt-1 w-full rounded-lg border-gray-300 focus:border-[#edc039] focus:ring-[#edc039]">
                </div>
            </div>

            <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700">Harga Sewa per Hari</label>
                    <input type="number" name="harga_sewa" min="0" value="{{ old('harga_sewa', $lensa->harga_sewa) }}" required class="mt-1 w-full rounded-lg border-gray-300 focus:border-[#edc039] focus:ring-[#edc039]">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700">Aperture Score</label>
                    <input type="number" step="0.1" name="aperture_score" min="0" max="10" value="{{ old('aperture_score', $lensa->aperture_score) }}" required class="mt-1 w-full rounded-lg border-gray-300 focus:border-[#edc039] focus:ring-[#edc039]">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700">Stabilisasi</label>
                    <input type="number" step="0.1" name="stabilisasi" min="0" max="10" value="{{ old('stabilisasi', $lensa->stabilisasi) }}" required class="mt-1 w-full rounded-lg border-gray-300 focus:border-[#edc039] focus:ring-[#edc039]">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700">Fleksibilitas</label>
                    <input type="number" step="0.1" name="fleksibilitas" min="0" max="10" value="{{ old('fleksibilitas', $lensa->fleksibilitas) }}" required class="mt-1 w-full rounded-lg border-gray-300 focus:border-[#edc039] focus:ring-[#edc039]">
                </div>
            </div>

            <div class="rounded-2xl border border-[#dceceb] bg-[#f7fbfa] p-4 text-sm text-gray-600">
                <p class="font-semibold text-gray-800">Catatan</p>
                <p class="mt-1">Perubahan lensa akan otomatis memengaruhi daftar sewa lensa, paket kamera + lensa, dan rekomendasi lensa pendamping berdasarkan merek.</p>
            </div>

            <div class="flex flex-col gap-3 sm:flex-row sm:justify-end">
                <a href="{{ route('dashboard') }}" class="inline-flex items-center justify-center rounded-lg border border-gray-200 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50">
                    Batal
                </a>
                <button type="submit" class="btn-dark px-5 py-2.5 text-sm font-semibold">
                    {{ $formMode === 'create' ? 'Simpan Lensa' : 'Perbarui Lensa' }}
                </button>
            </div>
        </form>
    </section>
</div>
@endsection