@extends('layouts.admin')

@section('title', 'Edit Conference Facility')

@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 Conference Facility</h1>
        <div class="admin-card">
            <form action="{{ route('admin.conferences.update', $conference) }}" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')
                <div class="admin-form-group">
                    <label class="admin-form-label">Conference Name <span class="required">*</span></label>
                    <input type="text" name="name" class="admin-form-input" required value="{{ old('name', $conference->name) }}">
                </div>
                <div class="admin-form-group">
                    <label class="admin-form-label">Hall Code</label>
                    <input type="text" name="room_number" class="admin-form-input" value="{{ old('room_number', $conference->room_number) }}">
                </div>
                <div class="admin-form-group">
                    <label class="admin-form-label">Capacity (participants) <span class="required">*</span></label>
                    <input type="number" min="1" max="1000" name="conference_capacity" class="admin-form-input" required value="{{ old('conference_capacity', $conference->conference_capacity) }}">
                </div>
                <div class="admin-form-group">
                    <label class="admin-form-label">Price <span class="required">*</span></label>
                    <input type="number" step="0.01" min="0" name="price" class="admin-form-input" required value="{{ old('price', $conference->price) }}">
                </div>
                <div class="admin-form-group">
                    <label class="admin-form-label">Pricing Unit <span class="required">*</span></label>
                    <select name="pricing_unit" class="admin-form-select" required>
                        <option value="session" {{ old('pricing_unit', $conference->pricing_unit) === 'session' ? 'selected' : '' }}>Per Session</option>
                        <option value="day" {{ old('pricing_unit', $conference->pricing_unit) === 'day' ? 'selected' : '' }}>Per Day</option>
                    </select>
                </div>
                <div class="admin-form-group">
                    <label class="admin-form-label">Conference Details <span class="required">*</span></label>
                    <textarea name="description" class="admin-form-input admin-form-textarea" rows="4" required>{{ old('description', $conference->description) }}</textarea>
                </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($conference->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="openConferenceImageViewer({{ $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' => 'High-Speed WiFi', 'air_conditioning' => 'Air Conditioning', 'tv' => 'Projector/TV', 'parking' => 'Parking', 'security' => '24/7 Security', 'restaurant' => 'Restaurant Access', 'front_desk' => '24h Front Desk'];
                            $selected = old('amenities', $conference->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.conferences.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 Conference</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div id="conferenceImageViewerModal" class="fixed inset-0 bg-black bg-opacity-90 hidden items-center justify-center p-4" style="z-index: 9999;">
    <button type="button" onclick="closeConferenceImageViewer()" class="absolute top-4 right-6 text-white text-4xl leading-none">&times;</button>
    <button type="button" onclick="prevConferenceImage()" 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="conferenceViewerImage" src="" alt="Conference 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="zoomOutConferenceImage()" class="px-3 py-2 rounded-lg bg-white text-gray-800 font-semibold">-</button>
            <span id="conferenceZoomLabel" class="text-white text-sm">100%</span>
            <button type="button" onclick="zoomInConferenceImage()" class="px-3 py-2 rounded-lg bg-white text-gray-800 font-semibold">+</button>
        </div>
    </div>
    <button type="button" onclick="nextConferenceImage()" 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 conferenceImages = @json(collect($conference->images ?? [])->map(fn($image) => \App\Models\Room::resolveImageUrl($image))->values()->all());
    let conferenceImageIndex = 0;
    let conferenceImageZoom = 1;

    function renderConferenceImage() {
        const img = document.getElementById('conferenceViewerImage');
        const label = document.getElementById('conferenceZoomLabel');
        if (!img || !conferenceImages.length) return;
        img.src = conferenceImages[conferenceImageIndex];
        img.style.transform = `scale(${conferenceImageZoom})`;
        if (label) label.textContent = `${Math.round(conferenceImageZoom * 100)}%`;
    }

    function openConferenceImageViewer(index) {
        if (!conferenceImages.length) return;
        conferenceImageIndex = index >= 0 ? index : 0;
        conferenceImageZoom = 1;
        renderConferenceImage();
        const modal = document.getElementById('conferenceImageViewerModal');
        modal.classList.remove('hidden');
        modal.classList.add('flex');
    }

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

    function nextConferenceImage() {
        if (!conferenceImages.length) return;
        conferenceImageIndex = (conferenceImageIndex + 1) % conferenceImages.length;
        renderConferenceImage();
    }

    function prevConferenceImage() {
        if (!conferenceImages.length) return;
        conferenceImageIndex = (conferenceImageIndex - 1 + conferenceImages.length) % conferenceImages.length;
        renderConferenceImage();
    }

    function zoomInConferenceImage() {
        conferenceImageZoom = Math.min(conferenceImageZoom + 0.2, 3);
        renderConferenceImage();
    }

    function zoomOutConferenceImage() {
        conferenceImageZoom = Math.max(conferenceImageZoom - 0.2, 0.6);
        renderConferenceImage();
    }

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