@extends('layouts.dashboard')

@section('dashboard')
    @if (session('message'))
        <div class="alert alert-success mb-3">
            {{ session('message') }}
        </div>
    @endif
    <ul class="breadcrumb m-0 p-0">
        <li><a href="/dashboard">Home</a></li>
        <li><strong>Crear Cliente</strong></li>
    </ul>
    <div class="row align-items-center mb-4">
        <div class="col-md-auto">
            <h1 class="titulo-h1 mb-0">Crear Cliente</h1>
        </div>
    </div>

    <div class="card mb-4">
        <div class="card-body">
            <h5 class="card-title">Identificación del cliente</h5>
            <form class="row">
                <div class="form-group col">
                    
                    <label class="font-weight-bold mb-2" for="rut-cliente">Rut</label>
                    <input type="text" class="form-control" id="rut-cliente"
                        onfocusout="validarYFormatearRUT(this.value)"
                        @if (isset($cliente->rut) && !empty($cliente->rut)) value="{{ $cliente->rut }}" @endif>
                    
                </div>
                <div class="form-group col">
                    <label class="font-weight-bold mb-2" for="razon-social">Razon social </label>
                    <input type="text" class="form-control" id="razon-social"@if (isset($cliente->razon_social) && !empty($cliente->razon_social)) value="{{ $cliente->razon_social }}" @endif>
                </div>
                <div class="form-group col">
                    <label class="font-weight-bold mb-2" for="tipo-cliente">Tipo de cliente <span class="text-danger">*</span></label>
                    <select class="form-control" required name="tipo-cliente" id="tipo-cliente">
                        <option value="">Seleccione el tipo de cliente</option>
                        <option value="empresa">Empresa</option>
                        <option value="persona">Persona</option>
                    </select>
                </div>
            </form>
        </div>
    </div>

    <ul class="nav nav-tabs" id="myTab" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" id="datos-basicos-tab" data-toggle="tab" data-target="#datos-basicos"
                type="button" role="tab" aria-controls="datos-basicos" aria-selected="true">Datos Basicos</button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link disabled" id="direcciones-tab" data-toggle="tab" data-target="#direcciones"
                type="button" role="tab" aria-controls="direcciones" aria-selected="false">
                Direcciones
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link disabled" id="contacto-tab" data-toggle="tab" data-target="#contacto" type="button"
                role="tab" aria-controls="contacto" aria-selected="false">
                Contacto
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link disabled" id="credito-tab" data-toggle="tab" data-target="#credito" type="button"
                role="tab" aria-controls="credito" aria-selected="false">
                Credito Interno
            </button>
        </li>
    </ul>
    <div class="tab-content" id="myTabContent">
        <div class="tab-pane fade show active" id="datos-basicos" role="tabpanel" aria-labelledby="datos-basicos-tab">
            <div class="card">
                <div class="card-body">
                    <form class="row" method="POST" onsubmit="return registrarCliente()">
                        @include('dashboard.clientes.formulario-cliente')
                        <div class="col-12 mt-5 text-right">
                            <button type="submit" class="btn btn-primary btn-sm">Crear cliente</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="tab-pane fade" id="direcciones" role="tabpanel" aria-labelledby="direcciones-tab">
        </div>
        <div class="tab-pane fade" id="contacto" role="tabpanel" aria-labelledby="contacto-tab">...</div>
        <div class="tab-pane fade" id="credito" role="tabpanel" aria-labelledby="credito-tab">...</div>
    </div>
    {{-- <div class="card">
        <div class="card-body">
	        <form class="row mx-0 form-registro" action="{{ route('proveedor-creado') }}" id="form-usuario" method="post" autocomplete="off">
	        	@include('dashboard.proveedores.form-proveedor')
	        </form>
		</div>
	</div> --}}
@endsection


