@extends('layouts.app')

@section('title', 'Pesan Paket - INUFA')

@section('header', 'Pesan Paket')

@section('content')
<div class="bg-white p-6 rounded-lg shadow-lg">
    <div class="mb-6">
        <h2 class="text-2xl font-bold mb-2">{{ $paket->nama }}</h2>
        <p class="text-gray-700">{{ $paket->deskripsi }}</p>
        <div class="mt-2">
            <span class="text-blue-800 font-bold text-xl">Harga: Rp {{ number_format($paket->harga, 0, ',', '.') }}</span>
        </div>
    </div>

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

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

        <div class="mb-6">
            <label for="lokasi" class="block text-sm font-medium text-gray-700 mb-1">Lokasi Acara</label>
            <input type="text" name="lokasi" id="lokasi" required placeholder="Masukkan lokasi acara" class="w-full border-gray-300 rounded-md shadow-sm p-2 focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50">
            @error('lokasi')
                <span class="text-red-600 text-sm">{{ $message }}</span>
            @enderror
        </div>

        <div class="bg-gray-100 p-4 rounded-md mb-6">
            <h3 class="font-semibold mb-2">Total Biaya</h3>
            <p class="text-sm text-gray-600 mb-2">Estimasi biaya berdasarkan durasi sewa:</p>
            <div id="biaya-container" class="hidden">
                <p>Durasi: <span id="durasi">0</span> hari</p>
                <p class="font-bold text-lg">Total: <span id="total-biaya">Rp 0</span></p>
            </div>
            <p id="biaya-placeholder" class="text-gray-500">Pilih tanggal mulai dan selesai untuk melihat estimasi biaya</p>
        </div>

        <div class="flex justify-end space-x-4">
            <a href="{{ route('sewa') }}" class="bg-gray-300 text-gray-800 py-2 px-4 rounded hover:bg-gray-400 transition duration-200">
                Batal
            </a>
            <button type="submit" class="bg-blue-800 text-white py-2 px-4 rounded hover:bg-blue-900 transition duration-200">
                Pesan Sekarang
            </button>
        </div>
    </form>
</div>
@endsection

@section('scripts')
<script>
    // Ambil harga paket dari input hidden
    const hargaPerHari = parseInt(document.getElementById('paket_harga').value) || 0;
    
    // Format angka ke format Rupiah
    function formatRupiah(angka) {
        return 'Rp ' + new Intl.NumberFormat('id-ID').format(angka);
    }
    
    // Menghitung total biaya
    function hitungBiaya() {
        const tglMulai = document.getElementById('tanggal_mulai').value;
        const tglSelesai = document.getElementById('tanggal_selesai').value;
        
        if(tglMulai && tglSelesai) {
            const start = new Date(tglMulai);
            const end = new Date(tglSelesai);
            
            // Hitung selisih hari
            const diffTime = Math.abs(end - start);
            const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)) + 1; // +1 karena termasuk hari terakhir
            
            // Update tampilan durasi dan total biaya
            document.getElementById('durasi').textContent = diffDays;
            document.getElementById('total-biaya').textContent = formatRupiah(hargaPerHari * diffDays);
            
            // Tampilkan container biaya dan sembunyikan placeholder
            document.getElementById('biaya-container').classList.remove('hidden');
            document.getElementById('biaya-placeholder').classList.add('hidden');
        }
    }
    
    // Event listener untuk perubahan tanggal
    document.getElementById('tanggal_mulai').addEventListener('change', hitungBiaya);
    document.getElementById('tanggal_selesai').addEventListener('change', hitungBiaya);
</script>
@endsection