@extends('layouts.app')
@section('content')

<style>
    .daterangepicker td.start-date{background-color:#ff731e !important;}
    .daterangepicker td.end-date{background-color: #ff731e !important;}
    .daterangepicker td.in-range{background-color: #F9CB96;}
    #daterange {
    background: #f9f9f9;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    }
    .daterangepicker .ranges li.active {
    background-color: #ff731e;
    color: #fff;
    }
    .btnArrow {
    font-size: 25px;
    background: #f9f9f9;
    margin: 0px 20px;
    padding: 5px 10px;
    border: none;
    border-radius: 4px;
    }
    .btn-sm {
    background: #ff731e;
    }
    .btn.btn-info {
        color: #36A1EA !important;
        background: #d5e9f7;
    }
</style>

    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>Recibos</h1>
                </div>
                <div class="col-sm-6">
                    <a class="btn btn-primary float-right"
                        href="{{ route('suppliersReleasesEvaluations.create') }}" style="margin-left: 10px;">
                        Agregar Recibo
                    </a>
                    <a class="btn btn-info float-right"
                        onclick="guardarEvaluacionSemanaProvedor()" href="#">
                        Generar PDF
                    </a>
                    <a  onclick="guardarEvaluacionProvedor()" class="btn btn-info float-right" style="margin-right: 10px;">
                        {{-- href="{{ route('suppliersReleasesEvaluations.create_report_excel') }}" --}}
                        Generar Excel
                    </a>
                </div>
            </div>
        </div>
    </section>

    <div class="content px-3">

        @include('flash::message')

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

        <div class="card">
            <div class="card-body p-0">
                <div class="col-9 ranges text-right" id="filtroFechas">
                    <div class="btn-group w-50" style="margin-top: 50px; margin-bottom: 50px">
                        <button class="btnArrow" style="border:none" data-tipo="anterior"> &lt; </button>
                            <input class="w-50 text-center" type="text" id="daterange" name="daterange" value="01-Aug-2023 / 01-Aug-2023">
                        <button class="btnArrow" style="border:none" data-tipo="siguiente"> &gt; </button>
                    </div>
                </div>
                <div id="contenedor-table">
                    @include('suppliers_releases_evaluations.table')
                </div>
                <div class="card-footer clearfix float-right">
                    <div class="float-right">
                        
                    </div>
                </div>
            </div>

        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="modal_guardar_evaluacion" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                {!! Form::open(['route' => 'crearPdfPedidoRecibos']) !!}
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Guardar</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <!-- Type Proveedor -->
                        <div class="form-group col-sm-12">
                            {!! Form::label('suppliers_id_pdf', 'Proveedor') !!}
                            {!! Form::select('suppliers_id_pdf', $suppliers, null, ['class' => 'form-control select_tow']) !!}
                        </div>
                        <div class="form-group col-sm-12">
                            {!! Form::label('row_material_id_pdf', 'No. Part:') !!}
                            {!! Form::select('row_material_id_pdf', $rowMaterials, null , ['class' => 'form-control select_tow']) !!}
                        </div>
                        
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                        <button type="submit" class="btn btn-primary">Guardar</button>
                    </div>
                {!! Form::close() !!}
            </div>
        </div>
    </div>

    <!-- Modal excel -->
    <div class="modal fade" id="modal_guardar" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                {!! Form::open(['method'=>'POST','route' => 'suppliersReleasesEvaluations.create_report_excel']) !!}
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModal">Generar Excel</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <!-- Type Proveedor -->
                        <div class="form-group col-sm-12">
                            {!! Form::label('suppliers_id_excel', 'Proveedor (solo se muestran los proveedores que cuentan con minimo un recibo)') !!}
                            {!! Form::select('suppliers_id_excel', $suppliers, empty($suppliersReleasesEvaluation)? null : $suppliersReleasesEvaluation->suppliers_id, ['class' => 'form-control select_tow', 'onChange' =>' cambiarSupplier()' ]) !!}
                        </div>
                        <div class="form-group col-sm-12 select_row_material"></div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                        <button type="submit" id="btn-primary"class="btn btn-primary">Guardar</button>
                    </div>
            </div>
        </div>
    </div>
@endsection


@push('page_scripts')
    <script src="{{ asset('assets') }}/plugins/select2/js/select2.full.min.js"></script>    

    <script>
        const url =  '{{ url('/suppliers_desactivar/') }}'
        const url_dinamica =  "{{ url('/') }}";
        const url_getRowMateria = "{{ url('/getRowMateria') }}";

        $(document).ready(function() {
            "use strict";

            let suppliers_id = $('#suppliers_id_excel').val();
            getMateriaPrima(suppliers_id);

        });

        function cambiarSupplier(){    
            let suppliers_id = $('#suppliers_id_excel').val();
            getMateriaPrima(suppliers_id);
        }

        function guardarEvaluacionSemanaProvedor(){    
            $('#modal_guardar_evaluacion').modal('show')
        }

        function guardarEvaluacionProvedor(){
            console.log("llegamos");
            
            $('#modal_guardar').modal('show')
            
            // $('.select_tow').select2();       

            $('.date_normal').datetimepicker({
                format: 'YYYY-MM-DD',
                useCurrent: true,
                icons: {
                    up: "icon-arrow-up-circle icons font-2xl",
                    down: "icon-arrow-down-circle icons font-2xl"
                },
                sideBySide: true
            });
        }

        $('#suppliers_releases_evaluations-table').DataTable({
            order: [0, 'desc'],
            language: {
                "decimal": "",
                "emptyTable": "No hay información",
                "info": "Mostrando _START_ a _END_ de _TOTAL_ Entradas",
                "infoEmpty": "Mostrando 0 a 0 de 0 Entradas",
                "infoFiltered": "(Filtrado de _MAX_ total entradas)",
                "infoPostFix": "",
                "thousands": ",",
                "lengthMenu": "Mostrar _MENU_ Entradas",
                "loadingRecords": "Cargando...",
                "processing": "Procesando...",
                "search": "Buscar:",
                "zeroRecords": "Sin resultados encontrados",
                "paginate": {
                    "first": "Primero",
                    "last": "Ultimo",
                    "next": "Siguiente",
                    "previous": "Anterior"
                }
            },
        })
        $('#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
        },
    });
        $('#daterange').on('apply.daterangepicker', function(ev, picker) {
            // $.LoadingOverlay("show");
            // actualizarDatos();
            // $.LoadingOverlay("hide");
            actualizarDatos();
            alert('llegamos');
        });

        $(".btnArrow").click(function(){

        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();
            $.LoadingOverlay("hide");
        })
        .fail(function(error) {
            console.log('error',error);
        });
    });

        function actualizarDatos(){
            let result = $("#daterange").val().split('/');

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

            
            fetch( url_dinamica + "/get_recibos_rango/"+fecha_inicio+"/"+fecha_final,)
            .then(response => response.text())
            .then(data => {

                console.log(data);
                $('#contenedor-table').html(data);
                $('#suppliers_releases_evaluations-table').DataTable({
                    order: [0, 'desc'],
                    language: {
                        "decimal": "",
                        "emptyTable": "No hay información",
                        "info": "Mostrando _START_ a _END_ de _TOTAL_ Entradas",
                        "infoEmpty": "Mostrando 0 a 0 de 0 Entradas",
                        "infoFiltered": "(Filtrado de _MAX_ total entradas)",
                        "infoPostFix": "",
                        "thousands": ",",
                        "lengthMenu": "Mostrar _MENU_ Entradas",
                        "loadingRecords": "Cargando...",
                        "processing": "Procesando...",
                        "search": "Buscar:",
                        "zeroRecords": "Sin resultados encontrados",
                        "paginate": {
                            "first": "Primero",
                            "last": "Ultimo",
                            "next": "Siguiente",
                            "previous": "Anterior"
                        }
                    },
                })
            });
        }

        function getMateriaPrima(supplier_id){
            console.log(supplier_id);

            fetch(url_getRowMateria+'/'+supplier_id)
                .then(res => res.text())
                .then(html => {
                    $('.select_row_material').html(html);

                    // $('.delete').on('click', function(event){
                    //     $(this).parent().parent().remove();
                    // });

                    // $('.select_tow').select2();   
                }); 
            // if ($('.select_row_material').attr(html)) {
            //     document.getElementById('#btn-primary').disabled = false;
            //     } else {
            //     document.getElementById('#btn-primary').disabled = true;
            //     }
        }  
    </script>

@endpush