@php
    $editing = isset($roomType) && $roomType;
    $savedAmenities = old('amenities', $editing ? ($roomType->amenities ?? []) : []);
    if (empty($savedAmenities)) $savedAmenities = [''];
@endphp

@if(session('error'))
    <div class="alert alert-danger">{{ session('error') }}</div>
@endif

<div class="room-form-layout">
    <div class="room-form-main">
        <section class="panel form-panel">
            <div class="panel-header">
                <div>
                    <h2 class="panel-title">Basic Information</h2>
                    <p class="panel-note">Main room name and description.</p>
                </div>
            </div>
            <div class="panel-body">
                <div class="form-grid form-grid-room-title">
                    <div class="form-group">
                        <label for="name" class="form-label">Room Type Name <span class="required">*</span></label>
                        <input type="text" name="name" id="name"
                               value="{{ old('name', $editing ? $roomType->name : '') }}"
                               class="form-control @error('name') has-error @enderror"
                               placeholder="Example: Deluxe King Room" required>
                        @error('name') <div class="field-error">{{ $message }}</div> @enderror
                    </div>
                    <div class="form-group">
                        <label for="small_title" class="form-label">Small Title</label>
                        <input type="text" name="small_title" id="small_title"
                               value="{{ old('small_title', $editing ? $roomType->small_title : '') }}"
                               class="form-control @error('small_title') has-error @enderror"
                               placeholder="Luxury & Comfort">
                        @error('small_title') <div class="field-error">{{ $message }}</div> @enderror
                    </div>
                    <div class="form-group full">
                        <label for="slug" class="form-label">URL Slug</label>
                        <input type="text" name="slug" id="slug"
                               value="{{ old('slug', $editing ? $roomType->slug : '') }}"
                               class="form-control @error('slug') has-error @enderror"
                               placeholder="Leave empty to generate automatically">
                        <div class="form-help">Example: deluxe-king-room</div>
                        @error('slug') <div class="field-error">{{ $message }}</div> @enderror
                    </div>
                    <div class="form-group full">
                        <label for="short_description" class="form-label">Short Description</label>
                        <textarea name="short_description" id="short_description" rows="3" maxlength="500"
                                  class="form-control @error('short_description') has-error @enderror"
                                  placeholder="Short introduction for room cards...">{{ old('short_description', $editing ? $roomType->short_description : '') }}</textarea>
                        <div class="form-help">Maximum 500 characters.</div>
                        @error('short_description') <div class="field-error">{{ $message }}</div> @enderror
                    </div>
                    <div class="form-group full form-group-last">
                        <label for="description" class="form-label">Full Description</label>
                        <textarea name="description" id="description" rows="8"
                                  class="form-control @error('description') has-error @enderror"
                                  placeholder="Write the complete room description...">{{ old('description', $editing ? $roomType->description : '') }}</textarea>
                        @error('description') <div class="field-error">{{ $message }}</div> @enderror
                    </div>
                </div>
            </div>
        </section>

        <section class="panel form-panel">
            <div class="panel-header">
                <div><h2 class="panel-title">Pricing & Inventory</h2><p class="panel-note">Nightly pricing and total available rooms.</p></div>
            </div>
            <div class="panel-body">
                <div class="form-grid form-grid-three">
                    <div class="form-group form-group-last">
                        <label for="base_price" class="form-label">Base Price <span class="required">*</span></label>
                        <div class="money-field"><span>৳</span><input type="number" name="base_price" id="base_price" value="{{ old('base_price', $editing ? $roomType->base_price : '') }}" class="form-control @error('base_price') has-error @enderror" min="0" step="0.01" required></div>
                        @error('base_price') <div class="field-error">{{ $message }}</div> @enderror
                    </div>
                    <div class="form-group form-group-last">
                        <label for="discount_price" class="form-label">Discount Price</label>
                        <div class="money-field"><span>৳</span><input type="number" name="discount_price" id="discount_price" value="{{ old('discount_price', $editing ? $roomType->discount_price : '') }}" class="form-control @error('discount_price') has-error @enderror" min="0" step="0.01"></div>
                        <div class="form-help">Must be lower than base price.</div>
                        @error('discount_price') <div class="field-error">{{ $message }}</div> @enderror
                    </div>
                    <div class="form-group form-group-last">
                        <label for="total_rooms" class="form-label">Total Rooms <span class="required">*</span></label>
                        <input type="number" name="total_rooms" id="total_rooms" value="{{ old('total_rooms', $editing ? $roomType->total_rooms : 0) }}" class="form-control @error('total_rooms') has-error @enderror" min="0" required>
                        @error('total_rooms') <div class="field-error">{{ $message }}</div> @enderror
                    </div>
                </div>
            </div>
        </section>

        <section class="panel form-panel">
            <div class="panel-header">
                <div><h2 class="panel-title">Capacity & Room Features</h2><p class="panel-note">Guest capacity, size, bed and view information.</p></div>
            </div>
            <div class="panel-body">
                <div class="form-grid form-grid-three">
                    <div class="form-group">
                        <label for="maximum_guests" class="form-label">Maximum Guests <span class="required">*</span></label>
                        <input type="number" name="maximum_guests" id="maximum_guests" value="{{ old('maximum_guests', $editing ? $roomType->maximum_guests : 2) }}" class="form-control @error('maximum_guests') has-error @enderror" min="1" max="255" required>
                        @error('maximum_guests') <div class="field-error">{{ $message }}</div> @enderror
                    </div>
                    <div class="form-group">
                        <label for="maximum_adults" class="form-label">Maximum Adults <span class="required">*</span></label>
                        <input type="number" name="maximum_adults" id="maximum_adults" value="{{ old('maximum_adults', $editing ? $roomType->maximum_adults : 2) }}" class="form-control @error('maximum_adults') has-error @enderror" min="1" max="255" required>
                        @error('maximum_adults') <div class="field-error">{{ $message }}</div> @enderror
                    </div>
                    <div class="form-group">
                        <label for="maximum_children" class="form-label">Maximum Children <span class="required">*</span></label>
                        <input type="number" name="maximum_children" id="maximum_children" value="{{ old('maximum_children', $editing ? $roomType->maximum_children : 0) }}" class="form-control @error('maximum_children') has-error @enderror" min="0" max="255" required>
                        @error('maximum_children') <div class="field-error">{{ $message }}</div> @enderror
                    </div>
                    <div class="form-group form-group-last">
                        <label for="room_size" class="form-label">Room Size</label>
                        <input type="text" name="room_size" id="room_size" value="{{ old('room_size', $editing ? $roomType->room_size : '') }}" class="form-control @error('room_size') has-error @enderror" placeholder="Example: 450 sq. ft.">
                        @error('room_size') <div class="field-error">{{ $message }}</div> @enderror
                    </div>
                    <div class="form-group form-group-last">
                        <label for="bed_type" class="form-label">Bed Type</label>
                        <input type="text" name="bed_type" id="bed_type" value="{{ old('bed_type', $editing ? $roomType->bed_type : '') }}" class="form-control @error('bed_type') has-error @enderror" placeholder="Example: 1 King Bed">
                        @error('bed_type') <div class="field-error">{{ $message }}</div> @enderror
                    </div>
                    <div class="form-group form-group-last">
                        <label for="view_type" class="form-label">View Type</label>
                        <input type="text" name="view_type" id="view_type" value="{{ old('view_type', $editing ? $roomType->view_type : '') }}" class="form-control @error('view_type') has-error @enderror" placeholder="Example: Garden View">
                        @error('view_type') <div class="field-error">{{ $message }}</div> @enderror
                    </div>
                </div>
            </div>
        </section>

        <section class="panel form-panel">
            <div class="panel-header amenity-heading">
                <div><h2 class="panel-title">Amenities</h2><p class="panel-note">Add the facilities included with this room.</p></div>
                <button type="button" id="addAmenityButton" class="btn btn-secondary">+ Add Amenity</button>
            </div>
            <div class="panel-body">
                <div id="amenitiesContainer">
                    @foreach($savedAmenities as $amenity)
                        <div class="amenity-row">
                            <span class="amenity-mark">✓</span>
                            <input type="text" name="amenities[]" value="{{ $amenity }}" class="form-control" placeholder="Example: Free Wi-Fi">
                            <button type="button" class="btn btn-danger remove-amenity-button" aria-label="Remove amenity">Remove</button>
                        </div>
                    @endforeach
                </div>
                @error('amenities') <div class="field-error">{{ $message }}</div> @enderror
                @error('amenities.*') <div class="field-error">{{ $message }}</div> @enderror
            </div>
        </section>

        <section class="panel form-panel">
            <div class="panel-header">
                <div><h2 class="panel-title">Room Gallery</h2><p class="panel-note">Upload up to 20 images at once. Maximum 5 MB each.</p></div>
            </div>
            <div class="panel-body">
                <div class="form-group form-group-last">
                    <label for="gallery_images" class="form-label">Upload Gallery Images</label>
                    <input type="file" name="gallery_images[]" id="gallery_images" class="form-control @error('gallery_images') has-error @enderror" accept=".jpg,.jpeg,.png,.webp" multiple>
                    @error('gallery_images') <div class="field-error">{{ $message }}</div> @enderror
                    @error('gallery_images.*') <div class="field-error">{{ $message }}</div> @enderror
                </div>
                <div id="galleryPreview" class="gallery-grid gallery-preview"></div>

                @if($editing && $roomType->images->isNotEmpty())
                    <div class="gallery-divider"></div>
                    <h3 class="section-small-title">Existing Gallery Images</h3>
                    <div class="gallery-grid">
                        @foreach($roomType->images as $roomImage)
                            <div class="gallery-item">
                                <img src="{{ asset('storage/' . $roomImage->image) }}" alt="{{ $roomImage->alt_text ?: $roomType->name }}">
                                <span class="badge gallery-status {{ $roomImage->status ? 'badge-success' : 'badge-danger' }}">{{ $roomImage->status ? 'Active' : 'Inactive' }}</span>
                                <div class="gallery-actions">
                                    <button type="submit" form="toggle-image-{{ $roomImage->id }}" class="btn btn-secondary btn-small">{{ $roomImage->status ? 'Hide' : 'Show' }}</button>
                                    <button type="submit" form="delete-image-{{ $roomImage->id }}" class="btn btn-danger btn-small delete-gallery-button">Delete</button>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>
        </section>

        <section class="panel form-panel">
            <div class="panel-header"><div><h2 class="panel-title">SEO Information</h2><p class="panel-note">Optional search engine information.</p></div></div>
            <div class="panel-body">
                <div class="form-grid">
                    <div class="form-group full">
                        <label for="meta_title" class="form-label">Meta Title</label>
                        <input type="text" name="meta_title" id="meta_title" value="{{ old('meta_title', $editing ? $roomType->meta_title : '') }}" class="form-control @error('meta_title') has-error @enderror">
                        @error('meta_title') <div class="field-error">{{ $message }}</div> @enderror
                    </div>
                    <div class="form-group full form-group-last">
                        <label for="meta_description" class="form-label">Meta Description</label>
                        <textarea name="meta_description" id="meta_description" rows="4" class="form-control @error('meta_description') has-error @enderror">{{ old('meta_description', $editing ? $roomType->meta_description : '') }}</textarea>
                        @error('meta_description') <div class="field-error">{{ $message }}</div> @enderror
                    </div>
                </div>
            </div>
        </section>
    </div>

    <aside class="room-form-sidebar">
        <section class="panel form-panel">
            <div class="panel-header"><h2 class="panel-title">Publish Settings</h2></div>
            <div class="panel-body">
                <div class="switch-setting">
                    <input type="hidden" name="status" value="0">
                    <label class="switch-line" for="status">
                        <input type="checkbox" name="status" id="status" value="1" @checked(old('status', $editing ? $roomType->status : true))>
                        <span><strong>Active</strong><small>Active rooms can appear on the website.</small></span>
                    </label>
                </div>
                <div class="switch-setting">
                    <input type="hidden" name="is_featured" value="0">
                    <label class="switch-line" for="is_featured">
                        <input type="checkbox" name="is_featured" id="is_featured" value="1" @checked(old('is_featured', $editing ? $roomType->is_featured : false))>
                        <span><strong>Featured Room</strong><small>Featured rooms receive priority placement.</small></span>
                    </label>
                </div>
                <div class="form-group form-group-last">
                    <label for="sort_order" class="form-label">Sort Order</label>
                    <input type="number" name="sort_order" id="sort_order" value="{{ old('sort_order', $editing ? $roomType->sort_order : 0) }}" class="form-control @error('sort_order') has-error @enderror" min="0">
                    @error('sort_order') <div class="field-error">{{ $message }}</div> @enderror
                </div>
            </div>
        </section>

        <section class="panel form-panel">
            <div class="panel-header"><h2 class="panel-title">Featured Image</h2></div>
            <div class="panel-body">
                <div id="featuredImagePreview" class="featured-image-preview">
                    @if($editing && $roomType->featured_image)
                        <img src="{{ asset('storage/' . $roomType->featured_image) }}" alt="{{ $roomType->name }}">
                    @else
                        <div class="image-placeholder"><span class="image-placeholder-mark">IMG</span><span>Image preview</span></div>
                    @endif
                </div>
                <input type="file" name="featured_image" id="featured_image" class="form-control @error('featured_image') has-error @enderror" accept=".jpg,.jpeg,.png,.webp">
                <div class="form-help">JPG, PNG or WebP. Maximum 5 MB.</div>
                @error('featured_image') <div class="field-error">{{ $message }}</div> @enderror
            </div>
        </section>

        <section class="panel form-panel">
            <div class="panel-header"><h2 class="panel-title">Button Settings</h2></div>
            <div class="panel-body">
                <div class="form-group form-group-last">
                    <label for="button_text" class="form-label">Button Text</label>
                    <input type="text" name="button_text" id="button_text" value="{{ old('button_text', $editing ? $roomType->button_text : 'View Details') }}" class="form-control @error('button_text') has-error @enderror" placeholder="View Details">
                    @error('button_text') <div class="field-error">{{ $message }}</div> @enderror
                </div>
            </div>
        </section>

        <div class="sidebar-actions">
            <button type="submit" class="btn btn-primary btn-submit">{{ $submitText }}</button>
            <a href="{{ route('admin.room-types.index') }}" class="btn btn-secondary btn-submit">Cancel</a>
        </div>
    </aside>
