

<form class="priceListForm" enctype="multipart/form-data">
    @csrf
    <div class="container" >
    <div class="form-group row">
        <label for="supplierSelect" class="col-sm-2 col-form-label">Beszállító:</label>
        <div class="col-sm-10">
            <select class="supplierSelect" name="supplier" multiple="multiple" style="width: 100%">
                    @foreach($suppliers as $supplier)
                       <option value="{{$supplier['id']}}" {{--@if ($supplier['id']==7) selected @endif--}}>{{$supplier['name']}}</option>
                    @endforeach
            </select>
        </div>
    </div>

        <div class="form-group row">
            <label for="remark" class="col-sm-2 col-form-label">Életbelépési dátum</label>
            <div class="col-sm-7">
                <div class="input-group date">

                    <input type="hidden" class="form-control datePicker"  value="{{\Illuminate\Support\Carbon::today()->format('Y-m-d')}}" name="availableDate" placeholder="Kattintson a dátum kiválasztásához" >
                    <span class="input-group-addon datePickerClick">
                    {{--<i class="glyphicon glyphicon-th"></i>--}}
                        {{--<i class="fa fa-calendar" aria-hidden="true"></i>--}}
                    <span class="selectedDateText form-control">{{\Illuminate\Support\Carbon::today()->format('Y.m.d')}}</span>
                    <i class="pe-7s-date" style="font-size:2em; margin-left:-5px; "></i>

                </span>

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

        <div class="form-group row">
            <label for="note" class="col-sm-2 col-form-label">Megjegyzés</label>
            <div class="col-sm-7">
                <div class="input-group note">
                    <textarea class="form-control" rows="3" placeholder="Ha kiván itt tud megjegyzést írni" name="note"></textarea>

                </span>

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



    <div class="form-group row">
        <label for="supplierSelect" class="col-sm-2 col-form-label">Funkció:</label>
       {{-- <div class="col-sm-2">
            <button type="button" class="btn btn-success">Letöltés</button>
        </div>--}}

        <div class="col-sm-8 containerFileUpload">
            <div class="input-group mb-3">
                <div class="custom-file">
                    <input type="file" class="custom-file-input" id="inputGroupPriceListFile" name="priceListFile" accept=".xlsx">
                    <label class="custom-file-label" for="inputGroupPriceListFile">Válasszon fájlt</label>
                </div>
                <div class="input-group-append">
                    <button type="button" class="btn btn-info buttonUpload">Feltöltés</button>
                </div>
            </div>
        </div>

        <div class="col-sm-8 containerFileUploadStarted d-none">
            <div class="input-group mb-3 ">
                    <span class="containerUploadedFileName  mx-auto">xxx</span>
                    <div class="containerUploadedSpinner ">
                    <strong class="text-success ">Betöltés...</strong>
                    <div class="spinner-border mr-auto text-success align-middle" role="status" aria-hidden="true"></div>
                    </div>
                <div class="input-group-append">
                    <button type="button" class="btn btn-info buttonNewUpload">Új fájl kiválasztása</button>
                </div>
            </div>
        </div>


    </div>

    <div class="form-group row uploadStatusRow d-none">
            <label for="supplierSelect" class="col-sm-2 col-form-label">Akció:</label>

            <div class="col-sm-2 canFinish">
                <button type="button" class="btn btn-success buttonFinalization">Véglegesítés</button>
            </div>

            <div class="col-sm-8 canFinishError">
                <span class="text-danger">
                    Az árlista a pirosal jelőlt sorokban hibákat tartalmazz, ezért nem lehet véglegesíteni.
                    <button type="button" class="btn btn-outline-danger buttonPrevError"><i class="bi bi-caret-up-fill"></i></button>
                    <button type="button" class="btn btn-outline-danger buttonNextError"><i class="bi bi-caret-down-fill"></i></button>
                </span>
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="row priceListTableWrapper" >
        <table class="table table-striped table-hover table-sm priceListTable">
            <thead>
            <tr >
                <th scope="col">#</th>
                <th scope="col">Szállítói csz.</th>
                <th scope="col">Főcsop.</th>
                <th scope="col">Alcsop1.</th>
                <th scope="col">Alcsop2.</th>
                <th scope="col">Termék megnevezés</th>
                <th scope="col" data-toggle="tooltip" data-placement="top" title="Kiszerelés">K.</th>
                <th scope="col" data-toggle="tooltip" data-placement="top" title="Súly/Űrtartalom (nettó)" style="width: 4em;">S/Ű</th>
                <th scope="col" data-toggle="tooltip" data-placement="top" title="Mértékegység">Mée.</th>
                <th scope="col">Gyártó</th>
                <th scope="col" data-toggle="tooltip" data-placement="top" title="Legkisebb eladási egység">L.e.e.</th>
                <th scope="col" data-toggle="tooltip" data-placement="top" title="Egységszorzó">E*</th>
                <th scope="col" data-toggle="tooltip" data-placement="top" title="Mennyiségi egység">Me.</th>
                <th scope="col" >Áfa</th>
                <th scope="col" data-toggle="tooltip" data-placement="top" title="Aktuális számlázási nettó ár/mennyiségi egység egység">Akt. ár</th>
                <th scope="col" data-toggle="tooltip" data-placement="top" title="Új számlázási nettó ár/mennyiségi egység">Új ár</th>
                <th scope="col">Árvált.</th>
                <th scope="col">Hooreyca</th>
                <th scope="col" data-toggle="tooltip" data-placement="top" title="Hooreyca mértékegység">HMée.</th>
                <th scope="col" data-toggle="tooltip" data-placement="top" title="Hooreyca mennyiségi szorzó">HE*</th>
                <th scope="col">Vevői megnevezés</th>
                <th scope="col">Megjegyzés</th>
                <th scope="col">KREL</th>
                {{--<th scope="col" data-toggle="tooltip" data-placement="top" title="Vevői cikkszám">Vcsz.</th>--}}

            </tr>
            </thead>
            <tbody>

