@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">
    <div class="bg-white rounded-lg shadow-lg p-6">
        @if(session('success'))
            <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-6">
                {{ session('success') }}
            </div>
        @endif

        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
            <!-- Detail Paket -->
            <div>
                <h2 class="text-xl font-bold mb-4">Detail Paket</h2>
                <div class="bg-gray-50 rounded-lg p-4">
                    <div class="mb-4">
                        @if($sewa->paket->image)
                            <img src="{{ Storage::url($sewa->paket->image) }}" 
                                 alt="{{ $sewa->paket->nama_paket }}" 
                                 class="w-full h-48 object-contain rounded-lg">
                        @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>
                    <h3 class="font-semibold text-lg mb-2">{{ $sewa->paket->nama_paket }}</h3>
                    <p class="text-gray-600 mb-4">{{ $sewa->paket->keterangan }}</p>
                    <div class="space-y-2">
                        <p><span class="font-medium">Jenis Paket:</span> {{ $sewa->paket->jenis_paket }}</p>
                        <p><span class="font-medium">Harga Sewa:</span> Rp {{ number_format($sewa->paket->harga, 0, ',', '.') }}/hari</p>
                    </div>

                    @if($sewa->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($sewa->paket->detail_barang as $barang)
                                <li>{{ $barang['nama_barang'] }} ({{ $barang['jumlah'] }} unit)</li>
                            @endforeach
                        </ul>
                    </div>
                    @endif
                </div>
            </div>

            <!-- Detail Penyewaan -->
            <div>
                <h2 class="text-xl font-bold mb-4">Detail Penyewaan</h2>
                <div class="bg-gray-50 rounded-lg p-4 space-y-4">
                    <div>
                        <p class="font-medium">Status</p>
                        <span class="inline-block px-3 py-1 rounded-full text-sm font-medium
                            @if($sewa->status == 'draft') bg-gray-100 text-gray-800
                            @elseif($sewa->status == 'pending') bg-yellow-100 text-yellow-800
                            @elseif($sewa->status == 'disetujui') bg-green-100 text-green-800
                            @elseif($sewa->status == 'ditolak') bg-red-100 text-red-800
                            @elseif($sewa->status == 'selesai') bg-blue-100 text-blue-800
                            @else bg-gray-100 text-gray-800
                            @endif">
                            @if($sewa->status == 'draft')
                                Draft (Belum Disimpan)
                            @elseif($sewa->status == 'pending')
                                Menunggu Verifikasi Admin
                            @elseif($sewa->status == 'disetujui')
                                Disetujui
                            @elseif($sewa->status == 'ditolak')
                                Ditolak
                            @elseif($sewa->status == 'selesai')
                                Selesai
                            @else
                                {{ $sewa->status_label }}
                            @endif
                        </span>
                    </div>

                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <p class="font-medium">Tanggal Mulai</p>
                            <p>{{ $sewa->tanggal_mulai ? $sewa->tanggal_mulai->format('d M Y') : '-' }}</p>
                        </div>
                        <div>
                            <p class="font-medium">Tanggal Selesai</p>
                            <p>{{ $sewa->tanggal_selesai ? $sewa->tanggal_selesai->format('d M Y') : '-' }}</p>
                        </div>
                    </div>

                    <div>
                        <p class="font-medium">Durasi Sewa</p>
                        <p>{{ $sewa->durasi_sewa }} hari</p>
                    </div>

                    <div>
                        <p class="font-medium">Total Harga</p>
                        <p class="text-lg text-blue-600 font-semibold">
                            Rp {{ number_format($sewa->total_harga, 0, ',', '.') }}
                        </p>
                    </div>

                    <div>
                        <p class="font-medium">Lokasi Penggunaan</p>
                        <p>{{ $sewa->lokasi }}</p>
                    </div>

                    <div>
                        <p class="font-medium">Kota Tujuan</p>
                        <p>{{ $sewa->kota ? $sewa->kota->nama_kota : '-' }}</p>
                    </div>

                    <div>
                        <p class="font-medium">Biaya Ongkir</p>
                        <p>Rp {{ number_format($sewa->ongkir, 0, ',', '.') }}</p>
                    </div>

                    @if($sewa->catatan)
                    <div>
                        <p class="font-medium">Catatan</p>
                        <p class="text-gray-600">{{ $sewa->catatan }}</p>
                    </div>
                    @endif

                    @if($sewa->status == 'pending')
                    <div class="pt-4">
                        <div class="bg-blue-50 border-l-4 border-blue-400 p-4 mb-4">
                            <div class="flex">
                                <div class="flex-shrink-0">
                                    <svg class="h-5 w-5 text-blue-400" viewBox="0 0 20 20" fill="currentColor">
                                        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/>
                                    </svg>
                                </div>
                                <div class="ml-3">
                                    <p class="text-sm text-blue-700">
                                        Silakan isi kolom nominal dana yang diupload pada upload bukti pembayaran dan upload juga jaminan untuk melanjutkan proses penyewaan.
                                        <br>Total yang harus dibayar DP 50% atau melunasi pembayaran sewa
                                    </p>
                                </div>
                            </div>
                        </div>

                        <div class="bg-white rounded-lg border p-6">
                            <h3 class="text-lg font-semibold mb-4">Upload Bukti Pembayaran dan Jaminan</h3>
                            <form action="{{ route('sewa.upload-bukti', $sewa->id) }}" method="POST" enctype="multipart/form-data" class="space-y-6">
                            @csrf
                            <div>
                                <label for="nominal_pembayaran" class="block text-sm font-medium text-gray-700 mb-2">
                                        Nominal Pembayaran <span class="text-red-500">*</span>
                                </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="number" name="nominal_pembayaran" id="nominal_pembayaran" 
                                           required
                                           class="focus:ring-blue-500 focus:border-blue-500 block w-full pl-12 pr-12 sm:text-sm border-gray-300 rounded-md"
                                           placeholder="0"
                                           min="1"
                                           max="{{ $sewa->total_harga }}">
                                </div>
                                <div class="mt-1">
                                    <p class="text-sm text-gray-500">Rekomendasi pembayaran minimal DP 50% (Rp {{ number_format($sewa->total_harga * 0.5, 0, ',', '.') }})</p>
                                    <p class="text-sm text-gray-500">Total yang harus dibayar: Rp {{ number_format($sewa->total_harga, 0, ',', '.') }}</p>
                                </div>
                                @error('nominal_pembayaran')
                                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>

                            <div>
                                <label for="bukti_pembayaran" class="block text-sm font-medium text-gray-700 mb-2">
                                        Bukti Pembayaran <span class="text-red-500">*</span>
                                </label>
                                <input type="file" name="bukti_pembayaran" id="bukti_pembayaran" 
                                       accept="image/*"
                                           class="w-full border border-gray-300 rounded-md shadow-sm px-3 py-2 focus:ring-blue-500 focus:border-blue-500" required>
                                    <p class="mt-1 text-sm text-gray-500">Format: JPG, PNG, JPEG (Maks. 2MB)</p>
                                @error('bukti_pembayaran')
                                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>

                            <div>
                                <label for="jenis_jaminan" class="block text-sm font-medium text-gray-700 mb-2">
                                        Jenis Jaminan <span class="text-red-500">*</span>
                                </label>
                                <select name="jenis_jaminan" id="jenis_jaminan" 
                                            class="w-full border border-gray-300 rounded-md shadow-sm px-3 py-2 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>

                            <div>
                                <label for="foto_jaminan" class="block text-sm font-medium text-gray-700 mb-2">
                                        Foto Jaminan (KTP/SIM) <span class="text-red-500">*</span>
                                </label>
                                <input type="file" name="foto_jaminan" id="foto_jaminan" 
                                       accept="image/*"
                                           class="w-full border border-gray-300 rounded-md shadow-sm px-3 py-2 focus:ring-blue-500 focus:border-blue-500" required>
                                    <p class="mt-1 text-sm text-gray-500">Format: JPG, PNG, JPEG (Maks. 2MB)</p>
                                @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 rounded-md py-2 px-4 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
                                        Upload dan Lanjutkan Penyewaan
                            </button>
                                </div>
                        </form>
                        </div>
                    </div>
                    @endif
                </div>
            </div>
        </div>

        <div class="mt-8 flex space-x-4">
            <a href="{{ route('sewa.index') }}" 
               class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md text-gray-700 bg-white hover:bg-gray-50">
                <svg class="h-5 w-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
                </svg>
                Kembali
            </a>
            
            @if(auth()->check() && $sewa->status != 'draft')
            <a href="{{ auth()->user()->tipe_pengguna === 'admin' ? route('chat.show', $sewa->user_id) : route('chat.show', $adminId) }}" 
               class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">
                <svg class="h-5 w-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
                </svg>
                {{ auth()->user()->tipe_pengguna === 'admin' ? 'Chat dengan Penyewa' : 'Chat dengan Admin' }}
            </a>
            @endif
        </div>
    </div>
</div>
@endsection