@extends('layouts.app')
@section('css')
<style>
.mb-0 a {
    color: #57515e!important;
    font-size: 14px!important;
}
.nav-tabs>.nav-item .nav-link.active,
.nav-tabs>.nav-item .nav-link.active:hover, .nav-tabs>.nav-item .nav-link.active:focus{
    font-family:'avenir book';
    font-size:14px!important;
    text-transform: capitalize;
}
.nav-tabs>.nav-item>.nav-link {
    font-family:'avenir book';
    font-size:14px!important;
    text-transform: capitalize;
    color:#a2a2a2;
}
</style>
@endsection
@section('content')
    <ol class="breadcrumb">
        <li class="breadcrumb-item">Sucursales</li>
        <li class="breadcrumb-item active">Inicio</li>
    </ol>
    <div class="row page-title"  style="padding:0 5px!important">
        <div class="col-12 col-xl-8" style="padding: 0 0 0 20px">
            <h1 style="float:left">{!! $agencia->nombre !!}</span></h1>
        </div>
        <div class="col-12 col-xl-4 text-right">
            <a class="btnInfo btn3" href="{!! URL::previous() !!}">Regresar</a>
        </div>
    </div>

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

    @include('flash::message')

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

    <section class="widget" style="background:transparent!important">
        <div class="widget-body">
            <div class="row">
                <div class="col-12">
                    @include('agencias.show_fields')
                </div>
            </div>
        </div>
    </section>
    <div id="url_estatica" data-url="{{ url('/') }}"></div>
@endsection
@section('scripts')
<script>
var url = '{!! url("/") !!}';
$('#check').css('display','none');
$('#check2').css('display','none');
$("#secciones").removeAttr('data-toggle');
$("#territorios").removeAttr('data-toggle');

function clickRadio(id,id_grupo) {
    if (id.checked == true) {
            $('#check').css('display','block');
            $("#secciones").attr('data-toggle','tab');
            $.ajax({
                url:  url+"/api/GetGroupSection/"+id_grupo,
                method:"GET",
                dataType:"json",
                success:function(value){
                    $('#SeccionesTable').html('');
                    $.each(value.data, function(key,valor){
                        $('#SeccionesTable').append('<div class="col-12" >'+
                        '<div class="row">'+
                            '<div class="div col-md-3">'+
                                '<input type="radio" name="secciones" class="inputSeccion" onchange="clickRadio2(this,'+valor.id+');">'+
                                '<label for="secciones" class="labels nombreS" style="margin-left:10px;">'+valor.nombre+'</label>'+
                            '</div>'+
                            '<div class="col-md-3">'+
                                '<label class="labels" style="margin-left:10px;" class="claveS">Clave: '+valor.clave+'</label>'+
                            '</div>'+
                            '<div class="col-md-3">'+
                                '<label class="labels" style="margin-left:10px;" class="fecha_corteS">fecha_calve: '+valor.fecha_corte+'</label>'+
                            '</div>'+
                            '<div class="col-md-3">'+
                                '<label class="labels" style="margin-left:10px;" class="descripcionS">Descripción: '+valor.direccion+'</label>'+
                            '</div>'+
                        '</div></div>');
                    })
                    $('#SeccionesTable').append('');

                },
                error:function(xhr,estado,error)
                {

                }
            });
    } else {
        console.log('no se encontro');
    }
    $(id).bind('touchstart mousedown', function () {
        console.log(id);
        this.checked = !this.checked;
        if (this.checked == false) {
            $('#check').css('display','none');
            $("#secciones").removeAttr('data-toggle');
        }
        else {
            $('#check').css('display','block');
            $("#secciones").attr('data-toggle','tab');
            $.ajax({
                url:  url+"/api/GetGroupSection/"+id_grupo,
                method:"GET",
                dataType:"json",
                success:function(value){
                    $('#SeccionesTable').html('');
                    $.each(value.data, function(key,valor){
                        $('#SeccionesTable').append('<div class="col-12" >'+
                        '<div class="row">'+
                            '<div class="div col-md-3">'+
                                '<input type="radio" name="secciones" class="inputSeccion" onchange="clickRadio2(this,'+valor.id+');">'+
                                '<label for="secciones" class="labels nombreS" style="margin-left:10px;">'+valor.nombre+'</label>'+
                            '</div>'+
                            '<div class="col-md-3">'+
                                '<label class="labels" style="margin-left:10px;" class="claveS">Clave: '+valor.clave+'</label>'+
                            '</div>'+
                            '<div class="col-md-3">'+
                                '<label class="labels" style="margin-left:10px;" class="fecha_corteS">fecha_calve: '+valor.fecha_corte+'</label>'+
                            '</div>'+
                            '<div class="col-md-3">'+
                                '<label class="labels" style="margin-left:10px;" class="descripcionS">Descripción: '+valor.direccion+'</label>'+
                            '</div>'+
                        '</div></div>');
                    })
                    $('#SeccionesTable').append('');

                },
                error:function(xhr,estado,error)
                {

                }
            });
        }
    }).bind('click touchend', function (e) {
        e.preventDefault()
    });
}

function clickRadio2(id,id_territorio) {
    if (id.checked == true) {
            $('#check2').css('display','block');
            $("#territorios").attr('data-toggle','tab');
            $.ajax({
                url:  url+"/api/getTerritorio/"+id_territorio,
                method:"GET",
                dataType:"json",
                success:function(value){
                    console.log(value);
                    $('#TerritorioTable').html('');
                    // $.each(value.data, function(key,valor){
                    //     $('#TerritorioTable').append('<div class="col-12" >'+
                    //     '<div class="row">'+
                    //         '<div class="div col-md-3">'+
                    //             '<input type="radio" name="secciones" class="inputSeccion" onchange="clickRadio2(this,'+valor.id+');">'+
                    //             '<label for="secciones" class="labels nombreS" style="margin-left:10px;">'+valor.nombre+'</label>'+
                    //         '</div>'+
                    //         '<div class="col-md-3">'+
                    //             '<label class="labels" style="margin-left:10px;" class="claveS">Clave: '+valor.clave+'</label>'+
                    //         '</div>'+
                    //         '<div class="col-md-3">'+
                    //             '<label class="labels" style="margin-left:10px;" class="descripcionS">Descripción: '+valor.direccion+'</label>'+
                    //         '</div>'+
                    //     '</div></div>');
                    // })
                    $('#TerritorioTable').append('');

                },
                error:function(xhr,estado,error)
                {

                }
            });

    } else {
        console.log('no se encontro');
    }
    $(id).bind('touchstart mousedown', function () {
        console.log(id);
        this.checked = !this.checked;
        if (this.checked == false) {
            $('#check2').css('display','none');
            $("#territorios").removeAttr('data-toggle');
        }
        else {
            $('#check2').css('display','block');
            $("#territorios").attr('data-toggle','tab');
        }
    }).bind('click touchend', function (e) {
        e.preventDefault()
    });
}

</script>

@endsection