@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 Proveedor {{ ucwords($tipoNacionalidad) }}</strong></li>
    </ul>
    <div class="row align-items-center mb-4">
        <div class="col-md-auto">
            <h1 class="titulo-h1 mb-0">Crear Proveedor {{ ucwords($tipoNacionalidad) }}</h1>
        </div>
    </div>

    <div class="card mb-4">
        <div class="card-body">
            <h5 class="card-title">Identificación del proveedor</h5>
            <form class="row">
                <div class="form-group col">
                    @if ($tipoNacionalidad == 'internacional')
                        <label class="font-weight-bold mb-2" for="tax">Tax o Vat <span
                                class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="tax">
                    @else
                        <label class="font-weight-bold mb-2" for="rut-proveedor">Rut <span
                                class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="rut-proveedor"
                            onfocusout="validarYFormatearRUT(this.value)"
                            @if (isset($proveedor->rut) && !empty($proveedor->rut)) value="{{ $proveedor->rut }}" @endif>
                    @endif
                </div>
                <div class="form-group col">
                    <label class="font-weight-bold mb-2" for="nombre-proveedor">Razon social <span
                            class="text-danger">*</span></label>
                    <input type="text" class="form-control" id="nombre-proveedor" required=""
                        @if (isset($proveedor->proveedor_nombre) && !empty($proveedor->proveedor_nombre)) value="{{ $proveedor->proveedor_nombre }}" @endif>
                </div>
                @if ($tipoNacionalidad == 'internacional')
                    <div class="form-group col">
                        <label class="font-weight-bold mb-2" for="pais">País <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="pais">
                    </div>
                @endif
            </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 o Sucursales
            </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>
    </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 registrarProveedor()">
                        @include('dashboard.proveedores.form-proveedor')
                    </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>
    {{-- <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 registrarProveedor() {

            var inputRutProveedor = document.getElementById('rut-proveedor');
            var rutProveedor = inputRutProveedor ? inputRutProveedor.value : null;

            var inputTax = document.getElementById('tax');
            var tax = inputTax ? inputTax.value : null;

            var inputPais = document.getElementById('pais');
            var pais = inputPais ? inputPais.value : null;

            var inputNombreProveedor = document.getElementById('nombre-proveedor');
            var nombreProveedor = inputNombreProveedor.value;

            var inputNombreFantasia = document.getElementById('nombre-fantasia');
            var nombreFantasia = inputNombreFantasia.value;

            var inputSitioWeb = document.getElementById('sitio-web');
            var sitioWeb = inputSitioWeb.value;

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

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

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


            var data = new URLSearchParams();
            if (inputRutProveedor) {
                data.append('rutProveedor', rutProveedor);
            }
            if (inputTax) {
                data.append('tax', tax);
            }
            if (inputPais) {
                data.append('pais', pais);
            }
            data.append('nombreProveedor', nombreProveedor);
            data.append('nombreFantasia', nombreFantasia);
            data.append('sitioWeb', sitioWeb);
            data.append('emailPrincipal', emailPrincipal);
            data.append('telefonoPrincipal', telefonoPrincipal);
            data.append('observaciones', observaciones);


            modalCargando();
            //Enviar la solicitud fetch
            fetch('{{ route('registrar-proveedor', ['tipoNacionalidad' => $tipoNacionalidad]) }}', {
                    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 proveedor');
                        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-proveedor');
            //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