@extends('layouts.app')
@section('css')
<link href="{!! asset('css') !!}/multi-select.css" media="screen" rel="stylesheet" type="text/css">
<style>
.widget{
    padding: 0 20px 0px;
}
input[type=search]{
    display:none!important;
}
.divider_tarjet{
    margin-top:0px!important;
    margin-bottom:0px!important;
}
.bootstrap-select .dropdown-toggle .filter-option-inner-inner{
    padding:0;
    margin:0;
}
.bootstrap-select .dropdown-toggle .filter-option{
    padding:0;
    margin:10px 0 0;
}
.bootstrap-select .dropdown-toggle .fecha_corte{
    padding:0;
    margin:10px 0 0;
}
.ms-container{
    display:flex;
    flex-direction:row;
}
.buton_colonias{
    display:flex;
}
.ms-selectable{
    margin-right:20px;
}
.ms-selection{
    margin-left:20px;
}
.bootstrap-select {
    margin-top:6px!important;
}
.select2-search,.select2-search__field{
    width:100%!important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #fff;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #fe5f55;
    border: 1px solid #fe5f55;
    color: #fff;
}
.select2-container--default .select2-selection--multiple {
    border-bottom: 1px solid rgba(0, 150, 136, 1)!important;
    border-radius: 0;
}
</style>
@endsection

@section('content')
    <ol class="breadcrumb">
        <li class="breadcrumb-item active class_select"><a href="{{ URL('/home') }}">Inicio</a></li>
        <li class="breadcrumb-item class_select">Sucursal</li>
    </ol>
    <div class="row page-title"  style="padding:0 5px!important">
        <div class="col-12 flex_content">
            <h1 style="float:left">Lista de <span class="fw-semi-bold">Sucursales</span></h1>
            <a class="btn1 btnDanger float_left btn_create" style="margin: 0 25px 0 !important" href="#" data-toggle="modal" data-target="#CreateSucursal" >Nuevo </a>
        </div>
    </div>

    <div class="clearfix"></div>

    @include('flash::message')

    <div class="clearfix"></div>

    <section class="widget" style="background:transparent!important;">
        @include('agencias.table')
    </section>
    <div id="url_estatica" data-url="{{ url('/') }}"></div>

@endsection
@section('scripts')
<meta name="csrf-token" content="{{ csrf_token() }}">
<script src="{!! asset('js') !!}/agencias/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/js/select2.min.js"></script>
<script src="{!! asset('template') !!}/bower_components/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
<script src="{!! asset('template') !!}/bower_components/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
<script src="{!! asset('template') !!}/bower_components/select2/dist/js/select2.min.js"></script>
<script src="{!! asset('js') !!}/jquery.quicksearch.js" type="text/javascript"></script>
<script src="{!! asset('js') !!}/jquery.multi-select.js" type="text/javascript"></script>
<script src="{!! asset('js') !!}/validaciones.js"></script>

<script>
$('#btnColonias').click(function(){
    $('#coloniasForm').css('display','block');
});
/* SELECTS MULTIPLES */
$('#seccion_id').select2({
    placeholder: " {!! ($secciones->isEmpty())? 'Todas las secciones están seleccionadas' : 'Selecciona las secciones'  !!} ",
});

$('#territorio_id').select2({
    placeholder:" {!! ($territorios->isEmpty())? 'Todos los territorios estan seleccionados' : 'Selecciona un territorio'  !!} ",
});

$('#grupoSecciones').select2({
    placeholder: " {!! ($grupoSecciones->isEmpty())? 'Todos los grupos de secciones están ocupados' : 'Selecciona los grupos de secciones'  !!} ",
});


