@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}}"
                                                    data-count="{{ count($item['equation']) }}">
                                                    <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->item->code}}
                                                                </td>
                                                                <td style="padding:5px 0 2px 12px; text-align: center"
                                                                    id="typeName{{$serial_number}}{{$index}}">
                                                                    {{$equation->item->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).data('count');
               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){
                        qtyFlag = 0;
                           completed = 0;
                           if(itemName == "")
                            itemName = $("#mainItemName"+i).val();
                           swal({
                               icon: 'error',
                               title: '{{__('error')}}',
                               text: '{{__('fill-required-qty-error')}}' + itemName
                           })
                           break;
                       }else{
                         qtyFlag = 1;
                           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;
                    var noOfSubRows = $("#demo" + i).data('count');
                   
                   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