@extends('layouts.app')

@push('page_css')
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css">
    <link href="{{ asset('assets') }}/plugins/select2/css/select2.min.css" rel="stylesheet">   
    <style>
        body{ padding: 1% 3%; color: rgb(119, 119, 119); }
        h1{ color:#333 }
        td:focus {
            -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7ab5d3;
            -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7ab5d3;
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7ab5d3;	
            outline: rgb(91, 157, 217) auto 5px;
        }
        input.error {
            -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px red;
            -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px red;
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px red;	
            outline: thin auto red;
        }
        input {
            -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7ab5d3;
            -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7ab5d3;
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7ab5d3;	
            outline: rgb(91, 157, 217) auto 5px;
            outline-offset: 0px;
            border: none;
        }
    </style>
@endpush

@section('content')
    <div class="page-info">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ url('/home'); }}">Dashboard</a></li>
                <li class="breadcrumb-item"><a href="{{ url('/products'); }}">Listado realeases clientes</a></li>
                <li class="breadcrumb-item active" aria-current="page">Ajustar Realeses Cliente</li>
            </ol>
        </nav>
        <div class="page-options">
        </div>
    </div>

    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-12">
                    <h1>MRP {{ $product->no_part }}</h1>
                </div>
            </div>
        </div>
    </section>

    <div class="main-wrapper">
        <div class="card">
            <div class="card-body">

                    <a  href="{{ url('custommer_release_confirm/'.$release_customer->id ) }}" class="btn btn-success" id="btn_crear_pedido">
                        <img src=" {{  asset('assets/iconos/agregar.png') }} " alt="usuarios" style="height: 20px;">Aplicar calculos</a>
            </div>
        </div>
	</div>

    <div class="main-wrapper">
        <div class="row">
            <div class="col">

				@include('adminlte-templates::common.errors')

				<div class="card">
                    <div class="card-header">
                        <ul class="nav nav-tabs card-header-tabs">
                            <li class="nav-item">
                                <a 
                                    id="tab-projection"
                                    class="nav-link active" 
                                    href="#" 
                                    onclick="changeTap('projection')"
                                    >Logistica 
                                </a>
                            </li>
                            <li class="nav-item">
                                <a 
                                    id="tab-production"
                                    class="nav-link" 
                                    href="#"
                                    onclick="changeTap('production')"
                                    >Producción 
                                </a>
                            </li>
                        </ul>
                    </div>
    
                    <div class="card-body">
                        <div id="table-projection">
                            <div class="row">
                                @include('customers_releases.tabla_calculo')
                            </div>
                        </div>
                    
                        <div id="table-production" style="display: none">
                            <div class="row">
                                {{-- @include('customers_releases.tabla_calculo_produccion_en_logistica') --}}
                            </div>
                        </div>
                    </div>

                    <!-- CSRF Token -->
                    <meta name="csrf-token" content="{{ csrf_token() }}">
                    <!-- semanas Field -->
                    <div class="form-group col-sm-4">
                        {!! Form::hidden('jsonSemanas', $product->id, ['class' => 'form-control','id' => 'jsonSemanas']) !!}
                    </div>
				</div>
			</div>
		</div>
	</div>

@endsection

