@extends('layouts.app')

@section('content')
    <div id="page-container" class="fade page-sidebar-fixed page-header-fixed page-with-wide-sidebar">
        @include('partials.header')
        @include('partials.sidebar')

        <div id="content" class="content">
            <!-- Breadcrumb -->
            <ol class="breadcrumb float-xl-right">
                <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
                <li class="breadcrumb-item"><a href="{{ route('hotel.accommodations.index') }}">Accommodations</a></li>
                <li class="breadcrumb-item active">Create Accommodation</li>
            </ol>

            <!-- Page Header -->
            <h1 class="page-header">Create New Accommodation</h1>

            <!-- Main Panel -->
            <div class="panel panel-inverse">
                <div class="panel-heading">
                    <h4 class="panel-title">Accommodation Information</h4>
                </div>

                <div class="panel-body">
                    @if ($errors->any())
                        <div class="alert alert-danger">
                            <ul class="mb-0">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <form action="{{ route('hotel.accommodations.store') }}" method="POST" enctype="multipart/form-data"
                        class="accommodation-form" novalidate>
                        @csrf

                        <!-- Basic Information Section -->
                        <div class="form-section">
                            <h5 class="section-title">Basic Information</h5>

                            <div class="form-group">
                                <label for="title" class="form-label required">Title</label>
                                <input type="text" name="title" id="title" class="form-control"
                                    value="{{ old('title') }}" maxlength="255" required autocomplete="off"
                                    placeholder="Enter accommodation title">
                                <small class="form-text text-muted">
                                    <span id="title-count">0</span>/255 characters
                                </small>
                            </div>

                            <div class="form-group">
                                <label for="description" class="form-label required">Description</label>
                                <textarea name="description" id="description" class="form-control" rows="6" maxlength="2000" required
                                    placeholder="Enter detailed description of the accommodation">{{ old('description') }}</textarea>
                                <small class="form-text text-muted">
                                    <span id="description-count">0</span>/2000 characters
                                </small>
                            </div>
                        </div>

                        <!-- QR Code Section -->
                        <div class="form-section">
                            <h5 class="section-title">QR Code</h5>
                            <div class="alert alert-info">
                                <i class="fa fa-info-circle"></i>
                                Provide a URL to generate a QR code for easy access (optional).
                            </div>

                            <div class="form-group">
                                <label for="qr_url">QR Code URL</label>
                                <input type="url" name="qr_url" id="qr_url" class="form-control"
                                    value="{{ old('qr_url') }}" placeholder="https://example.com">
                                <small class="form-text text-muted">Enter a valid URL. A QR code will be automatically
                                    generated for this URL.</small>
                            </div>
                        </div>

                        <!-- Images Section -->
                        <div class="form-section">
                            <h5 class="section-title">Images</h5>
                            <div class="alert alert-info">
                                <i class="fa fa-info-circle"></i>
                                <strong>Image Requirements:</strong> At least one image is required. You can upload up to 4
                                images.
                                Accepted formats: JPEG, PNG, JPG, GIF, WebP. Maximum size: 2MB per image.
                            </div>

                            <div class="row">
                                <!-- Image 1 -->
                                <div class="col-md-6 col-lg-3">
                                    <div class="image-upload-container">
                                        <label for="img_url" class="form-label">Image 1 <span
                                                class="text-danger">*</span></label>
                                        <div class="custom-file">
                                            <input type="file" name="img_url" id="img_url" class="custom-file-input"
                                                accept="image/jpeg,image/png,image/jpg,image/gif,image/webp"
                                                data-max-size="2048" data-preview="img-preview-1">
                                            <label class="custom-file-label" for="img_url">Choose image...</label>
                                        </div>
                                        <div class="image-preview mt-2" id="img-preview-1" style="display: none;">
                                            <img src="" alt="Preview" class="img-thumbnail preview-image">
                                            <button type="button" class="btn btn-sm btn-danger remove-preview"
                                                data-target="img_url" data-preview="img-preview-1">
                                                <i class="fa fa-times"></i> Remove
                                            </button>
                                        </div>
                                    </div>
                                </div>

                                <!-- Image 2 -->
                                <div class="col-md-6 col-lg-3">
                                    <div class="image-upload-container">
                                        <label for="img_url_2" class="form-label">Image 2</label>
                                        <div class="custom-file">
                                            <input type="file" name="img_url_2" id="img_url_2" class="custom-file-input"
                                                accept="image/jpeg,image/png,image/jpg,image/gif,image/webp"
                                                data-max-size="2048" data-preview="img-preview-2">
                                            <label class="custom-file-label" for="img_url_2">Choose image...</label>
                                        </div>
                                        <div class="image-preview mt-2" id="img-preview-2" style="display: none;">
                                            <img src="" alt="Preview" class="img-thumbnail preview-image">
                                            <button type="button" class="btn btn-sm btn-danger remove-preview"
                                                data-target="img_url_2" data-preview="img-preview-2">
                                                <i class="fa fa-times"></i> Remove
                                            </button>
                                        </div>
                                    </div>
                                </div>

                                <!-- Image 3 -->
                                <div class="col-md-6 col-lg-3">
                                    <div class="image-upload-container">
                                        <label for="img_url_3" class="form-label">Image 3</label>
                                        <div class="custom-file">
                                            <input type="file" name="img_url_3" id="img_url_3"
                                                class="custom-file-input"
                                                accept="image/jpeg,image/png,image/jpg,image/gif,image/webp"
                                                data-max-size="2048" data-preview="img-preview-3">
                                            <label class="custom-file-label" for="img_url_3">Choose image...</label>
                                        </div>
                                        <div class="image-preview mt-2" id="img-preview-3" style="display: none;">
                                            <img src="" alt="Preview" class="img-thumbnail preview-image">
                                            <button type="button" class="btn btn-sm btn-danger remove-preview"
                                                data-target="img_url_3" data-preview="img-preview-3">
                                                <i class="fa fa-times"></i> Remove
                                            </button>
                                        </div>
                                    </div>
                                </div>

                                <!-- Image 4 -->
                                <div class="col-md-6 col-lg-3">
                                    <div class="image-upload-container">
                                        <label for="img_url_4" class="form-label">Image 4</label>
                                        <div class="custom-file">
                                            <input type="file" name="img_url_4" id="img_url_4"
                                                class="custom-file-input"
                                                accept="image/jpeg,image/png,image/jpg,image/gif,image/webp"
                                                data-max-size="2048" data-preview="img-preview-4">
                                            <label class="custom-file-label" for="img_url_4">Choose image...</label>
                                        </div>
                                        <div class="image-preview mt-2" id="img-preview-4" style="display: none;">
                                            <img src="" alt="Preview" class="img-thumbnail preview-image">
                                            <button type="button" class="btn btn-sm btn-danger remove-preview"
                                                data-target="img_url_4" data-preview="img-preview-4">
                                                <i class="fa fa-times"></i> Remove
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Form Actions -->
                        <div class="form-actions">
                            <button type="submit" class="btn btn-custom" id="submit-btn">
                                <i class="fa fa-save"></i> Create Accommodation
                            </button>
                            <a href="{{ route('hotel.accommodations.index') }}" class="btn btn-custom">
                                <i class="fa fa-arrow-left"></i> Back To List
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <a href="javascript:;" class="btn btn-icon btn-circle btn-success btn-scroll-to-top fade"
            data-click="scroll-top">
            <i class="fa fa-angle-up"></i>
        </a>
    </div>

    <style>
        .form-section {
            margin-bottom: 2rem;
            padding-bottom: 1.5rem;
            border-bottom: 1px solid #eee;
        }

        .form-section:last-child {
            border-bottom: none;
            margin-bottom: 1rem;
        }

        .section-title {
            color: #495057;
            font-weight: 600;
            margin-bottom: 1rem;
            padding-bottom: 0.5rem;
            border-bottom: 2px solid #007bff;
            display: inline-block;
        }

        .form-label {
            font-weight: 600;
            color: #495057;
        }

        .form-label.required::after {
            content: " *";
            color: #dc3545;
        }

        .form-actions {
            margin-top: 2rem;
            padding-top: 1.5rem;
            border-top: 1px solid #eee;
            text-align: left;
        }

        .form-actions .btn {
            margin-right: 0.5rem;
        }

        .image-upload-container {
            margin-bottom: 2rem;
        }

        .preview-image {
            max-width: 100%;
            max-height: 150px;
            object-fit: cover;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .image-preview {
            text-align: center;
            padding: 1rem;
            background-color: #f8f9fa;
            border-radius: 8px;
            border: 1px solid #dee2e6;
        }

        .remove-preview {
            margin-top: 0.5rem;
        }

        .custom-file-label::after {
            content: "Browse";
        }

        .char-count {
            font-size: 0.875rem;
            color: #6c757d;
        }

        .char-count.warning {
            color: #ffc107;
        }

        .char-count.danger {
            color: #dc3545;
        }

        @media (max-width: 768px) {
            .form-actions {
                text-align: center;
            }

            .form-actions .btn {
                width: 100%;
                margin-bottom: 0.5rem;
                margin-right: 0;
            }

            .col-lg-3 {
                margin-bottom: 1rem;
            }
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Character counters
            const titleInput = document.getElementById('title');
            const descriptionInput = document.getElementById('description');
            const titleCount = document.getElementById('title-count');
            const descriptionCount = document.getElementById('description-count');

            function updateCharCount(input, counter, maxLength) {
                const length = input.value.length;
                counter.textContent = length;

                counter.className = '';
                if (length > maxLength * 0.9) {
                    counter.className = 'char-count danger';
                } else if (length > maxLength * 0.7) {
                    counter.className = 'char-count warning';
                } else {
                    counter.className = 'char-count';
                }
            }

            if (titleInput && titleCount) {
                titleInput.addEventListener('input', () => updateCharCount(titleInput, titleCount, 255));
                updateCharCount(titleInput, titleCount, 255);
            }

            if (descriptionInput && descriptionCount) {
                descriptionInput.addEventListener('input', () => updateCharCount(descriptionInput, descriptionCount,
                    2000));
                updateCharCount(descriptionInput, descriptionCount, 2000);
            }

            // File input handlers
            const fileInputs = document.querySelectorAll('input[type="file"]');

            fileInputs.forEach(input => {
                input.addEventListener('change', function() {
                    const file = this.files[0];
                    const label = this.nextElementSibling;
                    const previewContainer = document.getElementById(this.dataset.preview);
                    const maxSize = parseInt(this.dataset.maxSize) * 1024; // Convert KB to bytes

                    // Update label
                    if (file) {
                        label.textContent = file.name;

                        // Validate file size
                        if (file.size > maxSize) {
                            alert(`File size must be less than ${this.dataset.maxSize}KB`);
                            this.value = '';
                            label.textContent = 'Choose image...';
                            if (previewContainer) previewContainer.style.display = 'none';
                            return;
                        }

                        // Show preview for images
                        if (file.type.startsWith('image/') && previewContainer) {
                            const reader = new FileReader();
                            reader.onload = function(e) {
                                const img = previewContainer.querySelector('img');
                                img.src = e.target.result;
                                previewContainer.style.display = 'block';
                            };
                            reader.readAsDataURL(file);
                        }
                    } else {
                        label.textContent = 'Choose image...';
                        if (previewContainer) previewContainer.style.display = 'none';
                    }
                });
            });

            // Remove preview buttons
            const removeButtons = document.querySelectorAll('.remove-preview');
            removeButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const targetInput = document.getElementById(this.dataset.target);
                    const previewContainer = document.getElementById(this.dataset.preview);
                    const label = targetInput.nextElementSibling;

                    targetInput.value = '';
                    label.textContent = 'Choose image...';
                    previewContainer.style.display = 'none';
                });
            });

            // Form validation
            const form = document.querySelector('.accommodation-form');
            const submitBtn = document.getElementById('submit-btn');

            if (form) {
                form.addEventListener('submit', function(e) {
                    let isValid = true;
                    let hasImage = false;

                    // Check required fields
                    const requiredFields = this.querySelectorAll('[required]');
                    requiredFields.forEach(field => {
                        if (!field.value.trim()) {
                            field.classList.add('is-invalid');
                            isValid = false;
                        } else {
                            field.classList.remove('is-invalid');
                        }
                    });

                    // Check if at least one image is selected
                    fileInputs.forEach(input => {
                        if (input.files.length > 0) {
                            hasImage = true;
                        }
                    });

                    // if (!isValid) {
                    //     e.preventDefault();

                    //     // Scroll to first error
                    //     const firstError = this.querySelector('.is-invalid');
                    //     if (firstError) {
                    //         firstError.scrollIntoView({
                    //             behavior: 'smooth',
                    //             block: 'center'
                    //         });
                    //         firstError.focus();
                    //     }
                    // } else {
                    //     // Show loading state
                    //     submitBtn.disabled = true;
                    //     submitBtn.innerHTML = '<i class="fa fa-spinner fa-spin"></i> Creating...';
                    // }
                });
            }

            // QR URL validation
            const qrUrlInput = document.getElementById('qr_url');
            if (qrUrlInput) {
                qrUrlInput.addEventListener('blur', function() {
                    const url = this.value.trim();
                    if (url && !isValidUrl(url)) {
                        this.classList.add('is-invalid');
                        let feedback = this.nextElementSibling;
                        if (!feedback || !feedback.classList.contains('invalid-feedback')) {
                            feedback = document.createElement('div');
                            feedback.className = 'invalid-feedback';
                            this.parentNode.insertBefore(feedback, this.nextSibling);
                        }
                        feedback.textContent = 'Please enter a valid URL (e.g., https://example.com)';
                    } else {
                        this.classList.remove('is-invalid');
                        const feedback = this.parentNode.querySelector('.invalid-feedback');
                        if (feedback) {
                            feedback.remove();
                        }
                    }
                });
            }

            function isValidUrl(string) {
                try {
                    new URL(string);
                    return true;
                } catch (_) {
                    return false;
                }
            }
        });
    </script>
@endsection