@extends('layouts.app')

@push('page_css')
    <link href="{{ asset('assets') }}/plugins/select2/css/select2.min.css" rel="stylesheet">   
@endpush

@section('content')
    
    <div class="page-info">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ url('/home'); }}">Dashboard</a></li>
                <li class="breadcrumb-item"><a href="{{ url('/customers'); }}">Listado de clientes</a></li>
                <li class="breadcrumb-item active" aria-current="page">Creación de clientes</li>
            </ol>
        </nav>
        <div class="page-options">
        </div>
    </div>


    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-12">
                    <h1>Creación de cliente</h1>
                </div>
            </div>
        </div>
    </section>
    
    <div class="content px-3">

        @include('adminlte-templates::common.errors')
        @include('flash::message')

        <div class="card">

            {!! Form::open(['route' => 'customers.store', 'files' => 'true', 'id' => 'customers-form' ]) !!}

            <div class="card-body">
                <h5 class="card-title">General</h5>
                <div class="row">
                    @include('customers.fields')
                </div>
            </div>

            <div class="card-body">
                <h5 class="card-title">Dirección</h5>
                <div class="row">
                    @include('address.fields')
                </div>
            </div>

            <div class="card-body">
                <h5 class="card-title">Facturación</h5>
                <div class="row">
                    @include('customers.fields_factura')
                </div>
            </div>

            <div class="card-body">
                <h5 class="card-title">Datos Bancanrios</h5>
                <div class="row">
                    @include('customers.fields_banco')
                </div>
            </div>
        
            <div class="card-footer">
                {!! Form::submit('Guardar', ['class' => 'btn btn-primary']) !!}
                <a href="{{ route('customers.index') }}" class="btn btn-default">Cancelar</a>

            </div>
            {!! Form::close() !!}

        </div>
    </div>




@endsection

@push('page_scripts')
    <script src="{{ asset('assets') }}/plugins/select2/js/select2.full.min.js"></script>    
    <script src="{{ asset('assets') }}/js/validaciones.js"></script>
    {{-- <script src="{{ asset('assets') }}/views_js/custommers/create.js"></script> --}}

    <script>
        $(document).ready(function() {
            
            "use strict";
            
            $('.select_tow').select2();       
            
            $('#customers-form').submit(function(event){
                event.preventDefault();
                aplicar_validacion(event);
                
            });
        });
        const aplicar_validacion = (event)  => {
            
            let validacion = true;
            if (!validar_texto_minimo('#company', '#mensaje_error-company', 2)) {
                validacion = false;
            }

            if (!validar_texto_minimo('#code_supplier', '#mensaje_error-code_supplier', 2)) {
                    validacion = false;
            }
            if (!validar_texto_minimo('#name', '#mensaje_error-name', 2)) {
                validacion = false;
            }
            if (!validar_email('#email', '#mensaje_error-email', 2)) {
                validacion = false;
            }
            if (!validar_texto_minimo('#lastname', '#mensaje_error-lastname', 2)) {
                validacion = false;
            } 
            if (validacion) {
                // event.target.submit();
                console.log('validacion');
                let email = document.getElementById('email').value; 

                $('.loader').css('visibility', 'visible');
                $('.loader').css('opacity', '0.6');


                validarEmailDB(validacion, email, '#mensaje_error-email', event);
            }
        }

        const validarEmailDB =  (validacion, email, id_mensaje, event ) => {
            
            fetch('{{ url('/get_email_customer/') }}/' + email)
            .then(res => res.json())
            .then(data => {
                console.log(data);
                if (!data.success) {
                    event.target.submit();
                }else{
                    $(id_mensaje + " span").html(
                        "La direcci&oacute;n email proporcionada ya esta en uso, intenta con otro email"
                    );
                    $(id_mensaje).slideDown();

                    $('.loader').css('visibility', 'hidden');
                    $('.loader').css('opacity', '0');
                }
            }).catch(error => {
                
                    $('.loader').css('visibility', 'hidden');
                    $('.loader').css('opacity', '0');
                    
                    console.log('Manejo de error')
                    event.target.submit();
                });
        }
        

        //Muestra
        //$('.loader').css('visibility', 'visible');
        //$('.loader').css('opacity', '0.6');

        //Oculta
        //$('.loader').css('visibility', 'hidden');
        //$('.loader').css('opacity', '0');


    </script>
@endpush