@extends('layouts.app')

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

@php
    use App\Http\Controllers\ChatController;
    $adminId = ChatController::getFirstAdminId();
@endphp

@section('content')
<div class="container mx-auto px-4 py-6">
    @if(session('success'))
        <div class="bg-green-100 border-l-4 border-green-500 text-green-700 p-4 mb-4 rounded">
            {{ session('success') }}
        </div>
    @endif

    @if(session('error'))
        <div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 mb-4 rounded">
            {{ session('error') }}
        </div>
    @endif

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Detail Sewa -->
        <div class="lg:col-span-2">
            <div class="bg-white rounded-lg shadow-lg p-6">
                <div class="border-b pb-4 mb-4">
                    <h3 class="text-xl font-bold text-gray-800">Detail Penyewaan</h3>
                    <p class="text-sm text-gray-600">ID Pesanan: {{ $sewa->id }}</p>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- Informasi Paket -->
                    <div>
                        <h4 class="font-semibold text-gray-700 mb-3">Informasi Paket</h4>
                        <div class="space-y-2">
                            <p class="text-sm">
                                <span class="font-medium">Nama Paket:</span>
                                <span class="text-gray-600">{{ $sewa->paket->nama_paket }}</span>
                            </p>
                            <p class="text-sm">
                                <span class="font-medium">Harga per Hari:</span>
                                <span class="text-gray-600">Rp {{ number_format($sewa->paket->harga, 0, ',', '.') }}</span>
                            </p>
                            <p class="text-sm">
                                <span class="font-medium">Durasi Sewa:</span>
                                <span class="text-gray-600">{{ $sewa->durasi_sewa }} hari</span>
                            </p>
                            <p class="text-sm">
                                <span class="font-medium">Total Harga:</span>
                                <span class="text-blue-600 font-semibold">Rp {{ number_format($sewa->total_harga, 0, ',', '.') }}</span>
                            </p>
                        </div>
                    </div>

                    <!-- Informasi Pengiriman -->
                    <div>
                        <h4 class="font-semibold text-gray-700 mb-3">Informasi Pengiriman</h4>
                        <div class="space-y-2">
                            <p class="text-sm">
                                <span class="font-medium">Kota Tujuan:</span>
                                <span class="text-gray-600">{{ $sewa->kota->nama_kota }}</span>
                            </p>
                            <p class="text-sm">
                                <span class="font-medium">Biaya Ongkir:</span>
                                <span class="text-gray-600">Rp {{ number_format($sewa->ongkir, 0, ',', '.') }}</span>
                            </p>
                            <p class="text-sm">
                                <span class="font-medium">Alamat:</span>
                                <span class="text-gray-600">{{ $sewa->lokasi }}</span>
                            </p>
                            @if($sewa->catatan)
                            <p class="text-sm">
                                <span class="font-medium">Catatan:</span>
                                <span class="text-gray-600">{{ $sewa->catatan }}</span>
                            </p>
                            @endif
                        </div>
                    </div>

                    <!-- Informasi Waktu -->
                    <div>
                        <h4 class="font-semibold text-gray-700 mb-3">Informasi Waktu</h4>
                        <div class="space-y-2">
                            <p class="text-sm">
                                <span class="font-medium">Tanggal Mulai:</span>
                                <span class="text-gray-600">{{ $sewa->tanggal_mulai->format('d M Y') }}</span>
                            </p>
                            <p class="text-sm">
                                <span class="font-medium">Tanggal Selesai:</span>
                                <span class="text-gray-600">{{ $sewa->tanggal_selesai->format('d M Y') }}</span>
                            </p>
                            <p class="text-sm">
                                <span class="font-medium">Status:</span>
                                <span class="px-2 py-1 text-xs font-semibold rounded-full
                                    {{ $sewa->status === 'pending' ? 'bg-yellow-100 text-yellow-800' : '' }}
                                    {{ $sewa->status === 'disetujui' ? 'bg-green-100 text-green-800' : '' }}
                                    {{ $sewa->status === 'ditolak' ? 'bg-red-100 text-red-800' : '' }}
                                    {{ $sewa->status === 'selesai' ? 'bg-blue-100 text-blue-800' : '' }}
                                    {{ $sewa->status === 'dibatalkan' ? 'bg-gray-100 text-gray-800' : '' }}">
                                    {{ $sewa->status_label }}
                                </span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Form Upload -->
        <div class="lg:col-span-1">
            @if($sewa->status === 'pending' && !$sewa->bukti_pembayaran)
            <div class="bg-white rounded-lg shadow-lg p-6">
                <h3 class="text-lg font-bold text-gray-800 mb-4">Upload Bukti Pembayaran</h3>
                <div class="bg-blue-50 border-l-4 border-blue-500 text-blue-700 p-4 mb-4">
                    <p class="font-medium">Informasi Pembayaran:</p>
                    <p>tolong masukkan nominal pembayaran sebesar 
                        DP30% sampai 100% dari total harga yang sudah diberikan
                        segera lakukan pembayaran ke rekening dibawah ini
                        agar proses penyewaan ditangani lebih cepat 
                        jika ada masalah mohon hubungi admin di bagian hubungi kami
                    </p>
                    <b>BRI:002101269991507</b>
                </div>
                <form action="{{ route('sewa.upload-bukti', $sewa->id) }}" method="POST" enctype="multipart/form-data" class="space-y-4">
                    @csrf
                    
                    <!-- Nominal Pembayaran -->
                    <div>
                        <label for="nominal_pembayaran" class="block text-sm font-medium text-gray-700 mb-1">
                            Nominal Pembayaran (Pilih persentase pembayaran)
                        </label>
                        <div class="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>
                            <select name="nominal_pembayaran" id="nominal_pembayaran"
                                class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
                                required>
                                <option value="">Pilih nominal pembayaran</option>
                                @for ($i = 30; $i <= 100; $i += 10)
                                    <option value="{{ intval($sewa->total_harga * ($i/100)) }}">
                                        {{ $i }}% = Rp {{ number_format($sewa->total_harga * ($i/100), 0, ',', '.') }}
                                    </option>
                                @endfor
                            </select>
                        </div>
                        @error('nominal_pembayaran')
                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Bukti Pembayaran -->
                    <div>
                        <label for="bukti_pembayaran" class="block text-sm font-medium text-gray-700 mb-1">
                            Bukti Pembayaran
                        </label>
                        <input type="file" name="bukti_pembayaran" id="bukti_pembayaran"
                            class="block w-full text-sm text-gray-500
                                file:mr-4 file:py-2 file:px-4
                                file:rounded-full file:border-0
                                file:text-sm file:font-semibold
                                file:bg-blue-50 file:text-blue-700
                                hover:file:bg-blue-100"
                            accept="image/*"
                            required>
                        @error('bukti_pembayaran')
                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Jenis Jaminan -->
                    <div>
                        <label for="jenis_jaminan" class="block text-sm font-medium text-gray-700 mb-1">
                            Jenis Jaminan
                        </label>
                        <select name="jenis_jaminan" id="jenis_jaminan"
                            class="block w-full py-2 px-3 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
                            required>
                            <option value="">Pilih Jenis Jaminan</option>
                            <option value="ktp">KTP</option>
                            <option value="sim">SIM</option>
                        </select>
                        @error('jenis_jaminan')
                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Foto Jaminan -->
                    <div>
                        <label for="foto_jaminan" class="block text-sm font-medium text-gray-700 mb-1">
                            Foto Jaminan
                        </label>
                        <input type="file" name="foto_jaminan" id="foto_jaminan"
                            class="block w-full text-sm text-gray-500
                                file:mr-4 file:py-2 file:px-4
                                file:rounded-full file:border-0
                                file:text-sm file:font-semibold
                                file:bg-blue-50 file:text-blue-700
                                hover:file:bg-blue-100"
                            accept="image/*"
                            required>
                        @error('foto_jaminan')
                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="pt-4">
                        <button type="submit"
                            class="w-full bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition-colors mb-4">
                            Upload Bukti Pembayaran
                        </button>
                        
                        <a href="{{ route('sewa.index') }}"
                            class="block w-full text-center bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition-colors">
                            Kembali ke Daftar Sewa
                        </a>
                    </div>
                </form>
            </div>
            @endif
        </div>
    </div>
</div>
@endsection