{{--

            <tr>
                <th scope="row">[[rowNum]]
                </th>
                <td>[[supplierProductNumber]]</td>
                <td>[[ProductGroupMain]]
                    <input type="xhidden" name="product_group_idRow[rowNum]">
                    <input type="xhidden" name="product_group_idProduct[productId]">
                </td>
                <td>[[ProductGroupSub1]]</td>
                <td>[[ProductGroupSub2]]</td>
                <td>[[name]]</td>
                <td>[[packing]]</td>
                <td>[[unitValue]]</td>
                <td>[[productUnit]]</td>
                <td>[[producerName]]
                    <input type="xhidden" name="producer_id[rowNum]">
                    <input type="xhidden" name="producer_idProduct[productId]">
                </td>
                <td>[[sellerUnit]]</td>
                <td>[[unitMultiplier]]</td>
                <td>[[amountUnit]]</td>
                <td>[[vat]]</td>
                <td>[[Price]]</td>
                <td>[[PriceNew]]</td>
                <td>[[PriceChange]]</td>
                <td>[[hooreycaId]]</td>
                <td>[[buyerProductNumber]]</td>
                <td>
                    <button type="button" class="btn btn-danger buttonDelete"  data-toggle="tooltip" data-placement="bottom" title="Törlés">
                        <span class="fas fa-trash"></span>
                    </button>
                    <button type="button" class="btn btn-info buttonEdit" data-toggle="tooltip" data-placement="bottom" title="Szerkeszt">
                        <span class="fas fa-pencil-alt"></span>
                    </button>
                </td>
            </tr>
--}}
            </tbody>

            <template data-name="priceListTableRow">
                <tr data-rowNum="[[rowNum]]" >
                    <th scope="row">[[rowNum]]
                    </th>
                    <td data-pointer="supplierProductNumber">[[supplierProductNumber]]</td>
                    <td data-pointer="productGroupMain">[[productGroupMain]]
{{--
                        <input type="hidden" name="product_group_idRow[[[rowNum]]]" value="[[product_group_id]]">
                        <input type="hidden" name="product_group_idProduct[[[productId]]]" value="[[product_group_id]]" >
--}}
                    </td>
                    <td data-pointer="productGroupSub1">[[productGroupSub1]]</td>
                    <td data-pointer="productGroupSub2">[[productGroupSub2]]</td>
                    <td data-pointer="name">[[name]]</td>
                    <td data-pointer="packing">[[packing]]</td>
                    <td data-pointer="unitValue">[[unitValue]]</td>
                    <td data-pointer="productUnit">[[productUnit]]</td>
                    <td data-pointer="producerName">[[producerName]]
{{--
                        <input type="xhidden" name="producer_id[[[rowNum]]]" value="[[producer_id]]">
                        <input type="xhidden" name="producer_idProduct[[[productId]]]" value="[[producer_id]]">
--}}
                    </td>
                    <td data-pointer="sellerUnit">[[sellerUnit]]</td>
                    <td data-pointer="unitMultiplier">[[unitMultiplier]]</td>
                    <td data-pointer="amountUnit">[[amountUnit]]</td>
                    <td data-pointer="vat">[[vat]]%</td>
                    <td data-pointer="price">[[price]]</td>
                    <td data-pointer="priceNew">[[priceNew]]</td>
                    <td data-pointer="priceChange">[[priceChange]]%</td>
                    <td data-pointer="hooreycaId">[[hooreycaId]]</td>
                    <td data-pointer="HooreycaUnit">[[HooreycaUnit]]</td>
                    <td data-pointer="HooreycaMultiplier">[[HooreycaMultiplier]]</td>
                    <td data-pointer="buyerProductName">[[buyerProductName]]</td>
                    <td data-pointer="note">[[note]]</td>
                    <td data-pointer="krel"><i class="bi bi-check-circle-fill krel_[[krel]]"></i></td>
{{--
                    <td>
                        <button type="button" class="btn btn-danger buttonDelete"  data-toggle="tooltip" data-placement="bottom" title="Törlés">
                            <span class="fas fa-trash"></span>
                        </button>
                        <button type="button" class="btn btn-info buttonEdit" data-toggle="tooltip" data-placement="bottom" title="Szerkeszt">
                            <span class="fas fa-pencil-alt"></span>
                        </button>
                    </td>
--}}
                </tr>
            </template>

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

    </div>
