@extends('layouts.app')

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

@section('header', 'Paket Sound System')

@section('content')
<div class="container mx-auto px-4 py-8">
    {{-- Hapus alert error yang tidak diperlukan --}}
    @if(session('error'))
        {{-- Alert error dihapus agar tidak muncul pesan Route [paket] not defined --}}
    @endif

    <!-- Add Button - Only for Admin -->
    @if(auth()->user()->tipe_pengguna === 'admin')
    <div class="mb-6">
        <a href="{{ route('paket.create') }}" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
            <i class="fas fa-plus mr-2"></i>Tambah Paket
        </a>
    </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, ',', '.') }}
                        </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 - Only for Admin -->
                @if(auth()->user()->tipe_pengguna === 'admin')
                <div class="flex flex-col space-y-2 mt-4">
                    @if($paket->active_sewa_count > 0)
                        <div class="flex space-x-2">
                            <form action="{{ route('paket.activate', $paket->id) }}" method="POST" class="flex-1">
                                @csrf
                                <button type="submit" 
                                        class="w-full bg-green-500 hover:bg-green-600 text-white py-2 px-4 rounded"
                                        onclick="return confirm('Apakah Anda yakin ingin mengaktifkan 1 unit paket yang paling lama disewa?')">
                                    <i class="fas fa-check-circle mr-1"></i>Aktifkan 1 Unit
                                </button>
                            </form>
                            <form action="{{ route('paket.activate-all', $paket->id) }}" method="POST" class="flex-1">
                                @csrf
                                <button type="submit" 
                                        class="w-full bg-green-600 hover:bg-green-700 text-white py-2 px-4 rounded"
                                        onclick="return confirm('Apakah Anda yakin ingin mengaktifkan semua unit paket yang sedang disewa?')">
                                    <i class="fas fa-check-double mr-1"></i>Aktifkan Semua
                                </button>
                            </form>
                        </div>
                    @endif

                    <div class="flex space-x-2">
                        <a href="{{ route('paket.edit', $paket->id) }}" 
                           class="flex-1 bg-yellow-500 hover:bg-yellow-600 text-white text-center py-2 px-4 rounded">
                            <i class="fas fa-edit mr-1"></i>Edit
                        </a>
                        <form action="{{ route('paket.destroy', $paket->id) }}" method="POST" class="flex-1">
                            @csrf
                            @method('DELETE')
                            <button type="submit" 
                                    class="w-full bg-red-500 hover:bg-red-600 text-white py-2 px-4 rounded"
                                    onclick="return confirm('Apakah Anda yakin ingin menghapus paket ini?')">
                                <i class="fas fa-trash-alt mr-1"></i>Hapus
                            </button>
                        </form>
                    </div>
                </div>
                @endif
            </div>
        </div>
        @endforeach
    </div>
</div>
@endsection