@extends('layouts.app')


@push('page_css')
    <link href="{{ asset('assets') }}/plugins/select2/css/select2.min.css" rel="stylesheet">
@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('/supplierReleases'); }}">Listado pedidos proveedor</a></li>
            <li class="breadcrumb-item active" aria-current="page">Crear pedido</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>Pedido Proveedor</h1>
            </div>
        </div>
    </div>
</section>

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

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

            <div class="card">

                {!! Form::open(['route' => 'supplierReleases.store']) !!}

                    <div class="card-body">

                        <div class="row">
                            @include('supplier_releases.fields')
                        </div>

                    </div>

                    <div class="card-footer">
                        {!! Form::submit('Guardar', ['class' => 'btn btn-primary']) !!}
                        <a href="{{ route('supplierReleases.index') }}" class="btn btn-default">Cancelar</a>
                    </div>

                {!! Form::close() !!}

            </div>
        </div>
    </div>

    <livewire:modal-validacion/>
    
</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>
        let jsonSemanas = [];
        const url =  '{{ url('/get_json_semanas_materia/') }}';
        const url_calculado =  '{{ url('/get_json_semanas_materia_calculado/') }}';
        
        let ajustarTablaFlag = false;

        $(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
            });

            $('.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
            });

            $('#week').on('change',function(){
                console.log('vamos a cambiar');
                let week = $('#week').val();
                desactivarSemanas();

                sinDatos(week,'tablaSemanas', 'con_edicion');

                activarSemanas(week);
                if(!ajustarTablaFlag){
                    ajustarTabla();
                    ajustarTablaFlag = 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
                desactivarSemanas();

                if(validarYear()){
                    let year  =  $('#year').val();    
                    let week = $('#week').val();
                    let row_materials_id = $('#row_materials_id').val();

                    // mandar a llamar a la funcion para generar el json si existe
                    
                    if(week > 1){
                        $('.tituloSemanaAnterior').show();
                        let llamada = `${url}/${row_materials_id}/${year}/${week-1}`; 
                        getSemanas(week - 1, llamada, 'tablaSemanasAnterior', 'sin_edicion');
                    }

                    let llamada = `${url}/${row_materials_id}/${year}/${week}`; 
                    $('.tituloSemanaSeleccionada').show();
                    getSemanas(week, llamada, 'tablaSemanas', 'con_edicion');
                }
                
            });

            
        });

        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 desactivarSemanas(){
            $('.tituloSemanaSeleccionada').hide();
            $('#tituloSemanaSeleccionada').html('');
        }

        function activarSemanas(week){
            if(week != 1){
                $('.tituloSemanaAnterior').show();
            }
            
            $('.tituloSemanaSeleccionada').show();
        }

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

            jsonSemanas = semanas;
            console.log(semanas);
        }

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

        function crearTablaSemanas(week,modo){
            let tabla = '<table class="table table-bordered"'+ (modo == 'sin_edicion'? '>': 'id="editable">');
            tabla += '<thead>';
            tabla += '<tr>';
            for (let index = week; index <= 52; index++) {
                
                tabla += '<th>CW/'+(index)+'</th>';
                
            }
            tabla += '</tr>';
            tabla += '</thead>';
            tabla += '<tbody>';
            tabla += '<tr>';
            
            for (let index = week; index < 52; index++) {
                
                tabla += '<td id="'+jsonSemanas[index].id+'">'+jsonSemanas[index].valor+'</td>';
                
            }
            
            tabla += '</tr>';
            tabla += '</tbody>';
            tabla += '</table>';

            return tabla;
        }

        function sinDatos(week, contenedor, modo){
            
            crearJsonSemanas(week);
            let tablaSemanas = crearTablaSemanas(week, modo);

            $('#'+contenedor).html(tablaSemanas);
            $('#editable').editableTableWidget();
    

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


            $('#editable td').on('change', function(evt, newValue) {
                
                actualizarJsonSemanas(evt.currentTarget.id,parseInt(newValue));

                $('#jsonSemanas').val(JSON.stringify(jsonSemanas));

            });

            $('#jsonSemanas').val(JSON.stringify(jsonSemanas));
        }
        
        function conDatos(semanas, week, contenedor,modo){

            console.log(semanas);

            jsonSemanas = semanas.data;
            $('#jsonSemanas').val(JSON.stringify(jsonSemanas));
            
            console.log(semanas, semanas.data);
            let tablaSemanas = crearTablaSemanas(week, modo);

            $('#'+contenedor).html(tablaSemanas);
            $('#editable').editableTableWidget();

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

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

        }

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

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

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

        function getSemanas(week, llamada, contenedor, modo){
            fetch(llamada)
                    .then(response => {
                            if (!response.ok)   
                                throw new Error('error'); 
                            return response.json()
                        })
                    .then(data => conDatos(data, week, contenedor,modo))
                    .catch(data =>  sinDatos(week, contenedor,modo));
        }

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

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

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

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

            
            let llamada = `${url_calculado}/${row_materials_id}/${year}/${week}`; 
            $('.tituloSemanaSeleccionada').show();
            getSemanas(week, llamada, 'tablaSemanas', 'con_edicion');
        }
</script>
@endpush