@extends('layouts.admin')

@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(--primary-color);">Add New Room</h1>

        <div class="admin-card">
            <form action="{{ route('admin.rooms.store') }}" method="POST" enctype="multipart/form-data">
                @csrf

                <div class="admin-form-group">
                    <label for="name" class="admin-form-label" id="name_label">Room Name <span class="required">*</span></label>
                    <input type="text" name="name" id="name" required value="{{ old('name') }}"
                        class="admin-form-input @error('name') border-red-500 @enderror" placeholder="e.g., Mountain View Room">
                    @error('name')
                        <p style="color: var(--admin-danger); font-size: 12px; margin-top: 5px;">{{ $message }}</p>
                    @enderror
                </div>

                <div class="admin-form-group">
                    <label for="room_number" class="admin-form-label" id="room_number_label">Room Number</label>
                    <input type="text" name="room_number" id="room_number" value="{{ old('room_number') }}"
                        class="admin-form-input @error('room_number') border-red-500 @enderror" placeholder="e.g., 101, 202, A1">
                    @error('room_number')
                        <p style="color: var(--admin-danger); font-size: 12px; margin-top: 5px;">{{ $message }}</p>
                    @enderror
                    <p style="font-size: 12px; color: #6b7280; margin-top: 5px;" id="room_number_help">
                        <i class="fas fa-info-circle"></i> Optional: Room number will be displayed with the room name.
                    </p>
                </div>

                <div class="admin-form-group">
                    <label for="room_category" class="admin-form-label">Room Category</label>
                    <select name="room_category" id="room_category" class="admin-form-input @error('room_category') border-red-500 @enderror">
                        <option value="">-- Select Category --</option>
                        <option value="single" {{ old('room_category', request('room_category')) == 'single' ? 'selected' : '' }}>Single</option>
                        <option value="double" {{ old('room_category', request('room_category')) == 'double' ? 'selected' : '' }}>Double</option>
                        <option value="apartment" {{ old('room_category', request('room_category')) == 'apartment' ? 'selected' : '' }}>Apartment</option>
                        <option value="conference" {{ old('room_category', request('room_category')) == 'conference' ? 'selected' : '' }}>Conference</option>
                    </select>
                    @error('room_category')
                        <p style="color: var(--admin-danger); font-size: 12px; margin-top: 5px;">{{ $message }}</p>
                    @enderror
                    <p style="font-size: 12px; color: #6b7280; margin-top: 5px;">
                        <i class="fas fa-info-circle"></i> Select accommodation type or conference facility.
                    </p>
                </div>

                <div class="admin-form-group">
                    <label for="description" class="admin-form-label" id="description_label">Description <span class="required">*</span></label>
                    <textarea name="description" id="description" rows="4" required
                        class="admin-form-input admin-form-textarea @error('description') border-red-500 @enderror">{{ old('description') }}</textarea>
                    @error('description')
                        <p style="color: var(--admin-danger); font-size: 12px; margin-top: 5px;">{{ $message }}</p>
                    @enderror
                </div>

                <div class="admin-form-group">
                    <label for="price" class="admin-form-label" id="price_label">Price per Night <span class="required">*</span></label>
                    <input type="number" name="price" id="price" step="0.01" min="0" required value="{{ old('price') }}"
                        class="admin-form-input @error('price') border-red-500 @enderror">
                    @error('price')
                        <p style="color: var(--admin-danger); font-size: 12px; margin-top: 5px;">{{ $message }}</p>
                    @enderror
                </div>

                <div class="admin-form-group" id="conference_guidance" style="display: none; background: #fff8e7; border: 1px solid #fcd34d; padding: 12px; border-radius: 8px;">
                    <p style="font-size: 13px; font-weight: 600; color: #92400e; margin-bottom: 8px;">
                        <i class="fas fa-lightbulb"></i> Recommended conference details
                    </p>
                    <ul style="font-size: 12px; color: #78350f; margin-left: 16px; list-style: disc;">
                        <li>Use a clear hall name (e.g., Executive Conference Hall)</li>
                        <li>Use hall code in Room Number field (e.g., CONF-01)</li>
                        <li>In description include capacity, seating style, projector/sound, and booking terms</li>
                        <li>Set price as session or day rate</li>
                    </ul>
                </div>

                <div class="admin-form-group" id="imageInputGroup">
                    <label for="images" class="admin-form-label">
                        Room Images <span class="required">*</span>
                        <span style="font-weight: normal; color: #6b7280; font-size: 12px;">(Select one or more images)</span>
                    </label>
                    <div id="imageInputContainer" style="display: flex; gap: 10px; align-items: center;">
                        <input type="file" name="images[]" id="images" multiple accept="image/*"
                            class="admin-form-input @error('images') border-red-500 @enderror"
                            onchange="addImages(this)" style="flex: 1;">
                        <button type="button" id="addMoreBtn" onclick="document.getElementById('images').click()" class="admin-btn admin-btn-secondary" style="white-space: nowrap;">
                            <i class="fas fa-plus"></i> Add More
                        </button>
                    </div>
                    @error('images')
                        <p style="color: var(--admin-danger); font-size: 12px; margin-top: 5px;">{{ $message }}</p>
                    @enderror
                    @error('images.*')
                        <p style="color: var(--admin-danger); font-size: 12px; margin-top: 5px;">{{ $message }}</p>
                    @enderror
                    <div id="imagePreviewContainer" class="admin-image-preview-container" style="margin-top: 15px; padding: 15px; background: #f9fafb; border-radius: 8px; border: 2px dashed #e5e7eb;">
                        <p style="color: #6b7280; font-size: 13px; text-align: center; margin: 0;">
                            <i class="fas fa-images"></i> Selected images will appear here. Click "Add More" to select additional images.
                        </p>
                    </div>
                    <p style="font-size: 12px; color: #6b7280; margin-top: 10px;">
                        <i class="fas fa-info-circle"></i> You can upload multiple images and manage them as needed.
                    </p>
                </div>

                <div class="admin-form-group">
                    <label class="admin-form-label">Room Amenities</label>
                    <div class="admin-amenities-grid">
                        @php
                            $amenities = [
                                'breakfast' => ['icon' => 'fa-utensils', 'label' => 'Breakfast'],
                                'lunch' => ['icon' => 'fa-utensils', 'label' => 'Lunch'],
                                'dinner' => ['icon' => 'fa-utensils', 'label' => 'Dinner'],
                                'wifi' => ['icon' => 'fa-wifi', 'label' => 'Free WiFi'],
                                'ict' => ['icon' => 'fa-laptop', 'label' => 'ICT Facilities'],
                                'parking' => ['icon' => 'fa-car', 'label' => 'Free Parking'],
                                'air_conditioning' => ['icon' => 'fa-snowflake', 'label' => 'Air Conditioning'],
                                'tv' => ['icon' => 'fa-tv', 'label' => 'TV'],
                                'balcony' => ['icon' => 'fa-home', 'label' => 'Balcony'],
                                'kitchen' => ['icon' => 'fa-kitchen-set', 'label' => 'Kitchen'],
                                'bathroom' => ['icon' => 'fa-bath', 'label' => 'Private Bathroom'],
                                'laundry' => ['icon' => 'fa-shirt', 'label' => 'Laundry Service'],
                                'room_service' => ['icon' => 'fa-bell', 'label' => 'Room Service'],
                                'security' => ['icon' => 'fa-shield', 'label' => '24/7 Security'],
                            ];
                        @endphp
                        @foreach($amenities as $key => $amenity)
                            <label class="admin-amenity-checkbox">
                                <input type="checkbox" name="amenities[]" value="{{ $key }}" {{ old('amenities') && in_array($key, old('amenities')) ? 'checked' : '' }}>
                                <span class="admin-amenity-icon"><i class="fas {{ $amenity['icon'] }}"></i></span>
                                <span class="admin-amenity-label">{{ $amenity['label'] }}</span>
                            </label>
                        @endforeach
                    </div>
                    @error('amenities')
                        <p style="color: var(--admin-danger); font-size: 12px; margin-top: 5px;">{{ $message }}</p>
                    @enderror
                    <p style="font-size: 12px; color: #6b7280; margin-top: 5px;">
                        <i class="fas fa-info-circle"></i> Select amenities included with this room to attract customers.
                    </p>
                </div>

                <div style="display: flex; justify-content: flex-end; gap: 1rem; margin-top: 2rem;">
                    <a href="{{ route('admin.rooms.index') }}" class="admin-btn admin-btn-secondary">
                        Cancel
                    </a>
                    <button type="submit" class="admin-btn admin-btn-primary" id="submit_btn">
                        <i class="fas fa-save mr-2"></i>Create Room
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    // Store selected files globally
    let selectedFiles = [];
    let fileIdCounter = 0;

    function showNotification(message, type = 'warning') {
        // Remove existing notification if any
        const existing = document.getElementById('imageNotification');
        if (existing) {
            existing.remove();
        }
        
        // Create notification element
        const notification = document.createElement('div');
        notification.id = 'imageNotification';
        notification.style.cssText = `
            position: fixed;
            top: 20px;
            right: 20px;
            background: ${type === 'warning' ? '#fef3c7' : type === 'error' ? '#fee2e2' : '#d1fae5'};
            color: ${type === 'warning' ? '#92400e' : type === 'error' ? '#991b1b' : '#065f46'};
            padding: 16px 20px;
            border-radius: 12px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
            z-index: 10000;
            display: flex;
            align-items: center;
            gap: 12px;
            min-width: 300px;
            max-width: 400px;
            animation: slideInRight 0.3s ease-out;
            border-left: 4px solid ${type === 'warning' ? '#f59e0b' : type === 'error' ? '#ef4444' : '#10b981'};
        `;
        
        const icon = type === 'warning' ? 'fa-exclamation-triangle' : type === 'error' ? 'fa-times-circle' : 'fa-check-circle';
        notification.innerHTML = `
            <i class="fas ${icon}" style="font-size: 20px;"></i>
            <div style="flex: 1; font-size: 14px; font-weight: 500; line-height: 1.4;">${message}</div>
            <button onclick="this.parentElement.remove()" style="background: none; border: none; color: inherit; cursor: pointer; padding: 4px; opacity: 0.7; transition: opacity 0.2s;" onmouseover="this.style.opacity='1'" onmouseout="this.style.opacity='0.7'">
                <i class="fas fa-times"></i>
            </button>
        `;
        
        document.body.appendChild(notification);
        
        // Auto remove after 5 seconds
        setTimeout(() => {
            if (notification && notification.parentNode) {
                notification.style.animation = 'slideOutRight 0.3s ease-out';
                setTimeout(() => notification.remove(), 300);
            }
        }, 5000);
    }

    function updateCategoryUI() {
        const category = document.getElementById('room_category')?.value;
        const isConference = category === 'conference';

        const nameLabel = document.getElementById('name_label');
        const numberLabel = document.getElementById('room_number_label');
        const numberHelp = document.getElementById('room_number_help');
        const descLabel = document.getElementById('description_label');
        const priceLabel = document.getElementById('price_label');
        const submitBtn = document.getElementById('submit_btn');
        const guidance = document.getElementById('conference_guidance');

        if (!nameLabel || !numberLabel || !descLabel || !priceLabel || !submitBtn || !guidance) return;

        nameLabel.innerHTML = isConference ? 'Conference Name <span class="required">*</span>' : 'Room Name <span class="required">*</span>';
        numberLabel.textContent = isConference ? 'Hall Code' : 'Room Number';
        descLabel.innerHTML = isConference ? 'Conference Details <span class="required">*</span>' : 'Description <span class="required">*</span>';
        priceLabel.innerHTML = isConference ? 'Price per Session/Day <span class="required">*</span>' : 'Price per Night <span class="required">*</span>';
        submitBtn.innerHTML = isConference ? '<i class="fas fa-save mr-2"></i>Create Conference' : '<i class="fas fa-save mr-2"></i>Create Room';
        guidance.style.display = isConference ? 'block' : 'none';

        if (numberHelp) {
            numberHelp.innerHTML = isConference
                ? '<i class="fas fa-info-circle"></i> Optional: Use a unique hall code like CONF-01.'
                : '<i class="fas fa-info-circle"></i> Optional: Room number will be displayed with the room name.';
        }
    }

    function addImages(input) {
        if (input.files && input.files.length > 0) {
            // Add new files to the array
            for (let i = 0; i < input.files.length; i++) {
                const file = input.files[i];
                // Add file with unique ID
                selectedFiles.push({
                    id: fileIdCounter++,
                    file: file
                });
            }
            
            // Clear the input so user can select more
            input.value = '';
            
            // Update preview
            updatePreview();
        }
    }

    function removeImage(fileId) {
        selectedFiles = selectedFiles.filter(item => item.id !== fileId);
        updatePreview();
    }

    function updatePreview() {
        const container = document.getElementById('imagePreviewContainer');
        container.innerHTML = '';
        
        const fileCount = selectedFiles.length;
        const addMoreBtn = document.getElementById('addMoreBtn');
        const imageInputContainer = document.getElementById('imageInputContainer');
        const imageInputGroup = document.getElementById('imageInputGroup');
        
        if (addMoreBtn) {
            addMoreBtn.style.display = 'inline-flex';
        }
        if (imageInputContainer) {
            imageInputContainer.style.display = 'flex';
        }
        const label = imageInputGroup ? imageInputGroup.querySelector('label') : null;
        if (label) {
            const span = label.querySelector('span[style*="font-weight: normal"]');
            if (span) {
                span.textContent = '(Select one or more images)';
                span.style.color = '#6b7280';
                span.style.fontWeight = 'normal';
            }
        }
        
        if (fileCount < 1) {
            const placeholderMsg = document.createElement('div');
            placeholderMsg.style.cssText = 'color: #6b7280; font-size: 13px; text-align: center; padding: 20px;';
            placeholderMsg.innerHTML = '<i class="fas fa-images" style="font-size: 32px; margin-bottom: 10px; opacity: 0.5;"></i><div>No images selected. Click "Add More" to select images.</div>';
            container.appendChild(placeholderMsg);
            return;
        }
        
        // Show success message
        const successMsg = document.createElement('div');
        successMsg.style.cssText = 'color: var(--admin-success); font-size: 13px; padding: 10px; background: #d1fae5; border-radius: 6px; margin-bottom: 15px; font-weight: 500;';
        successMsg.innerHTML = '<i class="fas fa-check-circle"></i> <strong>' + fileCount + ' image(s)</strong> selected and ready to upload';
        container.appendChild(successMsg);
        
        // Create preview grid
        const previewGrid = document.createElement('div');
        previewGrid.className = 'preview-grid';
        previewGrid.style.cssText = 'display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 15px; margin-top: 10px;';
        container.appendChild(previewGrid);
        
        // Load and display each image
        selectedFiles.forEach((item, index) => {
            const file = item.file;
            const fileId = item.id;
            const reader = new FileReader();
            
            // Create placeholder
            const placeholderDiv = document.createElement('div');
            placeholderDiv.id = 'img-placeholder-' + fileId;
            placeholderDiv.style.cssText = 'position: relative; border-radius: 12px; overflow: hidden; border: 2px dashed #cbd5e1; background: #f1f5f9; min-height: 150px; display: flex; align-items: center; justify-content: center;';
            placeholderDiv.innerHTML = '<div style="text-align: center; color: #64748b;"><i class="fas fa-spinner fa-spin" style="font-size: 24px; margin-bottom: 5px;"></i><div style="font-size: 11px;">Loading...</div></div>';
            previewGrid.appendChild(placeholderDiv);
            
            reader.onload = function(e) {
                const imgDiv = document.createElement('div');
                imgDiv.id = 'img-container-' + fileId;
                imgDiv.style.cssText = 'position: relative; border-radius: 12px; overflow: hidden; border: 2px solid var(--admin-accent); box-shadow: 0 2px 8px rgba(0,0,0,0.1); background: white;';
                
                const img = document.createElement('img');
                img.src = e.target.result;
                img.style.cssText = 'width: 100%; height: 150px; object-fit: cover; display: block;';
                img.alt = 'Preview ' + (index + 1);
                
                // Remove button
                const removeBtn = document.createElement('button');
                removeBtn.type = 'button';
                removeBtn.style.cssText = 'position: absolute; top: 5px; right: 5px; background: rgba(239, 68, 68, 0.9); color: white; border: none; border-radius: 50%; width: 28px; height: 28px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 12px; z-index: 10; transition: all 0.3s;';
                removeBtn.innerHTML = '<i class="fas fa-times"></i>';
                removeBtn.onclick = function() {
                    removeImage(fileId);
                };
                removeBtn.onmouseover = function() {
                    this.style.background = 'rgba(220, 38, 38, 1)';
                    this.style.transform = 'scale(1.1)';
                };
                removeBtn.onmouseout = function() {
                    this.style.background = 'rgba(239, 68, 68, 0.9)';
                    this.style.transform = 'scale(1)';
                };
                
                // Image info overlay
                const overlay = document.createElement('div');
                overlay.style.cssText = 'position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0,0,0,0.7), transparent); padding: 8px;';
                
                const badge = document.createElement('div');
                badge.style.cssText = 'color: white; font-size: 11px; font-weight: 600; text-align: center;';
                badge.innerHTML = '<i class="fas fa-image"></i> Image ' + (index + 1) + ' of ' + fileCount;
                
                overlay.appendChild(badge);
                
                // File size info
                const fileSize = (file.size / 1024).toFixed(1);
                const sizeInfo = document.createElement('div');
                sizeInfo.style.cssText = 'color: rgba(255,255,255,0.9); font-size: 10px; text-align: center; margin-top: 2px;';
                sizeInfo.textContent = fileSize + ' KB';
                overlay.appendChild(sizeInfo);
                
                imgDiv.appendChild(img);
                imgDiv.appendChild(removeBtn);
                imgDiv.appendChild(overlay);
                
                // Replace placeholder
                const placeholder = document.getElementById('img-placeholder-' + fileId);
                if (placeholder && placeholder.parentNode) {
                    placeholder.parentNode.replaceChild(imgDiv, placeholder);
                } else {
                    previewGrid.appendChild(imgDiv);
                }
            };
            
            reader.onerror = function() {
                const errorDiv = document.createElement('div');
                errorDiv.style.cssText = 'padding: 10px; background: #fee2e2; border-radius: 6px; color: var(--admin-danger); font-size: 12px; min-height: 150px; display: flex; align-items: center; justify-content: center; position: relative;';
                errorDiv.innerHTML = '<div style="text-align: center;"><i class="fas fa-exclamation-circle"></i><div style="margin-top: 5px;">Error loading image</div></div>';
                
                // Add remove button to error div too
                const removeBtn = document.createElement('button');
                removeBtn.type = 'button';
                removeBtn.style.cssText = 'position: absolute; top: 5px; right: 5px; background: rgba(239, 68, 68, 0.9); color: white; border: none; border-radius: 50%; width: 28px; height: 28px; cursor: pointer;';
                removeBtn.innerHTML = '<i class="fas fa-times"></i>';
                removeBtn.onclick = function() {
                    removeImage(fileId);
                };
                errorDiv.appendChild(removeBtn);
                
                const placeholder = document.getElementById('img-placeholder-' + fileId);
                if (placeholder && placeholder.parentNode) {
                    placeholder.parentNode.replaceChild(errorDiv, placeholder);
                } else {
                    previewGrid.appendChild(errorDiv);
                }
            };
            
            reader.readAsDataURL(file);
        });
    }

    // Update form submission to use selectedFiles
    document.addEventListener('DOMContentLoaded', function() {
        updateCategoryUI();
        document.getElementById('room_category')?.addEventListener('change', updateCategoryUI);

        const form = document.querySelector('form[action*="rooms.store"]');
        if (form) {
            form.addEventListener('submit', function(e) {
                // Validate
                if (selectedFiles.length < 1) {
                    e.preventDefault();
                    showNotification('At least 1 image is required.', 'error');
                    return false;
                }
                
                // Create a new FormData and add files
                const formData = new FormData();
                
                // Add all form fields
                const formFields = form.querySelectorAll('input, textarea, select');
                formFields.forEach(field => {
                    if (field.name && field.name !== 'images[]') {
                        if (field.type === 'checkbox' || field.type === 'radio') {
                            if (field.checked) {
                                formData.append(field.name, field.value);
                            }
                        } else {
                            formData.append(field.name, field.value);
                        }
                    }
                });
                
                // Add files from selectedFiles array
                selectedFiles.forEach((item) => {
                    formData.append('images[]', item.file);
                });
                
                // Replace form submission
                e.preventDefault();
                
                fetch(form.action, {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content')
                    }
                })
                .then(response => {
                    if (response.redirected) {
                        window.location.href = response.url;
                    } else {
                        return response.json();
                    }
                })
                .then(data => {
                    if (data && data.success) {
                        window.location.reload();
                    } else if (data && data.errors) {
                        // Handle errors
                        showNotification('Please check the form for errors.', 'error');
                    }
                })
                .catch(error => {
                    window.location.reload();
                });
            });
        }
    });

    // Add CSS animations for notification
    if (!document.getElementById('notificationStyles')) {
        const style = document.createElement('style');
        style.id = 'notificationStyles';
        style.textContent = `
            @keyframes slideInRight {
                from {
                    transform: translateX(100%);
                    opacity: 0;
                }
                to {
                    transform: translateX(0);
                    opacity: 1;
                }
            }
            @keyframes slideOutRight {
                from {
                    transform: translateX(0);
                    opacity: 1;
                }
                to {
                    transform: translateX(100%);
                    opacity: 0;
                }
            }
        `;
        document.head.appendChild(style);
    }
</script>
@endsection