/*EMPIEZA FUNCIONALIDAD DE TRAJETAS */
var url = '{!! url("/") !!}';
$('.gpo_sucursal').change(function(){
    var idGpoSection = $(this).val();
    var gpoSecciones = $(this).parent('div').parent('div').parent('div').parent('div').parent('div').find('.infoGpoSection');
    var select = $(this).parent('div').parent('div').parent('div').parent('div').parent('div').find('.Section select');
    /* OBTENGO DEL DOM LOS ELEMENTOS Y SELECT DE LAS SECCIONES */
    var SelectSection = '<option class="dropdown-item" disabled selected value="0">Sin seleccionar</option>';
    var Secciones = $(this).parent('div').parent('div').parent('div').parent('div').parent('div').find('.infoSection');
    /* OBTENGO DEL DOM LOS ELEMENTOS Y SELECT DEL TERRITORIO */
    var select2 = $(this).parent('div').parent('div').parent('div').parent('div').parent('div').find('.territorio select');
    var Territorios = $(this).parent('div').parent('div').parent('div').parent('div').parent('div').find('.infoTerriotiro');
    /* BUSCO EN EL DOM TODOS LOS BOTONES DE EDITAR */
    var DOM =  $(this).parent('div').parent('div').parent('div').parent('div').parent('div').parent('section');
    // DOM.find('.btnSucursal').css('display','none');
    // DOM.find('.btnGpoSection').css('display','block');
    // DOM.find('.btnSection').css('display','none');
    DOM.find(".abrirModalEditGpoSection").show();
    DOM.find(".abrirModalDeleteGpoSection").show();
    DOM.find(".abrirModalEditSecciones").hide();
    DOM.find(".abrirModalDeleteSection").hide();
    DOM.find('.abriModalSeccion').data('id',idGpoSection);
    DOM.find('.btnSection').css('display','block');

    DOM.find('.btnTerritorio').css('display','none');
    $('.id_GpoSection').val(idGpoSection);

    Territorios.html('');
    Secciones.html('');
    select.html('');
    select.val(0);
    select.selectpicker('refresh');
    select2.html(SelectSection);
    select2.val(0);
    select2.selectpicker('refresh');

    if(idGpoSection != 0){
        $.ajax({
            url:  url+"/api/getInfoGpoSeccion/"+idGpoSection,
            method:"GET",
            dataType:"json",
            success:function(data){
                console.log(data);
                gpoSecciones.html(
                    '<div class="row classGrupo " style="padding:20px 30px 10px">'+
                        '<div>'+
                            '<span class="tarjet_card">Clave:<br/> '+data.data.clave+'</span>'+
                        '</div>'+
                        '<div>'+
                            '<span class="tarjet_card">Descripción:<br/>'+data.data.direccion+'</span>'+
                        '</div>'+
                        '<div>'+
                            '<span class="tarjet_card">Líder Asignado:<br/>'+data.data.usuarioAsignado+'</span>'+
                        '</div>'+
                    '</div>');
                    $('#crearModalSucursal').html('<div class="modal fade" id="EditGpoSucursales" tabindex="-1" role="dialog" aria-labelledby="EditGpoSucursalesLabel" aria-hidden="true">'+
                            '<div class="modal-dialog modal-dialog-centered" role="document">'+
                                '<div class="modal-content">'+
                                    '<div class="modal-header">'+
                                        '<h3 class="modal-title" id="EditGpoSucursalesLabel">Edita el Grupo Sucursal: '+  data.data.nombre+'</h3>'+
                                        '<button type="button" class="close" data-dismiss="modal" aria-label="Close">'+
                                        '<span aria-hidden="true">&times;</span>'+
                                        '</button>'+
                                    '</div>'+
                                    '<div class="modal-body">'+
                                        '<form action="{!!asset('grupoSecciones')!!}/{!!"'+data.data.id+'"!!}" method="POST" role="form">'+
                                            '{{ method_field("PATCH") }}'+
                                            '{{ csrf_field() }}'+
                                            '<div class="row">'+
                                                '<div class="form-group col-sm-6">'+
                                                    '{!! Form::label("nombre", "Nombre:",["class"=>"label_class"]) !!}'+
                                                    '<input type="text" class="form-control class_input" name="nombre" value="'+data.data.nombre+'">'+
                                                '</div>'+
                                                '<div class="form-group col-sm-6">'+
                                                    '{!! Form::label("clave", "Clave de la sección:",["class"=>"label_class"]) !!}'+
                                                    '<input type="text" class="form-control class_input" name="clave" value="'+data.data.clave+'" >'+
                                                '</div>'+
                                                '<div class="form-group col-sm-12">'+
                                                    '{!! Form::label("direccion", "Descripción de la Sucursal:",["class"=>"label_class"]) !!}'+
                                                    '<input type="text" class="form-control class_input" name="direccion" value="'+data.data.direccion+'">'+
                                                '</div>'+
                                                '<div class="form-group col-sm-12">'+
                                                    '<select class="select2" data-style="btn-default" data-width="100%" tabindex="-1" id="seccionEdit" name="seccion_id[]" multiple>'+

                                                    '</select>'+
                                                '</div>'+
                                            '</div>'+
                                            '<div class="modal-footer">'+
                                                '<button type="submit"  class="btn2 btnSucces" id="btnAcceptEditGpoSucursales">Aceptar</button>'+
                                                '<button type="button"  class="btnDanger btn1" data-dismiss="modal">Cancelar</button>'+
                                            '</div>'+
                                            '<input type="text" name="idSucursalEdit" class="idSucursalEdit" value="" style="display:none">'+
                                        '</form>'+
                                    '</div>'+
                                '</div>'+
                            '</div>'+
                        '</div>');
                        $('#seccionEdit').select2({
                            placeholder: " {!! ($grupoSecciones->isEmpty())? 'Todos los grupos de secciones están ocupados' : 'Selecciona los grupos de secciones'  !!} ",
                        });
                        let seccion = $('#seccionEdit');
                        select.html(SelectSection);
                        $.each(data.data.arraySection, function(key,value){
                            select.append('<option class="dropdown-item" value="'+value.id+'">'+value.nombre+'</option>');
                            seccion.append('<option value="'+value.id+'" selected>'+value.nombre+'</option>')
                            select.selectpicker('refresh');
                        });
                        if($('.class_input').val() != ' '){
                            $('.class_input').parent().find('.label_class').addClass('active2');
                        }
            },
            error:function(xhr,estado,error)
            {

            }
        });
    }
    else{
        gpoSecciones.html('');
        Secciones.html('');
        Territorios.html('');
        select.html(SelectSection);
        select.val(0);
        select.selectpicker('refresh');
        select2.html(SelectSection);
        select2.val(0);
        select2.selectpicker('refresh');
        DOM.find('.btnSucursal').css('display','block');
        DOM.find('.btnGpoSection').css('display','none');
    }
 });

 $('.secciones').change(function(){
    var id_seccion = $(this).val();
    var Secciones = $(this).parent('div').parent('div').parent('div').parent('div').parent('div').find('.infoSection');
    var select = $(this).parent('div').parent('div').parent('div').parent('div').parent('div').find('.territorio select');
    var SelectTerritorio = '<option class="dropdown-item" disabled selected value="0">Sin seleccionar</option>';
    var Territorios = $(this).parent('div').parent('div').parent('div').parent('div').parent('div').find('.infoTerriotiro');
    var DOM =  $(this).parent('div').parent('div').parent('div').parent('div').parent('div').parent('section');
    // DOM.find('.btnGpoSection').css('display','none');
    // DOM.find('.btnSection').css('display','block');
    // DOM.find('.btnTerritorio').css('display','none');
    DOM.find(".abrirModalEditSecciones").show();
    DOM.find(".abrirModalDeleteSection").show();
    DOM.find('.abrilModalEditTerritorio').hide();
    DOM.find('.abrilModalDeleteTerritorio').hide();
    DOM.find('.btnTerritorio').css('display','block');
    DOM.find('.abriModalCreateTerritorio').data('id',id_seccion);
    $('.id_DeleteSection').val(id_seccion);

    Territorios.html('');
    select.html('');
    select.val(0);
    select.selectpicker('refresh');
    console.log(select.html());
    if(id_seccion != 0){
        $.ajax({
            url:url+"/api/getInfoSecciones/"+id_seccion,
            method: "GET",
            dataType: "json",
            success:function(data){
                Secciones.html(
                    '<div class="row classGrupo " style="padding:20px 30px 10px">'+
                        '<div>'+
                            '<span class="tarjet_card">Clave:<br/> '+data.data.clave+'</span>'+
                        '</div>'+
                        '<div>'+
                            '<span class="tarjet_card">Descripción:<br/>'+data.data.direccion+'</span>'+
                        '</div>'+
                        '<div>'+
                            '<span class="tarjet_card">Supervisor Asignado:<br/>'+data.data.usuarioAsignado+'</span>'+
                        '</div>'+
                    '</div>');
                    $('#crearModalSecciones').html('<div class="modal fade" id="EditSecciones" tabindex="-1" role="dialog" aria-labelledby="EditSeccionesLabel" aria-hidden="true">'+
                            '<div class="modal-dialog modal-dialog-centered" role="document">'+
                                '<div class="modal-content">'+
                                    '<div class="modal-header">'+
                                        '<h3 class="modal-title" id="EditSeccionesLabel">Editar la Seccion: '+  data.data.nombre+'</h3>'+
                                        '<button type="button" class="close" data-dismiss="modal" aria-label="Close">'+
                                        '<span aria-hidden="true">&times;</span>'+
                                        '</button>'+
                                    '</div>'+
                                    '<div class="modal-body">'+
                                        '<form action="{!!asset('Secciones')!!}/{!!"'+data.data.id+'"!!}" method="POST" role="form">'+
                                            '{{ method_field("PATCH") }}'+
                                            '{{ csrf_field() }}'+
                                            '<div class="row">'+
                                                '<div class="form-group col-sm-6">'+
                                                    '{!! Form::label("nombre", "Nombre:",["class"=>"label_class"]) !!}'+
                                                    '<input type="text" class="form-control class_input" name="nombre" value="'+data.data.nombre+'">'+
                                                '</div>'+
                                                '<div class="form-group col-sm-6">'+
                                                    '{!! Form::label("clave", "Clave de la sección:",["class"=>"label_class"]) !!}'+
                                                    '<input type="text" class="form-control class_input" name="clave" value="'+data.data.clave+'" >'+
                                                '</div>'+
                                                '<div class="form-group col-sm-12">'+
                                                    '{!! Form::label("direccion", "Descripción de la Sucursal:",["class"=>"label_class"]) !!}'+
                                                    '<input type="text" class="form-control class_input" name="direccion" value="'+data.data.direccion+'">'+
                                                '</div>'+
                                                '<div class="form-group col-sm-12">'+
                                                    '<select class="select2 form-control" data-style="btn-default" data-width="100%" tabindex="-1" id="territorio_idEdit" name="territorio_id[]"  multiple>'+

                                                    '</select>'+
                                                '</div>'+
                                            '</div>'+
                                            '<div class="modal-footer">'+
                                                '<button type="submit"  class="btn2 btnSucces" id="btnAcceptEditSection">Aceptar</button>'+
                                                '<button type="button"  class="btnDanger btn1" data-dismiss="modal">Cancelar</button>'+
                                            '</div>'+
                                            '<input type="text" name="idSucursalEdit" class="idSucursalEdit" value="" style="display:none">'+
                                        '</form>'+
                                    '</div>'+
                                '</div>'+
                            '</div>'+
                        '</div>');
                        $('#territorio_idEdit').select2({
                            placeholder: " {!! ($grupoSecciones->isEmpty())? 'Todos los grupos de secciones están ocupados' : 'Selecciona los grupos de secciones'  !!} ",
                        });
                    select.html(SelectTerritorio);
                    let Territorios = $('#territorio_idEdit');
                    $.each(data.data.arrayTerritorio, function(key,value){
                        select.append('<option class="dropdown-item" value="'+value.id+'">'+value.nombre+'</option>');
                        select.selectpicker('refresh');
                        Territorios.append('<option value="'+value.id+'" selected>'+value.nombre+'</option>')
                    });
                    if($('.class_input').val() != ' '){
                        $('.class_input').parent().find('.label_class').addClass('active2');
                    }
            },
            error:function(xhr,estado,error){
            }
        })
    }
    else{
        Secciones.html('');
        select.html(SelectTerritorio);
        select.val(0);
        select.selectpicker('refresh');
        DOM.find('.btnGpoSection').css('display','block');
        DOM.find('.btnSection').css('display','none');
    }

 });

 $('.territorios').change(function(){
    var id_territorio = $(this).val();
    var Territorios = $(this).parent('div').parent('div').parent('div').parent('div').parent('div').find('.infoTerriotiro');
    var html_colonias = [];
    var DOM =  $(this).parent('div').parent('div').parent('div').parent('div').parent('div').parent('section');
    DOM.find('.abrilModalEditTerritorio').show();
    DOM.find('.abrilModalDeleteTerritorio').show();
    $('.id_DeleteTerritorio').val(id_territorio);
    if(id_territorio != 0){
        $.ajax({
            url:url+"/api/getTerritorio/"+id_territorio,
            method: "GET",
            dataType: "json",
            success:function(data){
                console.log(data);
                $('#crearModalTerritorio').html('<div class="modal fade" id="EditTerritorio" tabindex="-1" role="dialog" aria-labelledby="EditTerritorioLabel" aria-hidden="true">'+
                            '<div class="modal-dialog modal-dialog-centered" role="document">'+
                                '<div class="modal-content">'+
                                    '<div class="modal-header">'+
                                        '<h3 class="modal-title" id="EditTerritorioLabel">Editar el Territorio: '+  data.data.nombre+'</h3>'+
                                        '<button type="button" class="close" data-dismiss="modal" aria-label="Close">'+
                                        '<span aria-hidden="true">&times;</span>'+
                                        '</button>'+
                                    '</div>'+
                                    '<div class="modal-body">'+
                                        '<form action="{!!asset('Territorios')!!}/{!!"'+data.data.id+'"!!}" method="POST" role="form">'+
                                            '{{ method_field("PATCH") }}'+
                                            '{{ csrf_field() }}'+
                                            '<div class="row">'+
                                                '<div class="form-group col-sm-6">'+
                                                    '{!! Form::label("nombre", "Nombre:",["class"=>"label_class"]) !!}'+
                                                    '<input type="text" class="form-control class_input" name="nombre" value="'+data.data.nombre+'">'+
                                                '</div>'+
                                                '<div class="form-group col-sm-6">'+
                                                    '{!! Form::label("clave", "Clave de la sección:",["class"=>"label_class"]) !!}'+
                                                    '<input type="text" class="form-control class_input" name="clave" value="'+data.data.clave+'" >'+
                                                '</div>'+
                                                '<div class="form-group col-sm-12">'+
                                                    '{!! Form::label("fecha_corte", "Fecha de corte:",["class"=>"label_class"]) !!}'+
                                                        '<select class="form-control class_input" style="float: right; padding: 1px; padding-left:20px;">'+
                                                            '<option placeholder="seleccione una día de la semana">---</option>'+
                                                            '<option value="1">Lunes</option>'+
                                                            '<option value="2">Martes</option>'+
                                                            '<option value="3">Miércoles</option>'+
                                                            '<option value="4">Jueves</option>'+
                                                            '<option value="5">Viernes</option>'+
                                                            '<option value="6">Sábado</option>'+
                                                            '<option value="7">Domingo</option>'+
                                                        '</select>'+
                                                '</div>'+
                                                '<div class="form-group col-sm-12">'+
                                                    '{!! Form::label("direccion", "Descripción de la Sucursal:",["class"=>"label_class"]) !!}'+
                                                    '<input type="text" class="form-control class_input" name="direccion" value="'+data.data.direccion+'">'+
                                                '</div>'+
                                                '<div class="col-md-12" style="display:none!important;" id="coloniaEditForm">'+
                                                    '<div class="row">'+
                                                        '<div class="form-group col-md-5" style="margin-top:35px;">'+
                                                            '{!! Form::label("codigo_postal", "Código Postal:", ["class "=>"label_class"]) !!}'+
                                                            '<input type="text" class="form-control class_input" name="codigo_postal" id="codigo_postal2" >'+
                                                            '<div class="alert alert-danger alert-transparent alert-sm" style="display:none">'+
                                                                '<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>'+
                                                                '<span class="fw-semi-bold">Danger:</span>'+
                                                            '</div>'+
                                                        '</div>'+
                                                        '<div class="form-group col-md-7" style="margin-top:35px;">'+
                                                            '<a id="cargar_cp2" class="btnInfo btn3" >Aplicar CP </a>'+
                                                        '</div>'+
                                                        '<div class="col-12 " style="margin-top:35px;display:flex; justify-content:center;">'+
                                                            '<a href="#" id="select-all" class="btnImage btn5 " style="margin-left: 0px; ">Seleccionar </a>'+
                                                            '<a href="#" id="deselect-all" class="btnDanger btn1 " >Deseleccionar </a>'+
                                                        '</div>'+
                                                        '<div class="col-12">'+
                                                            '<div class="form-group class_button_flex" style="margin-top:20px; justify-content:center;">'+
                                                                '<select multiple="multiple" class="my-select2" name="my-select[]">'+

                                                                '</select>'+
                                                            '</div>'+
                                                        '</div>'+
                                                    '</div>'+
                                                '</div>'+
                                            '</div>'+
                                            '<div class="modal-footer" style="flex-flow: row!important;">'+
                                                '<button type="button"  class="btn4 btnWarning" id="btnEditColonias">Colonias</button>'+
                                                '<button type="submit"  class="btn2 btnSucces" id="btnAcceptEditSection">Aceptar</button>'+
                                                '<button type="button"  class="btnDanger btn1" data-dismiss="modal">Cancelar</button>'+
                                            '</div>'+
                                            '<input type="text" name="idSucursalEdit" class="idSucursalEdit" value="" style="display:none">'+
                                        '</form>'+
                                    '</div>'+
                                '</div>'+
                            '</div>'+
                        '</div>');
                let colonias = $('.my-select2');
                if(data.data.arrayColinias == 'Vacio'){
                    html_colonias = '<p style="color:#fe5b4e">Este territorio no tiene colonias asignadas</p>';
                }
                else{
                    $.each(data.data.arrayColinias,function(key,value){
                        colonias.append('<option value="'+value.asentamiento+' -- '+value.nombre+' -- '+value.codigo_postal+'" selected>'+value.nombre+'</option>');
                        html_colonias.push(value.nombre);
                    });
                }

                $('#btnEditColonias').click(function(){
                    $('#coloniaEditForm').css('display','block');
                });
                Territorios.html(
                    '<div class="row classGrupo " style="padding:20px 30px 10px">'+
                        '<div>'+
                            '<span class="tarjet_card">Clave:<br/> '+data.data.clave+'</span>'+
                        '</div>'+
                        '<div>'+
                            '<span class="tarjet_card">Descripción:<br/>'+data.data.direccion+'</span>'+
                        '</div>'+
                        '<div>'+
                            '<span class="tarjet_card">Promotor asignado:<br/>'+data.data.usuarioAsignado+'</span>'+
                        '</div>'+
                        '<div>'+
                            '<span class="tarjet_card">Colonias :<br/>'+
                                html_colonias
                            +'</span>'+
                        '</div>'+
                    '</div>');
                    if($('.class_input').val() != ' '){
                        $('.class_input').parent().find('.label_class').addClass('active2');
                    }
                    $('#select-all').click(function() {
                        $('.my-select2').multiSelect('select_all');
                        return false;
                    });

                    $('#deselect-all').click(function() {
                        $('.my-select2').multiSelect('deselect_all');
                        return false;
                    });
                    $('#cargar_cp2').on('click',function(e){
                        e.preventDefault();
                        getColonias2($('#codigo_postal2').val());
                    });
                    $('.my-select2').multiSelect({
                        selectableHeader: "<input type='text' class='form-control search-input' autocomplete='off' placeholder='Colonia' style='margin-bottom: 10px;'>",
                        selectionHeader: "<input type='text' class='form-control search-input' autocomplete='off' placeholder='Colonia seleccionada' style='margin-bottom: 10px;'>",
                        afterInit: function(ms) {
                            var that = this,
                                $selectableSearch = that.$selectableUl.prev(),
                                $selectionSearch = that.$selectionUl.prev(),
                                selectableSearchString = '#' + that.$container.attr('id') + ' .ms-elem-selectable:not(.ms-selected)',
                                selectionSearchString = '#' + that.$container.attr('id') + ' .ms-elem-selection.ms-selected';

                            that.qs1 = $selectableSearch.quicksearch(selectableSearchString)
                                .on('keydown', function(e) {
                                    if (e.which === 40) {
                                        that.$selectableUl.focus();
                                        return false;
                                    }
                                });

                            that.qs2 = $selectionSearch.quicksearch(selectionSearchString)
                                .on('keydown', function(e) {
                                    if (e.which == 40) {
                                        that.$selectionUl.focus();
                                        return false;
                                    }
                                });
                        },
                        afterSelect: function() {
                            this.qs1.cache();
                            this.qs2.cache();
                        },
                        afterDeselect: function() {
                            this.qs1.cache();
                            this.qs2.cache();
                        }
                    });
                    console.log('Hasta auiasds');
                    function getColonias2(cp) {
                        var url = ' https://api.copomex.com/query/info_cp/' + cp +'?token=85e58fbe-878c-48e9-9484-e78f540ebe5c';
                        console.log('asjbd');
                        $.get(url, '').done(function(data) {

                            sepomex_data = data;

                            var opciones = '';

                            for (let index = 0; index < data.length; index++) {
                                const element = data[index];
                                opciones += '<option value="' + data[index].response.tipo_asentamiento +' -- '+ data[index].response.asentamiento +' -- '+  cp + '">'  + data[index].response.tipo_asentamiento +' -- '+ data[index].response.asentamiento + ' -- ' + cp + '</option>';
                            }
                            console.log('Hasta auis');

                            $('.my-select2').append(opciones);
                            $('.my-select2').multiSelect('refresh');
                        });
                    }

            },
            error:function(xhr,estado,error){
            }
        })
    }
    else{
        Territorios.html('');
        DOM.find('.btnSection').css('display','block');
        DOM.find('.btnTerritorio').css('display','none');
    }

 });


