@extends('layouts.app')

@section('title', 'Sewa - INUFA')
@section('header', 'Sewa Paket Sound System')

@section('content')
<div class="container mx-auto px-4 py-8">
    @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

    <!-- Paket Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        @foreach($pakets as $paket)
        <div class="bg-white rounded-lg shadow-md overflow-hidden">
            <!-- Image Section with Overlay -->
            <div class="h-48 bg-gray-200 relative">
                @if($paket->image)
                    <img src="{{ Storage::url($paket->image) }}" 
                         alt="{{ $paket->nama_paket }}" 
                         class="w-full h-full object-cover">
                @else
                    <div class="w-full h-full flex items-center justify-center">
                        <i class="fas fa-image text-4xl text-gray-400"></i>
                    </div>
                @endif
                
                @if($paket->stok_tersedia <= 0)
                    <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center">
                        <div class="text-white text-center p-4">
                            <i class="fas fa-clock text-3xl mb-2"></i>
                            <p class="font-bold">Sedang Disewa</p>
                            <p class="text-sm">{{ $paket->active_sewa_count }} dari {{ $paket->stok }} unit disewa</p>
                        </div>
                    </div>
                @endif
            </div>

            <!-- Content Section -->
            <div class="p-4">
                <h3 class="text-xl font-bold mb-2">{{ $paket->nama_paket }}</h3>
                
                <div class="space-y-2 mb-4">
                    <div class="flex justify-between">
                        <span class="text-gray-600">Harga:</span>
                        <span class="font-semibold text-green-600">
                            Rp {{ number_format($paket->harga, 0, ',', '.') }}/hari
                        </span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-600">Jenis:</span>
                        <span class="font-semibold">{{ ucfirst($paket->jenis_paket) }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-600">Stok:</span>
                        <span class="font-semibold">
                            {{ $paket->stok }}
                            @if($paket->active_sewa_count > 0)
                                <span class="text-orange-500 text-sm ml-1">({{ $paket->stok_tersedia }} tersedia)</span>
                            @endif
                        </span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-600">Status:</span>
                        <span class="font-semibold 
                            @if($paket->is_available)
                                text-green-600
                            @else
                                text-red-600
                            @endif">
                            {{ $paket->status_ketersediaan }}
                        </span>
                    </div>

                    <!-- Ongkir per Kota -->
                    @if($paket->ongkirKota->count() > 0)
                    <div class="mt-2">
                        <span class="text-gray-600 font-medium">Ongkir per Kota:</span>
                        <div class="mt-1 space-y-1">
                            @foreach($paket->ongkirKota as $ongkir)
                            <div class="flex justify-between text-sm">
                                <span class="text-gray-600">{{ $ongkir->nama_kota }}</span>
                                <span class="font-medium">Rp {{ number_format($ongkir->biaya_ongkir, 0, ',', '.') }}</span>
                            </div>
                            @endforeach
                        </div>
                    </div>
                    @endif
                </div>
                
                @if($paket->keterangan)
                <p class="text-gray-600 text-sm mb-4">{{ $paket->keterangan }}</p>
                @endif

                <!-- Action Buttons -->
                <div class="flex flex-col space-y-2 mt-4">
                    <button type="button" 
                        onclick="showPaketDetail('{{ $paket->id }}')"
                        class="w-full bg-gray-100 hover:bg-gray-200 text-gray-800 font-semibold py-2 px-4 rounded transition-colors">
                        <i class="fas fa-info-circle mr-2"></i>Lihat Detail
                    </button>

                    @auth
                        @if($paket->stok_tersedia <= 0)
                            <button disabled
                                class="w-full bg-gray-400 text-white py-2 px-4 rounded cursor-not-allowed">
                                <i class="fas fa-ban mr-2"></i>Tidak Tersedia
                            </button>
                        @else
                            <a href="{{ route('sewa.create', $paket->id) }}"
                                class="w-full bg-blue-600 hover:bg-blue-700 text-white text-center py-2 px-4 rounded transition-colors">
                                <i class="fas fa-shopping-cart mr-2"></i>Sewa Sekarang
                            </a>
                        @endif
                    @else
                        <a href="{{ route('login') }}"
                            class="w-full bg-blue-600 hover:bg-blue-700 text-white text-center py-2 px-4 rounded transition-colors">
                            <i class="fas fa-sign-in-alt mr-2"></i>Login untuk Menyewa
                        </a>
                    @endauth
                </div>
            </div>
        </div>
        @endforeach
    </div>

    @if(count($pakets) === 0)
        <div class="text-center py-12">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-20 w-20 text-gray-400 mx-auto mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
            </svg>
            <h3 class="text-xl font-semibold text-gray-800 mb-2">Tidak Ada Paket Tersedia</h3>
            <p class="text-gray-600 mb-6">Saat ini tidak ada paket yang tersedia untuk disewa.</p>
        </div>
    @endif
</div>

<!-- Modal Detail Paket -->
<div id="paketDetailModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
    <div class="bg-white rounded-lg shadow-xl max-w-4xl w-full mx-4 max-h-[90vh] overflow-y-auto">
        <div class="p-6">
            <div class="flex justify-between items-start mb-4">
                <h3 class="text-2xl font-bold text-gray-800" id="modalTitle"></h3>
                <button onclick="closePaketDetail()" class="text-gray-400 hover:text-gray-600">
                    <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Gambar Paket -->
                <div class="h-64 bg-gray-200 rounded-lg overflow-hidden">
                    <div id="modalImage" class="w-full h-full"></div>
                </div>
                
                <!-- Informasi Paket -->
                <div class="space-y-4">
                    <div id="modalInfo"></div>
                    
                    <div id="modalBarang" class="border-t pt-4">
                        <h4 class="font-semibold text-gray-700 mb-2">Daftar Barang:</h4>
                        <ul class="list-disc list-inside text-gray-600 space-y-1"></ul>
                    </div>

                    <div class="pt-4">
                        <div id="modalAction"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
async function showPaketDetail(paketId) {
    try {
        const response = await fetch(`/paket/${paketId}/detail`);
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        const paket = await response.json();
        
        // Update modal content
        document.getElementById('modalTitle').textContent = paket.nama_paket;
        
        // Update image
        const modalImage = document.getElementById('modalImage');
        if (paket.image) {
            modalImage.innerHTML = `
                <img src="/storage/${paket.image}" 
                    alt="${paket.nama_paket}" 
                    class="w-full h-full object-cover">
            `;
        } else {
            modalImage.innerHTML = `
                <div class="w-full h-full flex items-center justify-center">
                    <i class="fas fa-image text-4xl text-gray-400"></i>
                </div>
            `;
        }
        
        // Update info
        const modalInfo = document.getElementById('modalInfo');
        modalInfo.innerHTML = `
            <div class="space-y-3">
                <p class="text-gray-600">${paket.keterangan || 'Tidak ada keterangan'}</p>
                
                <div class="flex justify-between items-center">
                    <span class="font-semibold">Harga Sewa:</span>
                    <span class="text-green-600 font-bold">Rp ${parseInt(paket.harga).toLocaleString('id-ID')}/hari</span>
                </div>
                
                <div class="flex justify-between items-center">
                    <span class="font-semibold">Jenis Paket:</span>
                    <span class="px-3 py-1 bg-purple-100 text-purple-800 rounded-full">
                        ${paket.jenis_paket}
                    </span>
                </div>
                
                ${paket.minimum_order ? `
                <div class="flex justify-between items-center">
                    <span class="font-semibold">Minimum Order:</span>
                    <span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full">
                        ${paket.minimum_order} hari
                    </span>
                </div>
                ` : ''}
                
                <div class="flex justify-between items-center">
                    <span class="font-semibold">Stok:</span>
                    <span class="px-3 py-1 ${paket.stok > 0 ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'} rounded-full">
                        ${paket.stok} unit
                    </span>
                </div>
            </div>
        `;
        
        // Update barang list
        const barangList = document.querySelector('#modalBarang ul');
        barangList.innerHTML = '';
        if (paket.barangs && paket.barangs.length > 0) {
            paket.barangs.forEach(barang => {
                const li = document.createElement('li');
                li.textContent = `${barang.nama_barang} (${barang.pivot.jumlah} unit)`;
                barangList.appendChild(li);
            });
        } else {
            barangList.innerHTML = '<li>Tidak ada daftar barang</li>';
        }

        // Update action button
        const modalAction = document.getElementById('modalAction');
        if (paket.stok > 0) {
            modalAction.innerHTML = `
                <a href="/sewa/create/${paket.id}" 
                    class="block w-full bg-blue-600 text-white text-center px-4 py-2 rounded hover:bg-blue-700 transition-colors">
                    <i class="fas fa-shopping-cart mr-2"></i>Sewa Sekarang
                </a>
            `;
        } else {
            modalAction.innerHTML = `
                <button disabled class="block w-full bg-gray-400 text-white px-4 py-2 rounded cursor-not-allowed">
                    <i class="fas fa-ban mr-2"></i>Stok Tidak Tersedia
                </button>
            `;
        }
        
        // Show modal
        document.getElementById('paketDetailModal').classList.remove('hidden');
        document.getElementById('paketDetailModal').classList.add('flex');
        document.body.style.overflow = 'hidden';
    } catch (error) {
        console.error('Error fetching paket details:', error);
        alert('Terjadi kesalahan saat memuat detail paket');
    }
}

function closePaketDetail() {
    document.getElementById('paketDetailModal').classList.add('hidden');
    document.getElementById('paketDetailModal').classList.remove('flex');
    document.body.style.overflow = 'auto';
}

// Close modal when clicking outside
document.getElementById('paketDetailModal').addEventListener('click', function(e) {
    if (e.target === this) {
        closePaketDetail();
    }
});
</script>
@endpush
@endsection