@extends('layouts.app')

@push('head-scripts')

<style>
    fieldset {
        border: 1px solid #ccc;
        padding: 10px;
    }
    
    fieldset legend {
        background-color: #d4f1f9; /* Colore celeste */
        color: #333; /* Testo scuro per contrasto */
        padding: 5px 10px;
        border-radius: 5px;
        font-size: 1.2em; /* Dimensione del font non troppo grande */
    }
    fieldset legend.dettaglioPrezzi {
        background-color: #1ec812; /* Colore celeste */
        color: #333; /* Testo scuro per contrasto */
        padding: 5px 10px;
        border-radius: 5px;
        font-size: 1.2em; /* Dimensione del font non troppo grande */
    }
</style>

@endpush 

<meta name="csrf-token" content="{{ csrf_token() }}">   

@section('content')

@php
         //dd($tipiProdotto);
@endphp

  
<section class="section contact">
    <div class="row justify-content-left">
        <div class="col-md-12">
            <!-- Prima barra comandi divisa -->
            <div class="row">
                <div class="col-md-4 d-flex justify-content-end">
                    <!-- Parte della barra comandi di 4 colonne -->
                    <button id="calcolaCosti" class="btn btn-primary calcolaCosto">Calcola</button>
                </div>
    
                <div class="col-md-8 d-flex justify-content-end">
                    <!-- Parte della barra comandi di 8 colonne, bottoni allineati a destra -->
                    <button class="btn btn-secondary me-2 salvaCosto" >Salva</button>
                    <button class="btn btn-success">Comando 3</button>
                </div>
            </div>
    
            <!-- Seconda barra (div) con uguali dimensioni -->
            <div class="row mt-3">
                <div class="col-md-4">
                    <div class="bg-light p-2">
                        <!-- Form per validazione e invio via AJAX -->
                        <form id="productForm">
                            <!-- Fieldset per Info Generali sul Prodotto -->
                            <fieldset>
                                <legend>Info generali sul prodotto/formato/copie</legend>
                    
                                <div class="row">
                                    <!-- Select Tipo Prodotto -->
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="tipoProdottoSelect">Tipo Prodotto</label>
                                            <select id="tipoProdottoSelect" name="tipoProdotto" class="form-control" required>
                                                <option value="">Tipo Prodotto</option>
                                                @foreach ($tipiProdotto as $tipoProdotto)
                                                    <option value="{{ $tipoProdotto->id }}">{{ $tipoProdotto->nome }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                    
                                    <!-- Select Prodotto Tipografico -->
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="prodottoTipograficoSelect">Prodotto</label>
                                            <select id="prodottoTipograficoSelect" name="prodottoTipografico" class="form-control" required>
                                                <option value="">Prodotto</option>
                                            </select>
                                        </div>
                                    </div>
                    
                                    <!-- Select Formati Disponibili -->
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="formatiDisponibiliSelect">Formato finito</label>
                                            <select id="formatiDisponibiliSelect" name="formatoFinito" class="form-control" required>
                                                <option value="">Formato</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                    
                                <!-- Inputs per Numero Copie e Numero Soggetti -->
                                <div class="row mt-3">
                                    <!-- Input Numero Copie -->
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="numeroCopie">Numero Copie</label>
                                            <input type="number" id="numeroCopie" name="numeroCopie" class="form-control" min="1" value=1 placeholder="N° Copie" required>
                                        </div>
                                    </div>
                    
                                    <!-- Input Numero Soggetti -->
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="numeroSoggetti">Numero Soggetti</label>
                                            <input type="number" id="numeroSoggetti" name="numeroSoggetti" class="form-control" min="1" value=1 placeholder="N° Soggetti" required>
                                        </div>
                                    </div>
                                </div>
                            </fieldset>
                    
                            <!-- Fieldset per Info Stampa Prodotto -->
                            <br>
                            <fieldset>
                                <legend>Info generali sulla stampa</legend>
                    
                                <div class="row">
                                    <!-- Select Tipo Supporto -->
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="supportiDisponibiliSelect">Tipo Supporto</label>
                                            <select id="supportiDisponibiliSelect" name="tipoSupporto" class="form-control" required>
                                                <option value="">Tipo Supporto</option>
                                            </select>
                                        </div>
                                    </div>
                    
                                    <!-- Select Grammatura -->
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="grammatureDisponibiliSelect">Gr.</label>
                                            <select id="grammatureDisponibiliSelect" name="grammatura" class="form-control" required>
                                                <option value="">Gr.</option>
                                            </select>
                                        </div>
                                    </div>
                    
                                    <!-- Select Tipo stampa -->
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="tipiStampaDisponibiliSelect">Tipo stampa</label>
                                            <select id="tipiStampaDisponibiliSelect" name="tipoStampa" class="form-control" required>
                                                <option value="">Tipo Stampa</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </fieldset>
                    
                        </form>
                    </div>
                    
                </div>
    
                <div class="col-md-8">
                    <!-- Div sotto la seconda parte della barra comandi -->
                    <div class="bg-light p-2">
                        
                            <!-- Fieldset per Dettaglio prezzi -->
                            <fieldset>
                                <legend class="dettaglioPrezzi">Dettaglio prezzi</legend>
                            </fieldset>
                            <br>
                            <!-- Fieldset per Elaborazione stampa -->
                            <fieldset>
                                <legend>Elaborazione stampa</legend>
                                <div>
                                    {{-- <table
                                            
                                                width                         = "100%"
                                                id                            = "tabellaMacchineStampa"
                                                class                         = "table table-sm"  
                                                data-toggle				      = "table"
                                                data-detail-view			  = true
                                                data-response-handler		  = "responseHandler"
                                                data-click-to-select          = true
                                                data-single-select            = true
                                        >
                                    </table> --}}
                                </div>
                            </fieldset>
                            <br>
                            <!-- Fieldset per Dettaglio prezzi -->
                            <fieldset>
                                <legend>Elaborazione Accessori</legend>
                            </fieldset>
                            <br>
                            <fieldset>
                                <legend>Elaborazione Nobilitazioni</legend>
                            </fieldset>
                            <br>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
</section>

@endsection


@push('scripts')

  <script>

    var $tabellaMacchineStampa = jQuery('#tabellaMacchineStampa');

    function initTabellaMacchineStampa(dataDefault=""){

                $tabellaMacchineStampa.bootstrapTable('destroy').

                bootstrapTable({

                            {!! $colonneTabellaMacchine !!},
                            
                            locale          : "it-IT",

                            onCheck         : function (row, $index) {
                                                                        
                            },

                            onLoadSuccess       : function(data){
                            },

                });

    }

    jQuery(document).on('click', '.calcolaCosto, .salvaCosto', function() {

        if ($(this).hasClass('calcolaCosto')) {
            
            var form = $('#productForm');
        
            if (form[0].checkValidity()) {
                var formData = new FormData(form[0]);

                fetch('{{route("calcoloProdottoTipografico")}}', {
                                    method      : 'POST',
                                    body        : formData,
                                    headers     : {
                                                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                    }
                })
                .then(response => {
                                    if (!response.ok) {
                                        throw new Error('Errore durante l\'invio del form');
                                    }
                                    return response.json(); // o response.text(), a seconda del tipo di risposta
                })
                .then(data => {
                                    // Gestisce la risposta dal server
                                    alert("Form inviato con successo!");
                                    console.log(data);
                })
                .catch(error => {
                                    // Gestisce l'errore
                                    alert("Errore durante l'invio del form.");
                                    console.error('Errore:', error);
                });
                
            } else {
                // Mostra un messaggio o esegui altre azioni se il form non è valido
                form[0].reportValidity(); // Mostra i messaggi di errore sui campi non validi
            }
        } else if ($(this).hasClass('salvaCosto')) {
            alert("salva costo");
        }
    });

    jQuery(document).ready(function() {
        // Quando cambia il tipo di prodotto
        jQuery('#tipoProdottoSelect').change(function() {
            var tipoProdottoId = jQuery(this).val();

            jQuery('#prodottoTipograficoSelect').empty().append('<option value="">Prodotto</option>');
            jQuery('#formatiDisponibiliSelect').empty().append('<option value="">Formato</option>');
            jQuery('#supportiDisponibiliSelect').empty().append('<option value="">Tipo supporto</option>');
            jQuery('#grammatureDisponibiliSelect').empty().append('<option value="">Gr.</option>');
            jQuery('#tipiStampaDisponibiliSelect').empty().append('<option value="">Tipo Stampa</option>');

            if (tipoProdottoId) {
                                
                                    fetch(`{{ route('getProdottiTipo', '') }}/${tipoProdottoId}`)
                                        .then(response => response.json())
                                        .then(data => {
                                            data.forEach(prodotto => {
                                                jQuery('#prodottoTipograficoSelect').append(`<option value="${prodotto.id}">${prodotto.nome}</option>`);
                                            });
                                        })
                                        .catch(error => console.error('Errore:', error));
            }
        });

        // Quando cambia il prodotto tipografico
        jQuery('#prodottoTipograficoSelect').change(function() {
            var prodottoTipograficoId = jQuery(this).val();

            jQuery('#formatiDisponibiliSelect').empty().append('<option value="">Formato</option>');
            jQuery('#supportiDisponibiliSelect').empty().append('<option value="">Tipo supporto</option>');
            jQuery('#grammatureDisponibiliSelect').empty().append('<option value="">Gr.</option>');
            jQuery('#tipiStampaDisponibiliSelect').empty().append('<option value="">Tipo Stampa</option>');

            if (prodottoTipograficoId) {
                // Richiedi i formati disponibili usando Fetch
                fetch(`{{ route('getProdottiTipoFormati', '') }}/${prodottoTipograficoId}`)
                    .then(response => response.json())
                    .then(data => {
                        console.log(data)
                        data.formatiDisponibili.forEach(formato => {
                            jQuery('#formatiDisponibiliSelect').append(`<option value="${formato.id}">${formato.nome}</option>`);
                        });
                        data.supportiDisponibili.forEach(supporto => {
                            jQuery('#supportiDisponibiliSelect').append(`<option value="${supporto.id}">${supporto.nome}</option>`);
                        });
                    })
                    .catch(error => console.error('Errore:', error));
            }
        });

        // Quando cambia il supporto
        jQuery('#supportiDisponibiliSelect').change(function() {

            var idProdotto = jQuery("#prodottoTipograficoSelect").val();
            var idSupporto = jQuery(this).val();

            jQuery('#grammatureDisponibiliSelect').empty().append('<option value="">Gr.</option>');
            jQuery('#tipiStampaDisponibiliSelect').empty().append('<option value="">Tipo Stampa</option>');
            if (idSupporto) {
                // Richiedi le grammature disponibili usando Fetch
                fetch(`{{ url('getGrammatureSupporti') }}/${idProdotto}/${idSupporto}`)

                    .then(response => response.json())
                    .then(data => {
                        console.log(data)
                        data.grammatureDisponibili.forEach(grammatura => {
                            jQuery('#grammatureDisponibiliSelect').append(`<option value="${grammatura.id}">${grammatura.nome}</option>`);
                        });
                    })
                    .catch(error => console.error('Errore:', error));
            }
        });

        // Quando cambia il tipoStampa
        jQuery('#supportiDisponibiliSelect').change(function() {

            var idProdotto      = jQuery("#prodottoTipograficoSelect").val();
            var idTipoStampa    = jQuery(this).val();

            jQuery('#tipiStampaDisponibiliSelect').empty().append('<option value="">Tipo Stampa</option>');
            if (idTipoStampa) {
                fetch(`{{ url('getTipiStampa') }}/${idProdotto}`)

                    .then(response => response.json())
                    .then(data => {
                        console.log(data)
                        data.tipiStampaDisponibili.forEach(tipoStampa => {
                            jQuery('#tipiStampaDisponibiliSelect').append(`<option value="${tipoStampa.id}">${tipoStampa.nome}</option>`);
                        });
                    })
                    .catch(error => console.error('Errore:', error));
            }
        });

        //initTabellaMacchineStampa(dataDefault="");
    });


  </script>

@endpush