@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">
            <ol class="breadcrumb float-xl-right">
                <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
                <li class="breadcrumb-item"><a href="javascript:;">Hotel Management</a></li>
                <li class="breadcrumb-item"><a href="{{ route('hotel.facilities.index') }}">Facilities</a></li>
                <li class="breadcrumb-item active">Create</li>
            </ol>

            <h1 class="page-header">Create Facility</h1>

            <div class="panel panel-inverse">
                <div class="panel-heading">
                    <h4 class="panel-title">Add New Facility</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.facilities.store') }}" method="POST" enctype="multipart/form-data">
                        @csrf

                        <div class="form-group">
                            <label for="title">Title <span class="text-danger">*</span></label>
                            <input type="text" name="title" id="title" class="form-control"
                                value="{{ old('title') }}">
                        </div>

                        <div class="form-group">
                            <label for="description">Description <span class="text-danger">*</span></label>
                            <textarea name="description" id="description" class="form-control" style="height: 150px">{{ old('description') }}</textarea>
                        </div>

                        <!-- QR Code Section -->
                        <div class="qr-section">
                            <h5>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="images-section">
                            <h5>Images</h5>

                            <div class="alert alert-info">
                                <i class="fa fa-info-circle"></i>
                                Upload up to 4 images. At least 1 image is required.
                            </div>

                            <div class="row">
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="img_url_1">Image 1</label>
                                        <input type="file" name="img_url" id="img_url_1" class="form-control"
                                            accept="image/*">
                                        <div class="image-preview mt-2" id="preview-1" style="display: none;">
                                            <img src="" alt="Preview" class="img-thumbnail"
                                                style="max-width: 100%; height: 120px; object-fit: cover;">
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="img_url_2">Image 2</label>
                                        <input type="file" name="img_url_2" id="img_url_2" class="form-control"
                                            accept="image/*">
                                        <div class="image-preview mt-2" id="preview-2" style="display: none;">
                                            <img src="" alt="Preview" class="img-thumbnail"
                                                style="max-width: 100%; height: 120px; object-fit: cover;">
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="img_url_3">Image 3</label>
                                        <input type="file" name="img_url_3" id="img_url_3" class="form-control"
                                            accept="image/*">
                                        <div class="image-preview mt-2" id="preview-3" style="display: none;">
                                            <img src="" alt="Preview" class="img-thumbnail"
                                                style="max-width: 100%; height: 120px; object-fit: cover;">
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="img_url_4">Image 4</label>
                                        <input type="file" name="img_url_4" id="img_url_4" class="form-control "
                                            accept="image/*">
                                        <div class="image-preview mt-2" id="preview-4" style="display: none;">
                                            <img src="" alt="Preview" class="img-thumbnail"
                                                style="max-width: 100%; height: 120px; object-fit: cover;">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <small class="form-text text-muted">Maximum size per image: 2MB. Formats: JPEG, PNG, GIF,
                                WebP</small>
                        </div>

                        <button type="submit" class="btn btn-custom" id="submitBtn">
                            <i class="fa fa-save"></i> Create Facility
                        </button>
                        <a href="{{ route('hotel.facilities.index') }}" class="btn btn-custom">
                            <i class="fa fa-arrow-left"></i> Back to List
                        </a>
                    </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>
        .qr-section,
        .images-section {
            margin-bottom: 2rem;
            padding-bottom: 1.5rem;
            border-bottom: 1px solid #eee;
        }

        .qr-section:last-child,
        .images-section:last-child {
            border-bottom: none;
        }

        .qr-section h5,
        .images-section h5 {
            color: #495057;
            font-weight: 600;
            margin-bottom: 1rem;
            padding-bottom: 0.5rem;
            border-bottom: 2px solid #007bff;
            display: inline-block;
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Image preview functionality
            function setupImagePreview(inputId, previewId) {
                const input = document.getElementById(inputId);
                const preview = document.getElementById(previewId);

                if (input && preview) {
                    input.addEventListener('change', function() {
                        const file = this.files[0];
                        if (file) {
                            // Validate file size (2MB)
                            if (file.size > 2 * 1024 * 1024) {
                                alert('File size must be less than 2MB');
                                this.value = '';
                                preview.style.display = 'none';
                                return;
                            }

                            const reader = new FileReader();
                            reader.onload = function(e) {
                                preview.querySelector('img').src = e.target.result;
                                preview.style.display = 'block';
                            };
                            reader.readAsDataURL(file);
                        } else {
                            preview.style.display = 'none';
                        }
                    });
                }
            }

            // Setup previews for all image inputs
            setupImagePreview('img_url_1', 'preview-1');
            setupImagePreview('img_url_2', 'preview-2');
            setupImagePreview('img_url_3', 'preview-3');
            setupImagePreview('img_url_4', 'preview-4');

            // Form validation - ensure at least one image is uploaded
            const form = document.querySelector('form');
            form.addEventListener('submit', function(e) {
                const img1 = document.getElementById('img_url_1').files.length > 0;
                const img2 = document.getElementById('img_url_2').files.length > 0;
                const img3 = document.getElementById('img_url_3').files.length > 0;
                const img4 = document.getElementById('img_url_4').files.length > 0;

                if (!img1 && !img2 && !img3 && !img4) {
                    e.preventDefault();
                    alert('Please upload at least one image.');
                }
            });

            // 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