@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">Editar territorio</li>
    </ol>
    <div class="row justify-content-between">
        <div class="col-12 col-xl-6">
            <h1 class="page-title">Edite el siguiente <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="padding:20px 0 2px!important">
        <header style="padding:0px 20px!important">
            <div class="content_div">
                <h4 style=" padding: 20px 50px 0!important;">Llena todos los campos necesarios para editar territorio</h4>
                <hr class="divider_tarjet " style="margin-top:15px; margin-bottom:0px;">
            </div>
        </header>
        @include('adminlte-templates::common.errors')
        @include('flash::message')
        <div class="widget-body">
            {!! Form::model($territorio, ['route' => ['territorios.update', $territorio->id], 'method' => 'patch','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');
        }
    });
    var sepomex_data = [];
    var colonias = {!! $colonias == ''? '" "': $colonias !!};

    $(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