@extends('layout.master',['activePage' => 'sucursales', 'menuParent' => 'Configuracion', 'titlePage' => __('Configuración de sucursales')])


@push('plugin-styles')
{!! Html::style('plugins/flatpickr/flatpickr.css') !!}
{!! Html::style('plugins/flatpickr/custom-flatpickr.css') !!}
{!! Html::style('plugins/table/datatable/datatables.css') !!}
{!! Html::style('plugins/table/datatable/dt-global_style.css') !!}
{!! Html::style('assets/css/loader.css') !!}
{!! Html::style('assets/css/apps/tickets.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 SUCURSALES')}}</span></li>
                        </ol>
                    </nav>
                </div>
            </li>
        </ul>
    </header>
</div>
<div class="layout-px-spacing">
    <div class="container-fluid p-0">
        <div class="normal-tab">
            <ul class="nav nav-tabs mb-2 mt-2" id="normaltab" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" id="sucursales-tab" data-toggle="tab" href="#tab-sucursales" role="tab" aria-controls="tab-sucursales" aria-selected="true">{{__('Sucursales')}}</a>
                </li>
                <li class="nav-item ">
                    <a class="nav-link" id="folios-tab" data-toggle="tab" href="#tab-folios" role="tab" aria-controls="tab-folios" aria-selected="false">{{__('Folios')}}</a>
                </li>
            </ul>
            <div class="tab-content" id="normaltabContent">
                <div class="tab-pane fade show active" id="tab-sucursales" role="tabpanel" aria-labelledby="sucursales-tab">
                    <div class="row layout-top-spacing justify-content-end">
                        <div class="col-3 text-right">
                            <button class="btn btn-primary" onclick="nuevaSucursal()">Nueva sucursal</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-sucursales">
                                <thead>
                                    <tr>
                                        <th class="no-content"></th>
                                        <th>{{__('ID')}}</th>
                                        <th>{{__('Sucursal')}}</th>
                                        <th>{{__('Descripción')}}</th>
                                        <th>{{__('Almacén')}}</th>
                                        <th>{{__('Almacén Cons.')}}</th>
                                        <th>{{__('Gerente')}}</th>
                                        <th>{{__('Domicilio')}}</th>
                                        <th>{{__('Teléfono')}}</th>
                                        <th>{{__('Tasa IVA')}}</th>
                                        <th>{{__('Fecha de creación')}}</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="tab-folios" role="tabpanel" aria-labelledby="folios-tab">
                    <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>
    </div>
</div>

