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

@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') !!}
{!! Html::style('plugins/flatpickr/flatpickr.css') !!}
{!! Html::style('plugins/flatpickr/custom-flatpickr.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 RUTAS DE COBRO')}}</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">
                <button class="btn btn-primary" id="btn-nueva-ruta">Nueva ruta</button>
            </div>
        </div>
        <div class="row date-table-container layout-top-spacing">
            <div class="table-responsive">
                <table class="table table-hover" id="list-rutas-cobro">
                    <thead>
                        <tr>
                            <th class="no-content"></th>
                            <th>{{__('ID')}}</th>
                            <th>{{__('Ruta')}}</th>
                            <th>{{__('Descripción')}}</th>
                            <th>{{__('Sucursal')}}</th>
                            <th>{{__('Tipo de cobranza')}}</th>
                            <th>{{__('Creado el')}}</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
    <div class="container-fluid p-0" id="content-detalles" style="display: none;">

        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-12">
                        <h6 id="title-ruta-cobro">Agregar nueva ruta de cobro</h6>
                    </div>
                </div>

                <div class="form-group row ">
                    <div class="col-lg-1">
                        <label>Ruta: <span class="text-danger">*</span></label>
                        <input type="number" class="form-control form-control-sm" id="ruta" name="rura" required>
                    </div>
                    <div class="col-lg-4">
                        <label>Descripción: <span class="text-danger">*</span></label>
                        <input type="text" class="form-control form-control-sm" id="descripcion" name="descripcion" required>
                    </div>
                    <div class="col-lg-3">
                        <label>Sucursal: <span class="text-danger">*</span></label>
                        <select id="id_sucursal" class="form-control form-control-sm"  name="sucursal" required>
                            <option value="">- Selecciona una opción -</option>
                            @foreach ($data['sucursales'] as $item)
                            <option value="{{ $item->id }}">
                                {{ $item->sucursal . ' - ' . $item->descripcion }}
                            </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-lg-2">
                        <label>Tipo de cobranza: <span class="text-danger">*</span></label>
                        <select id="tipo_cobranza" class="form-control form-control-sm"  name="tipo_cobranza" required>
                            <option value="">- Selecciona una opción -</option>
                            @foreach ($data['tipo_cobranza'] as $item)
                            <option value="{{ $item }}">
                                {{ $item}}
                            </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-lg-2">
                        <label>Enviar estado de cuenta: <span class="text-danger">*</span></label>
                        <select id="estado_cuenta" class="form-control form-control-sm" name="estado_cuenta" required>
                            <option value="">- Selecciona una opción -</option>
                            <option value="0">Si</option>
                            <option value="1">No</option>
                        </select>
                    </div>
                </div>

                <div class="row date-table-container layout-top-spacing">
                    <div class="col-12">
                        <div class="table-responsive">
                            <table class="table table-hover" id="list-rutas-cobro-detalle">
                                <thead>
                                    <tr>
                                        <th class="no-content"></th>
                                        <th>{{__('Nivel')}}</th>
                                        <th>{{__('Cuenta')}}</th>
                                        <th>{{__('Frecuencia')}}</th>
                                        <th>{{__('Tolerancia')}}</th>
                                        <th>{{__('Meses vencidos')}}</th>
                                        <th>{{__('Agente')}}</th>
                                    </tr>
                                </thead>
                                <tbody id="list-rutas-cobro-detalle-body">
                                    @for($i = 1; $i<=10; $i++) <tr class="filas_niveles" id="row_{{$i}}" fila="{{$i}}">
                                        <td>
                                            <div>
                                                <button class="btn btn-sm p-0 btn-link font-20 text-danger" title="Limpiar ruta de cobro" onclick="limpiarRutaCobro('{{$i}}')"><i class="las la-trash"></i></button>
                                            </div>
                                        </td>
                                        <td>
                                            {{$i}}
                                            <input type="hidden" id="nivel_{{$i}}" name="nivel_{{$i}}" value="{{$i}}">
                                        </td>
                                        <td>
                                            <input type="number" class="form-control form-control-sm" id="cuenta_{{$i}}" name="cuenta_{{$i}}">
                                        </td>
                                        <td>
                                            <input type="number" class="form-control form-control-sm" id="frecuencia_{{$i}}" name="frecuencia_{{$i}}">
                                        </td>
                                        <td>
                                            <input type="number" class="form-control form-control-sm" id="tolerancia_{{$i}}" name="tolerancia_{{$i}}">
                                        </td>
                                        <td>
                                            <input type="number" class="form-control form-control-sm" id="dias_vencido_{{$i}}" name="dias_vencido_{{$i}}">
                                        </td>
                                        <td>
                                            <select id="id_agente_{{$i}}" name="id_agente_{{$i}}" class="form-control form-control-sm" style="font-size: 10px !important; padding: 0;" name="tipo_cobranza">
                                                <option value="">- Selecciona una opción -</option>
                                                @foreach ($data['agentes'] as $item)
                                                <option value="{{ $item->id }}">
                                                    {{ $item->nombre}}
                                                </option>
                                                @endforeach
                                            </select>
                                        </td>

                                        </tr>
                                        @endfor
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="row justify-content-end">
                    <div class="col-3 text-right">
                        <button class="btn btn-primary " id="btn-guardar" type="submit">Guardar</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>



<style>
    .flatpickr-calendar {
        z-index: 1600 !important;
    }
</style>
<input type="hidden" name="id_ruta" id="id_ruta">

