@extends('layout')


@section('content')
    <script type="text/javascript">
        $(document).ready(function(){

            $('.datepicker').datepicker({
                dateFormat: "dd-mm-yy",
            });
            $('input').keyup(function (e) {
                if (e.which == 39) { // right arrow
                    $(this).closest('td').next().find('input').focus();

                } else if (e.which == 37) { // left arrow
                    $(this).closest('td').prev().find('input').focus();

                } else if (e.which == 40) { // down arrow
                    $(this).closest('tr').next().find('td:eq(' + $(this).closest('td').index() + ')').find('input').focus();

                } else if (e.which == 38) { // up arrow
                    $(this).closest('tr').prev().find('td:eq(' + $(this).closest('td').index() + ')').find('input').focus();
                }
            });
        });
    </script>
    <style>
        .sticky-top{
            z-index: 100!important;
        }
        .ui-autocomplete-loading {
            background: white url("/image/loader.gif") right center no-repeat;
        }
    </style>
    @if (\Session::has('success'))
        <div class="alert alert-success">
            <p>{{ \Session::get('success') }}</p>
        </div><br />
    @elseif(\Session::has('error'))
        <div class="alert alert-danger">
            <p>{{ \Session::get('error') }}</p>
        </div><br />
    @endif

    <form method="post" action="{{action('RemainedController@updateClone', $id)}}">
        @csrf
        <nav class="navbar navbar-light bg-light sticky-top">
            <h2>Clona Modello Rimasto <button type="submit" class="btn btn-success float-right">Clona</button></h2>
            <input type="hidden" name="model_id" value="{{$remained->_id}}">
        </nav>
        <div class="row">

            <div class="form-group col-md-4">
                <label class="col-form-label" for="name">Name:</label>
                <input type="text" class="form-control" name="name" value="{{$remained->name}}">
            </div>


            <div class="form-gorup col-4">
                <label class="col-form-label" for="name">CCO di riferimento:</label>
                <select class="form-control" name="cco_start">
                    <option value="-1">Scegli</option>
                    @foreach($cco as $ccoitem)
                        @if($ccoitem->descr_mag == $remained->cco_start)
                            <option selected value="{{$ccoitem->descr_mag}}">{{$ccoitem->descr_mag}}</option>
                        @else
                            <option value="{!! $ccoitem->descr_mag !!}">{{$ccoitem->descr_mag}}</option>
                        @endif
                    @endforeach
                </select>
            </div>
        </div>

        <div class="row">
            <div class="form-group col-md-12">
                <label for="name">Giorni consegna:</label>
                <br>
                <label for="name">Lunedì:</label>
                <input type="checkbox" class="form-check-inline" name="dayweek[0]" @if(isset($remained->daysweek[0]) && $remained->daysweek[0]==1){{'checked'}}@endif value="1" />
                <label for="name">Martedì:</label>
                <input type="checkbox" class="form-check-inline" name="dayweek[1]" @if(isset($remained->daysweek[1]) && $remained->daysweek[1]==1){{'checked'}}@endif value="1" />
                <label for="name">Mercoledì:</label>
                <input type="checkbox" class="form-check-inline" name="dayweek[2]" @if(isset($remained->daysweek[2]) && $remained->daysweek[2]==1){{'checked'}}@endif value="1"/>
                <label for="name">Giovedì:</label>
                <input type="checkbox" class="form-check-inline" name="dayweek[3]" @if(isset($remained->daysweek[3]) && $remained->daysweek[3]==1){{'checked'}}@endif value="1"/>
                <label for="name">Venerdì:</label>
                <input type="checkbox" class="form-check-inline" name="dayweek[4]" @if(isset($remained->daysweek[4]) && $remained->daysweek[4]==1){{'checked'}}@endif value="1"/>
                <label for="name">Sabato:</label>
                <input type="checkbox" class="form-check-inline" name="dayweek[5]" @if(isset($remained->daysweek[5]) && $remained->daysweek[5]==1){{'checked'}}@endif value="1"/>
                <label for="name">Domenica:</label>
                <input type="checkbox" class="form-check-inline" name="dayweek[6]" @if(isset($remained->daysweek[6]) && $remained->daysweek[6]==1){{'checked'}}@endif value="1"/>
            </div>
        </div>


        <div class="row">
                <div class="form-group col-md-12">
                    <h3>Sottomagazzini <a href="#" id="btn-add-submagazine" class="btn btn-sm btn-primary">Aggiungi Sottomagazzino</a></h3>
                    <table id="tb-submagazine" class="table table-sm">
                        <thead>
                        <tr>
                            <th style="width: 50%">Nome Sottomagazzino</th>
                            <th style="width: 10%">Order</th>
                            <th>Colore</th>
                        </tr>
                        </thead>
                        <tbody>
                        @if($remained->submagazine)
                            @foreach($remained->submagazine as $magazine)

                                    @php
                                        if(isset($color)){
                                            $color = $color;
                                        }
                                        else{
                                            $color='';
                                        }
                                    @endphp

                                <tr>
                                    <td><input type="text" class="form-control form-control-sm" name="submagazine[]" value="{{$magazine['name']}}"/></td>
                                    <td><input type="number" step="any" class="form-control form-control-sm" name="ordersubmagazine[]" value="{{$magazine['order']}}"/></td>
                                    <td>
                                        <select name="colorsubmagazine[]" class="sel-color @if($color) {{ 'table-'.$color }} @endif ">
                                            <option value="-1" class="table-primary">scegli colore</option>
                                            <option value="primary" @if($color=='primary') {{ 'selected' }}@endif class="table-primary">primary</option>
                                            <option value="secondary" @if($color=='secondary') {{ 'selected' }}@endif class="table-secondary">secondary</option>
                                            <option value="dark" @if($color=='dark') {{ 'selected' }}@endif class="table-dark">dark</option>
                                            <option value="success" @if($color=='success') {{ 'selected' }}@endif class="table-success">success</option>
                                            <option value="warning" @if($color=='warning') {{ 'selected' }}@endif class="table-warning">warning</option>
                                            <option value="danger" @if($color=='danger') {{ 'selected' }}@endif class="table-danger">danger</option>
                                            <option value="info" @if($color=='info') {{ 'selected' }}@endif class="table-info">info</option>
                                        </select>
                                    </td>
                                    <td><a href="#" class="btn-delete btn btn-sm btn-danger">delete</a></td>
                                </tr>
                            @endforeach
                        @endif
                        </tbody>
                    </table>
                </div>
        </div>

        <div class="row">

            <table class="tb-articles table-striped table-sm table">
                <thead>
                <tr>
                    <th style="width: 20%" class="print-column-article">Articolo</th>
                    <th style="width: 25%">Fornitore</th>
                    <th style="width: 5%">UM</th>
                    <th style="width: 10%">Codice</th>
                    <th style="width: 20%">Sottofamiglia</th>
                    <th style="width: 10%">Order</th>
                    <th style="width: 10%">Segno (+)</th>
                    <th></th>
                </tr>
                </thead>
                <tbody>
                @if(is_array($remained['articles']))

                    @foreach($remained['articles'] as $art)
                        @php
                            $nameArticle = $art['name'] ?? '';
                            $codeArticle = $art['code']  ?? '';
                            $idArticle = $art['id'] ?? '';
                            $umArticle = $art['um1'] ?? '';
                            $fornitoreArticle = $art['fornitore'] ?? '';
                            $subfamilyDescr = isset($art['subfamily']) && !empty($art['subfamily']) ? $art['subfamily'] : '';
                        @endphp
                        <tr>
                            <td>
                                <input type="text" class="ls-article form-control" name="article[]" data-codearticle="{{$codeArticle}}" data-umarticle="{{$umArticle}}" value="{!! preg_replace(["/\'/","/\"/"], ["'",""], $nameArticle) !!}" />
                                <input name="idarticle[]" class="idarticle" value="{{$idArticle}}" type="hidden"/>
                             </td>
                            <td>
                                <span class="fornitorearticle">{{$fornitoreArticle}}</span>
                            </td>
                            <td>
                                <span class="umarticle">{{$umArticle}}</span>
                            </td>
                            <td>
                                <span class="codearticle">{{$codeArticle}}</span>
                            </td>
                            <td>
                                <span class="subfamily">{{$subfamilyDescr}}</span>
                            </td>
                            <td><input type="number" step="any" name="orderarticle[]" class="form-control col-5" value="{{$art['order']}}"></td>
                            <td><input type="checkbox" name="signarticle[{{$codeArticle}}]" class="form-check-input signarticle" @if(!isset($art['sign']) || $art['sign'] == 1 )  {{'checked'}} @endif value="1">
                                @if(!isset($art['sign']) || $art['sign'] == 1 )
                                    <i class="fas text-primary fa-plus-square"></i></td>
                                @else
                                    <i class="fas text-danger fa-minus-square"></i></td>
                            @endif
                            <td><a href="#" class="btn-delete btn btn-sm btn-danger">delete</a></td>
                        </tr>
                    @endforeach
                @endif
                </tbody>
                <tfoot>
                <tr>
                    <th colspan="6">
                        <a href="#" class="btn btn-sm btn-info btn-add-article">Aggiungi articolo</a>
                    </th>
                </tr>
                </tfoot>
            </table>
        </div>

        <div class="row">
            <div class="col-md-5"></div>
            <div class="form-group col-md-4">
                <button type="submit" class="btn btn-success">Update</button>
            </div>
        </div>
    </form>



