@extends('layouts.app', ['activePage' => 'clientes', 'titlePage' => __('Catalogos/Clientes')])

@section('content')


<div class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-4">
                                <h4 class="card-title">Clientes</h4>
                                <!--<p class="card-category"> Here is a subtitle for this table</p>-->
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="input-group input-group-static">
                                    <label for="">Canal: <span class="text-danger">*</span></label>
                                    <select class="form-control " id="Tipo010a_filter" style="width: 100%" onchange="loadGrid()">
                                        <option value="">TODOS</option>
                                        @foreach ($data['canales'] as $co)
                                        <option value="{{$co->Id}}">{{$co->Descripcion}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="col-md-8 mt-3 text-right">
                                <button type="button" class="btn btn-primary" id="addCliente">
                                    Nuevo cliente
                                </button>
                            </div>
                        </div>
                        <div class="row ">
                            <table class="table table-bordered table-hover" width="100%" id="gridClientes">
                                <thead>
                                    <!-- <th class="text-capitalize  text-white text-xxs font-weight-bolder opacity-7">
                                        </th> -->
                                    <th class="text-white text-xxs font-weight-bolder opacity-7">ID</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Código</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Canal</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Nombre</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Moneda</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Creador por</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Fecha de alta</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Acciones</th>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="modalDetalles" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title font-weight-normal" id="titleModalDetalles">Contactos cliente</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                </button>
            </div>
            <div class="modal-body">
                <table class="table table-bordered table-hover mt-3" id="gridDetalles">
                    <thead>
                        <th class="text-white  text-xxs font-weight-bolder opacity-7">Nombre</th>
                        <th class="text-white  text-xxs font-weight-bolder opacity-7">Correo</th>
                        <th class="text-white  text-xxs font-weight-bolder opacity-7">Teléfono principal</th>
                        <th class="text-white  text-xxs font-weight-bolder opacity-7">Teléfono alterno</th>
                    </thead>
                    <tbody id="listContactosDetalles">

                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="modalClientes" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered  modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title font-weight-normal" id="titleModal">Agregar cliente</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                </button>
            </div>
            <form id="form-save-cliente" method="post">
                <input type="hidden" id="idCliente" name="idCliente">

                <div class="modal-body">
                    <div class="nav-tabs-navigation">
                        <div class="nav-tabs-wrapper">
                            <ul class="nav nav-pills nav-pills-primary" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link active" data-toggle="tab" href="#clientes_general" role="tablist" aria-expanded="false">
                                        General
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" data-toggle="tab" href="#clientes_contactos" role="tablist" aria-expanded="false">
                                        Contactos
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <hr>
                    <div class="tab-content tab-space">
                        <div class="tab-pane active" id="clientes_general" aria-expanded="true">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="input-group input-group-static ">
                                        <label for="">Nombre: <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" id="Nom010a" name="Nom010a" required>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="input-group input-group-static">
                                        <label for="">Código: <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" id="Cod010a" name="Cod010a" required>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="input-group input-group-static">
                                        <label for="">Moneda: <span class="text-danger">*</span></label>
                                        <select class="form-control " id="Id_Moneda" name="Id_Moneda" style="width: 100%" required>
                                            <option value="">-[Seleccione una opción]-</option>
                                            @foreach ($data['monedas'] as $co)
                                            <option value="{{$co->Id}}">{{$co->Descripcion}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="input-group input-group-static">
                                        <label for="">Canal: <span class="text-danger">*</span></label>
                                        <select class="form-control " name="Tipo010a" id="Tipo010a" style="width: 100%" required>
                                            <option value="">-[Seleccione una opción]-</option>
                                            @foreach ($data['canales'] as $co)
                                            <option value="{{$co->Id}}">{{$co->Descripcion}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane" id="clientes_contactos" aria-expanded="true">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="input-group input-group-static ">
                                        <label for="">Nombre: <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" id="Descripcion">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="input-group input-group-static ">
                                        <label for="">Correo: <span class="text-danger">*</span></label>
                                        <input type="email" class="form-control" id="Correo">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="input-group input-group-static">
                                        <label for="">Telefono principal: <span class="text-danger">*</span></label>
                                        <input type="number" class="form-control" id="Telefono1">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="input-group input-group-static">
                                        <label for="">Telefono alterno:</label>
                                        <input type="number" class="form-control" id="Telefono2">
                                    </div>
                                </div>
                                <div class="col-md-4 mt-3">
                                    <button type="button" class="btn btn-sm btn-primary" id="addContacto">
                                        Agregar
                                    </button>
                                </div>
                            </div>
                            <table id="gridContactos" class="table table-bordered table-hover mt-3" width="100%">
                                <thead>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Nombre</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Correo</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Teléfono principal</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Teléfono alterno</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Acciones</th>
                                </thead>
                                <tbody id="listContactos" width="100%">

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                    <button type="submit" class="btn btn-primary">Guardar</button>
                </div>
            </form>
        </div>
    </div>
</div>


<style>
    #gridContactos {
        width: 100%;
        table-layout: fixed;
    }

    #gridContactos td {
        word-wrap: break-word;
        white-space: normal !important;
        width: 20%;
    }


    #gridDetalles {
        width: 100%;
        table-layout: fixed;
    }

    #gridDetalles td {
        word-wrap: break-word;
        white-space: normal !important;
        width: 20%;
    }
