@extends('layouts.app')

@section('content')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">

<div class="container mt-4">
    <div class="card">
        <div class="card-header">
            <h1>Show 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 -->
                <div class="form-group">
                    <label for="title_id">Title</label>
                    <select name="title_id" id="title_id" class="form-control" disabled>
                        <option value="{{ $moreToExplore->title_id }}">{{ $moreToExplore->title_id }}</option>
                    </select>

                    <!-- Title Preview -->
                    <div id="titleDetails" class="mt-3" style="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" disabled>
                        <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 Previews -->
                <div class="form-group">
                    <label for="section_image_1">Section Image 1</label>
                    <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>
                <div class="form-group">
                    <label for="section_image_2">Section Image 2</label>
                    <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>
            </form>

            <!-- Add Content Button -->
            <button class="btn btn-primary" id="addContentButton"><i class="fas fa-plus"></i> Add Content</button>

            <!-- Contents Table -->
            <div class="mt-4">
                <h4>Contents</h4>
                <table class="table table-bordered" id="contentsTable">
                    <thead>
                        <tr>
                            <th>Title</th>
                            <th>Description</th>
                            <th>Image</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($moreToExplore->contents as $content)
                            <tr>
                                <td>{{ $content->title }}</td>
                                <td>{{ $content->description }}</td>
                                <td>
                                    <img src="{{ asset('storage/' . $content->image) }}" style="width: 50px; border-radius: 4px;">
                                </td>
                                <td>
                                    <button class="btn btn-sm btn-warning editContent" data-id="{{ $content->id }}">
                                        <i class="fas fa-edit"></i>
                                    </button>
                                    <button class="btn btn-sm btn-danger deleteContent" data-id="{{ $content->id }}">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Content Modal -->
<div class="modal fade" id="contentModal" tabindex="-1" aria-labelledby="contentModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="contentModalLabel">Add Content</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="contentForm" action="{{ route('more_to_explore.storeContent', $moreToExplore->id) }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" id="more_to_explore_id" name="more_to_explore_id">

                    <div class="mb-3">
                        <label for="content_title" class="form-label">Content Title</label>
                        <input type="text" class="form-control" id="content_title" name="title" required>
                    </div>

                    <div class="mb-3">
                        <label for="content_description" class="form-label">Description</label>
                        <textarea class="form-control" id="content_description" name="description" required></textarea>
                    </div>

                    <div class="mb-3">
                        <label for="content_image" class="form-label">Content Image (Optional)</label>
                        <input type="file" class="form-control" id="content_image" name="image" accept="image/*">
                    </div>
<div class="form-group">
    <label for="url">URL</label>
    <input type="url" name="url" id="url" class="form-control" value="{{ old('url') }}" required>
</div>

                    <div class="mt-2">
                        <img id="content_image_preview" src="#" alt="Image Preview" style="display:none; width: 100px; border: 2px solid #ddd; border-radius: 4px;">
                    </div>

                    <button type="submit" class="btn btn-primary mt-3">Save Content</button>
                </form>
            </div>
        </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>

<!-- Include Bootstrap JS for modal functionality -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

<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
                const seriesTitles = titles.filter(title => title.is_series); // Filter titles where is_series is true

                // 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();
            } else {
                $('#titleImage').hide();
            }

            $('#titleName').text(titleName);
            $('#titleType').text(titleType).css('background-color', titleType == 'Movie' ? 'red' : 'blue');
        });

        // Add content button click event
        $('#addContentButton').click(function() {
            $('#contentModal').modal('show');
        });

        // Handle form submission for adding content
        $('#contentForm').on('submit', function(event) {
            event.preventDefault(); // Prevent the default form submission
            const formData = new FormData(this); // Create a FormData object from the form

            $.ajax({
                url: $(this).attr('action'), // Use the form's action attribute
                method: 'POST',
                data: formData,
                contentType: false, // Prevent jQuery from overriding the Content-Type
                processData: false, // Prevent jQuery from processing the data
                success: function(response) {
                    $('#contentModal').modal('hide'); // Hide the modal on success
                    fetchContents(); // Refresh the contents table
                    $('#contentForm')[0].reset(); // Reset the form after submission
                    $('#content_image_preview').hide(); // Hide image preview
                },
                error: function(xhr) {
                    console.error('Error adding content:', xhr.status, xhr.statusText);
                    alert('Error adding content: ' + xhr.responseText); // Alert user of the error
                }
            });
        });

        // Fetch contents function
        function fetchContents() {
            $.ajax({
                url: `/api/v1/more_to_explore/{{ $moreToExplore->id }}/contents`, // Ensure this endpoint is correct
                method: 'GET',
                success: function(response) {
                    const contentsTableBody = $('#contentsTable tbody');
                    contentsTableBody.empty(); // Clear the current contents
                    response.forEach(content => {
                        contentsTableBody.append(`
                            <tr>
                                <td>${content.title}</td>
                                <td>${content.description}</td>
                                <td>
                                    <img src="{{ asset('storage') }}/${content.image}" style="width: 50px; border-radius: 4px;">
                                </td>
                                <td>
                                    <button class="btn btn-sm btn-warning editContent" data-id="${content.id}">
                                        <i class="fas fa-edit"></i>
                                    </button>
                                    <button class="btn btn-sm btn-danger deleteContent" data-id="${content.id}">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </td>
                            </tr>
                        `);
                    });
                },
                error: function(xhr) {
                    console.error('Error fetching contents:', xhr.status, xhr.statusText);
                }
            });
        }

        // Call fetchContents to load contents on page load
        fetchContents();
    });
</script>

</script>
@endsection