/* SELECT COLONIAS */
var sepomex_data = [];

$(document).ready(function() {
    $('#select-all').click(function() {
        $('.my-select').multiSelect('select_all');
        return false;
    });

    $('#deselect-all').click(function() {
        $('.my-select').multiSelect('deselect_all');
        return false;
    });

    $('#cargar_cp').on('click',function(e){
        e.preventDefault();
        getColonias($('#codigo_postal').val());
    });

    $('.my-select').multiSelect({
        selectableHeader: "<input type='text' class='form-control search-input' autocomplete='off' placeholder='Colonia' style='margin-bottom: 10px;'>",
        selectionHeader: "<input type='text' class='form-control search-input' autocomplete='off' placeholder='Colonia seleccionada' style='margin-bottom: 10px;'>",
        afterInit: function(ms) {
            var that = this,
                $selectableSearch = that.$selectableUl.prev(),
                $selectionSearch = that.$selectionUl.prev(),
                selectableSearchString = '#' + that.$container.attr('id') + ' .ms-elem-selectable:not(.ms-selected)',
                selectionSearchString = '#' + that.$container.attr('id') + ' .ms-elem-selection.ms-selected';

            that.qs1 = $selectableSearch.quicksearch(selectableSearchString)
                .on('keydown', function(e) {
                    if (e.which === 40) {
                        that.$selectableUl.focus();
                        return false;
                    }
                });

            that.qs2 = $selectionSearch.quicksearch(selectionSearchString)
                .on('keydown', function(e) {
                    if (e.which == 40) {
                        that.$selectionUl.focus();
                        return false;
                    }
                });
        },
        afterSelect: function() {
            this.qs1.cache();
            this.qs2.cache();
        },
        afterDeselect: function() {
            this.qs1.cache();
            this.qs2.cache();
        }
    });

    $("form").submit(function(e) {
        e.preventDefault();
        aplicar_validaciones(e);

    });

});

