@extends('layouts.app')

@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">Servicios

                @if(get_perfil()["perfil"] == "Distribuidor")
                <a href="{{ route('reparacions.create') }}" class="btn-nuevo">Actualizar precios</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">Reparaciones</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>
           <div class="empty-space-10"></div>
           <span class="mensajeDelete texto-obscuro" style="color:#ec2424!important"></span>
           @include('refaccions.table')
           <div class="empty-space-30"></div>
       </div>
    </div>

@endsection

@section('modales')
<div class="modal fade" id="chagePrice" tabindex="-1" role="dialog" aria-labelledby="chagePriceLabel" 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="chagePriceLabel">Actualizar Precio</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>Asegurese que el precio a cambiar es válido</p>
                <div class="row">
                    <div class="col-12">
                        <div class="row">
                            <div class="col-4">
                                <h3 class="nombre">¡Advertencia!</h3>
                            </div>
                            <div class="col-4">
                                <input type="text" class="form-control input_main" name="precio" id="precio" value="" placeholder="Precio" onkeypress="validate(event)">
                                <span class="mensajePrecio texto-obscuro" style="color:#ec2424!important"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="empty-space-50"></div>
                @csrf
                <div class="col-12 p-0 m-0 text-right botonera-formulario">
                    <a href="#" 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>
            <input type="hidden" name="idPrecio" class="idPrecio" val="">
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
<script>
    var url_dinamica = '{!!  url("/") !!}';

    var userList = new List('documents_list', {
            valueNames: [ 'cliente'],
            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');
                    }
                })
            });
        }

        $('.actualizarPrecio').click(function(){
            $('#chagePrice').modal();
            var id = $(this).data('id');
            var nombre = $(this).data('nombre');
            var precio = $(this).attr('precio');
            $('.idPrecio').val(id);
            $('.nombre').text(nombre);
            $('#precio').val(precio);
            console.log($('.idPrecio').val());
        });

        $('#guardar-cambios').click(function(){
            let idPrecio =  $('.idPrecio').val();
            $('.mensajePrecio').text('');

            if($('#precio').val() != ''){
                var precio = parseFloat($('#precio').val());
                $.ajax({
                    url:  url_dinamica+'/update-reparacion/'+idPrecio+'/'+precio,
                    method:"GET",
                    dataType:"json",
                    success:function(value){

                        $('#chagePrice').modal('hide');
                        $('.precioText_'+idPrecio).text(precio.toFixed(2));
                        $('.mensajeDelete').text('El precio del servicio '+ $('.nombre').text()+ ' ha sido actualizado');
                        $('#boton_'+idPrecio).attr('precio',precio);
                        setTimeout(function(){
                            $('.mensajeDelete').fadeOut(1000);
                        },3000)
                    },
                    error:function(xhr,estado,error)
                    {
                        alert('hola')
                        console.log(xhr);
                    }
                });
            }else{
                $('.mensajePrecio').text('El campo precio es requerido');
            }
        });

        function validate(evt) {
            var theEvent = evt || window.event;

            // Handle paste
            if (theEvent.type === 'paste') {
                key = event.clipboardData.getData('text/plain');
            } else {
            // Handle key press
                var key = theEvent.keyCode || theEvent.which;
                key = String.fromCharCode(key);
            }
            var regex = /[0-9]|\./;
            if( !regex.test(key) ) {
                theEvent.returnValue = false;
                if(theEvent.preventDefault) theEvent.preventDefault();
            }
        }
</script>
@endpush