@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 Releases 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>Ajustar Releases Cliente</h1>
                </div>
            </div>
        </div>
    </section>

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

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

        <div class="card">

            {!! Form::model($release_customer, ['route' => ['releases_customers.update', $release_customer->id], 'method' => 'patch']) !!}

            <div class="card-body">
                <div class="row">
                    @include('customers_releases.fields')
                </div>
            </div>

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

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

        </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>
        var jsonSemanas = [];
        const url =  '{{ url('/get_json_semanas/') }}';

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

            // $('#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
            //     $('.tituloSemanaAnterior').hide();
            //     $('.tituloSemanaSeleccionada').hide();
            //     $('#tablaSemanasAnterior').html('');
            //     $('#tituloSemanaSeleccionada').html('');

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

            //         let product_id = $('#product_id').val();

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

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

            $('#week').trigger('change');
            changeSemana();

            $('#jsonSemanas').val(JSON.stringify(jsonSemanas));
            //ajustarTabla();
        });

        function changeSemana(){
            console.log('vamos a cambiar');
            let week = $('#week').val();
            let year  =  $('#year').val();    
            let product_id = $('#product_id').val();

            desactivarSemanas();

            if(week > 1){
                if(validarYear()){
                    let llamada = `${url}/${product_id}/${year}/${week-1}`; 
                    getSemanas(week - 1, llamada, 'tablaSemanasAnterior', 'sin_edicion');
                }
            }

            let llamada = `${url}/${product_id}/${year}/${week}`; 
            getSemanas(week, llamada, 'tablaSemanas', 'con_edicion');
            activarSemanas(week);

            //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`);
            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`);
                } else {
                    $('.page-sidebar').addClass('open');
                    $('.main-wrapper').css('width', `100%`);
                    console.log('entra 2');
                }
            });
        }

        function desactivarSemanas(){
            $('.tituloSemanaAnterior').hide();
            $('.tituloSemanaSeleccionada').hide();
            $('#tablaSemanasAnterior').html('');
            $('#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 - 1; index < 52; index++) {
                
                tabla += '<th>CW/'+(index + 1)+'</th>';
                
            }
            tabla += '</tr>';
            tabla += '</thead>';
            tabla += '<tbody>';
            tabla += '<tr>';
            
            for (let index = week - 1; 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));

                if(modo != 'sin_edicion')
                    $('#jsonSemanas').val(JSON.stringify(jsonSemanas));

            });

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

            jsonSemanas = semanas.data;
            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));
            });

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

    </script>
@endpush