@extends('layouts.app')

@section('title', 'Form Sewa - INUFA')
@section('header', 'Form Penyewaan Paket')

@section('content')
<div class="container mx-auto px-4 py-6">
    <div class="bg-white rounded-lg shadow-lg p-6">
        <div class="mb-6">
            <h2 class="text-2xl font-bold mb-4">Detail Paket</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="flex items-center justify-center">
                    @if($paket->image)
                        <img src="{{ Storage::url($paket->image) }}" 
                             alt="{{ $paket->nama_paket }}" 
                             class="max-w-full h-auto rounded-lg shadow-md">
                    @else
                        <div class="w-full h-48 bg-gray-200 rounded-lg flex items-center justify-center">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-20 w-20 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                            </svg>
                        </div>
                    @endif
                </div>
                <div>
                    <h3 class="text-xl font-semibold mb-2">{{ $paket->nama_paket }}</h3>
                    <p class="text-gray-600 mb-4">{{ $paket->keterangan }}</p>
                    <div class="space-y-2">
                        <p class="font-medium">Jenis Paket: <span class="text-gray-600">{{ $paket->jenis_paket }}</span></p>
                        <p class="font-medium">Harga Sewa: <span class="text-blue-600">Rp {{ number_format($paket->harga, 0, ',', '.') }}/hari</span></p>
                        @if($paket->minimum_order)
                            <p class="font-medium">Minimum Order: <span class="text-green-600">{{ $paket->minimum_order }} hari</span></p>
                        @endif
                    </div>

                    @if($paket->detail_barang)
                    <div class="mt-4">
                        <p class="font-medium mb-2">Daftar Barang dalam Paket:</p>
                        <ul class="list-disc list-inside text-gray-600 space-y-1">
                            @foreach($paket->detail_barang as $barang)
                                <li>{{ $barang['nama_barang'] }} ({{ $barang['jumlah'] }} unit)</li>
                            @endforeach
                        </ul>
                    </div>
                    @endif
                </div>
            </div>
        </div>

        <form action="{{ route('sewa.store') }}" method="POST" class="space-y-6">
            @csrf
            <input type="hidden" name="paket_id" value="{{ $paket->id }}">
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label for="tanggal_mulai" class="block text-sm font-medium text-gray-700 mb-2">Tanggal Mulai</label>
                    <input type="date" name="tanggal_mulai" id="tanggal_mulai" 
                           class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200"
                           min="{{ date('Y-m-d') }}" required>
                    @error('tanggal_mulai')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="tanggal_selesai" class="block text-sm font-medium text-gray-700 mb-2">Tanggal Selesai</label>
                    <input type="date" name="tanggal_selesai" id="tanggal_selesai" 
                           class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200"
                           required>
                    @error('tanggal_selesai')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>
            </div>

            <!-- Lokasi -->
            <div class="mb-4">
                <label for="lokasi" class="block text-gray-700 font-medium mb-2">Lokasi Acara <span class="text-red-500">*</span></label>
                <input type="text" id="lokasi" name="lokasi" value="{{ old('lokasi') }}" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" required>
                @error('lokasi')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>

            <!-- Kota Tujuan -->
            <div class="mb-4">
                <label for="kota_id" class="block text-sm font-medium text-gray-700">Kota Tujuan</label>
                <select id="kota_id" name="kota_id" class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" required>
                    <option value="">Pilih Kota Tujuan</option>
                    @foreach($paket->ongkirKota as $ongkir)
                        <option value="{{ $ongkir->id }}" data-ongkir="{{ $ongkir->biaya_ongkir }}">
                            {{ $ongkir->nama_kota }} - Rp {{ number_format($ongkir->biaya_ongkir, 0, ',', '.') }}
                        </option>
                    @endforeach
                </select>
                @error('kota_id')
                    <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <!-- Biaya Ongkir (readonly) -->
            <div class="mb-4">
                <label for="ongkir_display" class="block text-sm font-medium text-gray-700">Biaya Ongkir</label>
                <div class="mt-1 relative rounded-md shadow-sm">
                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                        <span class="text-gray-500 sm:text-sm">Rp</span>
                    </div>
                    <input type="text" id="ongkir_display" class="mt-1 block w-full pl-10 pr-3 py-2 text-gray-700 border border-gray-300 rounded-md bg-gray-50" readonly>
                    <input type="hidden" id="ongkir_value" name="ongkir" value="0">
                </div>
            </div>

            <div>
                <label for="catatan" class="block text-sm font-medium text-gray-700 mb-2">Catatan (Opsional)</label>
                <textarea name="catatan" id="catatan" rows="3" 
                          class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200"
                          placeholder="Tambahkan catatan khusus jika ada"></textarea>
                @error('catatan')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>

            <div class="flex justify-end space-x-4">
                <a href="{{ route('sewa.index') }}" 
                   class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50">
                    Batal
                </a>
                <button type="submit" 
                        class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
                    Ajukan Sewa
                </button>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const kotaSelect = document.getElementById('kota_id');
    const ongkirDisplay = document.getElementById('ongkir_display');
    const ongkirValue = document.getElementById('ongkir_value');
    const tanggalMulaiInput = document.getElementById('tanggal_mulai');
    const tanggalSelesaiInput = document.getElementById('tanggal_selesai');
    const hargaPerHari = parseFloat("{{ $paket->harga }}");
    
    function formatRupiah(angka) {
        return new Intl.NumberFormat('id-ID').format(angka);
    }
    
    function hitungOngkir() {
        // Set ongkir saat kota dipilih
        let ongkir = 0;
        if (kotaSelect.value) {
            ongkir = parseFloat(kotaSelect.selectedOptions[0].dataset.ongkir) || 0;
            ongkirDisplay.value = `Rp ${formatRupiah(ongkir)}`;
            ongkirValue.value = ongkir;
        }
    }
    
    // Event listeners
    kotaSelect.addEventListener('change', hitungOngkir);
    tanggalMulaiInput.addEventListener('change', function() {
        tanggalSelesaiInput.min = this.value;
    });

    // Inisialisasi form
    if (kotaSelect.value) {
        hitungOngkir();
    }
});
</script>
@endpush

@endsection