@extends('layouts.app')
@section('title', 'Form Sewa Kamera')
@section('content')
<div class="max-w-3xl mx-auto px-4">
    <div class="mb-4">
        <a href="{{ route('sewa.kamera.index') }}" class="text-sm text-[#edc039] hover:underline inline-flex items-center gap-1">
            <i class="bi bi-arrow-left"></i>
            Kembali ke daftar kamera
        </a>
    </div>

    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-6">
        @php($kameraImage = $kamera->image_path)
        <h1 class="text-2xl font-bold text-gray-900">Sewa Kamera</h1>
        <p class="text-gray-600 mt-1">{{ $kamera->nama }} ({{ $kamera->merek }})</p>
        <p class="text-xs font-semibold uppercase tracking-wide text-gray-400">Kode Kamera: {{ $kamera->kode_kamera ?? '-' }}</p>
        <p class="text-sm text-gray-700 mt-1">Harga: Rp {{ number_format($kamera->harga_sewa, 0, ',', '.') }}/hari</p>
        <p class="text-sm font-medium {{ $kamera->stok > 0 ? 'text-[#edc039]' : 'text-red-600' }}">Stok tersedia: {{ $kamera->stok }}/{{ \App\Models\Kamera::DEFAULT_STOCK }}</p>
        @if($kameraImage)
            <div class="mt-4 rounded-xl border border-gray-100 bg-gray-50 p-3">
                <img
                    src="{{ asset($kameraImage) }}"
                    alt="{{ $kamera->nama }}"
                    class="h-52 w-full object-contain"
                    onerror="this.style.display='none'; this.nextElementSibling.style.display='block';"
                >
                <p class="hidden text-xs text-gray-500">Foto {{ $kamera->nama }} belum ditemukan di `public/{{ $kameraImage }}`.</p>
            </div>
        @endif

        <div class="mt-5 rounded-xl border border-[#dceceb] bg-[#f7fbfa] p-4">
            <p class="text-sm font-semibold text-gray-800">Ketentuan :</p>
            <ol class="mt-2 list-decimal space-y-2 pl-5 text-sm text-gray-600">
                <li>Sebelum menyewa, customer diwajibkan membaca dan menyetujui syarat &amp; ketentuan.</li>
                <li>Data yang dimasukkan dijamin keamanannya.</li>
                <li>Data yang dimasukkan bersifat perorangan, bukan perusahaan.</li>
                <li>Pastikan data valid dan lengkap, serta telepon yang didaftarkan dalam keadaan aktif.</li>
                <li>Customer wajib mengunggah foto diri yang jelas untuk kebutuhan verifikasi saat pengambilan.</li>
            </ol>
        </div>

        @if($kamera->stok <= 0)
            <div class="mt-6 rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
                Kamera ini sedang habis disewa. Silakan pilih kamera lain atau tunggu stok tersedia kembali.
            </div>
        @endif

        <form method="POST" action="{{ route('sewa.kamera.store', $kamera->id) }}" enctype="multipart/form-data" class="mt-6 space-y-4">
            @csrf
            <div>
                <label class="block text-sm font-medium text-gray-700">Nama Penyewa</label>
                <input name="nama_penyewa" value="{{ old('nama_penyewa', auth()->user()?->name) }}" required class="mt-1 w-full rounded-lg border-gray-300 focus:border-[#edc039] focus:ring-[#edc039]">
            </div>
            <div class="grid sm:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700">Email</label>
                    <input type="email" name="email" value="{{ old('email', auth()->user()?->email) }}" 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">Telepon</label>
                    <input name="telepon" value="{{ old('telepon') }}" required class="mt-1 w-full rounded-lg border-gray-300 focus:border-[#edc039] focus:ring-[#edc039]">
                </div>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700">No. WA Penyewa</label>
                <input name="no_wa" value="{{ old('no_wa') }}" 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">Alamat Rumah Sesuai KTP</label>
                <textarea name="alamat_ktp" rows="2" required class="mt-1 w-full rounded-lg border-gray-300 focus:border-[#edc039] focus:ring-[#edc039]">{{ old('alamat_ktp') }}</textarea>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700">Alamat Tinggal Saat Ini</label>
                <textarea name="alamat_tinggal" rows="2" required class="mt-1 w-full rounded-lg border-gray-300 focus:border-[#edc039] focus:ring-[#edc039]">{{ old('alamat_tinggal') }}</textarea>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700">Instagram</label>
                <input name="instagram" placeholder="@username" value="{{ old('instagram') }}" 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">Jaminan</label>
                <input name="jaminan" placeholder="Contoh: KTP asli, SIM, KTM, atau jaminan lainnya" value="{{ old('jaminan') }}" required class="mt-1 w-full rounded-lg border-gray-300 focus:border-[#edc039] focus:ring-[#edc039]">
                <p class="mt-1 text-xs text-gray-500">Isi jaminan yang akan Anda bawa saat pengambilan agar admin bisa melakukan crosscheck.</p>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700">Upload Foto Jaminan</label>
                <input type="file" name="foto_jaminan" accept=".jpg,.jpeg,.png" required class="mt-1 w-full rounded-lg border-gray-300 focus:border-[#edc039] focus:ring-[#edc039] file:mr-3 file:rounded-md file:border-0 file:bg-[#e6f5ee] file:px-3 file:py-2 file:text-[#edc039]">
                <p class="mt-1 text-xs text-gray-500">Upload foto jaminan seperti KTP, STNK, SIM, atau dokumen jaminan lain. Format JPG/PNG, maksimal 2MB per file.</p>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700">Upload Foto Diri</label>
                <input type="file" name="foto_diri" accept=".jpg,.jpeg,.png" required class="mt-1 w-full rounded-lg border-gray-300 focus:border-[#edc039] focus:ring-[#edc039] file:mr-3 file:rounded-md file:border-0 file:bg-[#e6f5ee] file:px-3 file:py-2 file:text-[#edc039]">
                <p class="mt-1 text-xs text-gray-500">Wajib upload foto diri yang jelas agar admin dapat mencocokkan identitas dengan foto jaminan saat pengambilan. Format JPG/PNG, maksimal 2MB per file.</p>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700">Member</label>
                <select name="member_level" required class="mt-1 w-full rounded-lg border-gray-300 focus:border-[#edc039] focus:ring-[#edc039]">
                    <option value="tanpa_member" {{ old('member_level', auth()->user()?->member_level ?? 'tanpa_member') === 'tanpa_member' ? 'selected' : '' }}>Tanpa Member (diskon 0%)</option>
                    <option value="bronze" {{ old('member_level', auth()->user()?->member_level) === 'bronze' ? 'selected' : '' }}>Bronze (diskon 5%)</option>
                    <option value="silver" {{ old('member_level', auth()->user()?->member_level) === 'silver' ? 'selected' : '' }}>Silver (diskon 10%)</option>
                    <option value="gold" {{ old('member_level', auth()->user()?->member_level) === 'gold' ? 'selected' : '' }}>Gold (diskon 15%)</option>
                </select>
            </div>
            <div class="grid sm:grid-cols-3 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700">Jumlah</label>
                    <input type="number" name="qty" min="1" max="{{ max($kamera->stok, 1) }}" value="{{ old('qty', 1) }}" required class="mt-1 w-full rounded-lg border-gray-300 focus:border-[#edc039] focus:ring-[#edc039]" {{ $kamera->stok <= 0 ? 'disabled' : '' }}>
                    <p class="mt-1 text-xs text-gray-500">Maksimal sewa saat ini: {{ $kamera->stok }} unit.</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700">Tanggal Mulai</label>
                    <input type="date" name="tanggal_mulai" value="{{ old('tanggal_mulai') }}" min="{{ now()->timezone(config('app.timezone'))->toDateString() }}" 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">Tanggal Selesai</label>
                    <input type="date" name="tanggal_selesai" value="{{ old('tanggal_selesai') }}" required class="mt-1 w-full rounded-lg border-gray-300 focus:border-[#edc039] focus:ring-[#edc039]">
                </div>
            </div>
            <div class="grid sm:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700">Jam Sewa</label>
                    <input type="time" name="jam_sewa" value="{{ old('jam_sewa', '08:00') }}" 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">Jam Kembali</label>
                    <input type="time" name="jam_kembali" value="{{ old('jam_kembali', '17:00') }}" required class="mt-1 w-full rounded-lg border-gray-300 focus:border-[#edc039] focus:ring-[#edc039]">
                </div>
            </div>
            <div class="rounded-lg border border-gray-200 bg-gray-50 p-4 space-y-3">
                <p class="text-sm font-semibold text-gray-800">Pembayaran</p>
                <p class="text-xs text-gray-600">Pilih metode pembayaran, lalu upload bukti pembayaran agar pengajuan diproses admin.</p>
                <div>
                    <label class="block text-sm font-medium text-gray-700">Metode Pembayaran</label>
                    <select name="metode_pembayaran" required class="mt-1 w-full rounded-lg border-gray-300 focus:border-[#edc039] focus:ring-[#edc039]">
                        <option value="">Pilih metode</option>
                        <option value="qris" {{ old('metode_pembayaran') === 'qris' ? 'selected' : '' }}>QRIS</option>
                        <option value="transfer_bca" {{ old('metode_pembayaran') === 'transfer_bca' ? 'selected' : '' }}>Transfer BCA</option>
                    </select>
                </div>
                <div class="text-xs text-gray-600">
                    <p>QRIS: scan kode QR milik admin.</p>
                    <p>Transfer BCA: Bank BCA No. Rekening 0241341436 a.n. Kahfi Adam Munajad.</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700">Upload Bukti Pembayaran</label>
                    <input type="file" name="bukti_pembayaran" accept=".jpg,.jpeg,.png,.pdf" required class="mt-1 w-full rounded-lg border-gray-300 focus:border-[#edc039] focus:ring-[#edc039] file:mr-3 file:rounded-md file:border-0 file:bg-[#e6f5ee] file:px-3 file:py-2 file:text-[#edc039]">
                    <p class="text-xs text-gray-500 mt-1">Format: JPG, PNG, PDF. Maks 2MB per file.</p>
                </div>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700">Catatan (opsional)</label>
                <textarea name="catatan" rows="3" class="mt-1 w-full rounded-lg border-gray-300 focus:border-[#edc039] focus:ring-[#edc039]">{{ old('catatan') }}</textarea>
            </div>
            @if($errors->any())
                <div class="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
                    {{ $errors->first() }}
                </div>
            @endif
            <div class="rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 text-xs text-amber-800">
                Total upload disarankan tidak lebih dari 6MB agar pengajuan tidak gagal saat dikirim.
            </div>
            <button type="submit" class="w-full btn-dark py-3 font-semibold hover:opacity-95 {{ $kamera->stok <= 0 ? 'cursor-not-allowed opacity-60' : '' }}" {{ $kamera->stok <= 0 ? 'disabled' : '' }}>
                Ajukan Sewa Kamera
            </button>
        </form>
    </div>
</div>
@endsection