@extends('layouts.app')

@push('css')
    <style>
        .btn-nuevo {
            color: #fff;
            width: 250px;
            overflow: hidden;
        }

        .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;
            }
        }

    </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="row">
                    <div class="@if (get_perfil()['perfil'] == 'Distribuidor') col-9 col-sm-9 col-md-9 col-lg-9 col-xl-9 @else col-10 col-sm-10 col-md-10 col-lg-10 col-xl-10 @endif" style="padding-right: @if (get_perfil()['perfil'] != 'Distribuidor') 9rem !important @endif">
                        <h3 class="titulo-modulo texto-obscuro">Reparaciones/Calibraciones
    
                            @if (get_perfil()['perfil'] == 'Distribuidor')
                                <a href="{{ route('reparacions.create') }}" class="btn-nuevo">Nueva reparación /
                                    calibración</a>
                            @endif
                            
                        </h3>
                    </div>
                    <div class="@if (get_perfil()['perfil'] == 'Distribuidor') col-3 col-sm-3 col-md-3 col-lg-3 col-xl-3 @else col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2 @endif pl-xl-5 pl-lg-5 pl-md-3 pl-sm-1 pl-0">
                        <div class="pl-xl-4 pl-lg-4 pl-md-0 pl-sm-1 pl-0">
                            <button class="btn btn-nuevo m-0 p-0 btn-lista-precios">Ver precios</button>
                        </div>
                    </div>
                </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>

            @if (get_perfil()['perfil'] == 'Administrador Técnico')
                <div class="col-12">
                    <div class="row">
                        <div class="col-xl-6 col-md-12 col-12 text-right" id="filtroFechas" style="margin-top:30px">
                            <div class="btn-group w-100">
                                <button class="btnArrow btnLeft" data-tipo="anterior">
                                    < </button>
                                        <input class="w-100 text-center" type="text" id="daterange" name="daterange"
                                            value="{{ $inicio_mes . ' / ' . $fin_mes }}" />
                                        <button class="btnArrow btnRight" data-tipo="siguiente"> > </button>
                            </div>
                            <br />
                            <br />
                        </div>
                        <div class="col-xl-6 col-md-12 col-12 text-right" id="filtroFechas" style="margin-top:30px">
                            <a href="{!! url('/download-reparaciones') !!}/{!! str_replace("/","-",$inicio_mes) !!}/{!! str_replace("/","-",$fin_mes) !!}" id="downlowadReparacion" class="btn btn-principal width-250">Descargar Reparaciones<span>-></span></a>
                        </div>
                    </div>
                </div>
            @endif
            <div class="empty-space-10"></div>
            <span class="mensajeDelete texto-obscuro" style="color:#ec2424!important"></span>
            @include('reparacions.table')
            <div class="empty-space-30"></div>
        </div>
    </div>
@endsection

@method(cambiar_estatus_vista('reparaciones'))