</style>

<script>
    $(document).ready(function() {
        $('.dropify').dropify();

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $(".datepicker").flatpickr({
            minDate: "today"
        });

        loadGrid();
    });




    function loadGrid() {
        //$('#').DataTable();
        $('#gridClientes').dataTable().fnDestroy();
        $('#gridClientes td').css('white-space', 'initial');
        var table = $('#gridClientes').DataTable({
            lengthMenu: [10, 15, 20, 50, 100],
            dom: 'Bfrtip',
            processing: true,
            responsive: true,
            scrollX: true,
            scrollY: '50vh',
            scrollCollapse: true,
            ajax: {
                url: "{{url('catalogos/clientes/get_clientes')}}",
                type: "POST",
                data: {
                    Tipo010a: $('#Tipo010a_filter option:selected').val()
                }
            },
            columns: [
                // {
                //     "className": 'details-control',
                //     "orderable": false,
                //     "data": null,
                //     "defaultContent": ''
                // }, 
                {
                    data: "Id"
                },
                {
                    data: "Cod010a"
                },
                {
                    data: "canal_a"
                },
                {
                    data: "Nom010a"
                },
                {
                    data: "moneda.Descripcion"
                },
                {
                    data: "created_by"
                },
                {
                    data: "fecha_creacion"
                },
                {
                    data: "acciones"
                },

            ],

            order: [
                [0, "desc"]
            ],
            buttons: [{
                    extend: 'copyHtml5',
                    text: '<i class="fa fa-files-o"></i>',
                    titleAttr: 'Copiar'
                },
                {
                    extend: 'excelHtml5',
                    text: '<i class="fa fa-file-excel-o"></i>',
                    titleAttr: 'Excel'
                },
                {
                    extend: 'csvHtml5',
                    text: '<i class="fa fa-file-text-o"></i>',
                    titleAttr: 'CSV'
                },
                {
                    extend: 'pdfHtml5',
                    text: '<i class="fa fa-file-pdf-o"></i>',
                    titleAttr: 'PDF'
                }

            ],
        });

        // $('#gridClientes tbody').on('click', 'td.details-control', function() {
        //     var tr = $(this).closest('tr');
        //     var row = table.row(tr);

        //     if (row.child.isShown()) {
        //         // This row is already open - close it
        //         row.child.hide();
        //         tr.removeClass('shown');
        //     } else {
        //         // Open this row
        //         row.child(format(row.data())).show();
        //         tr.addClass('shown');
        //     }
        // });
    }


    $('#addCliente').click(function() {
        $('#idCliente').val('');
        $('#Nom010a').val('');
        $('#Cod010a').val('');
        $('#Tipo010a').val('').trigger('change');
        $('#Id_Moneda').val('').trigger('change');
        $('#listContactos').empty();
        $('#modalClientes').modal('show')
        $('#titleModal').text('Agregar cliente')


    })

    $('#Correo').keyup(function() {

        var validRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;

        if (this.value.match(validRegex)) {

            $(this).css('color', 'green');
            $(this).attr('valid', true);
            return true;

        } else {
            $(this).focus();
            $(this).css('color', 'red');
            $(this).attr('valid', false);
            return false;
        }

    })

    $("#form-save-cliente").on("submit", function(e) {
        e.preventDefault();
        var f = $(this);
        var formData = new FormData(document.getElementById("form-save-cliente"));
        var contactos = new Array();
        $('.contactos').each(function(index, value) {
            dat = {
                Descripcion: $(this).attr('Descripcion'),
                Correo: $(this).attr('Correo'),
                Telefono1: $(this).attr('Telefono1'),
                Telefono2: $(this).attr('Telefono2'),
            }
            contactos.push(dat);
        });
        formData.append("contactos[]", JSON.stringify(contactos));

        $('#loadingSave').modal('show');
        $.ajax({
                url: "{{ url('catalogos/clientes/save_cliente')}}",
                type: "post",
                data: formData,
                cache: false,
                contentType: false,
                processData: false
            })
            .done(function(resp) {
                setTimeout(() => {
                    showNotification('thumb_up', 'top', 'center', 'success', '¡BIEN!', resp.mensaje, 3000)
                    $('#gridClientes').DataTable().ajax.reload();
                    $('#modalClientes').modal('hide');
                }, 2000);

            }).fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
                setTimeout(() => {
                    $('#loadingSave').modal('hide')
                }, 2000);
            });

    });

    var i = 0;


    $('#addContacto').click(function() {
        if (i < 20) {
            i++;
        } else if (i = i++) {
            i = 0;
        }
        addContacto(i)

    })



    function addContacto(i) {
        var Descripcion = $('#Descripcion').val()
        var Correo = $('#Correo').val()
        var Correo_valid = $('#Correo').attr('valid');
        var Telefono1 = $('#Telefono1').val()
        var Telefono2 = $('#Telefono2').val()


        if (Descripcion == '' || Telefono1 == '') {
            showNotification('error', 'top', 'center', 'danger', '¡ERROR!', 'Debes agregar la información del contacto')
            return false;
        }
        if (Correo_valid == 'false') {
            $('#Correo').focus();
            showNotification('error', 'top', 'center', 'danger', '¡ERROR!', 'Correo invalido.')
            return false;
        }

        $('#listContactos').append(
            '<tr id="contacto_' + i + '" class="contactos" Descripcion="' + Descripcion + '" Correo="' + Correo + '" Telefono1="' + Telefono1 + '" Telefono2="' + Telefono2 + '">' +
            '<td>' + Descripcion + '</td>' +
            '<td>' + Correo + '</td>' +
            '<td>' + Telefono1 + '</td>' +
            '<td>' + Telefono2 + '</td>' +
            '<td align="center">' +
            '<button  type="button" class="btn btn-secondary btn-sm mr-1" onclick="editarContacto(`' + Descripcion + '`,`' + Correo + '`, ' + Telefono1 + ', `' + Telefono2 + '`, ' + i + ', 1)"><i class="fa fa-pencil" aria-hidden="true"></i></button>' +
            '<button  type="button" class="btn btn-danger btn-sm" onclick="eliminarContacto(' + i + ')"><i class="fa fa-times" aria-hidden="true"></i></button>' +
            '</td>' +
            '</tr>'
        )

        $('#Descripcion').val('')
        $('#Correo').val('')
        $('#Correo').attr('valid', false);
        $('#Telefono1').val('')
        $('#Telefono2').val('')
    }

    function eliminarContacto(id, tipo = 0) {

        if (tipo != 0) {
            $('#contacto_' + id).remove()

        } else {
            Swal.fire({
                title: '¿Estas seguro de eliminar el contacto?',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                cancelButtonText: 'Cancelar',
                confirmButtonText: 'Si, ¡hazlo!'
            }).then((result) => {
                if (result.value) {
                    $('#contacto_' + id).remove()
                }
            })
        }

    }

    function editarContacto(descripcion, correo, telefono1, telefono2, id, tipo) {
        eliminarContacto(id, tipo)
        $('#Descripcion').val(descripcion);
        $('#Correo').val(correo);
        $('#Telefono1').val(telefono1);
        $('#Telefono2').val(telefono2);

    }

    function editarCliente(id) {

        $.ajax({
                url: "{{url('catalogos/clientes/get_cliente')}}",
                type: 'POST',
                dataType: 'json',
                data: {
                    Id: id,
                }
            })
            .done(function(resp) {
                $('#idCliente').val(resp.data['Id']);
                $('#Nom010a').val(resp.data['Nom010a']);
                $('#Cod010a').val(resp.data['Cod010a']);
                $('#Tipo010a').val(resp.data['Tipo010a']).trigger('change');
                $('#Id_Moneda').val(resp.data['Id_Moneda']).trigger('change');
                $('#listContactos').empty();

                $.each(resp.data.contactos, function(index, value) {

                    $('#listContactos').append(
                        '<tr id="contacto_' + index + '" class="contactos" Descripcion="' + value['Descripcion'] + '" Correo="' + value['Correo'] + '" Telefono1="' + value['Telefono1'] + '" Telefono2="' + value['Telefono2'] + '">' +
                        '<td>' + value['Descripcion'] + '</td>' +
                        '<td>' + value['Correo'] + '</td>' +
                        '<td>' + value['Telefono1'] + '</td>' +
                        '<td>' + value['Telefono2'] + '</td>' +
                        '<td align="center">' +
                        '<button  type="button" class="btn btn-secondary btn-sm mr-1" onclick="editarContacto(`' + value['Descripcion'] + '`, `' + value['Correo'] + '`,' + value['Telefono1'] + ', `' + value['Telefono2'] + '`, ' + index + ', 1)"><i class="fa fa-pencil" aria-hidden="true"></i></button>' +
                        '<button  type="button" class="btn btn-danger btn-sm" onclick="eliminarContacto(' + index + ')"><i class="fa fa-times" aria-hidden="true"></i></button>' +
                        '</td>' +
                        '</tr>'
                    )
                })
                j = resp.data.contactos.length;
                $('#titleModal').text('Editar cliente')
                $('#modalClientes').modal('show')
            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });
    }

    function detallesCliente(id) {
        $.ajax({
                url: "{{url('catalogos/clientes/get_cliente')}}",
                type: 'POST',
                dataType: 'json',
                data: {
                    Id: id,
                }
            })
            .done(function(resp) {

                $('#titleModalDetalles').text('Detalles cliente / ' + resp.data['Nom010a'])
                $('#listContactosDetalles').empty();
                $.each(resp.data.contactos, function(index, value) {
                    $('#listContactosDetalles').append(
                        '<tr id="contacto_' + index + '" class="contactos" Descripcion="' + value['Descripcion'] + '" Telefono1="' + value['Telefono1'] + '" Telefono2="' + value['Telefono2'] + '">' +
                        '<td>' + value['Descripcion'] + '</td>' +
                        '<td>' + value['Correo'] + '</td>' +
                        '<td>' + value['Telefono1'] + '</td>' +
                        '<td>' + value['Telefono2'] + '</td>' +
                        '</tr>'
                    )
                })
                $('#modalDetalles').modal('show')
            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });
    }
</script>
@endsection