<div class="modal fade draggable" id="modal-nueva-sucursal" tabindex="-1" role="dialog" 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" id="title-modal-nueva-sucursal">Agregar nueva sucursal</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <i class="las la-times"></i>
                </button>
            </div>
            <form action="{{url('configuracion/sucursales/save-sucursal')}}" method="POST" id="formulario" class="form-with-spin">
                {{ csrf_field() }}
                <input type="hidden" name="id_sucursal" id="id_sucursal">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-12">
                            <h6 class="font-weight-bold">GENERALES</h6>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-lg-4">
                            <div class="form-group">
                                <label>Sucursal: <span class="text-danger">*</span></label>
                                <input type="number" name="sucursal" id="sucursal" class="form-control" required>
                            </div>
                        </div>
                        <div class="col-lg-8">
                            <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-4" style="margin-bottom: -30px;">
                            <label>Almacén: <span class="text-danger">*</span></label>
                            <select name="id_almacen" id="id_almacen" class="form-control basic-select2" required>
                                <option value="" disables selected>-Selecciona una opción-</option>
                                @foreach($data['almacen'] as $alm)
                                <option value="{{$alm->id}}">{{$alm->descripcion}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-lg-4" style="margin-bottom: -30px;">
                            <label>Almacén consignación:</label>
                            <select name="id_almacen_consignacion" id="id_almacen_consignacion" class="form-control basic-select2" required>
                                <option value="" disables selected>-Selecciona una opción-</option>
                                @foreach($data['almacen'] as $alm)
                                <option value="{{$alm->id}}">{{$alm->descripcion}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-lg-4">
                            <div class="form-group">
                                <label>Gerente: <span class="text-danger">*</span></label>
                                <input type="text" name="gerente" id="gerente" class="form-control" required>
                            </div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-lg-4">
                            <div class="form-group">
                                <label>Teléfono: </label>
                                <input type="text" name="telefono" id="telefono" class="form-control">
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="form-group">
                                <label>Tasa IVA: </label>
                                <input type="number" step="any" name="tasa_iva" id="tasa_iva" class="form-control">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <h6 class="font-weight-bold">DOMICILIO</h6>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-lg-4">
                            <label>Calle: <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="calle" id="calle" required>
                        </div>
                        <div class="col-lg-3">
                            <label>Número exterior: <span class="text-danger">*</span></label>
                            <input type="text" class="form-control " name="numero_exterior" id="numero_exterior" required>
                        </div>
                        <div class="col-lg-3">
                            <label>Número interior: </label>
                            <input type="text" class="form-control" name="numero_interior" id="numero_interior">
                        </div>
                        <div class="col-lg-2">
                            <button class="btn btn-primary mt-4" type="button" id="btn_add_domicilios">Domicilio</button>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-lg-4">
                            <label>Colonia:<span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="coloniaV" readonly>
                            <input type="hidden" class="form-control" name="id_colonia" id="id_colonia">
                        </div>
                        <div class="col-lg-4">
                            <label>País:<span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="paisV" readonly>
                        </div>
                        <div class="col-lg-4">
                            <label>Estado:<span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="estadoV" readonly>
                        </div>
                        <div class="col-lg-4">
                            <label>Municipio:<span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="municipioV" readonly>
                        </div>
                        <div class="col-lg-4">
                            <label>Poblacion:<span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="poblacionV" readonly>
                        </div>
                        <div class="col-lg-4">
                            <label>C.P:<span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="cpV" readonly>
                        </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>

<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="sucursal" id="sucursal_folio" 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="ser1280a" id="ser1280a" class="form-control basic-select2-folio" required>
                            <option value="" disables selected>-Selecciona una opción-</option>
                            @foreach($data['prefijos'] as $alm)
                            <option value="{{$alm->clave_prefijo}}">{{$alm->descripcion}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group row">
                        <div class="col-lg-4">
                            <label>Serie 2: </label>
                            <input type="text" name="ser2280a" maxlength="1" id="ser2280a" class="form-control">
                        </div>
                        <div class="col-lg-4">
                            <label>Serie 3: </label>
                            <input type="text" name="ser3280a" maxlength="1" id="ser3280a" class="form-control">
                        </div>
                        <div class="col-lg-4">
                            <label>Folio: </label>
                            <input type="number" name="num280a" id="num280a" 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>

@include('configuracion.domicilios.domicilios', ['Paises' => $Paises])

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

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

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

        $('#normaltab a[href="#{{ old("tab") }}"]').tab('show');

        $(".basic-select2").select2({
            dropdownParent: $('#modal-nueva-sucursal')

        });

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

        getListSucursales();
        getListFolios();

    });

    function getListSucursales() {
        $('#list-sucursales').dataTable().fnDestroy();

        var table = $('#list-sucursales').DataTable({
            lengthMenu: [10, 15, 20, 50, 100, 200, 500],
            language: {
                url: "{{asset('assets/material/datatable_sp.json')}}"
            },
            ajax: {
                url: "{{url('configuracion/sucursales/get-sucursales')}}",
                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 sucursal" onclick="editarSucursal(' + data + ')"><i class="las la-edit"></i></button><button class="btn btn-sm p-0 btn-link text-danger font-20 btn-with-spin" title="Eliminar sucursal" onclick="eliminarSucursal(' + data + ')"><i class="las la-trash"></a></div>'
                    }
                },
                {
                    data: "id"
                },
                {
                    data: "sucursal"
                },
                {
                    data: "descripcion"
                },
                {
                    data: "almacen.descripcion"
                },
                {
                    data: "almacen_consignacion.descripcion"
                },
                {
                    data: "gerente"
                },
                {
                    data: {
                        data: "calle",
                        data: "numero_exterior",
                        data: "colonia",
                    },
                    render: function(data, type, full, meta) {
                        return '<div>' + data.calle + ' #' + data.numero_exterior + '</br>' + data.colonia.descripcion + ' ' + data.colonia.poblacion.Descripcion + ' ' + data.colonia.poblacion.municipio.estado.Estado + '</div>'
                    }
                },

                {
                    data: "telefono"
                },
                {
                    data: "tasa_iva"
                },
                {
                    data: "created_at"
                },
            ],
            order: [
                [1, "asc"]
            ],


        });
    }

    function nuevaSucursal() {
        $('#id_sucursal').val('');
        $('#sucursal').val('');
        $('#descripcion').val('');
        $('#id_almacen').val('').trigger('change');
        $('#id_almacen_consignacion').val('').trigger('change');
        $('#telefono').val('');
        $('#tasa_iva').val('');
        $('#gerente').val('');
        $('#calle').val('');
        $('#numero_interior').val('');
        $('#numero_exterior').val('');
        $('#paisV').val('')
        $('#estadoV').val('')
        $('#municipioV').val('')
        $('#poblacionV').val('')
        $('#coloniaV').val('')
        $('#cpV').val('')
        $('#id_colonia').val('');
        $('#title-modal-nuevo-folio').text('Agregar nueva sucursal');
        $('#modal-nueva-sucursal').modal('show');
    }

    function editarSucursal(id) {
        $.ajax({
                url: '{{ url("configuracion/sucursales/get-sucursal" )}}',
                type: 'POST',
                dataType: 'json',
                data: {
                    id: id,
                },
            })
            .done(function(resp) {
                $('#id_sucursal').val(resp.data['id']);
                $('#sucursal').val(resp.data['sucursal']);
                $('#descripcion').val(resp.data['descripcion']);
                $('#id_almacen').val(resp.data['id_almacen']).trigger('change');
                $('#id_almacen_consignacion').val(resp.data['id_almacen_consignacion']).trigger('change');
                $('#telefono').val(resp.data['telefono']);
                $('#tasa_iva').val(resp.data['tasa_iva']);
                $('#gerente').val(resp.data['gerente']);
                $('#calle').val(resp.data['calle']);
                $('#numero_interior').val(resp.data['numero_interior']);
                $('#numero_exterior').val(resp.data['numero_exterior']);
                $('#id_colonia').val(resp.data['id_colonia'])
                getInfoDomicilio(resp.data['id_colonia']);
                $('#title-modal-nuevo-folio').text('Editar sucursal');
                $('#modal-nueva-sucursal').modal('show');

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

    function getInfoDomicilio(Colonia_id) {
        $.ajax({
                url: '{{ url("configuracion/empresas/get_domicilio" )}}',
                type: 'POST',
                dataType: 'json',
                data: {
                    id: Colonia_id,
                },
            })
            .done(function(resp) {
                // console.log(resp.data);
                $('#coloniaV').val(resp.data.colonia['descripcion'])
                $('#paisV').val(resp.data.pais['descripcion'])
                $('#estadoV').val(resp.data.estado['descripcion'])
                $('#municipioV').val(resp.data.municipio['descripcion'])
                $('#poblacionV').val(resp.data.poblacion['descripcion'])
                $('#cpV').val(resp.data.colonia['codigo_postal'])

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


    $Colonia.addEventListener('change', async (event) => {
        const $coloniaValue = $Colonia.options[$Colonia.selectedIndex].value;
        $btnIdentificarColonia.disabled = false;
        $formColoniaDomicilio.addEventListener('submit', async (event) => {
            event.preventDefault();
            // console.log($coloniaValue);
            fetchRequest('{{url("/domicilios/colonias/identificador")}}', {
                    id: $coloniaValue
                })
                .then(response => {
                    ({
                        status,
                        message,
                        payload
                    } = response);
                    ({
                        colonia,
                        estado,
                        municipio,
                        pais,
                        poblacion
                    } = payload);
                    if (status == 200) {

                        $('#crearDomicilio').modal('hide')
                        $('#paisV').val(pais.descripcion)
                        $('#estadoV').val(estado.descripcion)
                        $('#municipioV').val(municipio.descripcion)
                        $('#poblacionV').val(poblacion.descripcion)
                        $('#id_colonia').val(colonia.id)
                        $('#coloniaV').val(colonia.descripcion)
                        $('#cpV').val(colonia.codigo_postal)
                    }
                    if (status == 404) {

                        $('#paisV').val('')
                        $('#estadoV').val('')
                        $('#municipioV').val('')
                        $('#poblacionV').val('')
                        $('#coloniaV').val('')
                        $('#cpV').val('')
                        $('#id_colonia').val('')

                    }
                })
        })
    })

    $('#btn_add_domicilios').click(function() {
        $('#crearDomicilio').modal('show')
    })


    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: "ser1280a",
                        data: "ser2280a",
                        data: "ser3280a",
                    },
                    render: function(data, type, full, meta) {
                        return '<div>' + data.ser1280a + '' + data.ser2280a + '' + data.ser3280a + '</div>'
                    }
                },
                {
                    data: "num280a"
                },
                {
                    data: "created_at"
                },
            ],
            order: [
                [1, "desc"]
            ],


        });
    }

    function nuevoFolio() {
        $('#id_folio').val('');
        $('#sucursal_folio').val('').trigger('change');
        $('#ser1280a').val('').trigger('change');
        $('#ser2280a').val('');
        $('#ser3280a').val('');
        $('#num280a').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']);
                $('#sucursal_folio').val(resp.data['sucursal']).trigger('change');
                $('#ser1280a').val(resp.data['ser1280a']).trigger('change');
                $('#ser2280a').val(resp.data['ser2280a']);
                $('#ser3280a').val(resp.data['ser3280a']);
                $('#num280a').val(resp.data['num280a']);
                $('#title-modal-nuevo-folio').text('Editar folio')
                $('#modal-nuevo-folio').modal('show');
            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });
    }


    function eliminarSucursal(id) {
        Swal.fire({
            title: '¿Estás seguro de eliminar?',
            text: "Esta acción no es reversible",
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#0b305d',
            cancelButtonColor: '#6c757d',
            cancelButtonText: 'Cancelar',
            confirmButtonText: 'Sí, eliminar'
        }).then((result) => {
            if (result.value) {
                window.location.replace("{{url('configuracion/sucursales/delete-sucursal')}}/" + id);
            }
        })
    }
</script>
@endpush