@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('/releases_customers'); }}">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>
                    <h3></h3>
                </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' => 'releases_customers.store', 'files' => 'true', 'id' => 'customers-form' ])!!}
                    <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>
        <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/') }}';

            @if( $boms->count() > 0 )
                console.log('Bom existente' );
            @else
                console.log('Bom no existente' );
                $('#createValidacion').modal({backdrop: 'static', keyboard: false });
                $('#createValidacionTitle').text('Validación de Bom existente:');
                $('.modal-body .modal-title:nth-child(1)').hide();
                $('.modal-body .modal-title').text('No contamos con Bom existente.');
                $('.modal-body .total_cantidad').text('');
                $('#form_create .btn-primary').text('Ir a Boms');
            
                $('#createValidacion').modal('show');
            @endif  

            $('.btn-secondary').on('click', function(){
                location.href="{{ route('releases_customers.index') }}";
            });

            $('#form_create').submit(function(event){
                event.preventDefault();
                console.log('llegando');
                location.href="{{ route('boms.create') }}";
            });

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

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

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

                    activarSemanas(week);
                    ajustarTabla();
                });

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

            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));

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

                });

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

            }

            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 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');
                    }
                });
            }
        </script>
@endpush