@extends('adminlte::page')

@section('title', 'Test de Envío de Mensajes')

@section('content_header')
    <h1>Test de Envío de Mensajes</h1>
@stop

@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Configuración del Mensaje</h3>
                    </div>
                    <div class="card-body">
                        <form id="test-send-form">
                            @csrf

                            <div class="form-group">
                                <label for="bot_id">Bot</label>
                                <select class="form-control" id="bot_id" name="bot_id" required>
                                    <option value="">Seleccione un bot</option>
                                    @foreach($bots as $bot)
                                        <option value="{{ $bot->id }}">{{ $bot->name ?? 'Bot #' . $bot->id }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="form-group">
                                <label for="account_id">Cuenta</label>
                                <select class="form-control" id="account_id" name="account_id" required>
                                    <option value="">Seleccione una cuenta</option>
                                    @foreach($accounts as $account)
                                        <option value="{{ $account->id }}">{{ $account->name ?? 'Cuenta #' . $account->id }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="form-group">
                                <label for="number">Número de Teléfono</label>
                                <input type="text" class="form-control" id="number" name="number"
                                       placeholder="1155556666" required>
                                <small class="form-text text-muted">Ingrese el número sin el signo +</small>
                            </div>

                            <div class="form-group">
                                <label for="message">Mensaje</label>
                                <textarea class="form-control" id="message" name="message"
                                          rows="4" placeholder="Escribe tu mensaje de prueba aquí..." required></textarea>
                            </div>

                            <button type="submit" class="btn btn-primary btn-block" id="send-btn">
                                <i class="fas fa-paper-plane"></i> Enviar Mensaje
                            </button>
                        </form>
                    </div>
                </div>
            </div>

            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Request</h3>
                    </div>
                    <div class="card-body">
                        <pre id="request-block" class="bg-dark text-light p-3" style="border-radius: 5px; min-height: 150px; max-height: 300px; overflow-y: auto;"><code>{
    "status": "waiting",
    "message": "Complete el formulario y presione enviar..."
}</code></pre>
                    </div>
                </div>

                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Response</h3>
                    </div>
                    <div class="card-body">
                        <pre id="response-block" class="bg-dark text-light p-3" style="border-radius: 5px; min-height: 150px; max-height: 300px; overflow-y: auto;"><code>{
    "status": "waiting",
    "message": "Esperando respuesta del servidor..."
}</code></pre>
                    </div>
                </div>
            </div>
        </div>
    </div>
@stop

@section('css')
<style>
    #request-block code,
    #response-block code {
        white-space: pre-wrap;
        word-wrap: break-word;
    }

    .spinner-border-sm {
        width: 1rem;
        height: 1rem;
        border-width: 0.2em;
    }
</style>
@stop

@section('js')
<script>
$(document).ready(function() {
    $('#test-send-form').on('submit', function(e) {
        e.preventDefault();

        const $sendBtn = $('#send-btn');
        const originalBtnText = $sendBtn.html();

        // Deshabilitar botón y mostrar spinner
        $sendBtn.prop('disabled', true)
                .html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Enviando...');

        // Construir el objeto de request
        const requestData = {
            bot_id: $('#bot_id').val(),
            account_id: $('#account_id').val(),
            number: $('#number').val(),
            message: $('#message').val(),
            _token: $('input[name="_token"]').val()
        };

        // Mostrar el request en el bloque
        $('#request-block code').text(JSON.stringify(requestData, null, 2));

        // Actualizar bloque de response como "loading"
        $('#response-block code').text(JSON.stringify({
            status: 'loading',
            message: 'Enviando mensaje...'
        }, null, 2));

        // Enviar request AJAX
        $.ajax({
            url: "{{ route('admin::test_do_send_message') }}",
            method: 'POST',
            data: requestData,
            dataType: 'json',
            success: function(response) {
                $('#response-block code').text(JSON.stringify(response, null, 2));

                // Mostrar toast de éxito
                if (response.success) {
                    toastr.success('Mensaje enviado correctamente');
                } else {
                    toastr.warning('El mensaje fue procesado pero con advertencias');
                }
            },
            error: function(xhr) {
                let errorResponse = {
                    status: 'error',
                    http_code: xhr.status,
                    message: xhr.statusText
                };

                try {
                    const jsonResponse = xhr.responseJSON;
                    if (jsonResponse) {
                        errorResponse = jsonResponse;
                    }
                } catch(e) {
                    errorResponse.raw_response = xhr.responseText;
                }

                $('#response-block code').text(JSON.stringify(errorResponse, null, 2));
                toastr.error('Error al enviar el mensaje');
            },
            complete: function() {
                // Restaurar botón
                $sendBtn.prop('disabled', false).html(originalBtnText);
            }
        });
    });
});
</script>
@stop