@extends('voyager::master')

@section('page_title', 'Solicitudes de Contenido')

@section('page_header')
    <div class="container-fluid">
        <h1 class="page-title">
            <i class="voyager-video"></i> Solicitudes de Contenido
        </h1>
        @if(Auth::user()->role_id != 1 && Auth::user()->role_id != 4)
        <a href="#" class="btn btn-success btn-add-new" data-toggle="modal" data-target="#modalSearchContent">
            <i class="voyager-plus"></i> <span>Nueva Solicitud</span>
        </a>
        @endif
        @if(Auth::user()->role_id == 1 || Auth::user()->role_id == 4)
            <a href="#" class="btn btn-danger" id="bulk_delete_btn" style="display:none;">
                <i class="voyager-trash"></i> <span>Eliminar Seleccionados</span>
            </a>
        @endif
    </div>
@stop

@section('content')
    <div class="page-content browse container-fluid">
        @include('voyager::alerts')

        <!-- Info Widgets -->
        <div class="row">
            <div class="col-md-4">
                <div class="panel panel-bordered">
                    <div class="panel-body" style="border-left: 5px solid #22A7F0;">
                        <div class="pull-left">
                            <h3 class="mt-0">{{ $requests->count() }}</h3>
                            <p class="text-muted">Total Solicitudes</p>
                        </div>
                        <div class="pull-right">
                            <i class="voyager-film fa-2x text-primary"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="panel panel-bordered">
                    <div class="panel-body" style="border-left: 5px solid #FAD859;">
                        <div class="pull-left">
                            <h3 class="mt-0">{{ $requests->where('status', 'waiting')->count() }}</h3>
                            <p class="text-muted">Pendientes</p>
                        </div>
                        <div class="pull-right">
                            <i class="voyager-hourglass fa-2x text-warning"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="panel panel-bordered">
                    <div class="panel-body" style="border-left: 5px solid #00E25B;">
                        <div class="pull-left">
                            <h3 class="mt-0">{{ $requests->where('status', 'closed')->count() }}</h3>
                            <p class="text-muted">Completadas</p>
                        </div>
                        <div class="pull-right">
                            <i class="voyager-check fa-2x text-success"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <!-- Main Content (List) -->
            <div class="col-md-9">
                <div class="panel panel-bordered">
                    <div class="panel-body">
                        <div class="table-responsive">
                            <table id="dataTable" class="table table-hover">
                                <thead>
                                    <tr>
                                        @if(Auth::user()->role_id == 1 || Auth::user()->role_id == 4)
                                            <th style="width: 20px;">
                                                <input type="checkbox" id="select_all">
                                            </th>
                                        @endif
                                        <th>Poster</th>
                                        <th>Título / Detalles</th>
                                        <th>Solicitante</th>
                                        <th>Estado</th>
                                        <th>Fecha</th>
                                        @if(Auth::user()->role_id == 1 || Auth::user()->role_id == 4)
                                            <th>Acciones</th>
                                        @endif
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($requests as $req)
                                    <tr id="row-{{$req->id}}">
                                        @if(Auth::user()->role_id == 1 || Auth::user()->role_id == 4)
                                            <td>
                                                <input type="checkbox" name="row_id" class="select_row" value="{{ $req->id }}">
                                            </td>
                                        @endif
                                        <td style="width: 80px;">
                                            <div style="position: relative; width: 60px; height: 90px;">
                                                {{-- Placeholder Admin (Fondo) --}}
                                                <div class="no-image-admin" style="position: absolute; top:0; left:0; width: 100%; height: 100%; z-index: 1;">
                                                    <i class="voyager-photos"></i>
                                                    <span class="no-img-text">SIN IMG</span>
                                                </div>

                                                {{-- Imagen Admin (Frente) --}}
                                                @if($req->poster && filter_var($req->poster, FILTER_VALIDATE_URL))
                                                    <img src="{{ $req->poster }}"
                                                         style="width: 60px; height: 90px; object-fit: cover; border-radius: 4px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); position: absolute; top:0; left:0; z-index: 2;"
                                                         onerror="this.style.display='none'; this.parentNode.querySelector('.no-image-admin').style.display='flex';">
                                                @else
                                                    <div class="no-image-admin" style="position: absolute; top:0; left:0; width: 100%; height: 100%; z-index: 2; display: flex;">
                                                        <i class="voyager-photos"></i>
                                                        <span class="no-img-text">SIN IMG</span>
                                                    </div>
                                                @endif
                                            </div>
                                        </td>
                                        <td>
                                            <h5 style="margin-top: 0; font-weight: bold; margin-bottom: 5px;">{{ $req->title }}</h5>
                                            <div>
                                                @if($req->request_type == 'movie')
                                                    <span class="label label-primary"><i class="voyager-film"></i> Película</span>
                                                @else
                                                    <span class="label label-info"><i class="voyager-television"></i> Serie</span>
                                                    @if($req->season_serie)<span class="label label-default">Temp {{ $req->season_serie }}</span>@endif
                                                    @if($req->chapter_serie)<span class="label label-default">Cap {{ $req->chapter_serie }}</span>@endif
                                                @endif
                                            </div>
                                            @if($req->comment)
                                                <div style="margin-top: 8px; font-style: italic; color: #777; background: #f9f9f9; padding: 5px; border-radius: 3px; font-size: 12px;">
                                                    <i class="voyager-bubble"></i> "<span id="comment-text-{{$req->id}}">{{ $req->comment }}</span>"
                                                    @if(Auth::user()->role_id == 1 || Auth::user()->role_id == 4)
                                                        <a href="#" class="edit-comment text-primary" data-id="{{ $req->id }}" data-comment="{{ $req->comment }}"><i class="voyager-edit"></i></a>
                                                    @endif
                                                </div>
                                            @else
                                                @if(Auth::user()->role_id == 1 || Auth::user()->role_id == 4)
                                                    <div style="margin-top: 5px;">
                                                        <a href="#" class="btn btn-xs btn-default edit-comment" data-id="{{ $req->id }}" data-comment=""><i class="voyager-plus"></i> Nota</a>
                                                    </div>
                                                @endif
                                            @endif
                                        </td>
                                        <td>
                                            @if($req->type == 'intern')
                                                <i class="voyager-person text-info" title="Vendedor"></i> <strong>{{ $req->user ? $req->user->name : 'N/A' }}</strong>
                                            @else
                                                <i class="voyager-world text-warning" title="Cliente Público"></i>
                                                @if($req->platform)
                                                    <span class="label label-default" style="text-transform: uppercase; font-size: 9px;">{{ $req->platform }}</span>
                                                @endif
                                                <br>
                                                <span class="small">{{ $req->customer_id }}</span>
                                            @endif
                                        </td>
                                        <td>
                                            @if(Auth::user()->role_id == 1 || Auth::user()->role_id == 4)
                                                <select class="form-control change-status" data-id="{{ $req->id }}" style="border-radius: 20px; font-size: 12px; height: 30px; padding: 2px 10px; width: 140px; 
                                                    border-color: {{ $req->status == 'waiting' ? '#FAD859' : ($req->status == 'in_progress' ? '#22A7F0' : '#00E25B') }}">
                                                    <option value="waiting" {{ $req->status == 'waiting' ? 'selected' : '' }}>⏳ Pendiente</option>
                                                    <option value="in_progress" {{ $req->status == 'in_progress' ? 'selected' : '' }}>🔄 En Proceso</option>
                                                    <option value="closed" {{ $req->status == 'closed' ? 'selected' : '' }}>✅ Completado</option>
                                                </select>
                                            @else
                                                @if($req->status == 'waiting')
                                                    <span class="label label-warning">Pendiente</span>
                                                @elseif($req->status == 'in_progress')
                                                    <span class="label label-primary">En Proceso</span>
                                                @else
                                                    <span class="label label-success">Completado</span>
                                                @endif
                                            @endif
                                        </td>
                                        <td class="text-muted small">
                                            {{ $req->created_at->diffForHumans() }}
                                        </td>
                                        @if(Auth::user()->role_id == 1 || Auth::user()->role_id == 4)
                                            <td>
                                                <a href="javascript:;" title="Borrar" class="btn btn-sm btn-danger delete-btn" data-id="{{ $req->id }}">
                                                    <i class="voyager-trash"></i> <span class="hidden-xs hidden-sm">Borrar</span>
                                                </a>
                                            </td>
                                        @endif
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        <div class="pull-right">
                            {{ $requests->links() }}
                        </div>
                    </div>
                </div>
            </div>

            <!-- Sidebar Tips -->
            <div class="col-md-3">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h3 class="panel-title"><i class="voyager-info-circled"></i> Tips de Gestión</h3>
                    </div>
                    <div class="panel-body">
                        <ul class="list-unstyled">
                            <li style="margin-bottom: 15px;">
                                <strong><i class="voyager-search text-primary"></i> Verificar Disponibilidad</strong>
                                <p class="text-muted small">Antes de aceptar, asegúrate de que el contenido está disponible en tus fuentes (Torrents, Trackers, etc).</p>
                            </li>
                            <li style="margin-bottom: 15px;">
                                <strong><i class="voyager-check text-success"></i> Marcar Completado</strong>
                                <p class="text-muted small">Al subir el contenido, cambia el estado a "Completado". El cliente lo verá reflejado en su panel.</p>
                            </li>
                            <li style="margin-bottom: 15px;">
                                <strong><i class="voyager-warning text-warning"></i> Solicitudes Repetidas</strong>
                                <p class="text-muted small">Usa el buscador del navegador (Ctrl+F) para ver si una película ya fue solicitada recientemente.</p>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="panel panel-bordered">
                    <div class="panel-body text-center">
                        <i class="voyager-cloud-download fa-3x text-muted"></i>
                        <h5>Gestión Rápida</h5>
                        <p class="small text-muted">Recuerda limpiar solicitudes antiguas periódicamente para mantener el orden.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Search Content -->
    <div class="modal fade" id="modalSearchContent" tabindex="-1" role="dialog" aria-labelledby="modalSearchContentLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header" style="background-color: #22A7F0; color: white;">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="color:white; opacity: 1;"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="modalSearchContentLabel"><i class="voyager-search"></i> Buscar en IMDB</h4>
                </div>
                <div class="modal-body" style="background-color: #f9f9f9;">
                    
                    <div class="row">
                        <div class="col-md-12">
                            <div class="input-group input-group-lg">
                                <input type="text" id="searchTerm" class="form-control" placeholder="Escribe el nombre de la película o serie...">
                                <span class="input-group-btn">
                                    <select id="searchType" class="btn btn-default" style="height: 46px; border-left: 0;">
                                        <option value="movie">Película</option>
                                        <option value="series">Serie</option>
                                    </select>
                                    <button class="btn btn-primary" onclick="searchContent()" type="button">Buscar</button>
                                </span>
                            </div>
                        </div>
                    </div>

                    <div id="searchResults" class="row" style="margin-top: 20px; max-height: 450px; overflow-y: auto; padding: 10px;">
                        <div class="col-md-12 text-center text-muted" style="padding: 40px;">
                            <i class="voyager-film fa-3x"></i>
                            <p>Resultados aparecerán aquí</p>
                        </div>
                    </div>
                    
                    <!-- Formulario Oculto para envío -->
                    <div id="selectionForm" class="panel panel-primary" style="display:none; margin-top:20px; box-shadow: 0 5px 15px rgba(0,0,0,0.1);">
                        <div class="panel-heading">
                            <h3 class="panel-title">Confirmar Solicitud</h3>
                        </div>
                        <div class="panel-body">
                            <form id="requestForm">
                                <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">
                                
                                <div class="form-group">
                                    <label for="platform_select">Plataforma</label>
                                    <select name="platform" id="platform_select" class="form-control" required>
                                        <option value="">Seleccione Plataforma</option>
                                        @php
                                            $userServices = Auth::user()->services;
                                            // Normalizar services a array si es null o string
                                            if (is_null($userServices)) $userServices = [];
                                            if (is_string($userServices)) $userServices = [$userServices]; // Caso raro
                                            
                                            $hasAll = in_array('all', $userServices) || Auth::user()->role_id == 1 || Auth::user()->role_id == 4;
                                        @endphp

                                        @if($hasAll || in_array('plex', $userServices))
                                            <option value="plex">Plex</option>
                                        @endif
                                        @if($hasAll || in_array('emby', $userServices))
                                            <option value="emby">Emby</option>
                                        @endif
                                        @if($hasAll || in_array('jellyfin', $userServices))
                                            <option value="jellyfin">Jellyfin</option>
                                        @endif
                                    </select>
                                </div>

                                <div class="media mb-3">
                                    <div class="media-left">
                                        <div style="position: relative; width: 60px; height: 90px;">
                                            <div id="previewPlaceholder" class="no-image-admin" style="position: absolute; top:0; left:0; width: 100%; height: 100%; z-index: 1; display: flex;">
                                                <i class="voyager-photos"></i>
                                                <span class="no-img-text">SIN IMG</span>
                                            </div>
                                            <img id="previewPoster" class="media-object" src="" style="width: 60px; height: 90px; object-fit: cover; position: absolute; top:0; left:0; z-index: 2;" onerror="this.style.display='none'; $('#previewPlaceholder').show();">
                                        </div>
                                    </div>
                                    <div class="media-body">
                                        <h4 class="media-heading" id="previewTitle" style="font-weight: bold;"></h4>
                                        <span id="previewType" class="label label-info"></span>
                                    </div>
                                </div>
                                <hr>

                                <div class="row" id="serieOptions" style="display:none;">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label>Temporada (Opcional)</label>
                                            <input type="text" name="season_serie" class="form-control" placeholder="Ej: 1">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label>Capítulo (Opcional)</label>
                                            <input type="text" name="chapter_serie" class="form-control" placeholder="Ej: 5">
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="form-group">
                                    <label>Comentario / Nota</label>
                                    <textarea name="comment" class="form-control" rows="2" placeholder="Ej: Audio Latino por favor..."></textarea>
                                </div>
                                <button type="submit" class="btn btn-success btn-block text-uppercase" style="font-weight: bold;">Enviar Solicitud</button>
                            </form>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

    <style>
        .result-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.15);
            border-color: #22A7F0 !important;
        }
        .no-image-admin {
            width: 60px; height: 90px;
            background: linear-gradient(to bottom, #f1f2f6 0%, #dfe4ea 100%);
            border: 1px solid #ced6e0;
            border-radius: 4px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #a4b0be;
            transition: all 0.3s;
        }
        .no-image-admin i { font-size: 20px; margin-bottom: 3px; }
        .no-image-admin .no-img-text { font-size: 8px; font-weight: bold; }
        tr:hover .no-image-admin {
            border-color: #b0b8c1;
            background: linear-gradient(to bottom, #eccc68 0%, #ffa502 100%);
            color: white;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
    </style>
@stop

@section('javascript')
    <!-- Modal Edit Comment -->
    <div class="modal fade" id="modalEditComment" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-sm" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Editar Nota</h4>
                </div>
                <div class="modal-body">
                    <form id="editCommentForm">
                        <input type="hidden" id="edit_comment_id">
                        <div class="form-group">
                            <textarea id="edit_comment_text" class="form-control" rows="4" placeholder="Escribe una nota..."></textarea>
                        </div>
                        <button type="submit" class="btn btn-primary btn-block">Guardar</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <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) {
                toastr.warning('Por favor escribe al menos 2 caracteres');
                return;
            }
            if(isSearching) return;

            isSearching = true;

            if(!loadMore) {
                currentPage = 1;
                $('#searchResults').html('<div class="col-md-12 text-center" style="padding:20px;"><i class="voyager-refresh fa-spin fa-2x"></i></div>');
                $('#selectionForm').slideUp();
            } else {
                $('#btnLoadMore').html('<i class="voyager-refresh fa-spin"></i> Cargando...');
            }

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

                if(data.error) {
                    toastr.error(data.error);
                    $('#searchResults').html('');
                    return;
                }
                
                // Si es nueva búsqueda, limpiar y preparar contenedor
                if(!loadMore) {
                    $('#searchResults').html('<div class="row" id="resultsGrid"></div><div class="col-md-12 text-center" id="loadMoreContainer" style="margin-top:15px; margin-bottom:15px;"></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 : '';
                        html += '<div class="col-md-3 col-sm-4 col-xs-6" style="margin-bottom:20px;">';
                        html += '<div class="panel panel-default result-card" style="cursor:pointer; border:1px solid #ddd; transition: all 0.2s;" onclick="selectContent(\'' + escapeHtml(item.Title) + '\', \'' + poster + '\', \'' + item.Type + '\')">';
                        
                        // Contenedor de Imagen con Placeholder
                        html += '<div style="position:relative; width: 100%; height: 180px; overflow:hidden;">';
                        
                        // Placeholder (Fondo)
                        html += '<div class="no-image-admin" style="position: absolute; top:0; left:0; width: 100%; height: 100%; z-index: 1; display: flex; width: 100%;">';
                        html += '<i class="voyager-photos"></i><span class="no-img-text">SIN IMG</span></div>';
                        
                        // Imagen (Frente)
                        if(poster && isValidImageUrl(poster)) {
                            var safePoster = poster.replace(/'/g, "\\'").replace(/"/g, '&quot;');
                            html += '<img src="' + safePoster + '" style="width:100%; height: 100%; object-fit: cover; position: absolute; top:0; left:0; z-index: 2;" onerror="this.style.display=\'none\';">';
                        }
                        
                        html += '</div>'; // Fin contenedor imagen
                        
                        html += '<div class="panel-body" style="padding:10px; text-align:center;">';
                        html += '<div style="font-size:12px; font-weight:bold; height: 35px; overflow:hidden; line-height:1.2; margin-bottom:5px;">' + item.Title + '</div>';
                        html += '<span class="label label-default">' + item.Year + '</span>';
                        html += '</div></div></div>';
                    });

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

                    if(currentPage < totalPages) {
                        $('#loadMoreContainer').html('<button id="btnLoadMore" class="btn btn-primary btn-sm" onclick="loadMoreResults()">Cargar Más Resultados</button>');
                    } else {
                        $('#loadMoreContainer').empty();
                    }

                } else {
                    if(!loadMore) {
                        $('#searchResults').html('<div class="col-md-12 text-center text-muted" style="padding:40px;">No se encontraron resultados.</div>');
                    }
                }
            }).fail(function() {
                isSearching = false;
                if(!loadMore) {
                    $('#searchResults').html('<div class="col-md-12 text-center text-danger">Error de conexión</div>');
                } else {
                    toastr.error('Error al cargar más');
                    $('#btnLoadMore').text('Cargar Más Resultados');
                }
            });
        }

        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);

            // Manejar imagen y placeholder en vista previa
            var $previewPoster = $('#previewPoster');
            var $previewPlaceholder = $('#previewPlaceholder');

            if(poster && isValidImageUrl(poster)) {
                var safePoster = poster.replace(/'/g, "\\'").replace(/"/g, '&quot;');
                $previewPoster.attr('src', safePoster).show();
                $previewPlaceholder.hide(); // Opcional, ya que z-index maneja, pero por limpieza
            } else {
                $previewPoster.hide();
                $previewPlaceholder.show(); // Forzar mostrar placeholder
            }

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

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

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

            // Scroll inside modal
            $('#modalSearchContent .modal-body').animate({
                scrollTop: $("#selectionForm").offset().top
            }, 500);
        }

        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;
          }
        }

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

        $(document).ready(function() {
            // Submit Form
            $('#requestForm').on('submit', function(e) {
                e.preventDefault();
                $.post('{{ route("content_requests.store") }}', $(this).serialize(), function(res) {
                    if(res.success) {
                        toastr.success('Solicitud enviada correctamente');
                        $('#modalSearchContent').modal('hide');
                        location.reload();
                    } else {
                        toastr.error(res.message || 'Error al enviar solicitud');
                    }
                }).fail(function(xhr) {
                    var msg = xhr.responseJSON ? xhr.responseJSON.message : xhr.responseText;
                    toastr.error('Error: ' + msg);
                });
            });

            // Change Status
            $('.change-status').change(function() {
                var id = $(this).data('id');
                var status = $(this).val();
                var $select = $(this);
                
                $.post('/admin/content-requests/' + id + '/status', { status: status, _token: '{{ csrf_token() }}' }, function(res) {
                    if(res.success) {
                        toastr.success('Estado actualizado');
                        // Update border color dynamically
                        var color = '#FAD859';
                        if(status == 'in_progress') color = '#22A7F0';
                        if(status == 'closed') color = '#00E25B';
                        $select.css('border-color', color);
                    } else {
                        toastr.error('Error al actualizar');
                    }
                });
            });

            // Edit Comment Logic
            $('.edit-comment').click(function(e) {
                e.preventDefault();
                var id = $(this).data('id');
                var comment = $(this).data('comment');
                $('#edit_comment_id').val(id);
                $('#edit_comment_text').val(comment);
                $('#modalEditComment').modal('show');
            });

            $('#editCommentForm').submit(function(e) {
                e.preventDefault();
                var id = $('#edit_comment_id').val();
                var comment = $('#edit_comment_text').val();
                
                $.post('/admin/content-requests/' + id + '/comment', { 
                    comment: comment, 
                    _token: '{{ csrf_token() }}' 
                }, function(res) {
                    if(res.success) {
                        toastr.success('Nota actualizada');
                        $('#modalEditComment').modal('hide');
                        location.reload(); 
                    } else {
                        toastr.error('Error al actualizar');
                    }
                });
            });

            // --- DELETE LOGIC ---

            // Delete Individual
            $('.delete-btn').click(function(e) {
                e.preventDefault();
                if(!confirm('¿Estás seguro de querer eliminar esta solicitud?')) return;

                var id = $(this).data('id');
                var $row = $(this).closest('tr');

                $.ajax({
                    url: '/admin/content-requests/' + id,
                    type: 'DELETE',
                    data: { _token: '{{ csrf_token() }}' },
                    success: function(res) {
                        toastr.success('Solicitud eliminada');
                        $row.fadeOut(300, function() { $(this).remove(); });
                    },
                    error: function() {
                        toastr.error('Error al eliminar');
                    }
                });
            });

            // Select All Checkbox
            $('#select_all').change(function() {
                var checked = $(this).is(':checked');
                $('.select_row').prop('checked', checked).trigger('change');
            });

            // Row Checkbox
            $('.select_row').change(function() {
                var count = $('.select_row:checked').length;
                if(count > 0) {
                    $('#bulk_delete_btn').fadeIn();
                    $('#bulk_delete_btn span').text('Eliminar (' + count + ')');
                } else {
                    $('#bulk_delete_btn').fadeOut();
                }
            });

            // Bulk Delete Action
            $('#bulk_delete_btn').click(function(e) {
                e.preventDefault();
                if(!confirm('¿Estás seguro de eliminar los elementos seleccionados?')) return;

                var ids = [];
                $('.select_row:checked').each(function() {
                    ids.push($(this).val());
                });

                $.post('/admin/content-requests/mass-destroy', {
                    ids: ids,
                    _token: '{{ csrf_token() }}'
                }, function(res) {
                    if(res.success) {
                        toastr.success('Elementos eliminados correctamente');
                        location.reload();
                    } else {
                        toastr.error('Error al eliminar');
                    }
                }).fail(function() {
                    toastr.error('Error de conexión');
                });
            });

        });
    </script>
@endsection