function aplicar_validaciones(event) {
        var validacion= true;

        if (!validar_texto_minimo('#nombre', '#nombre-mensaje',3)){
            validacion=false;
            // console.log("1");
        }

        if (!validar_texto_minimo('#clave', '#clave-mensaje',3)){
            validacion=false;
            // console.log("2");
        }

        if (!validar_texto_minimo('#direccion','#direccion-mensaje',3)){
            validacion=false;
            // console.log("3");
        }

        console.log("aqui");

        if (validacion) {
            event.target.submit();
        }
    }

function getColonias(cp) {
    var url = ' https://api.copomex.com/query/info_cp/' + cp +'?token=85e58fbe-878c-48e9-9484-e78f540ebe5c';

    $.get(url, '').done(function(data) {

        sepomex_data = data;

        var opciones = '';

        for (let index = 0; index < data.length; index++) {
            const element = data[index];
            opciones += '<option value="' + data[index].response.tipo_asentamiento +' -- '+ data[index].response.asentamiento +' -- '+  cp + '">'  + data[index].response.tipo_asentamiento +' -- '+ data[index].response.asentamiento + ' -- ' + cp + '</option>';
        }

        $('.my-select').append(opciones);
        $('.my-select').multiSelect('refresh');
    });
}



$(window).load(function() {
    if($('.class_input').val() != ' '){
        $('.class_input').parent().find('.label_class').addClass('active2');
    }
});