@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') !!}
{!! Html::script('plugins/flatpickr/flatpickr.js') !!}
{!! Html::script('plugins/flatpickr/custom-flatpickr.js') !!}

@endpush

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

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


        $("#vigencia").flatpickr({
            mode: "range",
            dateFormat: "Y-m-d",
            locale: {
                rangeSeparator: " a ",
            },
        });


        getRutasCobro();
    });



    function getRutasCobro() {
        $('#list-rutas-cobro').dataTable().fnDestroy();

        var table = $('#list-rutas-cobro').DataTable({
            lengthMenu: [5, 10, 15, 20, 50, 100, 200, 500],
            language: {
                url: "{{asset('assets/material/datatable_sp.json')}}"
            },
            ajax: {
                url: "{{url('catalogos/rutas-cobro/get-rutas-cobro')}}",
                type: "POST",
            },
            columns: [{
                    data: "id",
                    render: (data, type, full, meta) => {
                        return '<div><button class="btn btn-sm p-0 btn-link text-primary font-20"  title="Editar ruta de cobro" onclick="editarRutaCobro(' + data + ')" ><i class="las la-edit"></i></button><a class="btn btn-sm p-0 btn-link text-danger font-20 btn-with-spin" title="Eliminar ruta de cobro" href="{{url("catalogos/rutas-cobro/delete-ruta-cobro")}}/' + data + '"><i class="las la-trash"></a></div>';
                    }
                },
                {
                    data: "id"
                },
                {
                    data: "ruta"
                },
                {
                    data: "descripcion"
                },
                {
                    data: "sucursal.descripcion"
                },
                {
                    data: "tipo_cobranza"
                },
                {
                    data: "created_at"
                },

            ],
            order: [
                [1, "desc"]
            ],


        });
    }

    $('#btn-nueva-ruta').on('click', () => {
        $('#content-detalles').show();
    })

    $('#btn-guardar').on('click', () => {

        var ruta = $('#ruta').val(),
            id_sucursal = $('#id_sucursal option:selected').val(),
            tipo_cobrazan = $('#tipo_cobrazan option:selected').val(),
            estado_cuenta = $('#estado_cuenta option:selected').val(),
            descripcion = $('#descripcion').val();

        if (ruta == '' || id_sucursal == '' | tipo_cobrazan == '' | descripcion == '') {
            $('#error_message').text('Debes agregar toda la información obligatoria.');
            $('#error').show();
            return;
        }


        var niveles = new Array;
        $('.filas_niveles').each(function(index, value) {
            var item = $(this).attr('fila');
            if ($('#cuenta_' + item).val() != '') {
                data = {
                    nivel: $('#nivel_' + item).val(),
                    cuentas: $('#cuenta_' + item).val(),
                    frecuencia: $('#frecuencia_' + item).val(),
                    tolerancia: $('#tolerancia_' + item).val(),
                    dias_vencido: $('#dias_vencido_' + item).val(),
                    id_agente: $('#id_agente_' + item).val(),
                }
                niveles.push(data);
            }
        })

        if (niveles.length == 0) {
            $('#error_message').text('Debes agregar por lo menos un nivel de ruta.');
            $('#error').show();
            return;
        }

        $('#loadingModal').modal('show');

        $.ajax({
                url: '{{ url("catalogos/rutas-cobro/save-ruta-cobro" )}}',
                type: 'POST',
                dataType: 'json',
                data: {
                    id_ruta: $('#id_ruta').val(),
                    ruta: ruta,
                    id_sucursal: id_sucursal,
                    tipo_cobrazan: tipo_cobrazan,
                    descripcion: descripcion,
                    estado_cuenta: estado_cuenta,
                    niveles: niveles,
                },
            })
            .done(function(resp) {
                if (resp['result'] == 0) {
                    $('#error_message').text(resp['mensaje']);
                    $('#error').show();
                    return;
                }
                $('#success_message').text(resp['mensaje']);
                $('#success').show();
                setTimeout(() => {
                    location.reload();
                }, 2000);

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

            })

    })


    function editarRutaCobro(id) {
        $.ajax({
                url: '{{ url("catalogos/rutas-cobro/get-ruta-cobro" )}}',
                type: 'POST',
                dataType: 'json',
                data: {
                    id: id,
                },
            })
            .done(function(resp) {

                $('#id_ruta').val(id);
                $('#ruta').val(resp.data['ruta']);
                $('#id_sucursal').val(resp.data['id_sucursal']).trigger('change');
                $('#tipo_cobranza').val(resp.data['tipo_cobranza']).trigger('change');
                $('#estado_cuenta').val(resp.data['estado_cuenta']).trigger('change');
                $('#descripcion').val(resp.data['descripcion']);

                resp.data['rutacobrodetalle'].forEach((item, index) => {
                    var index = item['nivel'];
                    $('#cuenta_' + index).val(item['cuentas'])
                    $('#frecuencia_' + index).val(item['frecuencia'])
                    $('#tolerancia_' + index).val(item['tolerancia'])
                    $('#dias_vencido_' + index).val(item['dias_vencido'])
                    $('#id_agente_' + index).val(item['id_agente']).trigger('change');
                });
                $('#title-ruta-cobro').text('Editar ruta de cobro - ' + resp.data['ruta']);
                $('#content-detalles').show();


            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");

            })

    }

    function limpiarRutaCobro(item) {
        $('#cuenta_' + item).val('')
        $('#frecuencia_' + item).val('')
        $('#tolerancia_' + item).val('')
        $('#dias_vencido_' + item).val('')
        $('#id_agente_' + item).val('').trigger('change');
    }
</script>
@endpush