@extends('layout.master',['activePage' => 'clientes_cr', 'menuParent' => 'Catalogos', 'titlePage' => __('Catalogo de cliente')])

@push('plugin-styles')
{!! Html::style('assets/css/loader.css') !!}
{!! Html::style('assets/css/apps/tickets.css') !!}
{!! Html::style('plugins/table/datatable/datatables.css') !!}
{!! Html::style('plugins/table/datatable/dt-global_style.css') !!}
@endpush


@section('content')

<div class="sub-header-container">
    <header class="header navbar navbar-expand-sm">
        <ul class="navbar-nav flex-row">
            <li>
                <div class="page-header">
                    <nav class="breadcrumb-one" aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="javascript:void(0);"> {{__('Catalogos')}}</a></li>
                            <li class="breadcrumb-item active" aria-current="page"><span> {{__('CATALOGO DE CLIENTES')}}</span></li>
                        </ol>
                    </nav>
                </div>
            </li>
        </ul>
    </header>
</div>
<div class="layout-px-spacing">
    <div class="container-fluid p-0">
        <!-- <div class="row layout-top-spacing justify-content-end">
            <div class="col-3 text-right">
                <a class="btn btn-primary" href="{{url('catalogos/clientes/alta-cliente')}}">Nuevo cliente</a>
            </div>
        </div> -->
        <div class="row">
            <div class="col-lg-2">
                <label>Cuenta: <span class="text-danger">*</span></label>
                <input type="text" class="form-control" id="cuenta_cliente" onkeydown="javascript:if (event.key === 'Enter') getClientesGrid() ">
            </div>
            <div class="col-lg-4">
                <label>Nombre: <span class="text-danger">*</span></label>
                <input type="text" class="form-control" id="cliente_search">
                <input type="hidden" class="form-control" id="id_cliente_hidden">
            </div>
            <div class="col-lg-2">
                <label>Tarjeta: <span class="text-danger">*</span></label>
                <input type="text" class="form-control creditCard" id="numero_tarjeta">
            </div>
            <div class="col-lg-2">
                <button class="btn btn-primary mt-4" type="button" onclick="getClientesGrid()">Filtrar</button>

            </div>
        </div>
        <div class="row date-table-container layout-top-spacing">
            <div class="table-responsive">
                <table class="table table-hover" id="list-clientes">
                    <thead>
                        <tr>
                            <th class="no-content"></th>
                            <th>{{__('ID')}}</th>
                            <th>{{__('Cuenta')}}</th>
                            <th>{{__('Nombre')}}</th>
                            <th>{{__('RFC')}}</th>
                            <th>{{__('Domicilio')}}</th>
                            <th>{{__('Fecha de creación')}}</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>


<div class="modal fade draggable" id="modal-notas" tabindex="-1" role="dialog" aria-hidden="true" style="z-index: 1500;">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="title-modal-nueva-tarjeta">Agregar nueva nota de cliente</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <i class="las la-times"></i>
                </button>
            </div>

            <div class="modal-body">
                <div class="form-group ">
                    <label>Nota: <span class="text-danger">*</span></label>
                    <input type="text" name="descripcion" id="descripcion" class="form-control" required>
                </div>
                <div class="form-group text-right">
                    <button type="button" class="btn btn-primary" onclick="guardarNota()">Agregar</button>
                </div>

                <div class="row date-table-container layout-top-spacing">
                    <div class="table-responsive">
                        <table class="table table-hover" id="list-notas">
                            <thead>
                                <tr>
                                    <th class="no-content"></th>
                                    <th>{{__('Nota')}}</th>
                                    <th>{{__('Fecha de creación')}}</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger btn-link" data-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>

<style>
    .ui-autocomplete-input {
        font-size: 14px;
        padding-top: 0px !important;
        z-index: 1000;
        position: relative;
    }

    .ui-menu .ui-menu-item a {
        font-size: 12px;
    }

    .ui-autocomplete {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1000 !important;
        float: left;
        display: none;
        min-width: 160px;
        width: 160px;
        padding: 4px 0;
        margin: 2px 0 0 0;
        list-style: none;
        background-color: #ffffff;
        border-color: #ccc;
        border-color: rgba(0, 0, 0, 0.2);
        border-style: solid;
        border-width: 1px;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border-radius: 2px;
        -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        -webkit-background-clip: padding-box;
        -moz-background-clip: padding;
        background-clip: padding-box;
        *border-right-width: 2px;
        *border-bottom-width: 2px;
    }

    .ui-autocomplete {
        max-height: 200px;
        overflow-y: auto;
        /* prevent horizontal scrollbar */
        overflow-x: hidden;
        /* add padding to account for vertical scrollbar */
        padding-right: 20px;
    }

    .ui-menu-item>a.ui-corner-all {
        display: block;
        padding: 3px 15px;
        clear: both;
        font-weight: normal;
        line-height: 18px;
        color: #555555;
        white-space: nowrap;
        text-decoration: none;
    }

    .ui-state-hover,
    .ui-state-active {
        color: #ffffff;
        text-decoration: none;
        background-color: #0088cc;
        border-radius: 0px;
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        background-image: none;
    }
</style>
<input type="hidden" name="id_cliente" id="id_cliente">

@endsection

@push('plugin-scripts')
{!! Html::script('plugins/table/datatable/datatables.js') !!}
{!! Html::script('plugins/table/datatable/button-ext/dataTables.buttons.min.js') !!}
{!! Html::script('plugins/table/datatable/button-ext/jszip.min.js') !!}
{!! Html::script('assets/js/loader.js') !!}
{!! Html::script('plugins/jquery-ui/jquery-ui.min.js') !!}
{!! Html::script('assets/js/basicui/inputmask.js') !!}

