@extends("layouts.admin.app")
@section("page-title")
    {{__("Dashboard")}}
@endSection
@section("page-nav-title")
    <div class="app-title" style="padding: 11px">
        <div>
            <h1><i class="fa fa-dashboard"></i>{{__("production-orders")}}</h1>
            <p>{{__("production-formula")}}</p>
        </div>

        <ul class="app-breadcrumb breadcrumb">
            <li class="breadcrumb-item"><i class="fa fa-home fa-lg"></i></li>
            <li class="breadcrumb-item"><a href="#">{{__("Dashboard")}}</a></li>
            <li class="breadcrumb-item"><a
                    href="{{route("admin.production-orders.index", "all")}}">{{__("production-orders")}}</a>
            </li>
            <li class="breadcrumb-item"><a href="#">{{__("production-formula")}}</a></li>
        </ul>
    </div>
@endsection
@section("content")
    <div class="row">
        <div class="col-md-12">
            <div class="tile" style="padding: 5px 5px 5px 5px">
                <div class="tile-body">
                    <input type="hidden" id="isExists" value="{{$isExists}}">
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="form-group row" style="margin-bottom: 1px">
                                <label
                                    style="font-size: 13px; @if(app()->getLocale() == 'ar') padding-right: 20px; @else padding-left: 20px; @endif width: 27%;"
                                    class="col-form-label"><b>{{__("number")}}</b></label>
                                <div class="col-sm-8">
                                    <input class="form-control" style="padding: 3px;font-size: 13px"
                                           type="text"
                                           value="{{$order['number']}}" readonly>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group row" style="margin-bottom: 1px">
                                <label
                                    style="font-size: 13px; @if(app()->getLocale() == 'ar') padding-right: 20px; @else padding-left: 20px; @endif width: 30%;"
                                    class="col-form-label"><b>{{__("date")}}</b></label>
                                <div class="col-sm-8">
                                    <input class="form-control"
                                           style="@if(app()->getLocale() == 'ar') text-align: right @endif; padding: 3px; font-size: 13px"
                                           type="text" value="{{$order['date']}}" readonly>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="form-group row" style="margin-bottom: 2px">
                                <label
                                    style="font-size: 13px; @if(app()->getLocale() == 'ar') padding-right: 20px; @else padding-left: 20px; @endif width: 27%;"
                                    class="col-form-label"><b>{{__("store")}}</b></label>
                                <div class="col-sm-8">
                                    <input class="form-control"
                                           style="@if(app()->getLocale() == 'ar') text-align: right @endif; padding: 3px; font-size: 13px"
                                           type="text" value="{{$order->store->name}}" readonly>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group row" style="margin-bottom: 2px">
                                <label
                                    style="font-size: 13px; @if(app()->getLocale() == 'ar') padding-right: 20px; @else padding-left: 20px; @endif width: 30%;"
                                    class="col-form-label"><b>{{__("status")}}</b></label>
                                <div class="col-sm-8">
                                    <input class="form-control"
                                           style="@if(app()->getLocale() == 'ar') text-align: right @endif; padding: 3px; font-size: 13px"
                                           type="text" value="{{$order->status->status}}" readonly>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="form-group row" style="margin-bottom: 2px">
                                <label
                                    style="font-size: 13px; @if(app()->getLocale() == 'ar') padding-right: 20px; @else padding-left: 20px; @endif width: 27%;"
                                    class="col-form-label"><b>{{__("sales-order-number")}}</b></label>
                                <div class="col-sm-8">
                                    <input class="form-control"
                                           style="@if(app()->getLocale() == 'ar') text-align: right @endif; padding: 3px; font-size: 13px"
                                           type="text" value="{{$order->salesOrder->number}}" readonly>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group row" style="margin-bottom: 1px">
                                <label
                                    style="font-size: 13px; @if(app()->getLocale() == 'ar') padding-right: 20px; @else padding-left: 20px; @endif width: 30%;"
                                    class="col-form-label"><b>{{__("customer-name")}}</b></label>
                                <div class="col-sm-8">
                                    <input class="form-control"
                                           style="@if(app()->getLocale() == 'ar') text-align: right @endif; padding: 3px; font-size: 13px"
                                           type="text" value="{{$order->client->en_name}}" readonly>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="form-group row" style="margin-bottom: 2px">
                                <label
                                    style="font-size: 13px; @if(app()->getLocale() == 'ar') padding-right: 20px; @else padding-left: 20px; @endif width: 27%;"
                                    class="col-form-label"><b>{{__("production-line")}}</b></label>
                                <div class="col-sm-8">
                                    <input class="form-control"
                                           style="@if(app()->getLocale() == 'ar') text-align: right @endif; padding: 3px; font-size: 13px"
                                           type="text" value="{{$order->productionLine->name}}" readonly>
                                </div>
                            </div>
                        </div>
                    </div>
{{--                    <input type="hidden" id="dataArr" value="{{$orderItems}}">--}}
                    <div class="row">
                        <div class="col-md-12">
                            <div class="panel panel-default">
                                <div class="panel-body">
                                    <table class="table table-condensed table-striped" style="width: 99%"
                                           id="mainTable">
                                        <thead style="font-size: 12px; line-height: 2px">
                                        <tr>
                                            <th></th>
                                            <th>#</th>
                                            <th>{{__('code')}}</th>
                                            <th style="width: 25%">{{__('item')}}</th>
                                            <th style="width: 10%">{{__('unit')}}</th>
                                            <th style="width: 10%">{{__('quantity')}}</th>
                                        </tr>
                                        </thead>
                                        <tbody style="font-size: 12px">
                                        <input type="hidden" value="{{count($orderItems)}}" id="totalItems">
                                                                                @foreach($orderItems as $item)
                                            <tr>
                                                <td style="padding:5px 0 2px 12px" data-toggle="collapse"
                                                    data-target="#demo{{++$serial_number}}" class="accordion-toggle"><i
                                                        class="fas fa-plus" style="cursor: pointer"></i></td>
                                                <td style="padding:5px 0 2px 12px">{{$serial_number}}</td>
                                                <td style="padding:5px 0 2px 12px">{{$item->item->getItemCode()}}</td>
                                                <td style="padding:5px 0 2px 12px">{{$item->item->name}}</td>
                                                <td style="padding:5px 0 2px 12px">{{$item->item->unit->unit_name}}</td>
                                                <td style="padding:5px 0 2px 12px">{{$item->quantity}}</td>
                                                <input type="hidden" value="{{$item->quantity}}"
                                                       id="qty{{$serial_number}}">
                                                <input type="hidden" value="{{$item->item_id}}"
                                                       id="mainItem{{$serial_number}}">
                                                <input type="hidden" value="{{$item->item->name}}"
                                                       id="mainItemName{{$serial_number}}">
                                                <input type="hidden" value="{{$item->id}}"
                                                       id="orderDetailsId{{$serial_number}}">
                                                <input type="hidden" value="{{$item->item->unit->unit_name}}"
                                                       id="mainUnit{{$serial_number}}">
                                            </tr>

                                            <tr>
                                                <td colspan="12" class="hiddenRow"
                                                    style="padding-right: 3%; padding-left: 3%; padding-top: 5px; padding-bottom: 0; background-color: white">
                                                    <div class="accordian-body collapse" id="demo{{$serial_number}}">
                                                        <table class="table table-striped"
                                                               style="margin-left: auto; margin-right: auto; margin-top: 5px; width: 90%">
                                                            <thead style="font-size: 12px; line-height: 2px">

                                                            <tr class="info">
                                                                <th style="width: 1%"></th>
                                                                <th style="width: 1%">#</th>
                                                                <th style="width: 2%; text-align: center">{{__('type')}}</th>
                                                                <th style="width: 2%; text-align: center">{{__('code')}}</th>
                                                                <th style="width: 7%; text-align: center">{{__('name')}}</th>
                                                                <th style="width: 2%; text-align: center">{{__('quantity')}}</th>
                                                                <th style="width: 2%; text-align: center">{{__('min-quantity')}} </th>
                                                                <th style="width: 2%; text-align: center">{{__('max-quantity')}} </th>
                                                                <th style="text-align: center; width: 1%;">{{__('required')}} </th>
                                                            </tr>
                                                            </thead>
                                                            <tbody style="font-size: 12px">
                                                                                                                            @foreach($item["equation"] as $equation)
                                                                <tr class="data">
                                                                    @if($equation->type == "group")
                                                                        <td style="padding:5px 0 2px 12px"
                                                                            data-toggle="collapse"
                                                                            data-target="#equationDemo{{$serial_number}}{{++$index}}"
                                                                            class="accordion-toggle{{$serial_number}}{{$index}} toggle" onclick="getGroupContent({{$serial_number}}, {{$equation->type_id}},{{$index}})"><i
                                                                                class="fas fa-plus"
                                                                                style="cursor: pointer"></i></td>
                                                                    @else
                                                                        <td id="{{++$index}}"></td>
                                                                    @endif
                                                                    <td style="padding:5px 0 2px 12px">{{$index}}</td>
                                                                    <input type="hidden" value="{{$equation->id}}"
                                                                           id="equation{{$serial_number}}{{$index}}">
                                                                    <input type="hidden" value="{{$equation->type}}"
                                                                           id="type{{$serial_number}}{{$index}}">
                                                                        <input type="hidden" value="{{$equation->type_id}}"
                                                                               id="item{{$serial_number}}{{$index}}">
                                                                        <td style="padding:5px 0 2px 12px;text-align: center;text-transform: capitalize">
                                                                            {{$equation->type}}
                                                                        </td>
                                                                    <td style="padding:5px 0 2px 12px; text-align: center"
                                                                        id="typeNo{{$serial_number}}{{$index}}">
                                                                        {{$equation->code}}
                                                                    </td>
                                                                    <td style="padding:5px 0 2px 12px; text-align: center"
                                                                        id="typeName{{$serial_number}}{{$index}}">
                                                                        {{$equation->name}}
                                                                    </td>
                                                                    <td style="padding:5px 0 2px 12px">
                                                                        <input class="form-control" type="number"
                                                                               @if($equation->type == "group" || $order['analysis_started'] == 1) readonly
                                                                               @endif id="quantity{{$serial_number}}{{$index}}"
                                                                               @if($isExists) value="{{$equation->qty}}"
                                                                               @endif style="height: 30px;font-size: 12px">
                                                                    </td>
                                                                    <td style="padding:5px 0 2px 12px">
                                                                        <input class="form-control" type="number"
                                                                               readonly
                                                                               value="{{$equation->min_quantity}}"
                                                                               id="minQuantity{{$serial_number}}{{$index}}"
                                                                               style="height: 30px; font-size: 12px">
                                                                    </td>
                                                                    <td style="padding:5px 0 2px 12px">
                                                                        <input class="form-control" type="number"
                                                                               readonly
                                                                               value="{{$equation->max_quantity}}"
                                                                               id="maxQuantity{{$serial_number}}{{$index}}"
                                                                               style="height: 30px;font-size: 12px">
                                                                    </td>
                                                                    <td style="padding:5px 0 2px 12px; text-align: center">
                                                                        <div class="form-check">
                                                                            <input type="checkbox"
                                                                                   class="form-check-input" disabled
                                                                                   id="check{{$serial_number}}{{$index}}"
                                                                                   @if($equation->required == 1) checked @endif>
                                                                        </div>
                                                                    </td>
                                                                </tr>
                                                                @if($equation->type == "group")
                                                                    <tr>
                                                                        <td colspan="12" class="hiddenRow"
                                                                            style="padding-right: 3%; padding-left: 3%; padding-top: 5px; padding-bottom: 0; background-color: white">
                                                                            <div class="accordian-body collapse"
                                                                                 id="equationDemo{{$serial_number}}{{$index}}">
                                                                                <table class="table table-striped"
                                                                                       style="margin-top: 5px; margin-right: auto; margin-left: auto; width: 90%">
                                                                                    <thead
                                                                                        style="font-size: 12px; line-height: 2px">