@section('scripts')
    <script>
    function registrarCliente() {

            var inputRutCliente = document.getElementById('rut-cliente');
            var rutCliente = inputRutCliente ? inputRutCliente.value : null;

            var inputRazonSocial = document.getElementById('razon-social');
            var razonSocial = inputRazonSocial.value;

            var inputNombreCliente = document.getElementById('nombre-cliente');
            var nombreCliente = inputNombreCliente.value;

            var inputEmailPrincipal = document.getElementById('email-principal');
            var emailPrincipal = inputEmailPrincipal.value;

            var inputEmailRecepcionSii = document.getElementById('email-recepcion-sii');
            var emailRecepcionSii = inputEmailRecepcionSii.value;

            var inputTelefonoPrincipal = document.getElementById('telefono-principal');
            var telefonoPrincipal = inputTelefonoPrincipal.value;

            var selectTipoCliente = document.getElementById('tipo-cliente');
            var tipoCliente = selectTipoCliente.value;

            var textAreaObservaciones = document.getElementById('observaciones');
            var observaciones = textAreaObservaciones.value;

            var inputGiro = document.getElementById('giro');
            var giro = inputGiro.value;

            
            var data = new URLSearchParams();
            data.append('rutCliente', rutCliente);
            data.append('razonSocial', razonSocial);
            data.append('nombreCliente', nombreCliente);
            data.append('emailPrincipal', emailPrincipal);
            data.append('emailRecepcionSii', emailRecepcionSii);
            data.append('telefonoPrincipal', telefonoPrincipal);
            data.append('tipoCliente', tipoCliente);
            data.append('observaciones', observaciones);
            data.append('giro', giro);


            modalCargando();
            //Enviar la solicitud fetch
            fetch('{{ route('registrar-cliente') }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}' //Añade el token CSRF para la protección contra ataques CSRF
                    },
                    body: data.toString()
                })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Network response was not ok');
                    }
                    return response.json(); //Parsear la respuesta JSON
                })
                .then(data => {
                    cerrarCargando();
                    if (data.success) {
                        simpleAlertV2(data.message, 'Registar Cliente');
                        window.location.href = data.redirect_url;
                    } else {
                        alert(data.message)
                        console.log(data.error)
                    }

                })
                .catch(error => {
                    cerrarCargando();
                    console.error('Error:', error);
                    alert('Ocurrió un error al cargar la informacion. Por favor, inténtelo de nuevo.');
                });

            return false;
        }

        function validarYFormatearRUT(rutBusqueda) {
            let rut = rutBusqueda.replace(/[^\dkK]/g, '').toUpperCase();

            var inputRut = document.getElementById('rut-cliente');
            //var inputRut = inputRutProveedor.value;

            if (rut.length < 8 || rut.length > 9) {
                inputRut.value = '';
                alert('El RUT ingresado no es válido.');
                return;
            }

            const cuerpo = rut.slice(0, -1);
            const dv = rut.slice(-1);

            if (esRutFalso(cuerpo)) {
                inputRut.value = '';
                alert('El RUT ingresado no es válido.');
                return;
            }

            if (!validarDV(cuerpo, dv)) {
                inputRut.value = '';
                alert('El RUT ingresado no es válido.');
                return;
            }

            inputRut.value = formatearRUT(cuerpo + dv);
        }

        function validarDV(cuerpo, dv) {
            let suma = 0;
            let multiplicador = 2;

            for (let i = cuerpo.length - 1; i >= 0; i--) {
                suma += parseInt(cuerpo.charAt(i)) * multiplicador;
                multiplicador = multiplicador === 7 ? 2 : multiplicador + 1;
            }

            const resto = 11 - (suma % 11);
            const dvEsperado = resto === 11 ? '0' : resto === 10 ? 'K' : resto.toString();

            return dv === dvEsperado;
        }

        function formatearRUT(rut) {
            const cuerpo = rut.slice(0, -1);
            const dv = rut.slice(-1);
            return cuerpo.replace(/\B(?=(\d{3})+(?!\d))/g, ".") + '-' + dv;
        }

        function esRutFalso(cuerpo) {
            const falsos = [
                '11111111', '22222222', '33333333',
                '44444444', '55555555', '77777777',
                '88888888', '99999999'
            ];
            return falsos.includes(cuerpo);
        }
    </script>
@endsection