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

@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 PROMOCIONES')}}</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-promocion" data-toggle="modal">Nueva promoción</button>
            </div>
        </div>
        <div class="row date-table-container layout-top-spacing">
            <div class="table-responsive">
                <table class="table table-hover" id="list-promociones">
                    <thead>
                        <tr>
                            <th class="no-content"></th>
                            <th>{{__('ID')}}</th>
                            <th>{{__('Sucursales')}}</th>
                            <th>{{__('Plazo')}}</th>
                            <th>{{__('Intereses')}}</th>
                            <th>{{__('Descripción.')}}</th>
                            <th>{{__('Plan')}}</th>
                            <th>{{__('Vigencia')}}</th>
                            <th>{{__('Incumplimiento')}}</th>
                            <th>{{__('Monto minimo')}}</th>
                            <th>{{__('Tipos clientes')}}</th>
                            <th>{{__('Aplica a')}}</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>


<div class="modal fade draggable" id="modal-promociones" 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-promociones">Agregar promoción</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <i class="las la-times"></i>
                </button>
            </div>
            <form action="{{url('catalogos/promociones/save-promocion')}}" method="POST" id="formulario" class="form-with-spin">
                {{ csrf_field() }}
                <input type="hidden" name="id_promocion" id="id_promocion">
                <div class="modal-body">
                    <div class="form-group row">
                        <div class="col-lg-3">
                            <div class="form-group">
                                <label>Plazo: <span class="text-danger">*</span></label>
                                <input type="number" name="plazo" id="plazo" class="form-control" required>
                            </div>
                        </div>
                        <div class="col-lg-3">
                            <div class="form-group" style="margin-bottom: -20px;">
                                <label>Intereses: <span class="text-danger">*</span></label>
                                <select name="interes_promocion" id="interes_promocion" class="form-control basic-select2" required>
                                    <option value="" disables selected>-Selecciona una opción-</option>
                                    @foreach($data['interes_promocion'] as $tp)
                                    <option value="{{$tp}}">{{$tp}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label>Descripción: <span class="text-danger">*</span></label>
                                <input type="text" name="descripcion" id="descripcion" class="form-control" required>
                            </div>
                        </div>

                    </div>
                    <div class="form-group row">
                        <div class="col-lg-3">
                            <div class="form-group" style="margin-bottom: -20px;">
                                <label>Tipo de plan: <span class="text-danger">*</span></label>
                                <select name="tipo_plan" id="tipo_plan" class="form-control basic-select2" required>
                                    <option value="" disables selected>-Selecciona una opción-</option>
                                    @foreach($data['tipo_plan'] as $tp)
                                    <option value="{{$tp}}">{{$tp}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-3">
                            <label>Vigencia:<span class="text-danger">*</span></label>
                            <input id="vigencia" name="vigencia" class="form-control flatpickr flatpickr-input active" type="text" placeholder="{{__('Selecciona un rango de fechas')}}" required>
                        </div>
                        <div class="col-lg-3">
                            <div class="form-group" style="margin-bottom: -20px;">
                                <label>Incumplimineto revolvente: <span class="text-danger">*</span></label>
                                <select name="incumplimiento_revolvente" id="incumplimiento_revolvente" class="form-control basic-select2" required>
                                    <option value="" disables selected>-Selecciona una opción-</option>
                                    @foreach($data['incumplimiento'] as $tp)
                                    <option value="{{$tp}}">{{$tp}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-3">
                            <div class="form-group" style="margin-bottom: -20px;">
                                <label>Aplica a: <span class="text-danger">*</span></label>
                                <select name="aplica_a" id="aplica_a" class="form-control basic-select2" required>
                                    <option value="" disables selected>-Selecciona una opción-</option>
                                    @foreach($data['aplica_a'] as $tp)
                                    <option value="{{$tp}}">{{$tp}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-lg-4">
                            <label>Sucursales: <span class="text-danger">*</span></label>
                            <select id="sucursales" class="form-control" name="sucursales[]" multiple="multiple" onclick="handleSelectChange(this)" required>
                                <option value="0">- TODOS -</option>
                                @foreach ($data['sucursales'] as $item)
                                <option value="{{ $item->id }}">
                                    {{ $item->sucursal . ' - ' . $item->descripcion }}
                                </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-lg-4">
                            <label>Tipos de clientes: <span class="text-danger">*</span></label>
                            <select id="tipos_clientes" class="form-control" name="tipos_clientes[]" multiple="multiple" onclick="handleSelectChange(this)" required>
                                <option value="0">- TODOS -</option>
                                @foreach ($data['tipos_clientes'] as $item)
                                <option value="{{ $item->tipo_cliente }}">
                                    {{ $item->descripcion }}
                                </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-lg-4">
                            <div class="form-group">
                                <label>Monto minimo: <span class="text-danger">*</span></label>
                                <input type="number" step="any" name="monto_minimo" id="monto_minimo" class="form-control" required value="0.0">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger btn-link" data-dismiss="modal">Cerrar</button>
                    <button type="submit" class="btn btn-primary">Guardar</button>
                </div>
            </form>
        </div>
    </div>
</div>

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

@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({
            dropdownParent: $('#modal-promociones')
        });


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


        getPromociones();
        limpiarModal();
    });

    $('#btn-nueva-promocion').on('click', function() {
        limpiarModal();
        $('#modal-promociones').modal('show')
    })

    function handleSelectChange(select) {

        const options = select.options;
        if (select.value == 0) {
            options[0].selected = true;
            for (let i = 1; i < options.length; i++) {
                options[i].selected = false;
            }
            return;
        }
        options[0].selected = false;
    }

    function getPromociones() {
        $('#list-promociones').dataTable().fnDestroy();

        var table = $('#list-promociones').DataTable({
            lengthMenu: [10, 15, 20, 50, 100, 200, 500],
            language: {
                url: "{{asset('assets/material/datatable_sp.json')}}"
            },
            ajax: {
                url: "{{url('catalogos/promociones/get-promociones')}}",
                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" id="btn-editar-tipo-cliente" title="Editar promocion" onclick="editarPromocion(' + 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 promocion" href="{{url("catalogos/promociones/delete-promocion")}}/' + data + '"><i class="las la-trash"></a></div>';
                    }
                },
                {
                    data: "id"
                },
                {
                    data: "promocionessucursales",
                    render: (data, type, full, meta) => {
                        if (data.length == 0) return 'Sin sucursales';

                        if (data[0]['id_sucursal'] == 0) return 'Todas';

                        var sucursales = '';
                        data.forEach(element => {
                            sucursales += element.sucursal['descripcion'] + '<br>';
                        });
                        return sucursales;
                    }
                },
                {
                    data: "plazo"
                },
                {
                    data: "interes_promocion"
                },
                {
                    data: "descripcion"
                },
                {
                    data: "tipo_plan"
                },
                {
                    data: {
                        data: "vigencia_desde",
                        data: "vigencia_hasta",
                    },
                    render: function(data, type, full, meta) {
                        return 'Desde: ' + data.vigencia_desde + '<br>' +
                            'Hasta: ' + data.vigencia_hasta + '<br>';
                    }
                },
                {
                    data: "incumplimiento_revolvente"
                },
                {
                    data: "monto_minimo"
                },
                {
                    data: "promocionestiposclientes",
                    render: (data, type, full, meta) => {
                        if (data.length == 0) return 'Sin tipos de clientes';

                        if (data[0]['id_tipo_cliente'] == 0) return 'Todos';

                        var tipos_clientes = '';
                        data.forEach(element => {
                            tipos_clientes += element.tipocliente['descripcion'] + '<br>';
                        });
                        return tipos_clientes;
                    }
                },
                {
                    data: "aplica_a"
                },

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


        });
    }

    function limpiarModal() {
        $('#id_promocion').val('');
        $('#plazo').val('');
        $('#interes_promocion').val('').trigger('change');
        $('#descripcion').val('');
        $('#tipo_plan').val('').trigger('change');
        $('#incumplimiento_revolvente').val('').trigger('change');
        $('#aplica_a').val('').trigger('change');
        $('#monto_minimo').val('');
    }

    function editarPromocion(id) {
        limpiarModal()
        $.ajax({
                url: '{{ url("catalogos/promociones/get-promocion" )}}',
                type: 'POST',
                dataType: 'json',
                data: {
                    id: id,
                },
            })
            .done(function(resp) {

                $('#id_promocion').val(id);
                $('#plazo').val(resp.data['plazo']);
                $('#interes_promocion').val(resp.data['interes_promocion']).trigger('change');
                $('#descripcion').val(resp.data['descripcion']);
                $('#tipo_plan').val(resp.data['tipo_plan']).trigger('change');
                $('#incumplimiento_revolvente').val(resp.data['incumplimiento_revolvente']).trigger('change');
                $('#aplica_a').val(resp.data['aplica_a']).trigger('change');
                $('#monto_minimo').val(resp.data['monto_minimo']);


                resp.data['promocionessucursales'].forEach(element => {
                    $('#sucursales option[value="' + element['id_sucursal'] + '"]').prop('selected', true);
                });

                resp.data['promocionestiposclientes'].forEach(element => {
                    $('#tipos_clientes option[value="' + element['id_tipo_cliente'] + '"]').prop('selected', true);
                });

                $("#vigencia").flatpickr({
                    mode: "range",
                    dateFormat: "Y-m-d",
                    defaultDate: [resp.data['vigencia_desde'], resp.data['vigencia_hasta']],
                    locale: {
                        rangeSeparator: " a ",
                    },

                });
                $('#title-modal-promociones').text('Editar promoción')
                $('#modal-promociones').modal('show');

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

            })

    }
</script>
@endpush