@extends('tickets.guest_layout')

@section('content')

<!-- Header Section -->
<div class="row mb-5 fade-in-up">
    <div class="col-md-8">
        <h2 class="font-weight-bold text-dark mb-2">
            <span class="text-primary"><i class="fas fa-film mr-2"></i> Centro de Contenido</span>
        </h2>
        <p class="text-muted lead">
            ¿No encuentras lo que buscas? Solicítalo aquí y lo agregaremos a nuestra biblioteca.
        </p>
    </div>
    <div class="col-md-4 text-right d-flex align-items-center justify-content-end">
        <a href="{{ route('tickets.guest.dashboard') }}" class="btn btn-outline-secondary mr-2 rounded-pill font-weight-bold">
            <i class="fas fa-arrow-left mr-1"></i> Volver
        </a>
        <button type="button" class="btn btn-gradient-primary px-4 py-2 rounded-pill font-weight-bold shadow-lg transform-hover" data-toggle="modal" data-target="#modalSearch">
            <i class="fas fa-magic mr-2"></i> Nueva Solicitud
        </button>
    </div>
</div>

<div class="row">
    <!-- Left Column: Stats & List -->
    <div class="col-lg-8">

        <!-- Info Cards -->
        <div class="row mb-4">
            <div class="col-md-4 mb-3">
                <div class="card border-0 bg-gradient-info text-white shadow-sm h-100 hover-scale">
                    <div class="card-body position-relative overflow-hidden">
                        <div class="d-flex justify-content-between align-items-start">
                            <div>
                                <h6 class="text-uppercase small font-weight-bold opacity-75">Total</h6>
                                <h2 class="mb-0 font-weight-bold">{{ $requests->count() }}</h2>
                            </div>
                            <i class="fas fa-video fa-2x opacity-50"></i>
                        </div>
                        <div class="progress mt-3" style="height: 4px; background: rgba(255,255,255,0.2);">
                            <div class="progress-bar bg-white" style="width: 100%"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-3">
                <div class="card border-0 bg-gradient-warning text-white shadow-sm h-100 hover-scale">
                    <div class="card-body position-relative overflow-hidden">
                        <div class="d-flex justify-content-between align-items-start">
                            <div>
                                <h6 class="text-uppercase small font-weight-bold opacity-75">Pendientes</h6>
                                <h2 class="mb-0 font-weight-bold">{{ $requests->where('status', 'waiting')->count() }}</h2>
                            </div>
                            <i class="fas fa-hourglass-half fa-2x opacity-50"></i>
                        </div>
                        <div class="progress mt-3" style="height: 4px; background: rgba(255,255,255,0.2);">
                            <div class="progress-bar bg-white" style="width: {{ $requests->count() > 0 ? ($requests->where('status', 'waiting')->count() / $requests->count()) * 100 : 0 }}%"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-3">
                <div class="card border-0 bg-gradient-success text-white shadow-sm h-100 hover-scale">
                    <div class="card-body position-relative overflow-hidden">
                        <div class="d-flex justify-content-between align-items-start">
                            <div>
                                <h6 class="text-uppercase small font-weight-bold opacity-75">Completadas</h6>
                                <h2 class="mb-0 font-weight-bold">{{ $requests->where('status', 'closed')->count() }}</h2>
                            </div>
                            <i class="fas fa-check-circle fa-2x opacity-50"></i>
                        </div>
                        <div class="progress mt-3" style="height: 4px; background: rgba(255,255,255,0.2);">
                            <div class="progress-bar bg-white" style="width: {{ $requests->count() > 0 ? ($requests->where('status', 'closed')->count() / $requests->count()) * 100 : 0 }}%"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Content List -->
        <h5 class="font-weight-bold text-dark mb-3 pl-2 border-left-primary">Historial de Solicitudes</h5>

        @if($requests->isEmpty())
            <div class="card border-0 shadow-sm rounded-lg text-center py-5">
                <div class="card-body">
                    <div class="mb-4">
                        <div class="icon-circle bg-light mx-auto">
                            <i class="fas fa-film text-muted fa-2x"></i>
                        </div>
                    </div>
                    <h4 class="font-weight-bold text-dark">Tu lista está vacía</h4>
                    <p class="text-muted mb-4">Aún no has solicitado contenido. ¡Empieza ahora!</p>
                    <button class="btn btn-primary px-4 rounded-pill shadow-sm" data-toggle="modal" data-target="#modalSearch">
                        Buscar Contenido
                    </button>
                </div>
            </div>
        @else
            <div class="row">
                @foreach($requests as $req)
                <div class="col-12 mb-3">
                    <div class="card border-0 shadow-sm rounded-lg overflow-hidden request-card" style="min-height: 140px;">
                        <div class="card-body p-0 d-flex">
                            <div class="d-flex">
                                <!-- Poster -->
                                <div class="position-relative poster-wrapper" style="width: 100px; min-width: 100px; height: 100%; background-color: #2c3e50;">
                                    {{-- Placeholder siempre presente (fondo) --}}
                                    <div class="no-poster-placeholder" style="z-index: 1;">
                                        <i class="fas fa-film mb-2"></i>
                                        <span>Sin Imagen</span>
                                    </div>

                                    {{-- Imagen encima (z-index superior). Si falla, se oculta y se muestra el placeholder --}}
                                    @if($req->poster && filter_var($req->poster, FILTER_VALIDATE_URL))
                                        <img src="{{ $req->poster }}"
                                             class="h-100 w-100"
                                             style="object-fit: cover; position:absolute; top:0; left:0; z-index: 2;"
                                             onerror="this.style.display='none';">
                                    @endif
                                </div>

                                <!-- Content -->
                                <div class="p-3 w-100 d-flex flex-column justify-content-between">
                                    <div class="d-flex justify-content-between align-items-start">
                                        <div>
                                            <h5 class="font-weight-bold text-dark mb-1">{{ $req->title }}</h5>
                                            <div class="mb-2">
                                                @if($req->request_type == 'movie')
                                                    <span class="badge badge-soft-primary"><i class="fas fa-film mr-1"></i> Película</span>
                                                @else
                                                    <span class="badge badge-soft-info"><i class="fas fa-tv mr-1"></i> Serie</span>
                                                    @if($req->season_serie)<span class="badge badge-light border ml-1">Temp {{ $req->season_serie }}</span>@endif
                                                    @if($req->chapter_serie)<span class="badge badge-light border ml-1">Cap {{ $req->chapter_serie }}</span>@endif
                                                @endif
                                            </div>
                                            @if($req->comment)
                                                <p class="text-muted small mb-0 bg-light p-2 rounded">
                                                    <i class="fas fa-comment-alt mr-1 text-secondary"></i> {{ Str::limit($req->comment, 80) }}
                                                </p>
                                            @endif
                                        </div>
                                        <div class="text-right">
                                            @if($req->status == 'waiting')
                                                <div class="status-indicator bg-warning" data-toggle="tooltip" title="Pendiente"></div>
                                                <small class="d-block text-warning font-weight-bold mt-1">Pendiente</small>
                                            @elseif($req->status == 'in_progress')
                                                <div class="status-indicator bg-primary pulsating" data-toggle="tooltip" title="En Proceso"></div>
                                                <small class="d-block text-primary font-weight-bold mt-1">En Proceso</small>
                                            @else
                                                <div class="status-indicator bg-success" data-toggle="tooltip" title="Completado"></div>
                                                <small class="d-block text-success font-weight-bold mt-1">Listo</small>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="d-flex justify-content-between align-items-end mt-2">
                                        <small class="text-muted">
                                            <i class="far fa-clock mr-1"></i> Solicitado {{ $req->created_at->diffForHumans() }}
                                        </small>
                                        @if($req->status == 'closed')
                                            <span class="text-success small"><i class="fas fa-check-circle mr-1"></i> Disponible en plataforma</span>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        @endif
    </div>

    <!-- Right Sidebar: Tips -->
    <div class="col-lg-4">
        <div class="card border-0 shadow-lg bg-white rounded-lg mb-4">
            <div class="card-body">
                <h5 class="font-weight-bold text-dark mb-4">
                    <i class="fas fa-lightbulb text-warning mr-2"></i> Tips para solicitar
                </h5>

                <div class="media mb-4">
                    <div class="icon-box bg-soft-primary text-primary mr-3 rounded-circle d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                        <i class="fas fa-search"></i>
                    </div>
                    <div class="media-body">
                        <h6 class="font-weight-bold mb-1">Usa el Buscador</h6>
                        <p class="text-muted small mb-0">Nuestro buscador se conecta a IMDB. Si aparece allí, podemos agregarlo. Verifica el año para asegurar que es la versión correcta.</p>
                    </div>
                </div>

                <div class="media mb-4">
                    <div class="icon-box bg-soft-success text-success mr-3 rounded-circle d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                        <i class="fas fa-language"></i>
                    </div>
                    <div class="media-body">
                        <h6 class="font-weight-bold mb-1">Audio y Subtítulos</h6>
                        <p class="text-muted small mb-0">Usa el campo de "Nota" para especificar si prefieres audio latino, castellano o subtitulado.</p>
                    </div>
                </div>

                <div class="media">
                    <div class="icon-box bg-soft-danger text-danger mr-3 rounded-circle d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                        <i class="fas fa-tv"></i>
                    </div>
                    <div class="media-body">
                        <h6 class="font-weight-bold mb-1">Series Incompletas</h6>
                        <p class="text-muted small mb-0">Si falta solo un capítulo, indícalo (Ej: "Falta S02E05"). Ayuda a priorizar.</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="card border-0 shadow-sm bg-gradient-dark text-white rounded-lg">
            <div class="card-body text-center p-4">
                <i class="fas fa-rocket fa-3x mb-3 text-warning"></i>
                <h5 class="font-weight-bold">¿Necesitas ayuda urgente?</h5>
                <p class="small opacity-75 mb-3">Si tienes problemas técnicos con el contenido (no reproduce, audio desfase), mejor abre un ticket de soporte.</p>
                <a href="{{ route('tickets.guest.create') }}" class="btn btn-outline-light btn-sm rounded-pill px-4">Ir a Soporte</a>
            </div>
        </div>
    </div>
