@extends('adminlte::page')

@section('title', 'Listado de mensajes')

@section('content_header')
    <h1>Listado de mensajes</h1>
@endsection

@section('content')
    <div class="card">
        <div class="card-body">
            <div class="row mb-3">
                <div class="col-md-3">
                    <label for="phone">Teléfono</label>
                    <input type="text" id="phone" class="form-control" placeholder="Ej: 54911...">
                </div>
                <div class="col-md-3">
                    <label for="date_from">Fecha desde</label>
                    <input type="date" id="date_from" class="form-control">
                </div>
                <div class="col-md-3">
                    <label for="date_to">Fecha hasta</label>
                    <input type="date" id="date_to" class="form-control">
                </div>
                <div class="col-md-3 d-flex align-items-end">
                    <button id="btnSearch" class="btn btn-primary mr-2">Buscar</button>
                    <button id="btnClear" class="btn btn-secondary">Limpiar</button>
                </div>
            </div>

            <div class="table-responsive">
                <table id="messagesTable" class="table table-striped table-bordered" style="width:100%">
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>Fecha (-03)</th>
                        <th>Cuenta</th>
                        <th>Bot</th>
                        <th>Teléfono</th>
                        <th>Texto</th>
                        <th>Status</th>
                        <th>Acciones</th>
                    </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="resultModal" tabindex="-1" role="dialog" aria-labelledby="resultModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="resultModalLabel">Resultado del mensaje</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <pre id="resultContent" style="white-space: pre-wrap; word-break: break-word; margin:0; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; background:#0b0e14; color:#e6e6e6; padding:12px; border-radius:6px; max-height:60vh; overflow:auto;"></pre>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script>
        /**
         * Pretty Print JSON Objects.
         * Inspired by http://jsfiddle.net/unLSJ/
         *
         * @return {void} Writes HTML into the element id_to_send_to
         * @example: jsonPrettyHighlightToId({foo:"bar"}, 'resultContent');
         */
        function jsonPrettyHighlightToId(jsonobj, id_to_send_to) {
            var json = JSON.stringify(jsonobj, undefined, 2);

            // Escape HTML
            json = json.replace(/&/g, '&amp;')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;');

            // Syntax highlight
            json = json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
                var cls = 'color: darkorange;'; // numbers
                if (/^"/.test(match)) {
                    if (/:$/.test(match)) {
                        cls = 'color: #ff7b72;'; // keys (rojo suave)
                    } else {
                        cls = 'color: #a5d6a7;'; // strings (verde suave)
                    }
                } else if (/true|false/.test(match)) {
                    cls = 'color: #79b8ff;'; // boolean (azul)
                } else if (/null/.test(match)) {
                    cls = 'color: #d291e4;'; // null (magenta)
                }
                return '<span style="' + cls + '">' + match + '</span>';
            });

            var el = document.getElementById(id_to_send_to);
            if (el) el.innerHTML = json;
        }

        // Helper: intenta parsear string JSON; si falla, devuelve el string original
        function tryParseJsonString(maybeJsonString) {
            if (typeof maybeJsonString !== 'string') return maybeJsonString;
            try {
                return JSON.parse(maybeJsonString);
            } catch (e) {
                return maybeJsonString; // no era JSON, lo dejamos como texto
            }
        }

        $(function () {
            var table = $('#messagesTable').DataTable({
                processing: true,
                serverSide: true,
                searching: false,
                order: [[1, 'desc']],
                ajax: {
                    url: '{{ route('admin::messages_data') }}',
                    data: function (d) {
                        d.phone = $('#phone').val();
                        d.date_from = $('#date_from').val();
                        d.date_to = $('#date_to').val();
                    }
                },
                columns: [
                    { data: 'id', name: 'id' },
                    { data: 'fecha', name: 'fecha' },
                    { data: 'cuenta', name: 'cuenta' },
                    { data: 'bot', name: 'bot' },
                    { data: 'telefono', name: 'telefono' },
                    { data: 'text', name: 'text' },
                    { data: 'status', name: 'status' },
                    { data: 'action', name: 'action', orderable: false, searchable: false },
                ]
            });

            $('#btnSearch').on('click', function(){
                table.ajax.reload();
            });
            $('#btnClear').on('click', function(){
                $('#phone').val('');
                $('#date_from').val('');
                $('#date_to').val('');
                table.ajax.reload();
            });

            // Ver resultado (JSON pretty)
            $('#messagesTable').on('click', '.btn-view-result', function(){
                var id = $(this).data('id');
                $('#resultContent').text('Cargando...');
                $('#resultModal').modal('show');

                $.ajax({
                    url: '{{ url('admin/messages') }}/' + id + '/result',
                    method: 'GET',
                    dataType: 'json',
                    success: function(resp){
                        // Si el backend devuelve {status, data, message}
                        // y "data" pudiera ser JSON en string, intentamos parsearlo.
                        var payload = tryParseJsonString(resp.data ?? null);
                        jsonPrettyHighlightToId(payload, 'resultContent');
                    },
                    error: function(xhr){
                        // Si el backend devuelve JSON de error, lo mostramos bonito; de lo contrario, texto
                        if (xhr.responseJSON) {
                            var errPayload = {
                                status: xhr.responseJSON.status || 'error',
                                message: xhr.responseJSON.message || 'No se pudo cargar el resultado.',
                                data: xhr.responseJSON.data ?? null
                            };
                            jsonPrettyHighlightToId(errPayload, 'resultContent');
                        } else {
                            $('#resultContent').text('No se pudo cargar el resultado.');
                        }
                    }
                });
            });

        });
    </script>
@endsection