@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">Add 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">Add New 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.store') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <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">
                                <option value="">Select Category</option>
                                @foreach ($categories as $category)
                                    <option value="{{ $category->id }}"
                                        {{ old('id_category') == $category->id ? '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="{{ old('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">{{ old('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="{{ old('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" {{ old('mode', 'image') == 'image' ? 'selected' : '' }}>Image Mode
                                </option>
                                <option value="video" {{ old('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>
                                        <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>
                                        <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>
                                        <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>
                                        <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>
                            <div class="form-group">
                                <label for="video_url">YouTube URL</label>
                                <input type="url" class="form-control" id="video_url" name="video_url"
                                    value="{{ old('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>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="{{ 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>

                        <div class="form-group">
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input" id="hide" name="hide"
                                    value="1" {{ old('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> Create</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;
        }
    </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');

            // YouTube video preview
            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