<script type="text/javascript">

    $(document).ready(function () {

        $( "body" ).on('focus', ".ls-article", function(){
            var articleInput = $(this);
            $(this).autocomplete({
                source: "/api/articles",
                minLength: 2,
                select: function (event, ui) {
                    articleInput.parent().parent().find('.idarticle').val(ui.item.id_lasersoft);
                    articleInput.parent().parent().find('.idarticlemongo').val(ui.item.id);
                    articleInput.parent().parent().find('.umarticle').html(ui.item.um);
                    articleInput.parent().parent().find('.codearticle').html(ui.item.codice);
                    articleInput.parent().parent().find('.subfamily').html(ui.item.sottofamiglia);
                    articleInput.parent().parent().find('.fornitorearticle').html(ui.item.fornitore);
                    articleInput.parent().parent().find('.signarticle').attr('name', 'signarticle['+ui.item.codice+']');
                }
            });
        });

        $('#btn-add-submagazine').on('click',function(e){
            e.preventDefault();
            addRowSubmagazine();
        });

        function addRowSubmagazine() {
            var out = '';
            out+='<tr>';
            out+='<td>';
            out+='<input type="text" name="submagazine[]" class="form-control" />';
            out+='</td>';
            out+='<td><input type="text" name="ordersubmagazine[]" class="form-control"></td>';
            out+='<td>';
            out+='<select name="colorsubmagazine[]" class="sel-color">';
            out+='<option value="-1" class="table-primary">scegli colore</option>';
            out+='<option value="primary" class="table-primary">primary</option>';
            out+='<option value="secondary" class="table-secondary">secondary</option>';
            out+='<option value="dark" class="table-dark">dark</option>';
            out+='<option value="success" class="table-success">success</option>';
            out+='<option value="warning" class="table-warning">warning</option>';
            out+='<option value="danger" class="table-danger">danger</option>';
            out+='<option value="info" class="table-info">info</option>';
            out+='</select>';
            out+='</td>';
            out+='<td><a href="#" class="btn-delete btn btn-sm btn-danger">delete</a></td>';
            out+='</tr>';

            $('#tb-submagazine tbody').append(out);


        }

        $('body').on('click','.btn-add-article',function(e){
            e.preventDefault();
            addRowArticle($(this).parent().parent().parent().prev());
        });


        function addRowArticle(item) {
            var out = '';
            out+='<tr>';
            out+='<td>';
            out+= '<input name="article[]" type="text" class="ls-article form-control" />';
            out+= '<input name="idarticle[]" class="idarticle" type="hidden" />';
            out+= '<input name="idarticlemongo[]" class="idarticlemongo" type="hidden" />';
            out+='</td>';
            out+='<td>';
            out+='<span class="fornitorearticle"></span>';
            out+='</td>';
            out+='<td>';
            out+='<span class="umarticle"></span>';
            out+='</td>';
            out+='<td>';
            out+='<span class="codearticle"></span>';
            out+='</td>';
            out+='<td>';
            out+='<span class="subfamily"></span>';
            out+='</td>';
            out+='<td><input type="text" name="orderarticle[]" class="form-control col-5"/></td>';
            out+='<td><input type="checkbox" name="signarticle[]" checked class="form-check-input signarticle"/><i class="fas text-primary fa-plus-square"></i></td>';
            out+='<td><a href="#" class="btn-delete btn btn-sm btn-danger">delete</a></td>';
            out+='</tr>';

            var tbody = item;
            tbody.append(out);
            item.find('tr').last().find('input').first().focus();
        }


        //mostro tabella articoli se contiene righe
        $('.tb-articles').each(function(){
           if($(this).find('tbody:first tr').length > 0){
               $(this).fadeIn();
               //mostro pulsante add
               $(this).parent().find('.btn-add-article').fadeIn();
           }
        });

        //DELETE ROW
        $('body').on('click','.btn-delete',function(e){
            e.preventDefault();
           $(this).parent().parent().remove();
        });


        $('body').on('change','.sel-color',function(){
            let color = $(this).val();
            console.log(color);
            if(color!=-1){
                $(this).removeClass().addClass('sel-color').addClass('table-'+color);
            }
        });

        //SIGN ARTICLE
        $('body').on('change','.signarticle',function(){
            if ($(this).prop("checked")) {
                // not checked
                $(this).parent().find('i')
                    .removeClass('fa-minus-square')
                    .removeClass('text-danger')
                    .addClass('fa-plus-square')
                    .addClass('text-primary');
                return;
            }
            $(this).parent().find('i')
                .removeClass('fa-plus-square')
                .removeClass('text-primary')
                .addClass('text-danger')
                .addClass('fa-minus-square');
        });
    });

</script>
@endsection