</form>

<style>
    .custom-file-input ~ .custom-file-label::after {
        content: "Kiválaszt";
    }
    .priceListForm .selectedDateText{
        vertical-align: super;
        padding: 5px;
        display: inline;

    }

    div.priceListTableWrapper{
        overflow: scroll;
        height: 800px;
    }

    @media screen and (max-height: 1080px){
        div.priceListTableWrapper{
            height: 600px;
        }
    }
    @media screen and (max-height: 768px){
        div.priceListTableWrapper{
            height: 480px;
        }
    }

    table.priceListTable > tbody > tr.statusError{
        /*Red*/
        background-color: #f8d7da !important;

    }
    table.priceListTable > tbody > tr.statusChanged{
        /*blue*/
        background-color: #17a2b8 !important;
    }

    table.priceListTable > tbody > tr.statusNew{
        /*green*/
        background-color: #d4edda !important;

    }

    table.priceListTable > tbody > tr.highlightedErrorRow{
        border: 4px solid;
        border-color: red;
    }


    tr.rowX2{
        /*grey*/
        background-color: #e2e3e5;
    }

    table.priceListTable tbody span.fieldError{
        font-weight: bold;
        display: block;
        border: 1px solid;
    }
    table.priceListTable tbody span.fieldChanged{
        color: darkgray;
        /*font-weight: bold;*/
        display: block;
        border: 1px solid;
    }

    table.priceListTable tbody i.krel_1{
        display: block;
    }
    table.priceListTable tbody i.krel_0{
        display: none;
    }


</style>
<script>
    $(document).ready(function() {
        //Toast.create("innerHeight!", window.innerHeight, TOAST_STATUS.INFO, 10000);
        $('[data-toggle="tooltip"]').tooltip();
        $(".supplierSelect").select2({
            maximumSelectionLength: 1,
        });
        $(".custom-file-input").on("change", function() {
            var fileName = $(this).val().split("\\").pop();
            $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
        });
    });

</script>
