@extends('layouts.app')
@section('title', 'Sewa Kamera')
@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    @if(session('status'))
        <div class="mb-4 rounded-xl border border-green-200 bg-green-50 px-4 py-3 text-sm text-green-700">
            {{ session('status') }}
        </div>
    @endif

    <div class="flex flex-wrap items-center justify-between gap-3 mb-6">
        <div>
            <h1 class="text-2xl font-bold text-gray-900">Sewa Kamera</h1>
            <p class="text-sm text-gray-600 mt-1">Jumlah kamera tersedia dari dataset: <span class="font-semibold">{{ $kameras->count() }}</span></p>
        </div>
        <a href="{{ route('sewa.paket.create') }}" class="inline-flex items-center btn-dark px-4 py-2 text-sm font-medium">
            Sewa Kamera + Lensa
        </a>
    </div>

    <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
        @forelse($kameras as $kamera)
            @php($kameraImage = $kamera->image_path)
            <div class="bg-white rounded-xl border border-gray-100 shadow-sm p-4">
                @if($kameraImage)
                    <div class="mb-3 rounded-lg border border-gray-100 bg-gray-50 p-2">
                        <img
                            src="{{ asset($kameraImage) }}"
                            alt="{{ $kamera->nama }}"
                            class="h-40 w-full object-contain"
                            onerror="this.style.display='none'; this.nextElementSibling.style.display='block';"
                        >
                        <p class="hidden text-xs text-gray-500">Foto {{ $kamera->nama }} belum ditemukan di `public/{{ $kameraImage }}`.</p>
                    </div>
                @endif
                <h3 class="text-lg font-semibold text-gray-900">{{ $kamera->nama }}</h3>
                <p class="text-sm text-gray-600">{{ $kamera->merek }}</p>
                <p class="mt-1 text-xs font-semibold uppercase tracking-wide text-gray-400">Kode: {{ $kamera->kode_kamera ?? '-' }}</p>
                <div class="mt-3 space-y-1 text-sm text-gray-700">
                    <p>Harga: Rp {{ number_format($kamera->harga_sewa, 0, ',', '.') }}/hari</p>
                    <p>Stok tersedia: <span class="font-semibold">{{ $kamera->stok }}</span>/{{ \App\Models\Kamera::DEFAULT_STOCK }}</p>
                    <p>Low Light: {{ $kamera->low_light }}/10</p>
                    <p>Portabilitas: {{ $kamera->portabilitas }}/10</p>
                    <p>AF Speed: {{ $kamera->af_speed }}/10</p>
                </div>
                @if($kamera->stok > 0)
                    <a href="{{ route('sewa.kamera.create', $kamera->id) }}" class="mt-4 inline-block w-full btn-dark text-center py-2.5 font-medium">
                        Sewa Kamera Ini
                    </a>
                @else
                    <span class="mt-4 inline-block w-full rounded-lg border border-red-200 bg-red-50 px-4 py-2.5 text-center text-sm font-medium text-red-700">
                        Stok Kamera Habis
                    </span>
                @endif
            </div>
        @empty
            <div class="col-span-full bg-white rounded-xl border border-gray-100 p-6 text-center text-gray-500">
                Belum ada data kamera.
            </div>
        @endforelse
    </div>

    <div class="my-10 border-t border-gray-200"></div>

    <div class="flex flex-wrap items-center justify-between gap-3 mb-6">
        <div>
            <h2 class="text-2xl font-bold text-gray-900">Sewa Lensa</h2>
            <p class="text-sm text-gray-600 mt-1">Jumlah lensa tersedia dari dataset: <span class="font-semibold">{{ $lensas->count() }}</span></p>
        </div>
    </div>

    <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
        @forelse($lensas as $lensa)
            <div class="bg-white rounded-xl border border-gray-100 shadow-sm p-4">
                @php($lensaImage = $lensa->image_path)
                @if($lensaImage)
                    <div class="mb-3 rounded-lg border border-gray-100 bg-gray-50 p-2">
                        <img
                            src="{{ asset($lensaImage) }}"
                            alt="{{ $lensa->nama }}"
                            class="h-40 w-full object-contain"
                            onerror="this.style.display='none'; this.nextElementSibling.style.display='block';"
                        >
                        <p class="hidden text-xs text-gray-500">Foto {{ $lensa->nama }} belum ditemukan di `public/{{ $lensaImage }}`.</p>
                    </div>
                @endif
                <h3 class="text-lg font-semibold text-gray-900">{{ $lensa->nama }}</h3>
                <p class="text-sm text-gray-600">{{ $lensa->merek }}</p>
                <p class="mt-1 text-xs font-semibold uppercase tracking-wide text-gray-400">Kode: {{ $lensa->kode_lensa ?? '-' }}</p>
                <div class="mt-3 space-y-1 text-sm text-gray-700">
                    <p>Harga: Rp {{ number_format($lensa->harga_sewa, 0, ',', '.') }}/hari</p>
                    <p>Stok tersedia: <span class="font-semibold">{{ $lensa->stok }}</span>/{{ \App\Models\Lensa::DEFAULT_STOCK }}</p>
                    <p>Aperture Score: {{ number_format($lensa->aperture_score, 1) }}/10</p>
                    <p>Stabilisasi: {{ number_format($lensa->stabilisasi, 1) }}/10</p>
                    <p>Fleksibilitas: {{ number_format($lensa->fleksibilitas, 1) }}/10</p>
                </div>
                @if($lensa->stok > 0)
                    <a href="{{ route('sewa.lensa.create', $lensa->id) }}" class="mt-4 inline-block w-full btn-dark text-center py-2.5 font-medium">
                        Sewa Lensa Ini
                    </a>
                @else
                    <span class="mt-4 inline-block w-full rounded-lg border border-red-200 bg-red-50 px-4 py-2.5 text-center text-sm font-medium text-red-700">
                        Stok Lensa Habis
                    </span>
                @endif
            </div>
        @empty
            <div class="col-span-full bg-white rounded-xl border border-gray-100 p-6 text-center text-gray-500">
                Belum ada data lensa.
            </div>
        @endforelse
    </div>
</div>
@endsection