@extends('layout.backoffice')
@section('content')
    <div class="container-fluid py-3">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h4 class="mb-0">{{ $regla["id"] ? 'Editar Regla' : 'Nueva Regla' }}</h4>
            <a href="{{ url('backoffice/herramientas/proxy') }}" class="btn btn-light">Volver</a>
        </div>

        <div class="card">
            <div class="card-body">
                <form id="frmProxy" class="row g-3">
                    <input type="hidden" name="id" value="{{ $regla["id"] ?? "" }}">

                    <div class="col-md-6">
                        <label class="form-label">Nombre</label>
                        <input type="text" name="nombre" id="nombre" class="form-control system_validador_vacio" value="{{ $regla["nombre"] ?? "" }}">
                    </div>

                    <div class="col-md-3">
                        <label class="form-label">Prefijo Local</label>
                        <input type="text" name="prefijo_local" id="prefijo_local" class="form-control system_validador_vacio" placeholder="/proxy/ml/" value="{{ $regla["prefijo_local"] ?? "" }}">
                        <div class="form-text">Prefijo que debe iniciar con / y terminará en / automáticamente.</div>
                    </div>

                    <div class="col-md-3">
                        <label class="form-label">Timeout (segundos)</label>
                        <input type="number" min="1" max="120" name="segundos_timeout" id="segundos_timeout" class="form-control system_validador_vacio" value="{{ $regla["segundos_timeout"] ?? 15 }}">
                    </div>

                    <div class="col-12">
                        <label class="form-label">URL Externa Base</label>
                        <input type="url" name="url_externa_base" id="url_externa_base" class="form-control system_validador_vacio" placeholder="https://api.ejemplo.com/base" value="{{ $regla["url_externa_base"] ?? "" }}">
                    </div>

                    <div class="col-md-4">
                        <label class="form-label">Autenticación</label>
                        <select name="tipo_auth" id="tipo_auth" class="form-select system_validador_vacio">
                            <option value="">Ninguna</option>
                            <option value="basic">Básica (user/pass)</option>
                            <option value="token">Token fijo</option>
                        </select>
                    </div>

                    <div class="col-md-4 auth-basic-fields">
                        <label class="form-label">Usuario Básico</label>
                        <input type="text" name="usuario_basico" id="usuario_basico" class="form-control" value="{{ $regla["usuario_basico"] ?? "" }}">
                    </div>
                    <div class="col-md-4 auth-basic-fields">
                        <label class="form-label">Password Básico</label>
                        <input type="text" name="clave_basica" id="clave_basica" class="form-control" value="{{ $regla["clave_basica"] ?? "" }}">
                    </div>

                    <div class="col-md-4 auth-token-fields">
                        <label class="form-label">Header Token</label>
                        <input type="text" name="nombre_header_token" id="nombre_header_token" class="form-control" placeholder="Authorization o X-API-KEY" value="{{ $regla["nombre_header_token"] ?? "" }}">
                    </div>
                    <div class="col-md-8 auth-token-fields">
                        <label class="form-label">Valor Token</label>
                        <input type="text" name="valor_token" id="valor_token" class="form-control" placeholder="Bearer XXXXX o valor directo" value="{{ $regla["valor_token"] }}">
                    </div>

                    <div class="col-md-4">
                        <label class="form-label">Método Permitido</label>
                        <select name="metodos_permitidos" id="metodos_permitidos" class="form-select system_validador_vacio">
                            <option value=""></option>
                            <option value="GET">GET</option>
                            <option value="POST">POST</option>
                        </select>
                    </div>

                    <div class="col-md-4">
                        <label class="form-label">Estado</label>
                        <select name="activo" id="activo" class="form-select system_validador_vacio">
                            <option value="1">Activo</option>
                            <option value="0">Inactivo</option>
                        </select>
                    </div>

                    <div class="col-12">
                        <label class="form-label">Notas</label>
                        <textarea name="notas" id="notas" class="form-control" rows="3">{{ $regla["notas"] ?? "" }}</textarea>
                    </div>

                    <div class="col-12 d-flex gap-2">
                        <button type="button" id="btnGuardar" class="btn btn-primary"><i class='bx bx-save me-1'></i> Guardar</button>
                        <a href="{{ url('backoffice/herramientas/proxy') }}" class="btn btn-outline-secondary">Cancelar</a>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>
        jQuery(document).ready(function () {
            const toggleAuthFields = function () {
                const type = jQuery('#tipo_auth').val();
                if (type === 'basic') {
                    jQuery('.auth-basic-fields').show();
                    jQuery('.auth-token-fields').hide();
                } else if (type === 'token') {
                    jQuery('.auth-basic-fields').hide();
                    jQuery('.auth-token-fields').show();
                } else {
                    jQuery('.auth-basic-fields').hide();
                    jQuery('.auth-token-fields').hide();
                }
            }

            jQuery('#tipo_auth').on('change', toggleAuthFields);
            toggleAuthFields();

            // Seteo de valores iniciales para selects si aplica
            jQuery('#metodos').val("{{ $regla["metodos"] ?? "" }}");
            jQuery('#activo').val("{{ $regla["activo"]  ?? "" }}");
            jQuery('#tipo_auth').val("{{ $regla["tipo_auth"] ?? "" }}").change()
            jQuery('#metodos_permitidos').val("{{ $regla["metodos_permitidos"] ?? "" }}").change()
        });

        jQuery('#btnGuardar').on('click', function () {
            if (system_validarcampos("frmProxy")) {
                axios.post("{{ url('backoffice/request/herramientas/proxy/guardar') }}", getDataJson("frmProxy")).then(function (resp) {

                    if (resp.data.error === 0) {
                        Swal.fire("Guardado", '', 'success').then(function () {
                            window.location.reload();
                        });
                    } else {
                        notificarUsuario(resp.data.mensaje);
                    }
                }).catch(function (e) {
                    notificarUsuario('Error al guardar', 'error');
                });
            }
        });
    </script>
@endsection