</div>

@push('styles')
<style>
    .room-form-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(290px, 1fr); gap: 24px; align-items: start; }
    .form-panel { margin-bottom: 24px; }
    .panel-note { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
    .form-grid-room-title { grid-template-columns: 2fr 1fr; }
    .form-grid-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .form-group-last { margin-bottom: 0; }
    textarea.form-control { display: block; resize: vertical; line-height: 1.6; }
    .required, .field-error { color: var(--danger); }
    .field-error { margin-top: 7px; font-size: 12px; }
    .form-control.has-error { border-color: var(--danger); }
    .money-field { position: relative; }
    .money-field > span { position: absolute; z-index: 1; top: 50%; left: 14px; transform: translateY(-50%); color: #71808a; font-weight: 700; }
    .money-field .form-control { padding-left: 35px; }
    .amenity-heading { flex-wrap: wrap; }
    .amenity-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 9px; align-items: center; margin-bottom: 10px; }
    .amenity-mark { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 8px; background: #e8f8ee; color: var(--success); font-weight: 700; }
    .featured-image-preview { width: 100%; min-height: 220px; margin-bottom: 15px; overflow: hidden; border: 1px dashed #cbd5da; border-radius: 10px; background: #f7f9fa; }
    .featured-image-preview img { width: 100%; height: 220px; display: block; object-fit: cover; }
    .image-placeholder { min-height: 220px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px; color: #94a1a9; }
    .image-placeholder-mark { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: #e8edf0; color: #71808a; font-size: 11px; font-weight: 700; }
    .gallery-preview:empty { display: none; }
    .gallery-preview { margin-top: 18px; }
    .gallery-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
    .gallery-item { position: relative; min-height: 145px; overflow: hidden; border-radius: 10px; background: #edf2f5; }
    .gallery-item img { width: 100%; height: 145px; display: block; object-fit: cover; }
    .gallery-status { position: absolute; top: 8px; left: 8px; }
    .gallery-actions { position: absolute; right: 8px; bottom: 8px; display: flex; gap: 6px; }
    .gallery-divider { height: 1px; margin: 24px 0; background: var(--border); }
    .section-small-title { margin: 0 0 14px; font-family: Georgia, serif; font-size: 17px; font-weight: 500; }
    .btn-small { min-height: 32px; padding: 6px 10px; }
    .room-form-sidebar { position: sticky; top: 24px; }
    .switch-setting { padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--border); }
    .switch-line { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
    .switch-line input { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 2px; accent-color: var(--navy); }
    .switch-line strong, .switch-line small { display: block; }
    .switch-line strong { color: #344955; font-size: 13px; }
    .switch-line small { margin-top: 5px; color: var(--muted); line-height: 1.45; }
    .sidebar-actions { display: grid; gap: 10px; }
    .btn-submit { width: 100%; }
    @media (max-width: 1100px) { .room-form-layout { grid-template-columns: 1fr; } .room-form-sidebar { position: static; } }
    @media (max-width: 820px) { .form-grid-three, .form-grid-room-title { grid-template-columns: 1fr; } .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media (max-width: 520px) { .gallery-grid { grid-template-columns: 1fr; } .amenity-row { grid-template-columns: 1fr auto; } .amenity-mark { display: none; } }
</style>
@endpush

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const amenitiesContainer = document.getElementById('amenitiesContainer');
        const addAmenityButton = document.getElementById('addAmenityButton');

        function bindRemoveButtons() {
            document.querySelectorAll('.remove-amenity-button').forEach(function (button) {
                button.onclick = function () {
                    const rows = amenitiesContainer.querySelectorAll('.amenity-row');
                    if (rows.length === 1) {
                        const input = rows[0].querySelector('input');
                        input.value = '';
                        input.focus();
                        return;
                    }
                    button.closest('.amenity-row').remove();
                };
            });
        }

        if (addAmenityButton && amenitiesContainer) {
            addAmenityButton.addEventListener('click', function () {
                const row = document.createElement('div');
                row.className = 'amenity-row';
                row.innerHTML = '<span class="amenity-mark">✓</span>' +
                    '<input type="text" name="amenities[]" class="form-control" placeholder="Example: Free Wi-Fi">' +
                    '<button type="button" class="btn btn-danger remove-amenity-button" aria-label="Remove amenity">Remove</button>';
                amenitiesContainer.appendChild(row);
                bindRemoveButtons();
                row.querySelector('input').focus();
            });
            bindRemoveButtons();
        }

        const featuredInput = document.getElementById('featured_image');
        const featuredPreview = document.getElementById('featuredImagePreview');
        if (featuredInput && featuredPreview) {
            featuredInput.addEventListener('change', function () {
                const file = featuredInput.files[0];
                if (!file || !file.type.startsWith('image/')) return;
                const reader = new FileReader();
                reader.onload = function (event) {
                    featuredPreview.innerHTML = '<img src="' + event.target.result + '" alt="Featured image preview">';
                };
                reader.readAsDataURL(file);
            });
        }

        const galleryInput = document.getElementById('gallery_images');
        const galleryPreview = document.getElementById('galleryPreview');
        if (galleryInput && galleryPreview) {
            galleryInput.addEventListener('change', function () {
                galleryPreview.innerHTML = '';
                Array.from(galleryInput.files).forEach(function (file) {
                    if (!file.type.startsWith('image/')) return;
                    const reader = new FileReader();
                    reader.onload = function (event) {
                        const item = document.createElement('div');
                        item.className = 'gallery-item';
                        item.innerHTML = '<img src="' + event.target.result + '" alt="Gallery image preview">';
                        galleryPreview.appendChild(item);
                    };
                    reader.readAsDataURL(file);
                });
            });
        }

        document.querySelectorAll('.delete-gallery-button').forEach(function (button) {
            button.addEventListener('click', function (event) {
                if (!window.confirm('Are you sure you want to delete this image?')) event.preventDefault();
            });
        });
    });
</script>
@endpush