@push('page_scripts')
    {{-- date picker --}}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
    <script src="{{ asset('assets') }}/plugins/select2/js/select2.full.min.js"></script>    
    
    <script src=" {{ asset('assets') }}/js/mindmup-editabletable.js"></script>
    <script src=" {{ asset('assets') }}/js/validaciones.js"></script>
    <script src=" {{ asset('assets') }}/views_js/customers_releases/create.js"></script>
    
    <script>
        
        @if($release_customer->ajuste != null && $release_customer->ajuste != 1)
            let jsonSemanas = {!! $release_customer->ajuste !!};
        @else
            let jsonSemanas = [];
        @endif
        
        const url =  '{{ url('/mrp_calculo/') }}';
        const url_ajuste =  '{{ url('/') }}';

        $(document).ready(function(){

            "use strict";
            
            $('#usuarios-form').submit(function(event){
                event.preventDefault();
                aplicar_validacion(event);
            });

            $('.select_tow').select2();

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

            $('#showWeek').on('click',function(e){
                //si tenemos datos se cargan y genera el js en caso contrario se crea uno nuevo y se crea el json

                if(validarYear()){
                    // mandar a llamar a la funcion para generar el json si existe
                    getSemanas();
                }
                
            });

            editableActivar();

            @if($release_customer->ajuste  == null || $release_customer->ajuste == 1)
                crearJsonSemanas();
            @endif

            ajustarTabla();
        });

        function ajustarTabla(){
            let sidebar_hegith = $('.page-sidebar').width();
            let main_height = $('.main-wrapper').width();

            // $('.main-wrapper').css('width', `${main_height - (sidebar_hegith + 100)}px`);
            $('.main-wrapper').css('width', 'auto');
            console.log(sidebar_hegith, main_height);
            $('#sidebar-state').click(function() {
                if ($('.page-sidebar').hasClass('open')) {
                    $('.page-sidebar').removeClass('open');
                    // $('.main-wrapper').css('width', `${main_height - (sidebar_hegith + 100)}px`);
                    $('.main-wrapper').css('width', 'auto');
                } else {
                    $('.page-sidebar').addClass('open');
                    $('.main-wrapper').css('width', `100%`);
                    console.log('entra 2');
                }
            });
        }

        function getSemanas(){

            let year  = $('#year').val();    
            let week = $('#week').val();

            let acumulado = $('#acumulado').val();
            let bl = $('#bl').val();

            let product_id = $('#product_id').val();
            let llamada = `${url}/${product_id}/${year}/${week}/${acumulado}/${bl}`; 


            fetch(llamada)
            .then(response => {
                    if (!response.ok)   
                        throw new Error('error'); 
                    return response.text()
                })
            .then(data => conDatos(data))
            .catch(data =>  sinDatos());
        }

        function poner_anio(){
            let year =  $('#year').val();
            $('#btn_crear_pedido').attr('href',`{{ url('supplier_create_release/'.$product->id) }}/${year}`);
        }

        function crearJsonSemanas(){
            let semanas = [];
            for (let index = 0; index < 52; index++) {
                let aux = {
                    id: index,
                    valor: 0
                }

                semanas.push(aux);
            }

            jsonSemanas = semanas;
        }
        
        function crearJsonSemanasFromTable(){
            console.log('vamos a crar json semanas');
            let semanas = [];
            let resume_table = document.getElementById("editable");

            for (var i = 0, row; row = resume_table.rows[i]; i++) {
                //alert(cell[i].innerText);
                if(i == 2){
                    for (var j = 0, col; col = row.cells[j]; j++) {
                        //alert(col[j].innerText);
                        if(col.innerText != 'Ajuste'){
                            console.log(`Txt: ${col.innerText} \tFila: ${i} \t Celda: ${j}`);
                            let aux = {
                                id: j - 1,
                                valor: col.innerText
                            }

                            semanas.push(aux);
                        }
                    }
                }
            }

            jsonSemanas = semanas;
        }

        function actualizarJsonSemanas(id,valor){
            console.log(id, valor);
            jsonSemanas[id].valor = valor;
            console.log(jsonSemanas[id], jsonSemanas[id].valor);
        }

        function crearTablaSemanas(){
            let tabla = '<table class="table table-bordered" id="editable">';
            tabla += '<thead>';
            tabla += '<tr>';
            for (let index = 0; index < jsonSemanas.length; index++) {
                
                tabla += '<th>CW/'+index+'</th>';
                
            }
            tabla += '</tr>';
            tabla += '</thead>';
            tabla += '<tbody>';
            tabla += '<tr>';
            
            for (let index = 0; index < jsonSemanas.length; index++) {
                
                tabla += '<td id="'+jsonSemanas[index].id+'">'+jsonSemanas[index].valor+'</td>';
                
            }
            
            tabla += '</tr>';
            tabla += '</tbody>';
            tabla += '</table>';

            return tabla;
        }

        function sinDatos(){
            console.log('sin datos');
            crearJsonSemanas();
            let tablaSemanas = crearTablaSemanas();

            $('#tablaSemanas').html(tablaSemanas);
        }

        function conDatos(semanas){
            console.log('con datos');
            $('#tablaSemanas').html(semanas);

            construirDataTables('pt_mrp');
            construirDataTables('pt_mrp_cal');
            construirDataTables('mp_exposion');
            editableActivar();
            crearJsonSemanasFromTable();
        }
        
        function construirDataTables(id){
            var table = $('#'+id).DataTable({
                    "pageLength": 25
                });

            //table.destroy();

            // 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 validarYear(){
            let year  =  $('#year').val();

            if(year != '' && year != null){
                $('#year-mensaje').hide();
                return true;
            }

            $('#year-mensaje').show();
            return false;
        }

        function editableActivar(){
            $('#editable').editableTableWidget();

            $('#editable td').on('validate', function (evt, value) {
                return !isNaN(parseFloat(value)) && isFinite(value);
            });

            $('#editable td').on('change', function(evt, newValue) {
                console.log(evt.currentTarget, evt.currentTarget.tabindex ,evt.currentTarget.id ,newValue);
                actualizarJsonSemanas(evt.currentTarget.id,parseInt(newValue));
                $('#jsonSemanas').val(JSON.stringify(jsonSemanas));
            });
        }

        function aplicarAjusteDirecto(){
            let id  = {{ $release_customer->id }}
            let semanas = $('#jsonSemanas').val();
            let _token = $("meta[name='csrf-token']").attr("content");
            let llamada = `${url_ajuste}/mrp_calculo_ajuste_directo/${id}`; 

            const datos = new FormData();
            datos.append('_token', _token);
            datos.append('jsonSemanas', semanas);
        
            // mandar a llamar a la funcion para generar el json si existe
            fetch(llamada, {
                method: 'POST',
                body: datos
            }).then(response => {
                    if (!response.ok)   
                        throw new Error('error'); 
                    return response.text()
                })
            .then(data => { 
                window.location.reload() 
             })
            .catch(data =>  { 
                window.location.reload()  
            });
        }

        function aplicarAjuste(){
            let year  = $('#year').val();    
            let week = $('#week').val();

            let acumulado = $('#acumulado').val();
            let bl = $('#bl').val();
            let semanas = $('#jsonSemanas').val();
            let _token = $("meta[name='csrf-token']").attr("content");

            let product_id = $('#product_id').val();
            let llamada = `${url_ajuste}/mrp_calculo_ajuste/${product_id}/${year}/${week}`; 

            const datos = new FormData();
            datos.append('_token', _token);
            datos.append('jsonSemanas', semanas);
        
            // mandar a llamar a la funcion para generar el json si existe
            fetch(llamada, {
                method: 'POST',
                body: datos
            }).then(response => {
                    if (!response.ok)   
                        throw new Error('error'); 
                    return response.text()
                })
            .then(data => { getSemanas();  })
            .catch(data =>  { getSemanas();  });
        }

        function changeTap(selector){
            
            $('#table-production').hide();
            $('#table-projection').hide();
            
            $('#tab-production').removeClass('active');
            $('#tab-projection').removeClass('active');
            
            $('#table-' + selector).show();
            $('#tab-' + selector).addClass('active');

            console.log('entramos ' + selector);
        }


    </script>
@endpush