$('.class_input').on('focusin', function() {
    $(this).parent().find('.label_class').addClass('active2');
});
$('.class_input').on('focusout', function() {
    if (!this.value) {
        $(this).parent().find('.label_class').removeClass('active2');
    }
});


$('.btnSucursal').click(function(){
    let id_Sucursal =  $(this).find('.abrirEditSucursal').data('id');
    console.log(id_Sucursal);
    $.ajax({
        url:  url_dinamica+"/api/getInfoSucursal/"+id_Sucursal,
        method:"GET",
        dataType:"json",
        success:function(data){

            $('#grupoSeccionesEdit').select2({
                placeholder: " {!! ($grupoSecciones->isEmpty())? 'Todos los grupos de secciones están ocupados' : 'Selecciona los grupos de secciones'  !!} ",
            });
            $('#NombreSu').val(data.data.nombre);
            $('#ClaveSu').val(data.data.clave);
            $('#DescripcionSu').val(data.data.direccion);
            $('#editSucursalForm').attr('action','{!!asset('Sucursales')!!}/{!!"'+data.data.id+'"!!}');
            let GpoSection = $('#grupoSeccionesEdit');
            GpoSection.html('');
                $.each(data.data.arrayGrupo, function(key,value){
                    GpoSection.append('<option value="'+value.id+'" selected>'+value.nombre+'</option>')
                });
            GpoSection.append('');
            if($('.class_input').val() != ' '){
                $('.class_input').parent().find('.label_class').addClass('active2');
            }
        },
        error:function(xhr,estado,error)
        {

        }
    });

});

$(".abrirModalGS").click(function(){
    $("#modal_grupo_secciones_sucursal_id").val($(this).data('id'));
});

$(".abriModalSeccion").click(function(){
    $("#grupo_secciones_id_modal").val($(this).data('id'));
});

$(".abriModalCreateTerritorio").click(function(){
    console.log($(this).data('id'));

    $("#territorio_id_modal").val($(this).data('id'));
});

</script>
@endsection