@extends('layouts.app')

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

        <!-- begin #sidebar -->
        @include('partials.sidebar')
        <!-- end #sidebar -->

        <!-- begin #content -->
        <div id="content" class="content">
            <!-- begin breadcrumb -->
            <ol class="breadcrumb float-xl-right">
                <li class="breadcrumb-item"><a href="javascript:;">Home</a></li>
                <li class="breadcrumb-item"><a href="javascript:;">Page Options</a></li>
                <li class="breadcrumb-item active">Restaurant</li>
            </ol>
            <!-- end breadcrumb -->
            <!-- begin page-header -->
            <h1 class="page-header">Edit Restaurant</h1>
            <!-- end page-header -->
            <!-- begin panel -->
            <div class="panel panel-inverse">
                <div class="panel-heading">
                    <div class="panel-heading-btn">
                        <h4 class="panel-title">Edit Restaurant</h4>
                    </div>
                </div>
                <div class="panel-body">
                    @if ($errors->any())
                        <div class="alert alert-danger">
                            <ul>
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif
                    <form action="{{ route('restos.update', $resto->id) }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')

                        <div class="form-group">
                            <label for="id_category">Category <span style="color: red;">*</span></label>
                            <select class="form-control" id="id_category" name="id_category">
                                @foreach ($categories as $category)
                                    <option value="{{ $category->id }}"
                                        {{ $category->id == $resto->id_category ? 'selected' : '' }}>
                                        {{ $category->category }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="title">Title <span style="color: red;">*</span></label>
                            <input type="text" class="form-control" id="title" name="title"
                                value="{{ $resto->title }}">
                        </div>

                        <div class="form-group">
                            <label for="description">Description <span style="color: red;">*</span></label>
                            <textarea class="form-control" id="description" name="description" rows="3">{{ $resto->description }}</textarea>
                        </div>

                        <div class="form-group">
                            <label for="price">Price <span style="color: red;">*</span></label>
                            <input type="number" class="form-control" id="price" name="price"
                                value="{{ $resto->price }}" min="0">
                        </div>

                        <!-- Mode Selection -->
                        <div class="form-group">
                            <label for="mode">Content Mode</label>
                            <select class="form-control" id="mode" name="mode">
                                <option value="image" {{ $resto->mode == 'image' ? 'selected' : '' }}>Image Mode
                                </option>
                                <option value="video" {{ $resto->mode == 'video' ? 'selected' : '' }}>Video Mode
                                </option>
                            </select>
                            <small class="form-text text-muted">Choose between multiple images or a single YouTube
                                video</small>
                        </div>

                        <!-- Image Mode Section -->
                        <div id="imageMode" class="mode-section">
                            <h5 class="mb-3">Images</h5>
                            <div class="row">
                                <!-- Image 1 -->
                                <div class="col-md-6 mb-3">
                                    <div class="form-group">
                                        <label for="image">Image 1 (Primary)</label>

                                        @if ($resto->image)
                                            <div class="current-image mb-2" id="current-img-1">
                                                <img src="{{ asset('storage/resto_images/' . $resto->image) }}"
                                                    alt="{{ $resto->title }}" class="img-thumbnail"
                                                    style="max-width: 100%; height: 120px; object-fit: cover;">
                                                <button type="button"
                                                    class="btn btn-danger btn-sm btn-block mt-1 delete-image-btn"
                                                    data-resto-id="{{ $resto->id }}" data-image-field="image"
                                                    data-container-id="current-img-1">
                                                    <i class="fa fa-trash"></i> Delete
                                                </button>
                                                <input type="hidden" name="delete_image" id="delete_image" value="0">
                                            </div>
                                        @else
                                            <div class="no-image-placeholder mb-2">
                                                <i class="fa fa-image fa-2x text-muted"></i>
                                                <p class="text-muted">No image uploaded</p>
                                            </div>
                                        @endif

                                        <input type="file" name="image" id="image" class="form-control"
                                            accept="image/jpeg,image/jpg,image/png,image/gif,image/webp">
                                        <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>

                                <!-- Image 2 -->
                                <div class="col-md-6 mb-3">
                                    <div class="form-group">
                                        <label for="image_2">Image 2</label>

                                        @if ($resto->image_2)
                                            <div class="current-image mb-2" id="current-img-2">
                                                <img src="{{ asset('storage/resto_images/' . $resto->image_2) }}"
                                                    alt="{{ $resto->title }}" class="img-thumbnail"
                                                    style="max-width: 100%; height: 120px; object-fit: cover;">
                                                <button type="button"
                                                    class="btn btn-danger btn-sm btn-block mt-1 delete-image-btn"
                                                    data-resto-id="{{ $resto->id }}" data-image-field="image_2"
                                                    data-container-id="current-img-2">
                                                    <i class="fa fa-trash"></i> Delete
                                                </button>
                                                <input type="hidden" name="delete_image_2" id="delete_image_2"
                                                    value="0">
                                            </div>
                                        @else
                                            <div class="no-image-placeholder mb-2">
                                                <i class="fa fa-image fa-2x text-muted"></i>
                                                <p class="text-muted">No image uploaded</p>
                                            </div>
                                        @endif

                                        <input type="file" name="image_2" id="image_2" class="form-control"
                                            accept="image/jpeg,image/jpg,image/png,image/gif,image/webp">
                                        <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>

                                <!-- Image 3 -->
                                <div class="col-md-6 mb-3">
                                    <div class="form-group">
                                        <label for="image_3">Image 3</label>

                                        @if ($resto->image_3)
                                            <div class="current-image mb-2" id="current-img-3">
                                                <img src="{{ asset('storage/resto_images/' . $resto->image_3) }}"
                                                    alt="{{ $resto->title }}" class="img-thumbnail"
                                                    style="max-width: 100%; height: 120px; object-fit: cover;">
                                                <button type="button"
                                                    class="btn btn-danger btn-sm btn-block mt-1 delete-image-btn"
                                                    data-resto-id="{{ $resto->id }}" data-image-field="image_3"
                                                    data-container-id="current-img-3">
                                                    <i class="fa fa-trash"></i> Delete
                                                </button>
                                                <input type="hidden" name="delete_image_3" id="delete_image_3"
                                                    value="0">
                                            </div>
                                        @else
                                            <div class="no-image-placeholder mb-2">
                                                <i class="fa fa-image fa-2x text-muted"></i>
                                                <p class="text-muted">No image uploaded</p>
                                            </div>
                                        @endif

                                        <input type="file" name="image_3" id="image_3" class="form-control"
                                            accept="image/jpeg,image/jpg,image/png,image/gif,image/webp">
                                        <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>

                                <!-- Image 4 -->
                                <div class="col-md-6 mb-3">
                                    <div class="form-group">
                                        <label for="image_4">Image 4</label>

                                        @if ($resto->image_4)
                                            <div class="current-image mb-2" id="current-img-4">
                                                <img src="{{ asset('storage/resto_images/' . $resto->image_4) }}"
                                                    alt="{{ $resto->title }}" class="img-thumbnail"
                                                    style="max-width: 100%; height: 120px; object-fit: cover;">
                                                <button type="button"
                                                    class="btn btn-danger btn-sm btn-block mt-1 delete-image-btn"
                                                    data-resto-id="{{ $resto->id }}" data-image-field="image_4"
                                                    data-container-id="current-img-4">
                                                    <i class="fa fa-trash"></i> Delete
                                                </button>
                                                <input type="hidden" name="delete_image_4" id="delete_image_4"
                                                    value="0">
                                            </div>
                                        @else
                                            <div class="no-image-placeholder mb-2">
                                                <i class="fa fa-image fa-2x text-muted"></i>
                                                <p class="text-muted">No image uploaded</p>
                                            </div>
                                        @endif

                                        <input type="file" name="image_4" id="image_4" class="form-control"
                                            accept="image/jpeg,image/jpg,image/png,image/gif,image/webp">
                                        <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. Supported formats: JPEG, PNG, GIF, WebP. At least one image is
                                .
                            </small>
                        </div>

                        <!-- Video Mode Section -->
                        <div id="videoMode" class="mode-section" style="display: none;">
                            <h5 class="mb-3">YouTube Video</h5>

                            @if ($resto->video_url)
                                <div class="current-video mb-3">
                                    <h6>Current Video:</h6>
                                    <div class="embed-responsive embed-responsive-16by9 mb-2">
                                        <iframe class="embed-responsive-item" src="{{ $resto->youtube_embed_url }}"
                                            frameborder="0" allowfullscreen></iframe>
                                    </div>
                                    <p class="text-muted">URL: {{ $resto->video_url }}</p>
                                </div>
                            @endif

                            <div class="form-group">
                                <label for="video_url">YouTube URL <span style="color: red;">*</span></label>
                                <input type="url" class="form-control" id="video_url" name="video_url"
                                    value="{{ $resto->video_url }}"
                                    placeholder="https://www.youtube.com/watch?v=... or https://youtu.be/...">
                                <small class="form-text text-muted">
                                    Enter a valid YouTube URL. Supports both full and short YouTube URLs.
                                </small>
                            </div>

                            <!-- Video Preview -->
                            <div id="videoPreview" class="mt-3" style="display: none;">
                                <h6>New Video Preview:</h6>
                                <div class="embed-responsive embed-responsive-16by9">
                                    <iframe class="embed-responsive-item" id="videoFrame" src="" frameborder="0"
                                        allowfullscreen></iframe>
                                </div>
                            </div>
                        </div>

                        <!-- QR Code Section -->
                        <div class="qr-section">
                            <h5 class="mb-3">QR Code (Optional)</h5>
                            <div class="alert alert-info">
                                <i class="fa fa-info-circle"></i>
                                Generate a QR code for easy sharing of external links related to this menu item.
                            </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="{{ $resto->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 ($resto->qr_img && $resto->qr_url)
                                <div class="current-qr-display">
                                    <h6>Current QR Code:</h6>
                                    <div class="qr-preview">
                                        <img src="{{ $resto->getQrCodeUrl() }}" alt="Current QR Code" class="qr-image">
                                        <div class="qr-details">
                                            <strong>URL:</strong>
                                            <a href="{{ $resto->qr_url }}" target="_blank"
                                                class="qr-url">{{ $resto->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>

                        <div class="form-group">
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input" id="hide" name="hide"
                                    value="1" {{ $resto->hide ? 'checked' : '' }}>
                                <label class="form-check-label" for="hide">
                                    Hide from public view
                                </label>
                            </div>
                        </div>

                        <button type="submit" class="btn btn-custom"><i class="fa fa-save"></i> Update</button>
                        <a href="{{ route('restos.index') }}" class="btn btn-custom"><i class="fa fa-arrow-left"></i>
                            Back</a>
                    </form>
                </div>
            </div>
            <!-- end panel -->
        </div>
        <!-- end #content -->

        <!-- begin scroll to top btn -->
        <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>
        <!-- end scroll to top btn -->
    </div>

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

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

        .qr-section h5 {
            color: #495057;
            font-weight: 600;
            margin-bottom: 1rem;
        }

        .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) {
            .qr-preview {
                flex-direction: column;
                align-items: center;
            }

            .qr-image {
                width: 80px;
                height: 80px;
            }
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const modeSelect = document.getElementById('mode');
            const imageMode = document.getElementById('imageMode');
            const videoMode = document.getElementById('videoMode');
            const videoUrlInput = document.getElementById('video_url');
            const videoPreview = document.getElementById('videoPreview');
            const videoFrame = document.getElementById('videoFrame');

            // Handle mode switching
            function toggleMode() {
                if (modeSelect.value === 'video') {
                    imageMode.style.display = 'none';
                    videoMode.style.display = 'block';
                } else {
                    imageMode.style.display = 'block';
                    videoMode.style.display = 'none';
                    videoPreview.style.display = 'none';
                }
            }

            modeSelect.addEventListener('change', toggleMode);
            toggleMode(); // Initialize on page load

            // Image preview functionality
            function setupImagePreview(inputId, previewId) {
                const input = document.getElementById(inputId);
                const preview = document.getElementById(previewId);

                if (input && preview) {
                    input.addEventListener('change', function(e) {
                        const file = e.target.files[0];
                        if (file) {
                            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 image previews
            setupImagePreview('image', 'preview-1');
            setupImagePreview('image_2', 'preview-2');
            setupImagePreview('image_3', 'preview-3');
            setupImagePreview('image_4', 'preview-4');

            // Handle image deletion
            document.addEventListener('click', function(e) {
                if (e.target.classList.contains('delete-image-btn') || e.target.closest(
                        '.delete-image-btn')) {
                    const btn = e.target.classList.contains('delete-image-btn') ? e.target : e.target
                        .closest('.delete-image-btn');
                    const restoId = btn.getAttribute('data-resto-id');
                    const imageField = btn.getAttribute('data-image-field');
                    const containerId = btn.getAttribute('data-container-id');

                    if (confirm('Are you sure you want to delete this image?')) {
                        // Set the delete flag
                        const deleteInput = document.getElementById('delete_' + imageField);
                        if (deleteInput) {
                            deleteInput.value = '1';
                        }

                        // Hide the current image container
                        const container = document.getElementById(containerId);
                        if (container) {
                            container.style.display = 'none';
                        }
                    }
                }
            });

            // YouTube video preview
            if (videoUrlInput) {
                videoUrlInput.addEventListener('input', function() {
                    const url = this.value.trim();
                    if (url) {
                        const videoId = extractYouTubeId(url);
                        if (videoId) {
                            videoFrame.src = `https://www.youtube.com/embed/${videoId}`;
                            videoPreview.style.display = 'block';
                        } else {
                            videoPreview.style.display = 'none';
                        }
                    } else {
                        videoPreview.style.display = 'none';
                    }
                });
            }

            // 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();
                        }
                    }
                });
            }

            // Extract YouTube video ID from URL
            function extractYouTubeId(url) {
                const patterns = [
                    /youtube\.com\/watch\?v=([a-zA-Z0-9_-]+)/,
                    /youtube\.com\/embed\/([a-zA-Z0-9_-]+)/,
                    /youtu\.be\/([a-zA-Z0-9_-]+)/,
                    /youtube\.com\/watch\?.*v=([a-zA-Z0-9_-]+)/
                ];

                for (const pattern of patterns) {
                    const match = url.match(pattern);
                    if (match) {
                        return match[1];
                    }
                }
                return null;
            }

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