@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 reparación</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, la reparación <strong id="nombre_modal"></strong> será eliminada. <br /> Esta acción no
                        puede ser reversible.</p>
                </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="idReparacion" class="idReparacion">
            </div>
        </div>
    </div>
    <!--Modal de lista de precios-->
    <div class="modal fade" id="modalPrecios" tabindex="-1" role="dialog" aria-labelledby="modalPreciosLabel"
        aria-hidden="true">
        <div class="modal-xl modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalPreciosLabel">Precios reparaciones</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-6">
                            <div class="row">
                                <div class="col-12">
                                    <h5 class="texto-obscuro" style="color:#0b5cd7!important">Servicios</h5>
                                </div>
                                @php
                                    $flag_como = 0;
                                    $flag_mapro = 0;
                                @endphp
                                @foreach ($catalogoReparaciones as $item)
                                    @if($item->tipo == 'MaPro' && $flag_mapro == 0)
                                        <div class="col-12">
                                            <h5 class="texto-obscuro" style="color:#0b5cd7!important">MaPro</h5>
                                        </div>
                                        @php
                                            $flag_mapro = 1;
                                        @endphp
                                    @endif
                                    @if($item->tipo == 'CoMo' && $flag_como == 0)
                                        <div class="col-12">
                                            <h5 class="texto-obscuro" style="color:#0b5cd7!important">CoMo</h5>
                                        </div>
                                        @php
                                            $flag_como = 1;
                                        @endphp
                                    @endif
                                    @if ($item->precio != null)
                                        @if ($item->id != 16 && $item->id != 17)
                                            @if ($item->id < 33 || $item->id > 40)
                                            <div class="col-6">
                                                <h5 class="texto-obscuro">{!! $item->nombre !!}</h5>
                                            </div>
                                            <div class="col-6">
                                                <h5 class="texto-obscuro">$ {!! number_format($item->precio,2) !!} USD</h5>
                                            </div>
                                            @endif
                                        @endif
                                    @endif
                                @endforeach
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="row">
                                <div class="col-12">
                                    <h5 class="texto-obscuro" style="color:#0b5cd7!important">Costo de refacciones</h5>
                                </div>
                                @foreach ($refacciones as $item)
                                    <div class="col-6">

                                        <h5 class="texto-obscuro">{!! $item->nombre !!}</h5>
                                    </div>
                                    <div class="col-6">
                                        <h5 class="texto-obscuro">$ {!! number_format($item->precio,2) !!} USD</h5>
                                    </div>
                                @endforeach
                            </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>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="{{ asset('/') }}js/moment/moment.min.js"></script>
    <script src="{{ asset('/js/date_picker') }}/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
    <script>
    @if (get_perfil()['perfil'] == 'Administrador Técnico')
        var inicio = "{{ $inicio_mes }}";
        var fin = "{{ $fin_mes }}";
        $('#daterange').daterangepicker({
            "cancelButtonClasses": "btn btn-secondary",
            "applyButtonClasses": "btn btn-primary_local",
            ranges: {
                'Hoy': [moment(), moment()],
                'Ayer': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                'Últimos 7 días': [moment().subtract(6, 'days'), moment()],
                'Últimos 30 días': [moment().subtract(29, 'days'), moment()],
                'Este mes': [moment().startOf('month'), moment().endOf('month')],
                'Último mes': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf(
                    'month')]
            },
            "alwaysShowCalendars": true,
            "startDate": inicio,
            "endDate": fin,
            "opens": "center",
            "locale": {
                "format": "DD-MMM-YYYY",
                "separator": " / ",
                "applyLabel": "Aplicar",
                "cancelLabel": "Cancelar",
                "fromLabel": "Desde",
                "toLabel": "Hasta",
                "customRangeLabel": "Personalizado",
                "weekLabel": "W",
                "daysOfWeek": [
                    "Do",
                    "Lu",
                    "Ma",
                    "Mie",
                    "Jue",
                    "Vie",
                    "Sa"
                ],
                "monthNames": [
                    "Enero",
                    "Febrero",
                    "Marzo",
                    "Abril",
                    "Mayo",
                    "Junio",
                    "Julio",
                    "Agosto",
                    "Septiembre",
                    "Octubre",
                    "Noviembre",
                    "Diciembre"
                ],
                "firstDay": 1
            },
        });

        $(".btnArrow").click(function() {
            $('.list').empty();

            var result = $("#daterange").val().split('/');

            var fecha_inicio = $.trim(result[0]);
            var fecha_final = $.trim(result[1]);

            var tipo = $(this).data('tipo');

            $.ajax({
                    type: 'GET',
                    url: url_dinamica + "/get_fecha/" + tipo + "/" + fecha_inicio + "/" + fecha_final,
                    dataType: 'json',
                    encode: true
                })
                .done(function(data) {
                    $('#daterange').data('daterangepicker').setStartDate(data.data.inicio_mes);
                    $('#daterange').data('daterangepicker').setEndDate(data.data.fin_mes);
                    actualizarDatos();
                })
                .fail(function(error) {
                    console.log('error', error);
                });
        });
        $('#daterange').on('apply.daterangepicker', function(ev, picker) {
            $('.list').empty();
            actualizarDatos();
        });
        function actualizarDatos() {
            var result = $("#daterange").val().split('/');

            var fecha_inicio = $.trim(result[0]);
            var fecha_final = $.trim(result[1]);

            $('#downlowadReparacion').attr('href', url_dinamica + "/download-reparaciones/"+ fecha_inicio + "/" + fecha_final)
            $.ajax({
                    type: 'GET',
                    url: url_dinamica + "/get-reparaciones/"+ fecha_inicio + "/" + fecha_final,
                    dataType: 'json',
                    encode: true
                })
                .done(function(data) {
                    if (data.data != false) {
                        $.each(data.data,function(key,value){
                            $('.list').append('<div class="row row-inicio lista list_custom ml-0 mr-0" id="reparaciones_"'+value.id+'>'+
                                                    '<div class="col-6 col-sm-6 col-md-6 col-lg-3 col-xl-3">'+
                                                        '<p class="m-0 mb-1 texto-obscuro">Cliente</p>'+
                                                        '<h6 class="texto-azul cliente">'+value.nombre+'</h6>'+
                                                    '</div>'+
                                                    '<div class="col-6 col-sm-6 col-md-6 col-lg-3 col-xl-3">'+
                                                        '<p class="m-0 mb-1 texto-obscuro">RA</p>'+
                                                        '<h6 class="texto-azul ">'+value.ra+'</h6>'+
                                                    '</div>'+
                                                    '<div class="col-6 col-sm-6 col-md-6 col-lg-2 col-xl-2">'+
                                                        '<p class="m-0 mb-1 texto-obscuro">Estatus</p>'+
                                                        '<h6 class="texto-azul ">'+value.estatus+'</h6>'+
                                                    '</div>'+
                                                    '<div class="col-6 col-sm-6 col-md-6 col-lg-2 col-xl-2">'+
                                                        '<p class="m-0 mb-1 texto-obscuro">Tipo</p>'+
                                                        '<h6 class="texto-azul ">'+
                                                            (value.tipo_tecnico == 'Técnico SF' && (value.isPSP == null || value.isPSP == 'No') ? 'CoMo' : '')+
                                                            (value.tipo_tecnico == 'Técnico SF' && value.isPSP == 'Si' ? 'PSP' : '')+
                                                            (value.tipo_tecnico == 'Técnico SF USA' ? 'Mapro USA' : '')+
                                                            (value.tipo_tecnico == 'Técnico Local' ? 'Mapro' : '')+
                                                        '</h6>'+
                                                    '</div>'+
                                                    '<div class="col-6 col-sm-6 col-md-6 col-lg-2 col-xl-2">'+
                                                        '<p class="m-0 mb-1 texto-obscuro">Fecha de ingreso</p>'+
                                                        '<h6 class="texto-azul ">'+moment(value.created_at).format("LL")+'</h6>'+
                                                    '</div>'+
                                                '</div>');
                            $('.pagination_flex').html('<button type="button" class="jPaginateBack"><i class="fa fa-angle-left"></i></button>'+
                                                        '<ul class="pagination"></ul>'+
                                                        '<button type="button" class="jPaginateNext"><i class="fa fa-angle-right"></i></button>');

                                                        listado();
                        })
                        $('.mensajeError').html('');
                    } else {
                        console.log('entra');
                        $('.mensajeError').html(
                            '<h5 class="color-white" style="margin-top:20px">No hay reparaciones para esta fecha</h5>');
                    }
                })
                .fail(function(error) {
                    console.log('error', error);
                });
        }
        @endif

        $(".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 id = $(this).data('id');
            $('.idReparacion').val(id);
        })
        var url_dinamica = '{!! url('/') !!}';


        $('#guardar-cambios').click(function() {
            let idReparacion = $('.idReparacion').val();
            $.ajax({
                url: url_dinamica + '/eliminar-reparacion/' + idReparacion,
                method: "GET",
                dataType: "json",
                success: function(value) {
                    console.log(value)
                    $('#modalEliminar').modal('hide');
                    $('#reparaciones_' + idReparacion).remove();
                    $('.mensajeDelete').text('La reparación se ha eliminado correctamente');

                    setTimeout(function() {
                        $('.mensajeDelete').fadeOut(1000);
                    }, 3000)
                },
                error: function(xhr, estado, error) {
                    console.log(xhr);
                }
            });
        });

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

        $('.btn-lista-precios').click(function(){
            $('#modalPrecios').modal('show');
        });

        listado();
        @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