@extends('layout.master', [
'activePage' => $activePage,
'categoria' => $categoria,
'menuParent' => $menuParent,
'titlePage' => $titlePage
])



@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);"> {{__('Configuracion')}}</a></li>
                            <li class="breadcrumb-item active" aria-current="page"><span> {{__('CONFIGURACIÓN DE FOLIOS')}}</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" onclick="nuevoFolio()">Nuevo folio</button>
            </div>
        </div>
        <div class="row date-table-container layout-top-spacing">
            <div class="table-responsive">
                <table class="table table-hover display nowrap" style="width:100%" id="list-folios">
                    <thead>
                        <tr>
                            <th class="no-content"></th>
                            <th>{{__('ID')}}</th>
                            <th>{{__('Sucursal')}}</th>
                            <th>{{__('Prefijo')}}</th>
                            <th>{{__('Serie')}}</th>
                            <th>{{__('Folio')}}</th>
                            <th>{{__('Fecha de creación')}}</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>


<div class="modal fade draggable" id="modal-nuevo-folio" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="title-modal-nuevo-folio">Agregar nuevo folio</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <i class="las la-times"></i>
                </button>
            </div>
            <form action="{{url('configuracion/folios/save-folio')}}" method="POST" id="formulario" class="form-with-spin">
                {{ csrf_field() }}
                <input type="hidden" name="id_folio" id="id_folio">
                <div class="modal-body">
                    <div class="form-group" style="margin-bottom: -25px;">
                        <label>Sucursal: <span class="text-danger">*</span></label>
                        <select name="id_sucursal" id="id_sucursal" class="form-control basic-select2-folio" required>
                            <option value="" disables selected>-Selecciona una opción-</option>
                            @foreach($data['sucursales'] as $alm)
                            <option value="{{$alm->sucursal}}">{{$alm->descripcion}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group" style="margin-bottom: -25px;">
                        <label>Prefijo:</label>
                        <select name="serie1" id="serie1" class="form-control basic-select2-folio" required>
                            <option value="" disables selected>-Selecciona una opción-</option>
                            @foreach($data['prefijos'] as $alm)
                            <option value="{{$alm->ClavePrefijo}}">{{$alm->Descripcion}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group row">
                        <div class="col-lg-4">
                            <label>Serie 2: </label>
                            <input type="text" name="serie2" maxlength="1" id="serie2" class="form-control">
                        </div>
                        <div class="col-lg-4">
                            <label>Serie 3: </label>
                            <input type="text" name="serie3" maxlength="1" id="serie3" class="form-control">
                        </div>
                        <div class="col-lg-4">
                            <label>Folio: </label>
                            <input type="number" name="num" id="num" class="form-control" value="0">
                        </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>



@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') !!}
@endpush

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

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


        $(".basic-select2-folio").select2({
            dropdownParent: $('#modal-nuevo-folio')
        });

        getListFolios();

    });

    function getListFolios() {
        $('#list-folios').dataTable().fnDestroy();

        var table = $('#list-folios').DataTable({
            lengthMenu: [10, 15, 20, 50, 100, 200, 500],
            language: {
                url: "{{asset('assets/material/datatable_sp.json')}}"
            },
            ajax: {
                url: "{{url('configuracion/folios/get-folios')}}",
                type: "POST",
            },
            columns: [{
                    data: "id",
                    render: function(data, type, full, meta) {
                        return '<div><button class="font-20 text-primary btn btn-link p-0" title="Editar folio" onclick="editarFolio(' + 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 folio" href="{{url("configuracion/folios/delete-folio")}}/' + data + '"><i class="las la-trash"></a></div>'
                    }
                },
                {
                    data: "id"
                },
                {
                    data: "sucursal.descripcion"
                },
                {
                    data: "prefijo.Descripcion"
                },
                {
                    data: {
                        data: "serie1",
                        data: "serie2",
                        data: "serie3",
                    },
                    render: function(data, type, full, meta) {
                        return '<div>' + data.serie1 + '' + data.serie2 + '' + data.serie3 + '</div>'
                    }
                },
                {
                    data: "num"
                },
                {
                    data: "created_at"
                },
            ],
            order: [
                [1, "desc"]
            ],


        });
    }

    function nuevoFolio() {
        $('#id_folio').val('');
        $('#id_sucursal').val('').trigger('change');
        $('#serie1').val('').trigger('change');
        $('#serie2').val('');
        $('#serie3').val('');
        $('#num').val(0);
        $('#title-modal-nuevo-folio').text('Agregar nuevo folio')
        $('#modal-nuevo-folio').modal('show');
    }

    function editarFolio(id) {
        $.ajax({
                url: '{{ url("configuracion/folios/get-folio" )}}',
                type: 'POST',
                dataType: 'json',
                data: {
                    id: id,
                },
            })
            .done(function(resp) {
                $('#id_folio').val(resp.data['id']);
                $('#id_sucursal').val(resp.data['id_sucursal']).trigger('change');
                $('#serie1').val(resp.data['serie1']).trigger('change');
                $('#serie2').val(resp.data['serie2']);
                $('#serie3').val(resp.data['serie3']);
                $('#num').val(resp.data['num']);
                $('#title-modal-nuevo-folio').text('Editar folio')
                $('#modal-nuevo-folio').modal('show');
            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });
    }
</script>
@endpush