@extends('layouts.app')

@section('content')
    <style>
        .modal-dialog,
        .modal-content {
            /* 80% of window height */
            height: 65%;
        }

        .modal-body {
            /* 100% = dialog height, 120px = header + footer */
            max-height: calc(100% - 120px);
            overflow-y: scroll;
        }
        .a:link {
            color: white;
        }

        /* visited link */
        .a:visited {
            color: white;
        }

        /* mouse over link */
        .a:hover {
            color: white;
        }

        /* selected link */
        .a:active {
            color: white;
        }
    </style>

    <div style="margin-top:20px " class="container">
        <input type="hidden" id="codice_macchina" value="{{$codice_macchina}}">
        <div class="row justify-content-center">
            <div class="col-md-12">

                            <!-- Modal -->
                @foreach($dati_tracciatura as $key=> $dato)
                <div class="modal fade bd-example-modal-lg" id="{{$key}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true" data-keyboard="false" data-backdrop="static">
                    <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
                        <div class="modal-content">

                            <div class="modal-body">

                                <div class="alert alert-success text-center col-md-6 offset-md-3" style="margin-top: 75px;" role="alert">
                                    <h2 class="alert-heading"><b></b></h2>
                                </div>
                                <div class="form-group col-md-6 offset-md-3">
                                    <input type="text" nome_barcode="{{$dato}}" autofocus class="form-control input-lg" id="barcode_{{$dato}}" placeholder="CODICE">
                                </div>
                            </div>
                            <div class="modal-footer">

                                    <button type="button" class="btn btn-danger mr-auto"><a class="text-white a" href="/assemblatore">Termina inserimento</a></button>
                                @if(($count_tracciatura)==$i)
                                    <button type="button" id="chiudi_modale{{$key}}" class="btn btn-success">
                                        {{--<a href="/scheda_tracciamento/{{$codice_macchina}}" id="tracciamento" class="a">VEDI SCHEDA TRACCIAMENTO</a>--}}
                                        <a href="/assemblatore/" id="tracciamento" class="a">TERMINA TRACCIAMENTO</a>
                                    </button>
                                @else
                                    <button type="button" id="chiudi_modale{{$key}}" class="btn btn-success" data-dismiss="modal" onclick="attiva_modale({{$key}},'barcode_{{$dato}}')">CONTINUA</button>
                                @endif
                             </div>
                        </div>
                    </div>
                </div>
                                   @endforeach
            </div>
        </div>
    </div>


@endsection

@section("myscript")

    <script>
        function sleep(milliseconds) {
            const date = Date.now();
            let currentDate = null;
            do {
                currentDate = Date.now();
            } while (currentDate - date < milliseconds);
        }
        $(document).ready(function () {

            $('#0').modal('show');
            $('.modal').on('shown.bs.modal', function() {
                $(this).find('[autofocus]').focus();
            });

        });


        @foreach($dati_tracciatura as $key=> $dato)
        $("#barcode_{{$dato}}").change( function(e){
            // access the clipboard using the api
            var pastedData =  $("#barcode_{{$dato}}").val();
            console.log(pastedData);

            let nome_barcode = $("#barcode_{{$dato}}").attr("nome_barcode");
            var data = {
                _token: "{{ csrf_token() }}",
                nome_barcode: nome_barcode,
                nome_macchina: $("#codice_macchina").val(),
                valore_barcode: pastedData
            };
            $.ajax({
                type: "POST",
                url: '/salva_barcode',
                dataType: "json",
                data: data,
                success: function (data)
                {
                    if (data.status == '200') {
                        console.log('updated');
                    }
                },
                error: function(data)
                {
                    console.log(data);
                }
            });
            $("#chiudi_modale{{$key}}").focus();
            $("#chiudi_modale{{$key}}").click();
        } );

        @endforeach
        function attiva_modale(key,nome) {
            // access the clipboard using the api
            var pastedData = $("#" + nome).val();

            sleep(500);
            let nome_barcode = $("#" + nome).attr("nome_barcode");
            var data = {
                _token: "{{ csrf_token() }}",
                nome_barcode: nome_barcode,
                nome_macchina: $("#codice_macchina").val(),
                valore_barcode: pastedData
            };
            if(pastedData!==""){
            $.ajax({
                type: "POST",
                url: '/salva_barcode',
                dataType: "json",
                data: data,
                success: function (data)
                {
                    if (data.status == '200') {
                        console.log('updated');
                    }
                },
                error: function(data)
                {
                    console.log(data);
                }
            });
            }
            $("#chiudi_modale{{$key}}").focus();
            sleep(500);
            let p = key + 1;
            $("#"+p).modal('show');
        }

    </script>

@endsection