@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">Edit</li>
            </ol>

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

            <div class="panel panel-inverse">
                <div class="panel-heading">
                    <h4 class="panel-title">Edit 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

                    @if (session('success'))
                        <div class="alert alert-success">
                            <i class="fa fa-check-circle"></i> {{ session('success') }}
                        </div>
                    @endif

                    <form action="{{ route('hotel.facilities.update', $facility->id) }}" method="POST"
                        enctype="multipart/form-data">
                        @csrf
                        @method('PUT')

                        <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="{{ $facility->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" >{{ $facility->description }}</textarea>
                        </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>
                                <strong>QR Code:</strong> 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="{{ $facility->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>

                            @if ($facility->qr_img && $facility->qr_url)
                                <div class="current-qr-display">
                                    <h6>Current QR Code:</h6>
                                    <div class="qr-preview">
                                        <img src="{{ $facility->getQrCodeUrl() }}" alt="Current QR Code" class="qr-image">
                                        <div class="qr-details">
                                            <strong>URL:</strong>
                                            <a href="{{ $facility->qr_url }}" target="_blank"
                                                class="qr-url">{{ $facility->qr_url }}</a>
                                            <br>
                                            <small class="text-muted">QR code will be regenerated if you change the URL
                                                above.</small>
                                        </div>
                                    </div>
                                </div>
                            @endif
                        </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>

                                        <!-- Current Image Display -->
                                        @if ($facility->img_url)
                                            <div class="current-image-display">
                                                <img src="{{ asset('storage/facilities/' . $facility->img_url) }}"
                                                    alt="Current Image 1" class="img-thumbnail current-image">
                                                <button type="button" class="btn btn-custom btn-sm delete-current-btn"
                                                    data-field="img_url" data-image="1">
                                                    <i class="fa fa-trash"></i> Delete
                                                </button>
                                                <input type="hidden" name="delete_img_url" id="delete_img_url"
                                                    value="0">
                                            </div>
                                        @else
                                            <div class="no-image-placeholder">
                                                <i class="fa fa-image fa-2x text-muted"></i>
                                                <p class="text-muted">No image uploaded</p>
                                            </div>
                                        @endif

                                        <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">
                                                {{ $facility->img_url ? 'Replace image...' : '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-custom 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>

                                        <!-- Current Image Display -->
                                        @if ($facility->img_url_2)
                                            <div class="current-image-display">
                                                <img src="{{ asset('storage/facilities/' . $facility->img_url_2) }}"
                                                    alt="Current Image 2" class="img-thumbnail current-image">
                                                <button type="button" class="btn btn-custom btn-sm delete-current-btn"
                                                    data-field="img_url_2" data-image="2">
                                                    <i class="fa fa-trash"></i> Delete
                                                </button>
                                                <input type="hidden" name="delete_img_url_2" id="delete_img_url_2"
                                                    value="0">
                                            </div>
                                        @else
                                            <div class="no-image-placeholder">
                                                <i class="fa fa-image fa-2x text-muted"></i>
                                                <p class="text-muted">No image uploaded</p>
                                            </div>
                                        @endif

                                        <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">
                                                {{ $facility->img_url_2 ? 'Replace image...' : '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-custom 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>

                                        <!-- Current Image Display -->
                                        @if ($facility->img_url_3)
                                            <div class="current-image-display">
                                                <img src="{{ asset('storage/facilities/' . $facility->img_url_3) }}"
                                                    alt="Current Image 3" class="img-thumbnail current-image">
                                                <button type="button" class="btn btn-custom btn-sm delete-current-btn"
                                                    data-field="img_url_3" data-image="3">
                                                    <i class="fa fa-trash"></i> Delete
                                                </button>
                                                <input type="hidden" name="delete_img_url_3" id="delete_img_url_3"
                                                    value="0">
                                            </div>
                                        @else
                                            <div class="no-image-placeholder">
                                                <i class="fa fa-image fa-2x text-muted"></i>
                                                <p class="text-muted">No image uploaded</p>
                                            </div>
                                        @endif

                                        <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">
                                                {{ $facility->img_url_3 ? 'Replace image...' : '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-custom 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>

                                        <!-- Current Image Display -->
                                        @if ($facility->img_url_4)
                                            <div class="current-image-display">
                                                <img src="{{ asset('storage/facilities/' . $facility->img_url_4) }}"
                                                    alt="Current Image 4" class="img-thumbnail current-image">
                                                <button type="button" class="btn btn-custom btn-sm delete-current-btn"
                                                    data-field="img_url_4" data-image="4">
                                                    <i class="fa fa-trash"></i> Delete
                                                </button>
                                                <input type="hidden" name="delete_img_url_4" id="delete_img_url_4"
                                                    value="0">
                                            </div>
                                        @else
                                            <div class="no-image-placeholder">
                                                <i class="fa fa-image fa-2x text-muted"></i>
                                                <p class="text-muted">No image uploaded</p>
                                            </div>
                                        @endif

                                        <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">
                                                {{ $facility->img_url_4 ? 'Replace image...' : '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-custom 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>

                        <button type="submit" class="btn btn-custom"><i class="fa fa-save"></i> Update</button>
                        <a href="{{ route('hotel.facilities.index') }}" class="btn btn-custom"><i
                                class="fa fa-arrow-left"></i> Back</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>
        .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;
        }

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

        .current-image {
            max-width: 100%;
            max-height: 150px;
            object-fit: cover;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            display: block;
            margin: 0 auto 0.5rem auto;
        }

        .delete-current-btn {
            margin-top: 0.5rem;
        }

        .delete-current-btn.deleting {
            background-color: #6c757d;
            border-color: #6c757d;
            opacity: 0.6;
        }

        .current-image-display.marked-for-deletion {
            opacity: 0.5;
            background-color: #f8d7da;
            border-color: #f5c6cb;
        }

        .no-image-placeholder {
            text-align: center;
            padding: 2rem 1rem;
            background-color: #f8f9fa;
            border: 2px dashed #dee2e6;
            border-radius: 8px;
            margin-bottom: 1rem;
            color: #6c757d;
        }

        .no-image-placeholder i {
            margin-bottom: 0.5rem;
        }

        .no-image-placeholder p {
            margin: 0;
            font-size: 0.875rem;
        }

        .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;
        }

        .deletion-notice {
            margin-top: 0.5rem;
            font-size: 0.875rem;
        }

        /* QR Code Styles */
        .current-qr-display {
            margin-top: 1rem;
            padding: 1rem;
            background-color: #f8f9fa;
            border-radius: 8px;
            border: 1px solid #dee2e6;
        }

        .qr-preview {
            display: flex;
            align-items: flex-start;
            gap: 1rem;
        }

        .qr-image {
            width: 100px;
            height: 100px;
            border: 1px solid #dee2e6;
            border-radius: 4px;
            background-color: white;
            padding: 5px;
        }

        .qr-details {
            flex: 1;
        }

        .qr-url {
            word-break: break-all;
            color: #007bff;
            text-decoration: none;
        }

        .qr-url:hover {
            text-decoration: underline;
        }

        @media (max-width: 768px) {
            .form-actions {
                flex-direction: column;
                align-items: stretch;
                text-align: center;
            }

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

            .form-actions .float-right {
                float: none !important;
                margin-top: 1rem;
            }

            .col-lg-3 {
                margin-bottom: 1rem;
            }

            .qr-preview {
                flex-direction: column;
                align-items: center;
            }

            .qr-image {
                width: 80px;
                height: 80px;
            }
        }

        @media (max-width: 576px) {
            .thumbnail-container .col-3 {
                margin-bottom: 0.5rem;
            }

            .detail-card {
                padding: 1rem;
            }
        }
    </style>

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

                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';
                                if (customLabel) customLabel.textContent = 'Choose image...';
                                return;
                            }

                            // Validate file type
                            const allowedTypes = ['image/jpeg', 'image/png', 'image/jpg', 'image/gif',
                                'image/webp'
                            ];
                            if (!allowedTypes.includes(file.type)) {
                                alert('Invalid file type. Please choose a JPEG, PNG, GIF, or WebP image.');
                                this.value = '';
                                preview.style.display = 'none';
                                if (customLabel) customLabel.textContent = 'Choose image...';
                                return;
                            }

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

                            // Update custom file label
                            if (customLabel) {
                                customLabel.textContent = file.name;
                            }
                        } else {
                            preview.style.display = 'none';
                            if (customLabel) customLabel.textContent = 'Choose image...';
                        }
                    });
                }
            }

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

            // Remove preview functionality
            document.querySelectorAll('.remove-preview').forEach(button => {
                button.addEventListener('click', function() {
                    const targetInput = this.getAttribute('data-target');
                    const previewContainer = this.getAttribute('data-preview');

                    // Clear the input
                    const input = document.getElementById(targetInput);
                    if (input) {
                        input.value = '';
                        const customLabel = input.nextElementSibling;
                        if (customLabel) {
                            const hasCurrentImage = input.name === 'img_url' && document
                                .querySelector('.current-image-display');
                            customLabel.textContent = hasCurrentImage ? 'Replace image...' :
                                'Choose image...';
                        }
                    }

                    // Hide the preview
                    const preview = document.getElementById(previewContainer);
                    if (preview) {
                        preview.style.display = 'none';
                    }
                });
            });

            // Delete current image functionality
            document.querySelectorAll('.delete-current-btn').forEach(button => {
                button.addEventListener('click', function() {
                    const field = this.getAttribute('data-field');
                    const imageNumber = this.getAttribute('data-image');
                    const container = this.closest('.current-image-display');
                    const hiddenInput = document.getElementById('delete_' + field);

                    if (confirm('Are you sure you want to delete this image?')) {
                        // Mark for deletion
                        if (hiddenInput) {
                            hiddenInput.value = '1';
                        }

                        // Visual feedback
                        container.classList.add('marked-for-deletion');
                        this.classList.add('deleting');
                        this.disabled = true;
                        this.innerHTML = '<i class="fa fa-check"></i> Marked for Deletion';

                        // Add deletion notice
                        if (!container.querySelector('.deletion-notice')) {
                            const notice = document.createElement('div');
                            notice.className = 'deletion-notice text-danger';
                            notice.innerHTML =
                                '<small><i class="fa fa-exclamation-triangle"></i> This image will be deleted when you save the form.</small>';
                            container.appendChild(notice);
                        }

                        // Update file input label
                        const fileInput = document.getElementById(field);
                        if (fileInput) {
                            const customLabel = fileInput.nextElementSibling;
                            if (customLabel) {
                                customLabel.textContent = 'Choose image...';
                            }
                        }
                    }
                });
            });

            // Form validation
            const form = document.querySelector('form');
            form.addEventListener('submit', function(e) {
                // Check if at least one image exists (current or new)
                const hasCurrentImg1 = document.getElementById('delete_img_url') &&
                    document.getElementById('delete_img_url').value === '0' &&
                    document.querySelector('.current-image-display:not(.marked-for-deletion)');

                const hasCurrentImg2 = document.getElementById('delete_img_url_2') &&
                    document.getElementById('delete_img_url_2').value === '0' &&
                    document.querySelector('[data-field="img_url_2"]')?.closest(
                        '.current-image-display:not(.marked-for-deletion)');

                const hasCurrentImg3 = document.getElementById('delete_img_url_3') &&
                    document.getElementById('delete_img_url_3').value === '0' &&
                    document.querySelector('[data-field="img_url_3"]')?.closest(
                        '.current-image-display:not(.marked-for-deletion)');

                const hasCurrentImg4 = document.getElementById('delete_img_url_4') &&
                    document.getElementById('delete_img_url_4').value === '0' &&
                    document.querySelector('[data-field="img_url_4"]')?.closest(
                        '.current-image-display:not(.marked-for-deletion)');

                const hasNewImg1 = document.getElementById('img_url').files.length > 0;
                const hasNewImg2 = document.getElementById('img_url_2').files.length > 0;
                const hasNewImg3 = document.getElementById('img_url_3').files.length > 0;
                const hasNewImg4 = document.getElementById('img_url_4').files.length > 0;

                const totalImages = (hasCurrentImg1 || hasNewImg1 ? 1 : 0) +
                    (hasCurrentImg2 || hasNewImg2 ? 1 : 0) +
                    (hasCurrentImg3 || hasNewImg3 ? 1 : 0) +
                    (hasCurrentImg4 || hasNewImg4 ? 1 : 0);

                if (totalImages === 0) {
                    e.preventDefault();
                    alert('Please keep at least one image or upload a new one.');
                    return false;
                }
            });

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