@extends('layouts.app')

@section('content')
    <!-- end sidebar menu -->
    <!-- start page content -->
    <div class="page-content-wrapper">
        <div class="page-content">
            <div class="page-bar">
                <div class="page-title-breadcrumb">
                    <!--<div class="pull-left">
                                    <div class="page-title text-danger">Sin Sucursal</div>
                                </div>-->
                    <ol class="breadcrumb page-breadcrumb pull-right">
                        <li><i class="fa fa-home"></i>&nbsp;<a class="parent-item"
                                href="{{ url('/dashboard') }}">Inicio</a>&nbsp;<i class="fa fa-angle-right"></i>
                        </li>
                        <li><i class="fa fa-users"></i>&nbsp;<a class="parent-item" href="{{ url('/clientes') }}">Listado de
                                Clientes</a>
                            &nbsp;<i class="fa fa-angle-right"></i>
                        </li>
                        <li class="active">Cliente - {{ isset($edit) ? 'Actualizar' : 'Nuevo' }}</li>
                    </ol>
                </div>
            </div>
            <!-- start widget -->
            <!-- start admited patient list -->
            <div class="row">
                <div class="col-md-12 col-sm-12">
                    <div class="card  card-box">
                        <div class="card-head">
                            <header>Cliente
                                -{{ isset($edit) ? 'Actualizar (' . $edit->cliente_nombres . ' ' . $edit->cliente_apellido1 . ' ' . $edit->cliente_apellido2 . ')' : 'Nuevo' }}
                            </header>
                        </div>
                        @if (isset($edit))
                            {!! Form::model($edit, [
                                'url' => ['cliente/editar/' . $edit->cliente_id],
                                'method' => 'PATCH',
                                'enctype' => 'multipart/form-data',
                                'id' => 'frmClientes',
                            ]) !!}
                        @else
                            {!! Form::open([
                                'url' => 'cliente',
                                'method' => 'POST',
                                'enctype' => 'multipart/form-data',
                                'role' => 'form',
                                'id' => 'frmClientes',
                            ]) !!}
                        @endif


                        <div class="card-body">
                            <div class="mb-3 text-center">
                                <img class="rounded" width="10%" height="10%"
                                    src="{{ isset($edit) ? ($edit->cliente_foto == 'default_avatar.jpg' ? URL('images/default_avatar.png') : URL('upload/foto_clientes/') . '/' . $edit->cliente_foto) : URL('images/default_avatar.png') }}"/
                                    id="view_picture">
                            </div>
                            <div class="form-group">
                                <div class="row mb-1 col-md-12">
                                    <label for="foto" class="form-label">Foto</label>
                                    <input type="file" class="form-control" name="foto" id="foto"
                                        onchange="showPreview(event);">
                                </div>
                            </div>
                            <div class="row mb-1 col-md-12">
                                {!! Form::mselect(
                                    'sede',
                                    $sede,
                                    isset($edit) ? $edit->cliente_entidad_id : session()->get('data_entidad')->entidad_id,
                                    'Sede',
                                    $errors,
                                    6,
                                ) !!}

                                {!! Form::mselect(
                                    'tipo_identificacion',
                                    $tipo_identificacion,
                                    isset($edit) ? $edit->cliente_tipo_identificaicon : null,
                                    'Tipo Identificación',
                                    $errors,
                                    6,
                                    true,
                                ) !!}
                            </div>
                            <div class="row mb-1 col-md-12">
                                {!! Form::mtext(
                                    'documento',
                                    isset($edit) ? $edit->cliente_documento : null,
                                    'Documento',
                                    $errors,
                                    6,
                                    true,
                                    true,
                                    [['onkeypress' => 'return event.charCode > 47 && event.charCode < 58;'], ['onchange' => 'validarDocumento()']],
                                ) !!}

                                {!! Form::mtext(
                                    'documento1',
                                    isset($edit) ? $edit->cliente_documento_2 : null,
                                    'Documento 2',
                                    $errors,
                                    6,
                                    false,
                                    true,
                                ) !!}
                            </div>
                            <div class="row mb-1 col-md-12">
                                {!! Form::mtext(
                                    'documento3',
                                    isset($edit) ? $edit->cliente_documento_3 : null,
                                    'Documento 3',
                                    $errors,
                                    6,
                                    false,
                                    true,
                                ) !!}

                                {!! Form::mtext(
                                    'documento4',
                                    isset($edit) ? $edit->cliente_documento_4 : null,
                                    'Documento 4',
                                    $errors,
                                    6,
                                    false,
                                    true,
                                ) !!}
                            </div>
                            <div class="row mb-1 col-md-12">
                                {!! Form::mtext('nombre', isset($edit) ? $edit->cliente_nombres : null, 'Nombres', $errors, 6, true, true, [
                                    ['onkeyup' => 'javascript:this.value=this.value.toUpperCase()'],
                                ]) !!}

                                {!! Form::mtext(
                                    'paterno',
                                    isset($edit) ? $edit->cliente_apellido1 : null,
                                    'Primer Apellido',
                                    $errors,
                                    6,
                                    true,
                                    true,
                                    [['onkeyup' => 'javascript:this.value=this.value.toUpperCase()']],
                                ) !!}
                            </div>
                            <div class="row mb-1 col-md-12">

                                {!! Form::mtext(
                                    'materno',
                                    isset($edit) ? $edit->cliente_apellido2 : null,
                                    'Segundo Apellido',
                                    $errors,
                                    6,
                                    false,
                                    true,
                                    [['onkeyup' => 'javascript:this.value=this.value.toUpperCase()']],
                                ) !!}

                                <div class="col-6">
                                    <label for="">Correo</label>
                                    <input 
                                        type="email" 
                                        name="email" 
                                        id="email" placeholder="micorreo@test.com"
                                        class="form-control" 
                                        value="{{ isset($edit) ? $edit->cliente_email : null }}"
                                        onkeydown="javascript:this.value=this.value.toLowerCase()">
                                </div>
                                {{-- {!! Form::mEmail('email',isset($edit) ? $edit->cliente_email : null,'Correo',$errors,6,false,false, [['onkeyup'=>'javascript:this.value=this.value.toLowerCase()']]) !!} --}}
                            </div>
                            <div class="row mb-1 col-md-12">
                                {!! Form::mselect('sexo', $genero, isset($edit) ? $edit->cliente_sexo : null, 'Sexo', $errors, 6) !!}

                                {!! Form::mselect(
                                    'estado_civil',
                                    $estado,
                                    isset($edit) ? $edit->cliente_estado_civil : null,
                                    'Estado Civil',
                                    $errors,
                                    6,
                                ) !!}
                            </div>
                            <div class="row mb-1 col-md-12">
                                {!! Form::mtext(
                                    'nacionalidad',
                                    isset($edit) ? $edit->cliente_nacionalidad : null,
                                    'Nacionalidad',
                                    $errors,
                                    6,
                                    false,
                                    true,
                                    [['onkeyup' => 'javascript:this.value=this.value.toUpperCase()']],
                                ) !!}

                                {!! Form::mDate(
                                    'fecha_nacimiento',
                                    isset($edit) ? $edit->cliente_fecha_nacimiento : null,
                                    'Fecha de Nacimiento',
                                    $errors,
                                    6,
                                    true
                                ) !!}
                            </div>
                            <div class="row mb-1 col-md-12">
                                {!! Form::mselect(
                                    'localidad',
                                    $localidad,
                                    isset($edit) ? $edit->cliente_localidad_id : null,
                                    'Localidad',
                                    $errors,
                                    6,
                                ) !!}

                                {!! Form::mtextAr(
                                    'direccion',
                                    isset($edit) ? $edit->cliente_direccion : null,
                                    'Dirección',
                                    $errors,
                                    6,
                                    false,
                                    false,
                                    'onkeyup="javascript:this.value=this.value.toUpperCase()"',
                                ) !!}
                            </div>
                            <div class="row">
                                <div class="col-md-2">
                                    <div class="form-group">
                                        <label for="codigo_telefono_pais">Codigo Telefono</label>
                                        <select name="codigo_telefono_pais" id="codigo_telefono_pais"
                                            class="form-control select2">
                                            <option value="+506">Costa Rica</option>
                                            @php
                                                $data = json_decode(file_get_contents(public_path('/js/CountryCodes.json')));
                                            @endphp
                                            @foreach ($data as $country)
                                                <option value="{{ $country->dial_code }}"
                                                    @if (@$edit->codigo_telefono_pais == $country->dial_code) selected='selected' @endif>
                                                    {{ $country->name }} ({{ $country->dial_code }})</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="row mb-1 col-md-8">
                                    {!! Form::mtext('celular', isset($edit) ? $edit->cliente_celular : null, 'Celular', $errors, 6, true, true, [
                                        ['onkeypress' => 'return event.charCode > 47 && event.charCode < 58;'],
                                        ['maxlength' => '8'],
                                    ]) !!}

                                    @php $telefonos =  isset($edit) ? str_replace(']','',str_replace('"]','',str_replace('"','',str_replace('["','',$edit->cliente_telefonos)))) : null; @endphp

                                    {!! Form::mtextTags('telefonos', $telefonos, 'Otros Teléfonos', $errors, 6, false, true, [
                                        ['onkeyup' => 'return event.charCode > 47 && event.charCode < 58;'],
                                    ]) !!}
                                    <!--<input type="text" class="form-control tags-input" data-type="tags" name="">-->
                                </div>
                            </div>

                            <div class="row mb-1 col-md-8">
                                <div class="form-group">
                                    <label for="">Observacion Fija:</label>
                                       <select 
                                       onchange="update_observ();" 
                                       name="observaciones_fijas[]" 
                                       id="observaciones_fijas" 
                                       class="form-control select2 multiple" 
                                       multiple="multiple">
                                           observaciones_fijas
                                            @foreach ($observaciones_fijas as $of)
                                                 @if (isset($edit) and !empty($edit))
                                                     <option value="{{ $of->observacion_fija_id }}"
                                                        @if ($edit->cliente_observaciones_fija_id == $of->observacion_fija_id) selected='selected' @endif>
                                                        {{ $of->observacion_fija_descripcion }}</option>
                                                @else  
                                                    <option value="{{ $of->observacion_fija_id }}">
                                                        {{ $of->observacion_fija_descripcion }}</option>
                                                @endif
                                            @endforeach
                                        </select>       
                                    </div>
                                <div class="col-3">
                                    <label for="telefonos" class="form-label">Autoriza Envio de Email? </label><br>
                                    <input type="checkbox" name="autorizacion_email" data-off="No" data-on="Si"
                                        {{ isset($edit) ? ($edit->cliente_autoriza_envio_email ? 'checked' : '') : '' }}
                                        data-toggle="toggle" data-onstyle="primary" data-offstyle="danger">
                                </div>
                                <div class="col-3">
                                    <label for="telefonos" class="form-label">Autoriza el Envio de SMS?</label><br>
                                    <input type="checkbox" name="autorizacion_sms" data-off="No" data-on="Si"
                                        {{ isset($edit) ? ($edit->cliente_autoriza_envio_sms ? 'checked' : '') : '' }}
                                        data-toggle="toggle" data-onstyle="primary" data-offstyle="danger">
                                </div>
                            </div>
                        </div>
                        <div class="card-footer text-center">
                            <div class="text-center">
                                <button type="submit" class="btn bg-success">Aceptar</button>
                                <a class="btn bg-danger" href="{{ route('cliente.index') }}">Cancelar</a>
                            </div>
                        </div>
                        {!! Form::close() !!}
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script>
        $(document).ready(function() {
            $('#observaciones_fijas').select2({
                theme: "classic"
            });

            $("#observaciones_fijas").val([])
                .change();
        });

        function update_observ() {
            var selected = $('#observaciones_fijas').select2("val");
         
        }

        function showPreview(event) {
            if (event.target.files.length > 0) {
                var src = URL.createObjectURL(event.target.files[0]);
                var preview = document.getElementById("view_picture");
                preview.src = src;
            }
        }

        function validarDocumento() {

            var textDocumento = $('#documento').val();
            let body = {
                "_token": "{{ csrf_token() }}",
                "documento": textDocumento
            }

            console.log('body :', body)

            @if (isset($edit))
                body.cliente_id = {{ $edit->cliente_id }}
            @endif

            $.ajax({
                type: "POST",
                url: "{{ asset('') . 'ajax/cliente/validar/documento' }}",
                data: body,
                success: function(res) {
                    if (res != '') {
                        Swal.fire({
                            icon: 'warning',
                            title: 'Documento Registrado',
                            html: `<div class="text-justify">El documento que acaba de ingresar <strong>${textDocumento}</strong>, ya se encuentra registrado en la base de datos con el nombre de cliente <strong>"${res.cliente_nombres} ${res.cliente_apellido1} ${res.cliente_apellido2}"</strong>.</div>
                            ¿Que desea hacer?`,
                            showCloseButton: true,
                            showCancelButton: true,
                            confirmButtonText: `<a class="text-white" href="{{ url('cliente/editar/') }}/${res.cliente_id}"><i class="fa fa-save"></i> Actualizar Clente</a>`,
                            cancelButtonText: '<i class="fa fa-ban"></i> Modificar Documento',
                            customClass: {
                                confirmButton: 'btn btn-primary',
                                cancelButton: 'btn btn-default'
                            },
                        });
                        $('#documento').val('');
                        return false
                    }

                    return true
                },
                dataType: "json"
            });
        }
        $(document).ready(function() {
            //Initialize Select2 Elements
            $('.select2').select2()

            //Initialize Select2 Elements
            $('.select2bs4').select2({
                theme: 'bootstrap4'
            }); +

            $.validator.addMethod('filesize', function(value, element, param) {
                return this.optional(element) || (element.files[0].size <= param * 1000000)
            }, 'File size must be less than {0} MB');

            $('#frmClientes').validate({
                rules: {
                    sede: {
                        required: true
                    },
                    tipo_identificacion: {
                        required: true
                    },
                    documento: {
                        required: true
                    },
                    nombre: {
                        required: true
                    },
                    paterno: {
                        required: true
                    },
                    fecha_nacimiento: {
                        required: true
                    },
                    foto: {
                        extension: "jpg|jpeg|png",
                        filesize: 1, // here we are working with MB
                    }
                },
                messages: {
                    sede: {
                        required: "Campo sede es requerido."
                    },
                    tipo_identificacion: {
                        required: "Campo tipo de identificación es requerido."
                    },
                    documento: {
                        required: "Campo documento es requerido."
                    },
                    nombre: {
                        required: "Campo nombres es requerido."
                    },
                    paterno: {
                        required: "Campo primer apellido es requerido."
                    },
                    fecha_nacimiento: {
                        required: "Campo fecha de nacimiento es requerido."
                    },
                    foto: {
                        extension: "Extensión invalida. (solo se admite JPG, PNG)",
                        filesize: "El archivo excede el tamaño máximo permitido. (1mb)"
                    }
                },
                errorElement: 'span',
                errorPlacement: function(error, element) {
                    error.addClass('invalid-feedback');
                    element.closest('.form-group').append(error);
                },
                highlight: function(element, errorClass, validClass) {
                    $(element).addClass('is-invalid');
                },
                unhighlight: function(element, errorClass, validClass) {
                    $(element).removeClass('is-invalid');
                },
                submitHandler: function(form) {
                    var validacion = '';
                    var celular = $('#celular').val();
                    var telefonos = $('#telefonos').val();
                    var html = '';
                    var documento = $('#documento').val();

                    if (celular == '' && telefonos == '') {
                        validacion = 'Debe ingresar alguno de los campos celular o teléfonos.';
                    }

                    if (celular != '' && validacion == '') {
                        if (celular.length < 8) {
                            validacion =
                                'El campo celular solo debe contener 8 caracteres de tipo numerico.';
                        }
                    }

                    if (telefonos != '' && validacion == '' && celular == '') {
                        var arrayTelefonos = telefonos.split(',');

                        for (var i = 0; i < arrayTelefonos.length; i++) {
                            if (arrayTelefonos[i].length < 8 || isNaN(arrayTelefonos[i] * 1)) {
                                validacion += 'El teléfono (' + arrayTelefonos[i] +
                                    ') debe contener 8 caracteres de tipo numerico.' + "<br/>"
                            }
                            if (arrayTelefonos[i].length > 8 || isNaN(arrayTelefonos[i] * 1)) {
                                validacion += 'El teléfono (' + arrayTelefonos[i] +
                                    ') debe contener 8 caracteres de tipo numerico.' + "<br/>"
                            }
                        }
                        html = validacion;
                    }

                    if (validacion != '') {
                        Swal.fire({
                            icon: 'error',
                            title: 'Advertencia',
                            text: html == '' ? validacion : '',
                            html: html
                        });
                    } else {
                        form.submit();
                    }
                }
            });
        });
    </script>
@endsection