@extends('layouts.admin')

@section('title', 'Edit Apartment')

@section('content')
<div class="container mx-auto px-4 py-8">
    <div class="max-w-3xl mx-auto">
        <h1 class="text-3xl font-bold mb-8" style="color: var(--admin-primary);">Edit Apartment</h1>
        <div class="admin-card">
            <form action="{{ route('admin.apartments.update', $apartment) }}" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')
                <div class="admin-form-group">
                    <label class="admin-form-label">Apartment Name <span class="required">*</span></label>
                    <input type="text" name="name" class="admin-form-input" required value="{{ old('name', $apartment->name) }}">
                </div>
                <div class="admin-form-group">
                    <label class="admin-form-label">Apartment Number</label>
                    <input type="text" name="room_number" class="admin-form-input" value="{{ old('room_number', $apartment->room_number) }}">
                </div>
                <div class="admin-form-group">
                    <label class="admin-form-label">Description <span class="required">*</span></label>
                    <textarea name="description" class="admin-form-input admin-form-textarea" rows="4" required>{{ old('description', $apartment->description) }}</textarea>
                </div>
                <div class="admin-form-group">
                    <label class="admin-form-label">Price per Night <span class="required">*</span></label>
                    <input type="number" step="0.01" min="0" name="price" class="admin-form-input" required value="{{ old('price', $apartment->price) }}">
                </div>
                <div class="admin-form-group">
                    <label class="admin-form-label">Keep Existing Images</label>
                    <div style="display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px;">
                        @foreach($apartment->images ?? [] as $image)
                            <label style="position:relative; border:2px solid #e5e7eb; border-radius:8px; overflow:hidden;">
                                <img src="{{ \App\Models\Room::resolveImageUrl($image) }}" style="width:100%; height:100px; object-fit:cover; cursor: zoom-in;" onclick="openApartmentImageViewer({{ $loop->index }})">
                                <span style="position:absolute; top:4px; left:4px; background:rgba(255,255,255,.9); padding:2px 6px; border-radius:4px; font-size:10px;">
                                    <input type="checkbox" name="existing_images[]" value="{{ $image }}" checked> Keep
                                </span>
                            </label>
                        @endforeach
                    </div>
                </div>
                <div class="admin-form-group">
                    <label class="admin-form-label">Add New Images</label>
                    <input type="file" name="images[]" class="admin-form-input" accept="image/*" multiple>
                </div>
                <div class="admin-form-group">
                    <label class="admin-form-label">Amenities (optional)</label>
                    <div class="admin-amenities-grid">
                        @php
                            $amenities = ['wifi' => 'WiFi', 'air_conditioning' => 'Air Conditioning', 'tv' => 'TV', 'kitchen' => 'Kitchen', 'bathroom' => 'Bathroom', 'parking' => 'Parking', 'security' => 'Security'];
                            $selected = old('amenities', $apartment->amenities ?? []);
                        @endphp
                        @foreach($amenities as $key => $label)
                        <label class="admin-amenity-checkbox">
                            <input type="checkbox" name="amenities[]" value="{{ $key }}" {{ in_array($key, $selected) ? 'checked' : '' }}>
                            <span class="admin-amenity-label">{{ $label }}</span>
                        </label>
                        @endforeach
                    </div>
                </div>
                <div style="display:flex; justify-content:flex-end; gap:1rem;">
                    <a href="{{ route('admin.apartments.index') }}" class="admin-btn admin-btn-secondary">Cancel</a>
                    <button type="submit" class="admin-btn admin-btn-primary"><i class="fas fa-save mr-2"></i>Update Apartment</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div id="apartmentImageViewerModal" class="fixed inset-0 bg-black bg-opacity-90 hidden items-center justify-center p-4" style="z-index: 9999;">
    <button type="button" onclick="closeApartmentImageViewer()" class="absolute top-4 right-6 text-white text-4xl leading-none">&times;</button>
    <button type="button" onclick="prevApartmentImage()" class="absolute top-1/2 transform -translate-y-1/2 left-4 md:left-8 text-white text-3xl w-12 h-12 rounded-full" style="background: rgba(0, 0, 0, 0.45);">&#10094;</button>
    <div class="max-w-5xl w-full flex flex-col items-center gap-4">
        <img id="apartmentViewerImage" src="" alt="Apartment image" class="w-auto max-w-full object-contain transition-transform duration-200 rounded-2xl border border-white" style="transform: scale(1); max-height: 58vh; max-width: 88vw;">
        <div class="flex items-center gap-3">
            <button type="button" onclick="zoomOutApartmentImage()" class="px-3 py-2 rounded-lg bg-white text-gray-800 font-semibold">-</button>
            <span id="apartmentZoomLabel" class="text-white text-sm">100%</span>
            <button type="button" onclick="zoomInApartmentImage()" class="px-3 py-2 rounded-lg bg-white text-gray-800 font-semibold">+</button>
        </div>
    </div>
    <button type="button" onclick="nextApartmentImage()" class="absolute top-1/2 transform -translate-y-1/2 right-4 md:right-8 text-white text-3xl w-12 h-12 rounded-full" style="background: rgba(0, 0, 0, 0.45);">&#10095;</button>
</div>
<script>
    const apartmentImages = @json(collect($apartment->images ?? [])->map(fn($image) => \App\Models\Room::resolveImageUrl($image))->values()->all());
    let apartmentImageIndex = 0;
    let apartmentImageZoom = 1;

    function renderApartmentImage() {
        const img = document.getElementById('apartmentViewerImage');
        const label = document.getElementById('apartmentZoomLabel');
        if (!img || !apartmentImages.length) return;
        img.src = apartmentImages[apartmentImageIndex];
        img.style.transform = `scale(${apartmentImageZoom})`;
        if (label) label.textContent = `${Math.round(apartmentImageZoom * 100)}%`;
    }

    function openApartmentImageViewer(index) {
        if (!apartmentImages.length) return;
        apartmentImageIndex = index >= 0 ? index : 0;
        apartmentImageZoom = 1;
        renderApartmentImage();
        const modal = document.getElementById('apartmentImageViewerModal');
        modal.classList.remove('hidden');
        modal.classList.add('flex');
    }

    function closeApartmentImageViewer() {
        const modal = document.getElementById('apartmentImageViewerModal');
        modal.classList.add('hidden');
        modal.classList.remove('flex');
    }

    function nextApartmentImage() {
        if (!apartmentImages.length) return;
        apartmentImageIndex = (apartmentImageIndex + 1) % apartmentImages.length;
        renderApartmentImage();
    }

    function prevApartmentImage() {
        if (!apartmentImages.length) return;
        apartmentImageIndex = (apartmentImageIndex - 1 + apartmentImages.length) % apartmentImages.length;
        renderApartmentImage();
    }

    function zoomInApartmentImage() {
        apartmentImageZoom = Math.min(apartmentImageZoom + 0.2, 3);
        renderApartmentImage();
    }

    function zoomOutApartmentImage() {
        apartmentImageZoom = Math.max(apartmentImageZoom - 0.2, 0.6);
        renderApartmentImage();
    }

    document.addEventListener('keydown', function(e) {
        const modal = document.getElementById('apartmentImageViewerModal');
        if (!modal || modal.classList.contains('hidden')) return;
        if (e.key === 'Escape') closeApartmentImageViewer();
        if (e.key === 'ArrowRight') nextApartmentImage();
        if (e.key === 'ArrowLeft') prevApartmentImage();
    });
</script>
@endsection