@extends('layouts.app')

@section('content')
    <div class="container mt-4">
        <div class="card">
            <div class="card-header">
                <h1>Edit More To Explore</h1>
            </div>
            <div class="card-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('more_to_explore.update', $moreToExplore->id) }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')

                    <!-- Title Dropdown with Searchable and Preview Features -->
                    <div class="form-group">
                        <label for="title_id">Title</label>
                        <select name="title_id" id="title_id" class="form-control" required>
                            <option value="">Select Title</option>
                            <!-- Titles will be populated here via AJAX -->
                        </select>

                        <!-- Title Preview -->
                        <div id="titleDetails" class="mt-3" style="display: none; display: flex; align-items: center;">
                            <img id="titleImage" src="#" alt="Title Image" style="width: 100px; border-radius: 8px; margin-right: 10px;">
                            <div>
                                <div id="titleName" style="font-weight: bold; margin-top: 5px;"></div>
                                <span id="titleType" class="badge" style="background-color: orange; color: white; font-size: 0.9rem; margin-top: 5px;"></span>
                            </div>
                        </div>
                    </div>

                    <!-- Position Selection -->
                    <div class="form-group">
                        <label for="position">Position</label>
                        <select name="position" class="form-control" required>
                            <option value="section_1" {{ $moreToExplore->position == 'section_1' ? 'selected' : '' }}>Section 1</option>
                            <option value="section_2" {{ $moreToExplore->position == 'section_2' ? 'selected' : '' }}>Section 2</option>
                        </select>
                    </div>

                    <!-- Section Image 1 Upload with Preview -->
                    <div class="form-group">
                        <label for="section_image_1">Section Image 1</label>
                        <input type="file" name="section_image_1" id="section_image_1" class="form-control" accept="image/*">
                        <div class="mt-2">
                            <img id="section_image_1_preview" src="https://api.nextcinemaflix.com/public/storage/uploads/more_to_explore/{{ basename($moreToExplore->section_image_1) }}" alt="Image Preview" style="display:block; width: 100px; border: 2px solid #ddd; border-radius: 4px;">
                        </div>
                    </div>

                    <!-- Section Image 2 Upload with Preview -->
                    <div class="form-group">
                        <label for="section_image_2">Section Image 2</label>
                        <input type="file" name="section_image_2" id="section_image_2" class="form-control" accept="image/*">
                        <div class="mt-2">
                            <img id="section_image_2_preview" src="https://api.nextcinemaflix.com/public/storage/uploads/more_to_explore/{{ basename($moreToExplore->section_image_2) }}" alt="Image Preview" style="display:block; width: 100px; border: 2px solid #ddd; border-radius: 4px;">
                        </div>
                    </div>

                    <!-- Submit Button -->
                    <button type="submit" class="btn btn-primary">Update</button>
                </form>
            </div>
        </div>
    </div>

    <!-- Include jQuery and Select2 Libraries -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>

    <!-- JavaScript for Fetching Titles and Image Preview -->
    <script>
        $(document).ready(function() {
            // Fetch all titles from the API using perPage
            $.ajax({
                url: 'https://nextcinemaflix.com/api/v1/titles?perPage=10000', // Replace with your API endpoint
                method: 'GET',
                success: function(response) {
                    const titles = response.pagination.data; // Get titles from the response

                    // Filter titles where is_series is true
                    const seriesTitles = titles.filter(title => title.is_series);

                    // Populate dropdown with titles
                    const titleSelect = $('#title_id');
                    seriesTitles.forEach(function(title) {
                        titleSelect.append(`<option value="${title.id}" data-poster="${title.poster}" data-name="${title.name}" data-type="${title.type}" ${title.id == '{{ $moreToExplore->title_id }}' ? 'selected' : ''}>${title.name}</option>`);
                    });

                    // Enable searchable dropdown
                    titleSelect.select2({
                        placeholder: "Select a title",
                        allowClear: true
                    });

                    // Trigger change event to display selected title details
                    titleSelect.trigger('change');
                },
                error: function(xhr) {
                    console.error('Error fetching titles:', xhr.status, xhr.statusText);
                    alert('Could not load titles. Please try again later.');
                }
            });

            // Show poster image, name, and type when a title is selected
            $('#title_id').change(function() {
                const selectedOption = $(this).find('option:selected');
                const posterUrl = selectedOption.data('poster');
                const titleName = selectedOption.data('name');
                const titleType = selectedOption.data('type');

                if (posterUrl) {
                    $('#titleImage').attr('src', posterUrl).show();
                    $('#titleName').text(titleName);
                    $('#titleType').text(titleType);
                    $('#titleDetails').show();
                } else {
                    $('#titleDetails').hide();
                }
            });

            // Image preview functionality for section_image_1
            $('#section_image_1').on('change', function(event) {
                const reader = new FileReader();
                reader.onload = function() {
                    const imagePreview = $('#section_image_1_preview');
                    imagePreview.attr('src', reader.result);
                    imagePreview.show();
                };
                reader.readAsDataURL(event.target.files[0]);
            });

            // Image preview functionality for section_image_2
            $('#section_image_2').on('change', function(event) {
                const reader = new FileReader();
                reader.onload = function() {
                    const imagePreview = $('#section_image_2_preview');
                    imagePreview.attr('src', reader.result);
                    imagePreview.show();
                };
                reader.readAsDataURL(event.target.files[0]);
            });
        });
    </script>
@endsection