@extends('layouts.app')

@section('content')
<div class="container mt-4">
    <div class="card">
        <div class="card-header">
            <h1>Edit Ad</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('ads.update', $ad->id) }}" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')
                <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>
                    <div id="titleDetails" class="mt-2" 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>
                <div class="form-group">
                    <label for="image">Image Upload</label>
                    <input type="file" name="image" id="image" class="form-control" accept="image/*">
                    <div class="mt-2">
                        <img id="imagePreview" src="{{ url(Storage::url($ad->image_url)) }}" alt="Current Image" style="max-width: 300px; max-height: 300px;">
                    </div>
                </div>
                <div class="form-group">
                    <label for="description">Description</label>
                    <textarea name="description" id="description" class="form-control">{{ old('description', $ad->description) }}</textarea>
                </div>
                <div class="form-group">
                    <label for="rating">Rating</label>
                    <input type="number" name="rating" id="rating" class="form-control" step="0.1" min="0" max="10" value="{{ old('rating', $ad->rating) }}">
                </div>
                        <div class="form-group">
            <label for="url">Ad URL</label>
            <input type="url" name="url" id="url" class="form-control" value="{{ old('url', $ad->url) }}" required>
        </div>
                <div class="form-group">
                    <label for="position">Position</label>
                    <select name="position" id="position" class="form-control" required>
                        <option value="">Select Position</option>
                        <option value="up next" {{ $ad->position === 'up next' ? 'selected' : '' }}>Up Next</option>
                        <option value="top 10" {{ $ad->position === 'top 10' ? 'selected' : '' }}>Top 10</option>
                        <option value="web series" {{ $ad->position === 'web series' ? 'selected' : '' }}>Web Series</option>
                    </select>
                </div>
                <button type="submit" class="btn btn-success">Update Ad</button>
            </form>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        // Fetch all titles from the API
        $.ajax({
            url: 'https://nextcinemaflix.com/api/v1/titles?perPage=10000',
            method: 'GET',
            success: function(response) {
                const titles = response.pagination.data;

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

                // Show the selected title's details
                const selectedOption = titleSelect.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').toggle(!!titleName);
            },
            error: function(xhr) {
                console.error('Error fetching titles:', xhr.status, xhr.statusText);
                alert('Could not load titles. Please try again later.');
            }
        });

        // Show title details 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');

            $('#titleImage').attr('src', posterUrl).toggle(!!posterUrl);
            $('#titleName').text(titleName);
            $('#titleType').text(titleType);
            $('#titleDetails').toggle(!!titleName);
        });

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

<!-- Include Select2 CSS and JS -->
<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>
@endsection