@extends('layouts.app')

@section('title', 'Main page')

@section('content')
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="ibox">
                <div class="ibox-content">

                    <h2>Elaborazione CTE</h2>

                    <div class="row">
                        <div class="col-sm-6 b-r">

                            <form role="form" method="post" action="/tecnico/elaborateCte" target="my_iframe">
                                {{ csrf_field() }}

                                <!-- ****** MODALITA' CONTRATTO DUAL -->
                                <div class="form-check" style="padding-left: 20px; padding-bottom: 20px;">
                                    &nbsp;<input name="cte[chk_dual]" type="checkbox" value="dual" class="i-checks"><b>
                                        &nbsp;Tipologia di contratto DUAL</b>
                                </div>

                                <div class="col-md-8">
                                    &nbsp;<input name="cte[tipologiaOfferta]" type="radio" value="STANDARD"
                                        class="i-checks" checked><b> &nbsp;Offerta STANDARD</b>
                                    &nbsp;<input name="cte[tipologiaOfferta]" type="radio" value="PEAKOFFPEAK"
                                        class="i-checks"><b> &nbsp;Offerta Peak Off Peak</b>

                                    &nbsp;<input name="cte[tipologiaOfferta]" type="radio" value="PUN"
                                        class="i-checks" style="position: absolute; opacity: 0;"><b> &nbsp;Offerta
                                        PUN</b>

                                </div>
                                <div class="col-md-4">
                                    <div class="form-group"><label>Data Scadenza</label> <input
                                            name="cte[data_scadenza]" type="date" placeholder="data scadenza"
                                            class="form-control"></div>
                                </div>



                                <div class="col-lg-4">


                                    <div class="form-group"><label>Per agente specifico</label>
                                        <select class="form-control" id="richiesta_agente" name="cte[agente]"
                                            onchange="chkAgente()">
                                            @foreach ($agenti as $agente)
                                                <option value="{{ $agente['Codice'] }}"
                                                    {{ $agente['Codice'] == '011' ? 'selected' : '' }}>
                                                    {{ $agente['Nome'] }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>

                                </div>

                                <div id="offerteGeneriche" class="col-lg-8" style="padding-top: 30px;"> 
                                    <input name="cte[condominio]" type="radio" value="nocondominio" class="i-checks"
                                        checked><b> &nbsp;Offerta Generica</b>
                                    <input name="cte[condominio]" type="radio" value="condominio" class="i-checks"><b>
                                        &nbsp;Offerta per Condominio</b>
                                </div> 

                                <div id="offerteRenditaEnergia" class="col-lg-6" style="display: none; padding-top: 30px;">
                                    &nbsp;<input name="cte[rendita]" type="radio" value="renditaResidenziale"
                                        class="i-checks" checked><b> &nbsp;Offerta Residenziale</b>
                                    &nbsp;<input name="cte[rendita]" type="radio" value="renditaBusiness"
                                        class="i-checks"><b> &nbsp;Offerta Business</b>
                                </div>

                                <div id="trio_block">
                                    <div class="col-md-12">
                                        <div class="form-group"><label>Codice Offerta Trio</label> <input
                                                name="cte[codiceOfferta_Trio]" type="text" placeholder="codice offerta trio"
                                                class="form-control"></div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group"><label id="prezzo_f1">Prezzo F1</label> <input
                                                name="cte[f1]" type="text" placeholder="importo f1" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group"><label id="prezzo_f2">Prezzo F2</label> <input
                                                name="cte[f2]" type="text" placeholder="importo f2" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group"><label id="prezzo_f3">Prezzo F3</label> <input
                                                name="cte[f3]" type="text" placeholder="importo f3" class="form-control">
                                        </div>
                                    </div>
                                </div>

                                <div id="bioraria_block" style="display:none">
                                    <div class="col-md-12">
                                        <div class="form-group"><label>Codice Offerta PeakOffPeak</label> <input
                                                name="cte[codiceOfferta_Bio]" type="text"
                                                placeholder="codice offerta peak off peak" class="form-control"></div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group"><label>Picco</label> <input name="cte[peak]"
                                                step="0.0001" type="number" placeholder="picco" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group"><label>Fuori Picco</label> <input name="cte[offpeak]"
                                                step="0.0001" type="number" placeholder="fuori picco"
                                                class="form-control"></div>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="form-group"><label>Codice Offerta Monorario EE</label> <input
                                            name="cte[codiceOfferta_EE_Mono]" type="text" placeholder="codice offerta trio"
                                            class="form-control"></div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group"><label>Codice Offerta Monorario Gas</label> <input
                                            name="cte[codiceOfferta_GAS_Mono]" type="text" placeholder="codice offerta trio"
                                            class="form-control"></div>
                                </div>

                                <div class="col-md-6">
                                    <div class="form-group"><label id="prezzo_f0">Prezzo Mono Energia</label> <input
                                            name="cte[f0EE]" type="text" placeholder="importo monorario energia"
                                            class="form-control"></div>
                                </div>

                                <div class="col-md-6">
                                    <div class="form-group"><label id="prezzo_f0_gas">Prezzo Mono Gas</label> <input
                                            name="cte[f0GAS]" type="text" placeholder="importo monorario Gas"
                                            class="form-control"></div>
                                </div>

                                <div class="col-md-12">

                                    <div class="form-group">
                                        <label>Note</label>
                                        <textarea id="note" class="form-control" name="cte[note]" rows="4" cols="50" style="resize:none;"></textarea>
                                        <div class="theCount">Lines used: <span id="linesUsed"></span></div>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <button class="btn btn-sm btn-primary pull-right m-t-n-xs"
                                        type="submit"><strong>Elabora</strong></button>
                                </div>

                            </form>
                        </div>
                        <div class="col-sm-6">
                            <iframe height="700" width="100%" frameBorder="0" name="my_iframe" src=""></iframe>
                        </div>


                    </div>




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

    </div>
    </div>
    </div>
@endsection

@section('scripts')
    <script>
        function chkAgente() {
            if ($('[name="cte[agente]"]').val() == '020') {
                $('#offerteGeneriche').hide();
                $('#offerteRenditaEnergia').show();
            } else {
                $('#offerteGeneriche').show();
                $('#offerteRenditaEnergia').hide();
            }
        }


        $(document).ready(function() {


            $('input[name="cte[tipologiaOfferta]"]').on('ifClicked', function(event) {

                switch (this.value) {
                    case "STANDARD":
                        $('[name="cte[peak]"]').val('');
                        $('[name="cte[offpeak]"]').val('');
                        $('#trio_block').fadeIn();
                        $('#bioraria_block').hide()
                        $('#prezzo_f1').html('Prezzo F1');
                        $('#prezzo_f2').html('Prezzo F2');
                        $('#prezzo_f3').html('Prezzo F3');
                        $('#prezzo_f0').html('Prezzo Mono Energia');
                        $('#prezzo_f0_gas').html('Prezzo Mono Gas');
                        break;
                    case "PEAKOFFPEAK":
                        $('[name="cte[f1]"]').val('');
                        $('[name="cte[f2]"]').val('');
                        $('[name="cte[f3]"]').val('');
                        $('#trio_block').hide();
                        $('#bioraria_block').fadeIn();
                        break;
                    case "PUN":
                        $('[name="cte[peak]"]').val('');
                        $('[name="cte[offpeak]"]').val('');
                        $('#trio_block').fadeIn();
                        $('#bioraria_block').hide();
                        $('#prezzo_f1').html('Spread F1');
                        $('#prezzo_f2').html('Spread F2');
                        $('#prezzo_f3').html('Spread F3');
                        $('#prezzo_f0').html('Spread F0');
                        $('#prezzo_f0_gas').html('Spread F0 Gas');
                        break;
                }


                //$('[name="cte[tipologiaOfferta]"]').val('PEAKOFFPEAK');
            });

            /*
                    $('input').on('ifUnchecked', function (event) {
                        $('[name="cte[peak]"]').val('');
                        $('[name="cte[offpeak]"]').val('');
                        $('#trio_block').fadeIn();
                        $('#bioraria_block').hide();
                        $('[name="cte[tipologiaOfferta]"]').val('STANDARD');
                    });*/

            var lines = 4;
            var linesUsed = $('#linesUsed');

            $('#note').keydown(function(e) {

                if (e.keyCode == 13 && newLines >= lines) {
                    linesUsed.css('color', 'red');
                    return false;
                }
            });
            $('#note').keyup(function(e) {

                newLines = $(this).val().split("\n").length;
                linesUsed.text(newLines);

                if (e.keyCode == 13 && newLines >= lines) {
                    linesUsed.css('color', 'red');
                    return false;
                } else {
                    if (e.keyCode == 8 && newLines < lines) {
                        linesUsed.css('color', '');
                    }
                }
            });
            $('#note').on("click", function(e) {

                newLines = $(this).val().split("\n").length;
                linesUsed.text(newLines);

                if (e.keyCode == 13 && newLines >= lines) {
                    linesUsed.css('color', 'red');
                    return false;
                } else {
                    if ((e.keyCode == 8 || e.keyCode == 18) && newLines < lines) {
                        linesUsed.css('color', '');
                    }
                }
            });
        });
    </script>
@endsection