@extends('layouts.app')

@push('css')
    <style>
        .btn-nuevo:hover::after{
            content: ' Crear equipo';
            text-decoration: none;
            visibility: visible;
        }

        .daterangepicker .ranges li.active {
            background: #00c88b !important;
        }

        .daterangepicker td.in-range {
            background: #00c88c38;
        }

        .daterangepicker td.active,
        .daterangepicker td.active:hover {
            background: #00c88b;
        }

        .btnArrow {
            font-size: 15px;
            background: #f9f9f9;
            margin: 0px 10px;
            padding: 5px 10px;
            border: none;
            border-radius: 4px;
        }

        #daterange {
            background: #f9f9f9;
            border: none;
            cursor: pointer;
            border-radius: 4px;
        }

        .month {
            /* padding: 10px;
                        background: #00c88a; */
        }

        .blink_me {
            animation: blinker 1.5s linear infinite;
        }

        .bootstrap-datetimepicker-widget button[data-action] {
            background-color: #00c88b !important;
            border-color: #00c88b !important;
        }

        @keyframes blinker {
            50% {
                opacity: .5;
            }
        }

        .document_name{
            text-transform: uppercase;
        }

        .descr{
            text-transform: uppercase;
        }

    </style>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/eonasdan-bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css">
@endpush

@section('content')
<div class="container ml-0 mr-0 pl-0 pr-0 row" id="documents_list">
    <div
        class="animate__animated animate__fadeInUp container tarjetas tarjeta-gris p-3 p-sm-2 p-md-3 p-lg-5 p-xl-5 col-12">
        <div class="row row-bottom">
            <div class="col-12 col-sm-12 col-md-8 col-lg-8 col-xl-8">
                <h3 class="titulo-modulo texto-obscuro">Registro de Equipos

                    @if (get_perfil()['perfil'] == 'Distribuidor')
                        <a href="{{ route('registro_equipos.create') }}" class="btn-nuevo">+</a>
                    @endif

                </h3>
            </div>
            <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
                <nav class="breadcrumb"><a class="breadcrumb-item" href="{{ url('home') }}">Dashboard</a><span
                        class="breadcrumb-item active">Registro de Equipos</span></nav>
            </div>
            <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
                <input type="text" class="search input_main input_buscador float-right" placeholder="Buscar...">
            </div>
        </div>

        @if (get_perfil()['perfil'] == 'Distribuidor')
        @endif
        <div class="empty-space-10"></div>
        <span class="mensajeDelete texto-obscuro" style="color:#ec2424!important"></span>
        @include('registro_equipos.table')
        <div class="empty-space-30"></div>
    </div>
</div>
@endsection

@section('modales')
<div class="modal fade" id="modalEliminar" tabindex="-1" role="dialog" aria-labelledby="modalEliminarLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalEliminarLabel">Eliminar registro</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <h3>¡Advertencia!</h3>
                <p>Al aceptar el registro <strong id="nombre_modal"></strong> será eliminado. <br /> Esta acción no puede ser reversible.</p>
            </div>
            <div class="empty-space-50"></div>
            {!! Form::open(['route' => ['registro_equipos.destroy', 0], 'method' => 'delete','class' => 'row botonera-inferior','id' => 'form-eliminar']) !!}
                @csrf
                <div class="col-12 p-0 m-0 text-right botonera-formulario">
                    <a href="{{ url('registro_equipos') }}" class="btn btn-secundario text-white" data-dismiss="modal">Cancelar <span><-</span></a>
                    <button type="submit" id="guardar-cambios" class="btn btn-principal ">Aceptar <span>-></span></button>
                </div>
            {!! Form::close() !!}
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
<script>
    function enviar_descarga(documento_id)
    {
        var data = {
            "user_id": "{{ get_perfil()['id'] }}",
            "seccion": 'facturas',
            "archivo_id": documento_id
        }
        $.ajax({
            url: "{{ URL('/') }}/api/agregar_descarga",
            type: "POST",
            dataType: "json",
            data: data,
            success: function(respuesta) {
            },
            error: function() {
            }
        });
    }
    $(".btn-acciones").click(function(){
        $(".menu-acciones-lista").hide();
        $(this).next().slideDown("fast");
    });
    $(".btn-cerrar-acciones").click(function(){
        $(this).parent().slideUp("fast");
    });

    $(".btn-eliminar").click(function(){
        $("#modalEliminar").modal();
        var nombre = $(this).data('name');
        var cantidad = $(this).data('cantidad');
        var url = $(this).data('url');
        $("#nombre_modal").text(nombre);
        $("#form-eliminar").attr('action',url);
    });
    var userList = new List('documents_list', {
        valueNames: [ 'document_name','descr','tamanio','fechacreacion'],
        page: 6,
        pagination: {
            innerWindow: 2,
            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');
                }
            })
        });
    }
    $(".input_buscador").keyup(function(){
        if($('.list .list_custom').length == 0)
        {
            $("#msg-result").removeClass('d-none');
        }else{
            $("#msg-result").addClass('d-none');
        }
        var buscador = $(".input_buscador").val();
        localStorage.setItem("buscador_documentos", buscador);
    });
    @foreach (session('flash_notification', collect())->toArray() as $message)
        @if($message["level"] == "success")
            toastr.success('{{ $message["message"] }}', {timeOut: 1000000})
        @else
            toastr.error('{{ $message["message"] }}', {timeOut: 10000})
        @endif
            {{ session()->forget('flash_notification') }}
    @endforeach
</script>
@endpush