@extends('layouts.app')

@section('css')
<link rel="stylesheet" href="{{asset('css')}}/bootstrap-material-datetimepicker.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css">

<style>
    .content_errors div {
        margin-left: 10px;
    }

    .isDisabled {
        cursor: not-allowed;
        opacity: 0.5;
    }

    .isDisabled>a {
        color: currentColor;
        display: inline-block;
        /* For IE11/ MS Edge bug */
        pointer-events: none;
        text-decoration: none;
    }
    .custom-file-control, .form-control, .is-focused .custom-file-control, .is-focused .form-control{
        background-image: linear-gradient(0deg, #a3a3a3 1px, rgba(0, 150, 136, 0) 0), linear-gradient(0deg, rgba(0, 0, 0, 0.36) 1px, transparent 0)!important;
    }
    .btn:hover{
        background:transparent!important;
    }
    .pagination li {
        margin:15px 5px 0;
        width:35px;
        height:35px;
        background:#71b7fd;
        border-radius:50%;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor:pointer;
    }
    .pagination li a {
        font-size:14px;
        font-family:'avenir book';
        color:#fff;
    }
    .pagination li:hover {
        border:2.5px solid #5990cc;
    }
    .pagination .active {
        margin:15px 5px 0;
        width:35px;
        height:35px;
        background:#71b7fd;
        border-radius:50%;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor:pointer;
        border:2.5px solid #5990cc;
    }
    .circle_list3 > h2,.circle_list2 > h2,.circle_list > h2   {
        top: 26%;
        left: 37%;
        font-size: 15px;
    }
    .flex_list .content_prestamis_list:nth-child(1),.flex_list .content_prestamis_list:nth-child(2),
    .flex_list .content_prestamis_list:nth-child(4){
        flex:0 1 15%;
        margin: 0 10px;
    }
    .flex_list .content_prestamis_list:nth-child(3){
        flex:0 1 12%;
        margin: 0 10px;

    }
    .flex_list{
        padding: 5px 200px 15px;
    }
    .pagination .disabled {
        display:none!important;
    }
    @media only screen and (max-width: 1420px){
        .flex_list {
            padding: 10px 140px 15px;
        }
    }
    @media only screen and (max-width: 990px){
        .flex_list {
            padding: 0 10px 10px;
        }
    }

    @media only screen and (max-width: 620px){
        .movil_title {
            top: 22.5%!important;
            left: 33.5%!important;
        }
        #content{
            padding: 150px 15px 42px;
        }
        #promotores_list{
            margin-left: 0px !important;
            margin-right: 0px !important;
            display: initial;
            flex-wrap: initial;
        }
        .content_list{
            margin-left: 0px !important;
            margin-right: 0px !important;
            display: initial;
            flex-wrap: initial;
        }
    }
</style>
@endsection

@section('content')
<div class="bread">
    <ol class="breadcrumb">
        <li class="breadcrumb-item active class_select"><a href="{{ URL('/home') }}">Inicio</a></li>
        <li class="breadcrumb-item">Promotores</li>
    </ol>
</div>
<div class="row page-title" style="padding:0 5px!important">
    <div class="col-12 flex_content" style="padding:0 0 0 35px">
        <h1 class="float_left"><span class="fw-semi-bold">Promotores/Territorios archivados</span></h1>
        <a class="btn1 btnDanger float_left btn_create" href="{!! route('listado.promotores') !!}">Regresar </a>
    </div>
</div>

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

@include('flash::message')

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

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

@section('scripts')
<meta name="csrf-token" content="{{ csrf_token() }}">
<script type="text/javascript" src="https://momentjs.com/downloads/moment-with-locales.min.js"></script>
<script type="text/javascript" src="{{asset('js')}}/bootstrap-material-datetimepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>

<script src="{!! asset('js') !!}/promotores/index.js"></script>

<script>
    $(document).ready(function() {
        @if($validar_vista)
        localStorage.setItem("buscador_promotor", '');
        @endif
        $("#buscador").val(localStorage.getItem("buscador_promotor"));
        userList.search(localStorage.getItem("buscador_promotor"));
    });

    var userList = new List('promotores_list', {
        valueNames: [ 'promotor_name', 'promotor_codigo', 'territorio'],
        page: 8,
        pagination: {
            innerWindow: 1,
            left: 0,
            right: 0,
            paginationClass: "pagination",
        }
    });
    var length_lis = $('.list .list_custom').length;
    if(length_lis == 0){
        $('.jPaginateNext').css('display','none');
        $('.jPaginateBack').css('display','none');
    }
    else{
        $('.jPaginateNext').css('display','block');
        $('.jPaginateBack').css('display','block');
        $('.jPaginateNext').on('click', function(){
            var list = $('.pagination').find('li');
            $.each(list, function(position, element){
                if($(element).is('.active')){
                    $(list[position+1]).trigger('click');
                }
            })
        });

        $('.jPaginateBack').on('click', function(){
            var list = $('.pagination').find('li');
            $.each(list, function(position, element){
                if($(element).is('.active')){
                    $(list[position-1]).trigger('click');
                }
            })
        });
    }

    $('.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 global = 0;
    $('#buscar_name').click(function(){
        if(global == 0){
            let icon = $('#icono2').text('↑');
            global =1;
        }
        else{
            let icon = $('#icono2').text('↓');
            global = 0;
        }
    });
    var global2 = 0;
    $('#buscar_status').click(function(){
        if(global2 == 0){
            let icon = $('#icono').text('↑');
            global2 =1;
        }
        else{
            let icon = $('#icono').text('↓');
            global2 =0;
        }
    });

    $("#buscador").keyup(function(){
        var buscador = $("#buscador").val();
        localStorage.setItem("buscador_promotor", buscador);
    });
</script>

@endsection