{{--                                                                                    <tr class="info">--}}
{{--                                                                                        <th style="width: 1%"></th>--}}
{{--                                                                                        <th style="width: 1%">#</th>--}}
{{--                                                                                        <th style="width: 2%">{{__('type')}}</th>--}}
{{--                                                                                        <th style="width: 2%">{{__('code')}}</th>--}}
{{--                                                                                        <th style="width: 7%">{{__('name')}}</th>--}}
{{--                                                                                        <th style="width: 2%">{{__('quantity')}}</th>--}}
{{--                                                                                    </tr>--}}
                                                                                    </thead>
                                                                                    <tbody style="font-size: 12px">

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

                                                                        </td>
                                                                    </tr>
                                                                @endif
                                                            @endforeach
                                                            </tbody>
                                                        </table>
                                                    </div>

                                                </td>
                                            </tr>

                                        @endforeach
                                        </tbody>
                                    </table>
                                </div>

                            </div>

                        </div>
                    </div>
                    @if($order['analysis_started'] == 0)
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <button class="btn btn-primary" id="btn" onclick="submitForm()" type="button"
                                            style="padding: 4px; margin: 0 10px 0 10px"><i
                                            class="fa fa-fw fa-lg fa-check-circle" style="font-size: 14px"></i><i
                                            class="loading-icon fa-lg fas fa-spinner fa-spin hide"
                                            style="display: none"></i><span id="textSpan"
                                                                            style="font-size: 14px">{{__("save")}}</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

@endsection
@section("scripts")
    <!-- Google analytics script-->
    <script type="text/javascript">
        $('.accordion-toggle').click(function () {
            $(this).find('i').toggleClass('fas fa-plus fas fa-minus');
        });

        let noOfRows = $("#totalItems").val();
       var qtyFlag = 0;
       var completed = 1;
        var baseUrl = window.location.origin;
       var isExists = $("#isExists").val();
     /*   var data = $("#dataArr").val();
        var jsonData = JSON.parse(data);*/

        const sleep = (s) =>
            new Promise((p) => setTimeout(p, (s * 0.3) | 0))

        async function getGroupContent(rowNo, groupId, subNo) {
            await sleep(0.2)
            if ($("#equationDemo" + rowNo + subNo + " .table tbody tr").length == 0) {
                var mainUnit = $("#mainUnit"+rowNo).val();
                var orderDetailsId =  $("#orderDetailsId"+rowNo).val();
                var productionEquationId =  $("#equation"+rowNo+subNo).val();
                $.ajax({
                    type: "get",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    url: baseUrl + "/en/ajax/items/get-group-details",
                    async: false,
                    data: {
                        id: groupId,
                        isExists: isExists,
                        orderDetailsId: orderDetailsId,
                        productionEquationId: productionEquationId
                    },
                    success: function (response) {
                        var dataArr = response["data"];
                        var appendData = "";
                        var appendDataHead = "";
                        appendDataHead += '<tr class="info"><th style="width: 1%"></th> <th style="width: 1%">#</th><th style="width: 2%">{{__('type')}}</th><th style="width: 2%">{{__('code')}}</th><th style="width: 7%">{{__('name')}}</th><th style="width: 2%">{{__('unit')}}</th><th style="width: 2%">{{__('quantity')}} / ' + mainUnit + '</th></tr>';
                        for (var i = 0; i < dataArr.length; i++) {
                            appendData += '<tr class="data">';
                            if (dataArr[i]["content_type"] == "group") {
                                appendData += '<td style="padding:5px 0 2px 12px" data-toggle="collapse" data-target="#subEquationDemo' + rowNo + (i + 1) + '" class="accordion-toggle' + rowNo + subNo + (i + 1) + ' toggle"><i class="fas fa-plus" style="cursor: pointer" onclick="getGroupContent(' + rowNo + ', ' + dataArr[i]["content_id"] + ',' + (i + 1) + ')"></i></td>';
                            } else {
                                appendData += '<td></td>';
                            }
                            appendData += '<input type="hidden" value="' + dataArr[i]["id"] + '" id="equation' + rowNo + subNo + (i + 1) + '">';
                            appendData += '<input type="hidden" value="' + dataArr[i]["content_type"] + '" id="type' + rowNo + subNo + (i + 1) + '">';
                            appendData += '<input type="hidden" value="' + dataArr[i]["content_id"] + '" id="item' + rowNo + subNo + (i + 1) + '">';
                            appendData += '<td>' + (i + 1) + '</td> ' +
                                '<td style="text-transform: capitalize;">' + dataArr[i]["content_type"] + '</td> ' +
                                '<td>' + dataArr[i]["code"] + '</td> ' +
                                '<td>' + dataArr[i]["name"] + '</td> ' +
                                '<td>' + dataArr[i]["unit"] + '</td> ';
                            if (dataArr[i]["content_type"] == "group")
                                appendData += '<td><input style="height:30px" class="form-control" readonly type="number" if @if($isExists) value="' + dataArr[i]["qty"] + '" @endif id="item' + rowNo + subNo + (i + 1) + '"></td></tr>';
                            else
                                appendData += '<td><input style="height:30px" class="form-control" @if($order['analysis_started'] == 1) readonly @endif type="number" if @if($isExists) value="' + dataArr[i]["qty"] + '" @endif id="quantity' + rowNo + subNo + (i + 1) + '"></td></tr>';
                        }
                        $("#equationDemo" + rowNo + subNo + " .table thead").append(appendDataHead);
                        $("#equationDemo" + rowNo + subNo + " .table tbody").append(appendData);
                        $("#btn" + rowNo + subNo).attr("data-target", "#equationDemo" + rowNo + subNo);
                            if ($('.accordion-toggle' + rowNo + subNo).find('i').hasClass("fa-plus")) {
                                $('.accordion-toggle' + rowNo + subNo).find('i').removeClass("fa-plus");
                                $('.accordion-toggle' + rowNo + subNo).find('i').addClass("fa-minus")
                            } else if ($('.accordion-toggle' + rowNo + subNo).find('i').hasClass("fa-minus")) {
                                $('.accordion-toggle' + rowNo + subNo).find('i').removeClass("fa-minus");
                                $('.accordion-toggle' + rowNo + subNo).find('i').addClass("fa-plus")
                            }
                    },
                    error: function (response) {
                        console.log("Error!");
                    }
                });
            }else{
                if($('.accordion-toggle'+ rowNo + subNo).find('i').hasClass("fa-plus")){
                    $('.accordion-toggle'+ rowNo + subNo).find('i').removeClass("fa-plus");
                    $('.accordion-toggle'+ rowNo + subNo).find('i').addClass("fa-minus")
                }else if($('.accordion-toggle'+ rowNo + subNo).find('i').hasClass("fa-minus")){
                    $('.accordion-toggle'+ rowNo + subNo).find('i').removeClass("fa-minus");
                    $('.accordion-toggle'+ rowNo + subNo).find('i').addClass("fa-plus")
                }
            }

        }
        setTimeout(getGroupContent, 1)

       function submitForm() {
            var itemName = "";
           for(var i=1; i<=noOfRows; i++){
               var noOfSubRows = $("#demo" + i + " .table tbody .toggle").length;
               for(var j=1; j<= noOfSubRows; j++){
                   if($("#check"+i+j).is(':checked') && $("#quantity"+i+j).attr('readonly') !== "readonly"){
                       if($("#quantity"+i+j).val() === "" || $("#quantity"+i+j).val() === 0){
                           completed = 0;
                           if(itemName == "")
                            itemName = $("#mainItemName"+i).val();
                           swal({
                               icon: 'error',
                               title: '{{__('error')}}',
                               text: '{{__('fill-required-qty-error')}}' + itemName
                           })
                           break;
                       }else{
                           completed = 1;
                       }
                   }else if($("#check"+i+j).is(':checked') && $("#quantity"+i+j).attr('readonly') === "readonly") {
                       var noOfSubGroupsRows = $("#equationDemo" + i + j + " .table tbody tr").length;
                       if (noOfSubGroupsRows == 0 && isExists == 0) {
                           qtyFlag = 0;
                           if(itemName == "")
                            itemName = $("#mainItemName" + i).val();
                       }else if(noOfSubGroupsRows == 0 && isExists == 1)
                       qtyFlag = 1;
                       else if (noOfSubGroupsRows > 0){
                           for (var k = 1; k <= noOfSubGroupsRows; k++) {
                               if ($("#check" + i + j).is(':checked') && $("#quantity" + i + j + k).attr('readonly') !== "readonly") {
                                   if ($("#quantity" + i + j + k).val() !== "" && $("#quantity" + i + j + k).val() > 0) {
                                       qtyFlag = 1;
                                       break;
                                   } else {
                                       qtyFlag = 0;
                                       if(itemName == "")
                                        itemName = $("#mainItemName" + i).val();
                                   }
                               }
                               if (completed === 0)
                                   break;
                           }
                   }
                   }
               }
               if(completed === 0)
                   break;
           }
           var itemFlag = 1;
           if(typeof itemName === 'undefined'){
               itemFlag = 0;
           }else{
               itemFlag = 1
           }
           if(qtyFlag == 0 && itemFlag == 1){
               swal({
                   icon: 'error',
                   title: '{{__('error')}}',
                   text: '{{__('fill-required-qty-error')}}' + itemName
               })
           }
           if (qtyFlag === 1) {
               var dataArray = [];
               for (var i = 1; i <= noOfRows; i++) {
                   var noOfSubRows = $("#demo" + i + " .table tbody .toggle").length;
                   for (var j = 1; j <= noOfSubRows; j++) {
                       if ($("#type" + i + j).val() == "item") {
                           const dataObj = {
                               equation: $("#equation" + i + j).val(),
                               order_details_id: $("#orderDetailsId" + i).val(),
                               item_id: $("#item" + i + j).val(),
                               quantity: $("#quantity" + i + j).val()
                           };
                           dataArray.push(dataObj);
                       } else {
                           var noOfSubGroupsRows = $("#equationDemo" + i + j + " .table tbody .data").length;
                           for (var k = 1; k <= noOfSubGroupsRows; k++) {
                               if ($("#type" + i + j + k).val() == "item") {
                                   const dataObj = {
                                       equation: $("#equation" + i + j).val(),
                                       order_details_id: $("#orderDetailsId" + i).val(),
                                       group_id: $("#item" + i + j).val(),
                                       item_id: $("#item" + i + j + k).val(),
                                       quantity: $("#quantity" + i + j + k).val()
                                   };
                                   dataArray.push(dataObj);
                               }
                           }
                       }
                   }
               }
               var formData = new FormData();
               formData.append("isExists", {{$isExists}});
               formData.append("id", {{$order['id']}});
               formData.append("items", JSON.stringify(dataArray));
               $(".hide").css({'display': ''});
               $(".fa-check-circle")[0].style.display = "none";
               $("#btn").attr("disabled", true);
               $("#textSpan").html("{{__("saving")}}");
               $.ajax({
                   type: "post",
                   headers: {
                       'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                   },
                   url: baseUrl + "/en/ajax/production-orders/save-or-update-production-formula",
                   dataType: 'json',
                   contentType: false,
                   processData: false,
                   data: formData,
                   success: function (response) {
                       if (response["status"] === 200) {
                           if ($("#isExists").val() == 0) {
                               var title = "Added Successfully";
                           } else {
                               var title = "Updated Successfully";
                           }
                           swal({
                               closeOnClickOutside: false,
                               title: title,
                               text: response["message"],
                               icon: "success",
                           }).then(function () {
                               window.location.href = '{{route("admin.production-orders.index", "all")}}';
                           })

                       } else if (response["status"] === 201) {
                           swal({
                               icon: 'error',
                               title: '{{__('error')}}',
                               text: response["message"]
                           })
                       }
                   },
                   error: function (response) {

                   }
               });
           }
       }

    </script>

@endsection