</div>

<!-- Modal Search -->
<div class="modal fade" id="modalSearch" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
        <div class="modal-content border-0 shadow-lg overflow-hidden" style="border-radius: 20px;">
            <div class="modal-header bg-gradient-primary text-white border-0 py-4">
                <div>
                    <h5 class="modal-title font-weight-bold"><i class="fas fa-magic mr-2"></i> Buscar en IMDB</h5>
                    <p class="mb-0 small opacity-75">Escribe el título original para mejores resultados</p>
                </div>
                <button type="button" class="close text-white opacity-75" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body bg-light p-4">
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-body p-2">
                        <div class="input-group input-group-lg">
                            <div class="input-group-prepend">
                                <span class="input-group-text bg-white border-0 pl-3"><i class="fas fa-search text-muted"></i></span>
                            </div>
                            <input type="text" id="searchTerm" class="form-control border-0" placeholder="Ej: Avengers, Breaking Bad..." style="box-shadow: none;">
                            <div class="input-group-append">
                                <select class="custom-select border-0 bg-light text-muted font-weight-bold" id="searchType" style="border-radius: 20px; margin: 5px; height: auto;">
                                    <option value="movie">Película</option>
                                    <option value="series">Serie</option>
                                </select>
                            </div>
                            <div class="input-group-append">
                                <button class="btn btn-primary rounded-pill m-1 px-4 font-weight-bold shadow-sm" type="button" onclick="searchContent()">Buscar</button>
                            </div>
                        </div>
                    </div>
                </div>

                <div id="searchResults" class="row custom-scrollbar p-2" style="max-height: 450px; overflow-y: auto;">
                    <div class="col-12 text-center text-muted py-5">
                        <div class="mb-3">
                            <i class="fas fa-film fa-3x opacity-25"></i>
                        </div>
                        <h6 class="font-weight-bold">Esperando búsqueda...</h6>
                        <p class="small">Escribe el nombre de tu película o serie favorita arriba.</p>
                    </div>
                </div>
                <div class="col-12 text-center mt-3 mb-3" id="loadMoreContainer"></div>

                <!-- Formulario de Confirmación (Oculto) -->
                <div id="confirmSection" class="card mt-3 border-0 shadow-lg animate__animated animate__fadeInUp" style="display:none; border-radius: 15px;">
                    <div class="card-body p-0 overflow-hidden">
                        <div class="row no-gutters">
                            <div class="col-md-4 bg-dark d-flex align-items-center justify-content-center position-relative" style="height: 300px;">
                                <!-- Placeholder (fondo) -->
                                <div id="previewPlaceholder" class="no-poster-placeholder" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1;">
                                    <i class="fas fa-film mb-2"></i>
                                    <span>Sin Imagen</span>
                                </div>
                                <!-- Imagen (frente) -->
                                <img id="previewPoster" src="" class="img-fluid" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; opacity: 0.9;" onerror="this.style.display='none'; document.getElementById('previewPlaceholder').style.display='flex';">
                            </div>
                            <div class="col-md-8">
                                <div class="p-4">
                                    <h5 class="font-weight-bold text-dark border-bottom pb-2 mb-3">
                                        Confirmar Solicitud
                                        <button type="button" class="close float-right" onclick="$('#confirmSection').hide();" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </h5>

                                    <form id="requestForm">
                                        @csrf
                                        <input type="hidden" name="title" id="req_title">
                                        <input type="hidden" name="poster" id="req_poster">
                                        <input type="hidden" name="request_type" id="req_type">

                                        <h4 id="previewTitle" class="font-weight-bold text-primary mb-1"></h4>
                                        <span id="previewType" class="badge badge-secondary mb-3"></span>

                                        <div class="row" id="serieOptions" style="display:none;">
                                            <div class="col-6">
                                                <div class="form-group">
                                                    <label class="small font-weight-bold text-muted text-uppercase">Temporada</label>
                                                    <input type="number" name="season_serie" class="form-control bg-light border-0" placeholder="Ej: 1">
                                                </div>
                                            </div>
                                            <div class="col-6">
                                                <div class="form-group">
                                                    <label class="small font-weight-bold text-muted text-uppercase">Capítulo</label>
                                                    <input type="number" name="chapter_serie" class="form-control bg-light border-0" placeholder="Ej: 5">
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label class="small font-weight-bold text-muted text-uppercase">Nota Adicional</label>
                                            <textarea name="comment" class="form-control bg-light border-0" rows="2" placeholder="Ej: 'Me gustaría en audio latino'"></textarea>
                                        </div>

                                        <button type="submit" class="btn btn-success btn-block rounded-pill font-weight-bold py-2 shadow-lg transform-hover">
                                            <i class="fas fa-paper-plane mr-2"></i> Enviar Solicitud
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<style>
    /* Custom Styles for Professional Look */
    .bg-gradient-primary { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; }
    .bg-gradient-info { background: linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%); }
    .bg-gradient-warning { background: linear-gradient(135deg, #f6d365 0%, #fda085 100%); }
    .bg-gradient-success { background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%); }
    .bg-gradient-dark { background: linear-gradient(135deg, #434343 0%, #000000 100%); }

    .bg-soft-primary { background-color: rgba(102, 126, 234, 0.1); }
    .bg-soft-success { background-color: rgba(40, 167, 69, 0.1); }
    .bg-soft-danger { background-color: rgba(220, 53, 69, 0.1); }

    .badge-soft-primary { background-color: rgba(102, 126, 234, 0.1); color: #5a67d8; padding: 5px 10px; border-radius: 50px; }
    .badge-soft-info { background-color: rgba(23, 162, 184, 0.1); color: #17a2b8; padding: 5px 10px; border-radius: 50px; }

    .hover-scale { transition: transform 0.3s ease, box-shadow 0.3s ease; }
    .hover-scale:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important; }

    .transform-hover { transition: all 0.2s ease; }
    .transform-hover:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.2) !important; }

    .border-left-primary { border-left: 4px solid #667eea; }

    .icon-circle { width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }

    .status-indicator { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

    .pulsating {
        animation: pulse 2s infinite;
    }

    @keyframes pulse {
        0% { box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.7); }
        70% { box-shadow: 0 0 0 10px rgba(102, 126, 234, 0); }
        100% { box-shadow: 0 0 0 0 rgba(102, 126, 234, 0); }
    }

    .custom-scrollbar::-webkit-scrollbar { width: 6px; }
    .custom-scrollbar::-webkit-scrollbar-track { background: #f1f1f1; }
    .custom-scrollbar::-webkit-scrollbar-thumb { background: #888; border-radius: 10px; }
    .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #555; }

    .poster-hover-container { overflow: hidden; border-radius: 10px; position: relative; }
    .poster-hover-img { transition: transform 0.5s ease; width: 100%; height: 220px; object-fit: cover; }
    .poster-hover-overlay {
        position: absolute; top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0,0,0,0.5); opacity: 0; transition: opacity 0.3s ease;
        display: flex; align-items: center; justify-content: center;
    }
    .result-card:hover .poster-hover-img { transform: scale(1.1); }
    .result-card:hover .poster-hover-overlay { opacity: 1; }

    .fade-in-up { animation: fadeInUp 0.5s ease-out; }
    @keyframes fadeInUp {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }

    /* Placeholder Profesional */
    .no-poster-placeholder {
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: rgba(255,255,255,0.7);
        text-align: center;
        transition: all 0.3s ease;
        height: 100%; /* Asegurar altura completa */
        width: 100%;
    }

    /* Ocultar placeholder de vista previa por defecto */
    #previewPlaceholder {
        display: none;
    }
    .no-poster-placeholder i { font-size: 1.5rem; text-shadow: 0 2px 4px rgba(0,0,0,0.3); margin-bottom: 5px !important; }
    .no-poster-placeholder span {
        font-size: 0.6rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        font-weight: 700;
        line-height: 1.2;
        opacity: 0.8;
    }
    .request-card:hover .no-poster-placeholder {
        background: linear-gradient(135deg, #34495e 0%, #2c3e50 100%);
    }
</style>

<script>
    let currentPage = 1;
    let totalPages = 1;
    let isSearching = false;

    function searchContent(loadMore = false) {
        var term = $('#searchTerm').val();
        var type = $('#searchType').val();

        if(term.length < 2) return;
        if(isSearching) return;

        isSearching = true;

        if (!loadMore) {
            currentPage = 1;
            $('#searchResults').html('<div class="col-12 text-center py-5"><i class="fas fa-spinner fa-spin fa-2x text-primary"></i><p class="mt-2 text-muted">Consultando base de datos...</p></div>');
            $('#confirmSection').hide();
        } else {
            $('#btnLoadMore').html('<i class="fas fa-spinner fa-spin"></i> Cargando...');
        }

        $.get('{{ route("content_requests.guest.search") }}', { term: term, type: type, page: currentPage }, function(data) {
            isSearching = false;

            // Si es nueva búsqueda, limpiar
            if (!loadMore) {
                $('#searchResults').html('<div class="row" id="resultsGrid"></div><div class="col-12 text-center mt-3 mb-3" id="loadMoreContainer"></div>');
            }

            if(data.results && data.results.length > 0) {
                totalPages = data.total_pages;
                var html = '';

                data.results.forEach(function(item) {
                    var poster = (item.Poster && item.Poster != 'N/A') ? item.Poster : '';
                    var posterId = 'poster_' + Math.random().toString(36).substr(2, 9);
                    html += '<div class="col-6 col-md-3 mb-4 fade-in-up">';
                    html += '<div class="card h-100 border-0 shadow-sm cursor-pointer result-card" onclick="selectContent(\'' + escapeHtml(item.Title) + '\', \'' + poster + '\', \'' + item.Type + '\')">';
                    html += '<div class="poster-hover-container position-relative" style="height: 220px;">';
                    // Placeholder (fondo)
                    html += '<div class="no-poster-placeholder" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1;">';
                    html += '<i class="fas fa-film mb-2"></i>';
                    html += '<span>Sin Imagen</span>';
                    html += '</div>';
                    // Imagen (frente) - solo si hay URL válida
                    if(poster && isValidImageUrl(poster)) {
                        // Escapar comillas simples y dobles en la URL para evitar errores de sintaxis
                        var safePoster = poster.replace(/'/g, "\\'").replace(/"/g, '&quot;');
                        html += '<img id="' + posterId + '" src="' + safePoster + '" class="poster-hover-img" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2;" onerror="this.style.display=\'none\'; this.parentNode.querySelector(\'.no-poster-placeholder\').style.display=\'flex\';">';
                    } else {
                        html += '<div class="no-poster-placeholder" style="z-index: 2; display: flex;">';
                        html += '<i class="fas fa-film mb-2"></i>';
                        html += '<span>Sin Imagen</span>';
                        html += '</div>';
                    }
                    html += '<div class="poster-hover-overlay" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 3;"><i class="fas fa-check-circle fa-3x text-white"></i></div>';
                    html += '</div>';
                    html += '<div class="card-body p-2 text-center">';
                    html += '<h6 class="font-weight-bold text-dark mb-0 small text-truncate" title="' + item.Title + '">' + item.Title + '</h6>';
                    html += '<small class="text-muted badge badge-light border mt-1">' + item.Year + '</small>';
                    html += '</div></div></div>';
                });

                $('#resultsGrid').append(html);

                // Manejar botón Cargar Más
                if (currentPage < totalPages) {
                    $('#loadMoreContainer').html('<button id="btnLoadMore" class="btn btn-outline-primary rounded-pill px-4" onclick="loadMoreResults()">Cargar Más</button>');
                } else {
                    $('#loadMoreContainer').empty();
                }

            } else {
                if(!loadMore) {
                    $('#searchResults').html('<div class="col-12 text-center text-muted py-4"><i class="far fa-frown fa-2x mb-2"></i><p>No encontramos resultados para "' + term + '"</p></div>');
                }
            }
        }).fail(function() {
            isSearching = false;
            if(!loadMore) {
                $('#searchResults').html('<div class="col-12 text-center text-danger py-4">Error al conectar con el servidor.</div>');
            } else {
                alert('Error al cargar más resultados'); // Usar alert si toastr no está disponible en este scope
                $('#btnLoadMore').text('Cargar Más');
            }
        });
    }

    function loadMoreResults() {
        currentPage++;
        searchContent(true);
    }

    function selectContent(title, poster, type) {
        $('#req_title').val(title);
        $('#req_poster').val(poster);

        var dbType = (type == 'series') ? 'serie' : 'movie';
        $('#req_type').val(dbType);

        $('#previewTitle').text(title);
        $('#previewType').text(dbType == 'serie' ? 'Serie de TV' : 'Película');

        // Manejo de imagen y placeholder
        var $previewPoster = $('#previewPoster');
        var $previewPlaceholder = $('#previewPlaceholder');

        if(poster && poster.trim() !== '') {
            // Escapar caracteres especiales en la URL antes de asignarla
            var safePoster = poster.replace(/'/g, "\\'").replace(/"/g, '&quot;');
            $previewPoster.attr('src', safePoster).show();
            $previewPlaceholder.hide();
        } else {
            $previewPoster.hide();
            $previewPlaceholder.show();
        }

        if(dbType == 'serie') {
            $('#serieOptions').show();
        } else {
            $('#serieOptions').hide();
        }

        $('#confirmSection').slideDown();

        // Scroll to form nicely
        $('#modalSearch .modal-body').animate({
            scrollTop: $("#confirmSection").offset().top
        }, 600);
    }

    function escapeHtml(text) {
        if(!text) return '';
        var map = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'" : '&#039;' };
        return text.replace(/[&<>"]/g, function(m) { return map[m]; });
    }

    function isValidImageUrl(url) {
        if (!url) return false;
        try {
            const parsedUrl = new URL(url);
            return (parsedUrl.protocol === 'http:' || parsedUrl.protocol === 'https:') &&
                   /\.(jpeg|jpg|gif|png|webp|bmp|svg)$/i.test(parsedUrl.pathname);
        } catch (e) {
            return false;
        }
    }

    $(document).ready(function() {
        // Enviar con AJAX
        $('#requestForm').on('submit', function(e) {
            e.preventDefault();
            var btn = $(this).find('button[type="submit"]');
            var originalText = btn.html();
            btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Procesando...');

            $.post('{{ route("content_requests.guest.store") }}', $(this).serialize(), function(res) {
                if(res.success) {
                    $('#modalSearch').modal('hide');
                    // Show success visually before reload could be nice, but reload ensures list update
                    location.reload();
                } else {
                    alert('Ocurrió un error al guardar la solicitud.');
                    btn.prop('disabled', false).html(originalText);
                }
            }).fail(function() {
                alert('Error de conexión.');
                btn.prop('disabled', false).html(originalText);
            });
        });

        // Trigger search on Enter
        $('#searchTerm').on('keypress', function(e) {
            if(e.which == 13) searchContent();
        });
    });
</script>
@endsection