@extends('layouts.app')
@section('title', 'Sewa Kamera + Lensa')
@section('content')
@php
    $selectedKameraModel = $kameras->firstWhere('id', (int) old('kamera_id', $selectedKamera));
    $selectedLensaModel = $lensas->firstWhere('id', (int) old('lensa_id', $selectedLensa));
    $paketStock = min($selectedKameraModel?->stok ?? \App\Models\Kamera::DEFAULT_STOCK, $selectedLensaModel?->stok ?? \App\Models\Lensa::DEFAULT_STOCK);
    $paketReady = $selectedKameraModel && $selectedLensaModel;
@endphp
<div class="max-w-3xl mx-auto px-4">
    @if(session('status'))
        <div class="mb-4 rounded-xl border border-green-200 bg-green-50 px-4 py-3 text-sm text-green-700">
            {{ session('status') }}
        </div>
    @endif

    <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 sewa kamera
        </a>
    </div>

    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-6">
        <h1 class="text-2xl font-bold text-gray-900">Sewa Kamera + Lensa</h1>
        <p class="text-sm text-gray-600 mt-1">Pilih kamera dan lensa sesuai kebutuhanmu.</p>

        <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>

        <form method="POST" action="{{ route('sewa.paket.store') }}" enctype="multipart/form-data" class="mt-6 space-y-4">
            @csrf
            <div class="grid sm:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700">Kamera</label>
                    <select name="kamera_id" required class="mt-1 w-full rounded-lg border-gray-300 focus:border-[#edc039] focus:ring-[#edc039]">
                        <option value="">Pilih kamera</option>
                        @foreach($kameras as $kamera)
                            <option value="{{ $kamera->id }}" {{ (string) old('kamera_id', $selectedKamera) === (string) $kamera->id ? 'selected' : '' }} {{ $kamera->stok <= 0 ? 'disabled' : '' }}>
                                {{ $kamera->kode_kamera ?? '-' }} | {{ $kamera->nama }} - {{ $kamera->merek }} (Rp {{ number_format($kamera->harga_sewa, 0, ',', '.') }}) - Stok {{ $kamera->stok }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700">Lensa</label>
                    <select name="lensa_id" required class="mt-1 w-full rounded-lg border-gray-300 focus:border-[#edc039] focus:ring-[#edc039]">
                        <option value="">Pilih lensa</option>
                        @foreach($lensas as $lensa)
                            <option value="{{ $lensa->id }}" {{ (string) old('lensa_id', $selectedLensa) === (string) $lensa->id ? 'selected' : '' }} {{ $lensa->stok <= 0 ? 'disabled' : '' }}>
                                {{ $lensa->kode_lensa ?? '-' }} | {{ $lensa->nama }} - {{ $lensa->merek }} (Rp {{ number_format($lensa->harga_sewa, 0, ',', '.') }}) - Stok {{ $lensa->stok }}
                            </option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="rounded-xl border border-[#f3e1a1] bg-[#fff9e6] px-4 py-3 text-sm text-gray-700">
                <p class="font-medium text-gray-900">Informasi stok paket</p>
                @if($paketReady)
                    <p class="mt-1">Stok paket mengikuti item dengan stok paling sedikit. Saat ini maksimal bisa disewa: <span class="font-semibold">{{ $paketStock }}</span> unit.</p>
                @else
                    <p class="mt-1">Pilih kamera dan lensa terlebih dahulu untuk melihat stok paket yang tersedia.</p>
                @endif
            </div>

            <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($paketStock, 1) }}" value="{{ old('qty', 1) }}" 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">Maksimal mengikuti stok kamera dan lensa yang dipilih.</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 {{ $paketReady && $paketStock <= 0 ? 'cursor-not-allowed opacity-60' : '' }}" {{ $paketReady && $paketStock <= 0 ? 'disabled' : '' }}>
                Ajukan Sewa Paket
            </button>
        </form>
    </div>
</div>
@endsection