@extends('layouts.app')

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

@section('content')
<div class="container mx-auto px-4 py-6">
    <!-- Card Grid -->
    <div class="bg-white rounded-lg shadow-lg p-6">
        @if(count($pakets) > 0)
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                @foreach($pakets as $paket)
                <div class="bg-white rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 overflow-hidden">
                    <div class="p-3 border-b bg-gray-50">
                        <h3 class="text-center font-bold text-gray-800">{{ $paket->nama_paket }}</h3>
                    </div>
                    <div class="h-48 p-2 flex items-center justify-center overflow-hidden bg-gray-100 relative">
                        @if($paket->image)
                            <img src="{{ asset('storage/' . $paket->image) }}" 
                                alt="{{ $paket->nama_paket }}" 
                                class="w-full h-full object-contain">
                        @else
                            <div class="w-full h-full 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

                        @php
                            $activeSewa = $paket->sewas()->whereIn('status', ['confirmed', 'ongoing'])->count();
                        @endphp
                        
                        @if($activeSewa > 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">Stok tersedia: {{ $paket->stok - $activeSewa }}</p>
                                </div>
                            </div>
                        @endif
                    </div>
                    <div class="p-4">
                        <div class="space-y-2">
                            <div class="flex justify-between items-center">
                                <span class="text-sm font-semibold text-gray-600">Harga Sewa:</span>
                                <span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm font-medium">
                                    Rp {{ number_format($paket->harga, 0, ',', '.') }}/hari
                                </span>
                            </div>
                            <div class="flex justify-between items-center">
                                <span class="text-sm font-semibold text-gray-600">Jenis Paket:</span>
                                <span class="px-3 py-1 bg-purple-100 text-purple-800 rounded-full text-sm">
                                    {{ ucfirst($paket->jenis_paket) }}
                                </span>
                            </div>
                            @if($paket->minimum_order)
                            <div class="flex justify-between items-center">
                                <span class="text-sm font-semibold text-gray-600">Minimum Order:</span>
                                <span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">
                                    {{ $paket->minimum_order }} hari
                                </span>
                            </div>
                            @endif
                            
                            <!-- Stok Information -->
                            <div class="flex justify-between items-center">
                                <span class="text-sm font-semibold text-gray-600">Stok:</span>
                                <span class="px-3 py-1 {{ $activeSewa > 0 ? 'bg-orange-100 text-orange-800' : 'bg-green-100 text-green-800' }} rounded-full text-sm">
                                    {{ $paket->stok - $activeSewa }} tersedia
                                </span>
                            </div>
                        </div>
                        
                        @if($paket->keterangan)
                        <div class="mt-4">
                            <p class="text-sm text-gray-600 line-clamp-2">{{ $paket->keterangan }}</p>
                        </div>
                        @endif

                        <div class="mt-4">
                            @if($activeSewa >= $paket->stok)
                                <button disabled
                                    class="block w-full bg-gray-400 text-white px-4 py-2 rounded text-sm cursor-not-allowed">
                                    Paket Tidak Tersedia
                                </button>
                            @else
                                <a href="{{ route('sewa.create', $paket->id) }}"
                                    class="block w-full bg-blue-700 text-white px-4 py-2 rounded text-sm hover:bg-blue-800 text-center">
                                    Sewa Sekarang
                                </a>
                            @endif
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        @else
            <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>
                
                @if(auth()->check() && auth()->user()->role === 'admin')
                    <a href="{{ route('paket.create') }}" class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                        </svg>
                        Tambah Paket Baru
                    </a>
                @endif
            </div>
        @endif
    </div>
</div>
@endsection