@endpush

@push('custom-scripts')
<script>
    $(document).ready(function() {

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


        $('.creditCard').inputmask({
            mask: '(9{4} 9{4} 9{4}|9{4} 9{4} 9{4} 9{4})'
        }).change(function() {
            let value = $(this).val().substr(0, 2);
            $(this).inputmask({
                mask: '(9{4} 9{4} 9{4}|9{4} 9{4} 9{4} 9{4})'
            });
        });

        $('#cliente_search').autocomplete({
            source: function(request, response) {
                $.ajax({
                    url: "{{url('procesos/get_clientes')}}",
                    dataType: 'json',
                    data: {
                        term: request.term
                    },
                    success: function(data) {
                        $('#id_cliente_hidden').val('')
                        response(data)
                    }
                })
            },
            select: function(event, ui) {


                $('#id_cliente_hidden').val(ui.item.id)
                $('#cliente_search').val(ui.item.label)
                getClientesGrid()
                return false;
            },
            selectFirst: true,
            minLength: 3
        });

        var table = $('#list-clientes').DataTable({
            lengthMenu: [10, 15, 20, 50, 100, 200, 500],
            language: {
                url: "{{asset('assets/material/datatable_sp.json')}}"
            },

        });
    });

    function getClientesGrid(id_cliente) {
        $('#list-clientes').dataTable().fnDestroy();

        var table = $('#list-clientes').DataTable({
            lengthMenu: [10, 15, 20, 50, 100, 200, 500],
            language: {
                url: "{{asset('assets/material/datatable_sp.json')}}"
            },
            ajax: {
                url: "{{url('catalogos/clientes/get-clientes')}}",
                type: "POST",
                data: {
                    id_cliente: $('#id_cliente_hidden').val(),
                    nombre_cliente: $('#cliente_search').val(),
                    cuenta_cliente: $('#cuenta_cliente').val(),
                    numero_tarjeta: $('#numero_tarjeta').val(),
                }
            },
            columns: [{
                    data: {
                        data: "id",
                        data: "saldoscr.saldo",
                        data: "historcr",
                    },
                    render: function(data, type, full, meta) {

                        var options = '<div><a class="btn btn-sm p-0 btn-link text-primary font-20 btn-with-spin" title="Editar cliente" href="{{url("catalogos/clientes/editar-cliente")}}/' + data['id'] + '"><i class="las la-edit"></i></a><button class="btn btn-sm p-0 btn-link text-primary font-20 btn-with-spin" title="Notas del cliente" onclick="notasCliente(' + data['id'] + ')"><i class="las la-sticky-note"></i></button>';
                        // if ((data['saldoscr'] == null || data['saldoscr']['saldo'] == 0) && data['historcr'] == null) {
                        //     options += '<a class="btn btn-sm p-0 btn-link text-danger font-20 btn-with-spin" title="Eliminar cliente" href="{{url("catalogos/clientes/delete-cliente")}}/' + data['id'] + '"><i class="las la-trash"></a>';
                        // }
                        return options + '</div>'
                    }
                },
                {
                    data: "id"
                },
                {
                    data: "cuenta"
                },
                {
                    data: "nombre_completo"
                },
                {
                    data: "rfc"
                },
                {
                    data: {
                        data: "colonias",
                    },
                    render: function(data, type, full, meta) {
                        return '<div>' + data.colonias.descripcion + ' ' + data.colonias.poblacion.descripcion + ' ' + data.colonias.poblacion.municipio.estado.descripcion + '</div>'
                    }
                },
                {
                    data: "created_at"
                },
            ],
            order: [
                [1, "desc"]
            ],


        });
    }

    function notasCliente(id_cliente) {

        $('#id_cliente').val(id_cliente);
        $('#descripcion').val('');
        $('#modal-notas').modal('show')

        $('#list-notas').dataTable().fnDestroy();
        var table = $('#list-notas').DataTable({
            lengthMenu: [10, 15, 20, 50, 100, 200, 500],
            language: {
                url: "{{asset('assets/material/datatable_sp.json')}}"
            },
            ajax: {
                url: "{{url('catalogos/clientes/get-notas')}}",
                type: "POST",
                data: {
                    id_cliente: id_cliente,
                }
            },
            columns: [{
                    data: "id",
                    render: function(data, type, full, meta) {
                        return '<div><button class="btn btn-sm p-0 btn-link text-danger font-20 btn-with-spin" title="Eliminar nota" onclick="eliminarNota(' + data + ')"><i class="las la-trash"></a></div>'
                    }
                },
                {
                    data: "descripcion"
                },
                {
                    data: "created_at"
                },
            ],
            order: [
                [1, "desc"]
            ],


        });
    }

    function guardarNota() {
        $.ajax({
                url: '{{ url("catalogos/clientes/save-nota" )}}',
                type: 'POST',
                dataType: 'json',
                data: {
                    id_cliente: $('#id_cliente').val(),
                    descripcion: $('#descripcion').val(),
                },
            })
            .done(function(resp) {
                notasCliente($('#id_cliente').val())
            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");

            })
    }

    function eliminarNota(id_cliente) {
        $.ajax({
                url: '{{ url("catalogos/clientes/delete-nota")}}',
                type: 'POST',
                dataType: 'json',
                data: {
                    id_cliente: id_cliente,
                },
            })
            .done(function(resp) {
                notasCliente(id_cliente)
            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");

            })
    }
</script>
@endpush