@extends('adminlte::page')

@section('title', 'Nuevo Cliente')

@section('content_header')
    <h1>Nuevo cliente</h1>
@stop

@section('content')
    <div class="row">
        <div class="col-md-6">
            <div class="card">

                <div class="card-body">

                    <form id="createFormCliente" method="POST">
                        @csrf
                        <div class="row">
                            <div class="col">
                                <div class="form-group">
                                    <label for="tipo_documento">Tipo de Documento</label>
                                    <select id="tipo_documento" name="tipo_documento" class="form-control" required>
                                        <option value="0">SIN DOCUMENTO</option>
                                        <option value="1">DNI</option>
                                        <option value="2">RUC</option>
                                    </select>
                                </div>
                            </div>

                            <div class="col">
                                <div class="form-group">
                                    <label for="documento">Documento</label>
                                    <div class="input-group">
                                        <input type="text" id="documento" name="documento" class="form-control" required>
                                        <div class="input-group-append">
                                            <button type="button" id="searchDocumentBtn" class="btn btn-outline-secondary">
                                                <i class="fa fa-search"></i> Buscar
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col">

                                <div class="form-group">
                                    <label for="nombre_comercial">Nombre Comercial</label>
                                    <input type="text" id="nombre_comercial" name="nombre_comercial" class="form-control"
                                        required>
                                </div>
                            </div>

                            <div class="col">

                                <div class="form-group">
                                    <label for="razon_social">Razón Social</label>
                                    <input type="text" id="razon_social" name="razon_social" class="form-control"
                                        required>
                                </div>
                            </div>
                        </div>


                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="" id="checkDatosAvanzados">
                            <label class="form-check-label" for="checkDatosAvanzados">
                                <b>Datos Avanzados</b>
                            </label>
                        </div>


                        <div id="datos-avanzados" class="pb-5">



                            <div class="form-group">
                                <label for="direccion">Dirección</label>
                                <input type="text" id="direccion" name="direccion" class="form-control" required>
                            </div>

                            <div class="form-group">
                                <label for="departamento">Departamento</label>
                                <input type="text" id="departamento" name="departamento" class="form-control" required>
                            </div>

                            <div class="form-group">
                                <label for="provincia">Provincia</label>
                                <input type="text" id="provincia" name="provincia" class="form-control" required>
                            </div>

                            <div class="form-group">
                                <label for="distrito">Distrito</label>
                                <input type="text" id="distrito" name="distrito" class="form-control" required>
                            </div>



                            <div class="row">

                                <div class="col">
                                    <div class="form-group">
                                        <label for="email">Email</label>
                                        <input type="email" id="email" name="email" class="form-control" required>
                                    </div>
                                </div>

                                <div class="col">
                                    <div class="form-group">
                                        <label for="celular">Celular</label>
                                        <input type="text" id="celular" name="celular" class="form-control" required>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="form-group">
                                        <label for="celular">Deuda Anterior</label>
                                        <input type="number" id="deuda_anterior" name="deuda_anterior" class="form-control"
                                            required>
                                    </div>
                                </div>
                            </div>

                        </div>


                        <div class="form-group mt-5">
                            <button type="button" id="btnCreateCliente" class="btn btn-success mr-2">Registrar</button>
                            <a href="{{ route('clientes.index') }}" class="btn btn-primary">Lista de clientes</a>
                        </div>

                    </form>

                </div>
            </div>
        </div>
    </div>
@stop

@section('css')
    {{-- <link rel="stylesheet" href="/css/admin_custom.css"> --}}
@stop

@section('js')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        $(document).ready(function() {

            //Check datos avanzandos
            $('#datos-avanzados').hide();

            $('#checkDatosAvanzados').change(function(e) {
                e.preventDefault();
                if (this.checked) {
                    $('#datos-avanzados').show();
                } else {
                    $('#datos-avanzados').hide();
                }
            });



            $('#btnCreateCliente').click(function(e) {
                e.preventDefault();
                const formData = new FormData($('#createFormCliente')[0]);
                let clienteId = $('#cliente_id').val();

                $.ajax({
                    type: "POST",
                    url: "{{ route('clientes.store', ['cliente' => '__CLIENTE_ID__']) }}".replace(
                        '__CLIENTE_ID__', clienteId),
                    data: formData,
                    processData: false,
                    contentType: false,
                    dataType: "json",
                    success: function(response) {

                        if (response.success) {
                            Swal.fire({
                                title: 'Éxito!',
                                text: 'Cliente registrado correctamente.',
                                icon: 'success',
                                confirmButtonText: 'OK'
                            }).then((result) => {
                                if (result.isConfirmed) {
                                    window.location.href =
                                        "{{ route('clientes.index') }}"; // Redirigir a la lista de clientes
                                }
                            });
                        } else {
                            Swal.fire({
                                title: 'Error!',
                                text: response.message ||
                                    'Ocurrió un error al registrar el cliente.',
                                icon: 'error',
                                confirmButtonText: 'OK'
                            });
                        }

                    },
                    error: function(xhr, status, error) {
                        Swal.fire({
                            title: 'Error!',
                            text: xhr.responseText ||
                                'Ocurrió un error al registrar el cliente.',
                            icon: 'error',
                            confirmButtonText: 'OK'
                        });
                    }
                });


            });

            $('#searchDocumentBtn').on('click', function() {
                let documento = $('#documento').val();
                let tipoDocumento = $('#tipo_documento').val();

                $.ajax({
                    url: "{{ route('clientes.search') }}",
                    type: 'POST',
                    data: {
                        documento: documento,
                        tipo_documento: tipoDocumento,
                        _token: "{{ csrf_token() }}"
                    },
                    success: function(response) {
                        if (response.success) {
                            $('#nombre_comercial').val(response.data.razon_social);
                            $('#razon_social').val(response.data.razon_social);
                            $('#direccion').val(response.data.direccion);
                            $('#departamento').val(response.data.departamento);
                            $('#provincia').val(response.data.provincia);
                            $('#distrito').val(response.data.distrito);
                        } else {
                            Swal.fire({
                                title: 'Error!',
                                text: response.message,
                                icon: 'error',
                                confirmButtonText: 'OK'
                            });
                        }
                    },
                    error: function(xhr) {
                        Swal.fire({
                            title: 'Error!',
                            text: 'No se pudo realizar la búsqueda.',
                            icon: 'error',
                            confirmButtonText: 'OK'
                        });
                    }
                });
            });


            function validarDocumento() {
                const tipoDocumento = $('#tipo_documento').val();
                const $documentoInput = $('#documento');

                let maxLength = 8; // Valor por defecto para SIN DOCUMENTO y DNI

                if (tipoDocumento === "2") { // RUC
                    maxLength = 11;
                }

                $documentoInput.attr('maxlength', maxLength);

                // Validar si la longitud es correcta
                if ($documentoInput.val().length > maxLength) {
                    alert("El documento debe tener " + maxLength + " dígitos.");
                    $documentoInput.val(''); // Limpiar el campo
                }
            }


            $('#razon_social').focus(function (e) {
                e.preventDefault();

                const nameComercial = $('#nombre_comercial').val();
                $('#razon_social').val(nameComercial);
            });


            $('#tipo_documento').change(function() {
                validarDocumento();
            });

            $('#documento').on('input', function() {
                validarDocumento();
            });

        });
    </script>
@stop