@extends('layouts.app')

@section('css')
<link href="{!! asset('css') !!}/multi-select.css" media="screen" rel="stylesheet" type="text/css">
@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" ><a href="{!! URL::previous() !!}">Territorios</a></li>
    <li class="breadcrumb-item">Nuevo territorio</li>
</ol>
<div class="row justify-content-between">
    <div class="col-12 col-xl-6">
        <h1 class="page-title">Crea un nuevo <span class="fw-semi-bold">territorio</span></h1>
    </div>
    <div class="col-12 col-xl-6 text-right">
        <a class="btnInfo btn3" href="{!! URL::previous() !!}">Regresar</a>
    </div>
</div>

<section class="widget" style="margin:20px 0 2px!important; padding:0px!important;">
    <header style="padding:0px 20px!important">
        <div class="content_div">
            <h4 style=" padding: 20px 50px 0!important;">Llena todos los campos necesarios para generar un nuevo territorio</h4>
            <hr class="divider_tarjet " style="margin-top:15px; margin-bottom:0px;">
        </div>
    </header>
    <div class="widget-body">
        @include('adminlte-templates::common.errors')
        @include('flash::message')
        {!! Form::open(['route' => 'territorios.store', 'class' => 'form-horizontal','files' => true]) !!}

        @include('territorios.fields')

        {!! Form::close() !!}
    </div>
</section>
@endsection

@section('scripts')


<script src="{!! asset('js') !!}/jquery.quicksearch.js" type="text/javascript"></script>
<script src="{!! asset('js') !!}/jquery.multi-select.js" type="text/javascript"></script>

<script>
   $(window).load(function() {
        console.log();
        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');
        }
    });
    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();
            }
        });
    });

    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');
        });
    }
</script>
@endsection