@extends("layouts.admin.app")

@section("page-title")
{{__("Dashboard")}}
@endSection

@section("page-nav-title")
<div class="app-title">
    <div>
        <h1><i class="fa fa-dashboard"></i>{{__("items")}}</h1>
        <p>{{__("all-items")}}</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.items.index")}}">{{__("items")}}</a></li>
        <li class="breadcrumb-item"><a href="#">{{__("production-equations")}}</a></li>
    </ul>
</div>
@endsection

@section("content")
<form id="main_form" method="post">
    @csrf
    <div class="tile" style="margin-left: 30%; margin-right: 30%">
        <h3 style="text-align: center">{{$name}} - {{__("production-equations-control")}}</h3>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="tile">
                <div class="tile-body">
                    <div class="col">
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="table-responsive">
                                <table class="table table-hover table-bordered" id="myTable">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th style="width: 15%">{{__('type')}}</th>
                                            <th style="width: 15%">{{__('number')}}</th>
                                            <th style="width: 30%">{{__('name')}}</th>
                                            <th style="width: 15%">{{__('min-quantity')}} </th>
                                            <th style="width: 15%">{{__('max-quantity')}} </th>
                                            <th style="width: 5%;">{{__('required')}} </th>
                                            <th style="text-align: center">{{__('delete')}} </th>
                                        </tr>
                                    </thead>
                                    <tbody id="tableBody">
                                                                                @foreach($equations as $equation)
                                        <tr id="trControl{{++$serial_number}}">
                                            <td>{{$serial_number}}</td>
                                            <input type="hidden" value="{{$equation->id}}" id="equation{{$serial_number}}">
                                            <input type="hidden" value="{{$equation->type}}" id="type{{$serial_number}}">
                                            <input type="hidden" value="{{$id}}" id="product_equations_id">
                                            <td>
                                                <div class="row">
                                                    <div class="col-lg-6">
                                                        <div class="form-check">
                                                            <input class="form-check-input" type="radio" name="radioName{{$serial_number}}" id="itemRadio{{$serial_number}}" value="item" @if($equation->type == "item") checked @endif onchange="getType({{$serial_number}})">
                                                            <label class="form-check-label" for="itemRadio{{$serial_number}}">
                                                                {{__('item')}}
                                                            </label>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <div class="form-check">
                                                            <input class="form-check-input" type="radio" name="radioName{{$serial_number}}" id="groupRadio{{$serial_number}}" value="group" @if($equation->type == "group") checked @endif onchange="getType({{$serial_number}})">
                                                            <label class="form-check-label" for="groupRadio{{$serial_number}}">
                                                                {{__('group')}}
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td id="typeNo{{$serial_number}}">
                                                <select  onchange="getItemName({{$serial_number}})" class="form-control" id="code{{$serial_number}}" required>
                                                    <option></option>
                                                    @if($equation->type == "item")
                                                    @foreach($items as $item)
                                                    <option {{selected("item_code", $equation->number,$item)}} value="{{$item->id}}">{{$item->item_code}}</option>
                                                    @endforeach
                                                    @else
                                                    @foreach($groups as $group)
                                                    <option {{selected("number", $equation->group->number,$group)}} value="{{$group->id}}">{{$group->number}}</option>
                                                    @endforeach
                                                    @endif
                                                </select>
                                            </td>
                                            <td id="typeName{{$serial_number}}">
                                                <select onchange="getItemCode({{$serial_number}})" class="form-control" id="item{{$serial_number}}" required>
                                                    <option></option>
                                                    @if($equation->type == "item")
                                                    @foreach($items as $item)
                                                    <option {{selected("name", $equation->name,$item)}} value="{{$item->id}}">{{$item->name}}</option>
                                                    @endforeach
                                                    @else
                                                    @foreach($groups as $group)
                                                    <option {{selected("name", $equation->group->name,$group)}} value="{{$group->id}}">{{$group->name}}</option>
                                                    @endforeach
                                                    @endif
                                                </select>
                                            </td>
                                            <td>
                                                <input class="form-control" type="number" value="{{$equation->min_quantity}}" id="minQuantity{{$serial_number}}" placeholder="{{__('enter-min-quantity')}}" required>
                                            </td>
                                            <td>
                                                <input class="form-control" type="number" value="{{$equation->max_quantity}}" id="maxQuantity{{$serial_number}}" placeholder="{{__('enter-max-quantity')}}" required>
                                            </td>
                                            <td style="text-align: center">
                                                <div class="form-check">
                                                    <input type="checkbox" class="form-check-input" id="check{{$serial_number}}" @if($equation->required == 1) checked @endif>
                                                </div>
                                            </td>
                                            <td style="text-align: center"><span class="control-link remove"><i class="far fa-trash-alt"></i></span>
                                            </td>
                                        </tr>
                                        @endforeach
                                        @if (count($equations) == 0)
                                        <tr id="trControl{{$serial_number+1}}">
                                            <td>{{$serial_number+1}}</td>
                                            <input type="hidden" value="0" id="equation{{$serial_number+1}}">
                                            <input type="hidden" value="item" id="type{{$serial_number+1}}">
                                            <td>
                                                <div class="row">
                                                    <div class="col-lg-6">
                                                        <div class="form-check">
                                                            <input class="form-check-input" type="radio" name="radioName{{$serial_number+1}}" id="itemRadio{{$serial_number+1}}" value="item" checked serial_number="{{$serial_number}}" onchange="getType(this.serial_number+1)">
                                                            <label class="form-check-label" for="itemRadio{{$serial_number+1}}">
                                                                {{__('item')}}
                                                            </label>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <div class="form-check">
                                                            <input class="form-check-input" type="radio" name="radioName{{$serial_number+1}}" id="groupRadio{{$serial_number+1}}" value="group" serial_number="{{$serial_number}}" onchange="getType(this.serial_number+1)">
                                                            <label class="form-check-label" for="groupRadio{{$serial_number+1}}">
                                                                {{__('group')}}
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td id="typeNo{{$serial_number+1}}">
                                                <select  onchange="getItemName({{$serial_number}}+1)" class="form-control" id="code{{$serial_number+1}}" required>
                                                    <option></option>
                                                </select>
                                            </td>
                                            <td id="typeName{{$serial_number+1}}">
                                                <select  onchange="getItemCode({{$serial_number}}+1)" class="form-control" id="item{{$serial_number+1}}" required>
                                                    <option></option>
                                                </select>
                                            </td>
                                            <td>
                                                <input class="form-control" type="number" id="minQuantity{{$serial_number+1}}" placeholder="{{__('enter-min-quantity')}}" required>
                                            </td>
                                            <td>
                                                <input class="form-control" type="number" id="maxQuantity{{$serial_number+1}}" placeholder="{{__('enter-max-quantity')}}" required>
                                            </td>
                                            <td style="text-align: center">
                                                <div class="form-check">
                                                    <input type="checkbox" class="form-check-input" id="check{{$serial_number+1}}">
                                                </div>
                                            </td>
                                            <td style="text-align: center"><span class="control-link remove"><i class="far fa-trash-alt"></i></span>
                                            </td>
                                        </tr>
                                        @endif
                                    </tbody>
                                </table>
                                <div>
                                    {{$equations->links("pagination::bootstrap-4")}}
                                </div>
                                <div>
                                    <a id="addBtn"><i class="fa fa-fw fa-lg fa-plus-circle" style="font-size: 30px; color: green; cursor: pointer" onclick="addRow()"></i></a>
                                </div>
                                <br><br>
                            </div>
                        </div>
                    </div>
                    <div class="row" id="submitFormDiv">
                        <div class="col-md-12" id="submitForm">
                            <div class="form-group">
                                <button class="btn btn-primary" id="btn" type="button"><i class="fa fa-fw fa-lg fa-check-circle"></i>{{__("save")}}</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
@endsection

@section("scripts")
<!-- Data table plugin-->
<script type="text/javascript" src="{{asset('assets/js/plugins/jquery.dataTables.min.js')}}"></script>
<script type="text/javascript" src="{{asset('assets/js/plugins/dataTables.bootstrap.min.js')}}"></script>
<script type="text/javascript">
    $('#myTable').DataTable({
        "bPaginate": false,
        "bInfo": false
    });
</script>

<script type="text/javascript">
    var baseUrl = window.location.origin;
    var itemsArray = [];

    var appenddata1 = "";
    var appenddata2 = "";
    window.onload = function() {
        $.ajax({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            url: baseUrl + "/en/ajax/items/get-all-items",
            type: 'get',
            success: function(response) {
                itemsArray = response["items"];
                for (var i = 0; i < itemsArray.length; i++) {
                    appenddata1 += "<option value = '" + itemsArray[i].id + " '>" + itemsArray[i].name + " </option>";
                    appenddata2 += "<option value = '" + itemsArray[i].id + " '>" + itemsArray[i].code + " </option>";
                }
            },
        });
    }

    let noOfRows = $('.table tbody tr').length;
    for (var i = 1; i <= noOfRows; i++) {
        $("#code" + i).select2({
            placeholder: "{{__('select-code')}}",
            width: "100%",
        });
        $("#item" + i).select2({
            placeholder: "{{__('select-item')}}",
            width: "100%",
        });
    }

    function getType(rowNo) {
        var rowName = `radioName${rowNo}`;
        let selectedValue;

        if ($(`input[name="${rowName}"]:checked`).val() === "item") {
            selectedValue = "item";
        } else {
            selectedValue = "group";
        }

        $(`#typeNo${rowNo}`).empty(); // remove select tag in item code column
        $(`#typeName${rowNo}`).empty();
        $(`#type${rowNo}`).val(selectedValue);

        if (selectedValue == "item") {
            $(`#typeNo${rowNo}`).append(`
            <select onchange="getItemName(${rowNo})" class="form-control" id="code${rowNo}" required>
                <option></option>
                ${appenddata2}
            </select>
        `);
            $(`#typeName${rowNo}`).append(`
            <select onchange="getItemCode(${rowNo})" class="form-control" id="item${rowNo}" required>
                <option></option>
                ${appenddata1}
            </select>
        `);
            $(`#code${rowNo}`).select2({
                placeholder: "{{__('select-code')}}",
                width: "100%",
            });
            $(`#item${rowNo}`).select2({
                placeholder: "{{__('select-item')}}",
                width: "100%",
            });
        } else {
            $(`#typeNo${rowNo}`).append(`
            <select onchange="getItemName(${rowNo})" class="form-control" id="code${rowNo}" required>
                <option></option>
                @foreach($groups as $group)
                <option value="{{$group->id}}">{{$group->number}}</option>
                @endforeach
            </select>
        `);
            $(`#typeName${rowNo}`).append(`
            <select onchange="getItemCode(${rowNo})" class="form-control" id="item${rowNo}" required>
                <option></option>
                @foreach($groups as $group)
                <option value="{{$group->id}}">{{$group->name}}</option>
                @endforeach
            </select>
        `);
            $(`#code${rowNo}`).select2({
                placeholder: "{{__('select-group-number')}}",
                width: "100%",
            });
            $(`#item${rowNo}`).select2({
                placeholder: "{{__('select-group-name')}}",
                width: "100%",
            });
        }
    }

    function getItemName(rowNo) {
        if ($("#type" + rowNo).val() == "item") {
            $(`#item${rowNo}`).empty().append(`${appenddata1}`);
            var codeVal = $(`#code${rowNo}`).val();
            $(`#item${rowNo} option[value='${codeVal}']`).attr("selected", "selected");
        } else {
            $(`#item${rowNo}`).empty().append(`
                @foreach($groups as $group)
                <option value="{{$group->id}}">{{$group->name}}</option>
                @endforeach
            `);
            var codeVal = $(`#code${rowNo}`).val();
            $(`#item${rowNo} option[value='${codeVal}']`).attr("selected", "selected");
        }
    }

    function getItemCode(rowNo) {
        if ($("#type" + rowNo).val() == "item") {
            $(`#code${rowNo}`).empty().append(`${appenddata2}`);
            var nameVal = $(`#item${rowNo}`).val();
            $(`#code${rowNo} option[value='${nameVal}']`).attr("selected", "selected");
        } else {
            $(`#code${rowNo}`)
                .empty()
                .append(`
                @foreach($groups as $group)
                <option value="{{$group->id}}">{{$group->number}}</option>
                @endforeach
            `);
            var nameVal = $(`#item${rowNo}`).val();
            $(`#code${rowNo} option[value='${nameVal}']`).attr("selected", "selected");
        }
    }

    function addRow() {
        if ($("#item" + noOfRows).val() == "" || $("#code" + noOfRows).val() == "") {
            swal({
                icon: 'error',
                title: "{{__('error')}}",
                text: "{{__('table - error - msg')}}"
            });
        } else {
            noOfRows++;
            $('#tableBody').append(
                `
            <tr id="trControl${noOfRows}">
                <td>${noOfRows}</td>
                <input type="hidden" value="0" id="equation${noOfRows}">
                <input type="hidden" value="item" id="type${noOfRows}">
                <td>
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="radioName${noOfRows}" id="itemRadio${noOfRows}" value="item" checked onchange="getType(${noOfRows})">
                                <label class="form-check-label" for="itemRadio${noOfRows}">
                                    {{__('item')}}
                                </label>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="radioName${noOfRows}" id="groupRadio${noOfRows}" value="group" onchange="getType(${noOfRows})">
                                <label class="form-check-label" for="groupRadio${noOfRows}">
                                    {{__('group')}}
                                </label>
                            </div>
                        </div>
                    </div>
                </td>
                <td id="typeNo${noOfRows}">
                    <select onchange="getItemName(${noOfRows})" class="form-control" id="code${noOfRows}" required>
                        <option></option>
                        ${appenddata2}
                    </select>
                </td>
                <td id="typeName${noOfRows}">
                    <select onchange="getItemCode(${noOfRows})" class="form-control" id="item${noOfRows}" required>
                        <option></option>
                        ${appenddata1}
                    </select>
                </td>
                <td>
                    <input class="form-control" type="number" id="minQuantity${noOfRows}"
                        placeholder="{{__('enter-min-quantity')}}" required>
                </td>
                <td>
                    <input class="form-control" type="number" id="maxQuantity${noOfRows}"
                        placeholder="{{__('enter-max-quantity')}}" required>
                </td>
                <td style="text-align: center">
                    <div class="form-check">
                        <input type="checkbox" class="form-check-input" id="check${noOfRows}">
                    </div>
                </td>
                <td style="text-align: center"><span class="control-link remove"><i class="far fa-trash-alt"></i></span></td>
            </tr>
            `
            );
            $("#code" + noOfRows).select2({
                placeholder: "{{__('select-code')}}",
                width: "100%",
            });
            $("#item" + noOfRows).select2({
                placeholder: "{{__('select-item')}}",
            });
        }
    }

    $("#btn").on("click", async function() {
        var baseUrl = window.location.origin;
        var dataArray = [];
        var completed = 1;
        var product_equations_id = $('#product_equations_id').val();

        for (var i = 1; i <= noOfRows; i++) {
            if ($("#item" + i).val() == "" || $("#code" + i).val() == "") {
                swal({
                    icon: 'error',
                    title: "{{__('error')}}",
                    text: "{{__('fill-row-error')}}" + i
                });
                completed = 0;
                break;
            } else {
                const dataObj = {
                    equation_id: $("#equation" + i).val(),
                    type: $("#type" + i).val(),
                    typeId: $("#item" + i).val(),
                    minQuantity: $("#minQuantity" + i).val(),
                    maxQuantity: $("#maxQuantity" + i).val(),
                    required: $("#check" + i).is(":checked") ? 1 : 0
                };
                dataArray.push(dataObj);
            }
        }

        if (completed == 1) {
            $.ajax({
                type: "post",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url: baseUrl + "/en/ajax/items/product-equations/create",
                data: {
                    "id": product_equations_id,
                    "equations": JSON.stringify(dataArray)
                },
                success: function(response) {
                    if (response["status"] === 200) {
                        swal({
                            title: "Added Successfully",
                            text: "The Production Equations Has Been Updated Successfully",
                            icon: "success",
                        }).then(function() {
                            window.location.href = '{{route("admin.items.index")}}';
                        });
                    }
                },
                error: function(response) {}
            });
        }
    });

    $(document).on('click', '.table .remove', function() {
        $(this).closest('tr').remove();
        noOfRows--;
        $('.table tbody tr').each(function(i) {
            $($(this).find('td')[0]).html(i + 1);
            $($(this).find('td input')[0]).attr("name", "radioName" + (i + 1));
            $($(this).find('td input')[1]).attr("name", "radioName" + (i + 1));
            $($(this).find('td input')[0]).attr("id", "itemRadio" + (i + 1));
            $($(this).find('td input')[1]).attr("id", "groupRadio" + (i + 1));
            $($(this).find('td label')[0]).attr("for", "itemRadio" + (i + 1));
            $($(this).find('td label')[1]).attr("for", "groupRadio" + (i + 1));
            $($(this).find('td select')[0]).attr("id", "code" + (i + 1));
            $($(this).find('td select')[1]).attr("id", "item" + (i + 1));
            $($(this).find('td')[2]).attr("id", "typeNo" + (i + 1));
            $($(this).find('td')[3]).attr("id", "typeName" + (i + 1));
            $($(this).find('td input')[2]).attr("id", "minQuantity" + (i + 1));
            $($(this).find('td input')[3]).attr("id", "maxQuantity" + (i + 1));
            $($(this).find('td input')[4]).attr("id", "check" + (i + 1));
            $($(this)).attr("id", "trControl" + (i + 1));
            $($(this).find('input')[0]).attr("id", "equation" + (i + 1));
            $($(this).find('input')[1]).attr("id", "type" + (i + 1));
            $("#code" + (i + 1)).removeAttr("onchange");
            $("#code" + (i + 1)).attr("onchange", "getItemName(" + (i + 1) + ")");
            $("#item" + (i + 1)).removeAttr("onchange");
            $("#item" + (i + 1)).attr("onchange", "getItemCode(" + (i + 1) + ")");
            $("#itemRadio" + (i + 1)).removeAttr("onchange");
            $("#itemRadio" + (i + 1)).attr("onchange", "getType(" + (i + 1) + ")");
            $("#groupRadio" + (i + 1)).removeAttr("onchange");
            $("#groupRadio" + (i + 1)).attr("onchange", "getType(" + (i + 1) + ")");
        });

        if (noOfRows == 0) {
            noOfRows++;
            $('#tableBody').append(
                `
                    <tr id="trControl` + noOfRows + `">
                    <td>` + noOfRows + `</td>
                <input type="hidden" value="0" id="equation` + noOfRows + `">
                    <input type="hidden" value="item" id="type` + noOfRows + `">
                            <td>
                                <div class="row">
                                    <div class="col-lg-6">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="radioName` + noOfRows + `" id="itemRadio` + noOfRows + `" value="item" checked onchange="getType(` + noOfRows + `)">
                                                <label class="form-check-label" for="itemRadio` + noOfRows + `">
                                                    {{__('item')}}
                                                </label>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="radioName` + noOfRows + `" id="groupRadio` + noOfRows + `" value="group" onchange="getType(` + noOfRows + `)">
                                                <label class="form-check-label" for="groupRadio` + noOfRows + `">
                                                    {{__('group')}}
                                                </label>
                                        </div>
                                    </div>
                                </div>
                            </td>
                            <td id="typeNo` + noOfRows + `">
                                <select onchange="getItemName(` + noOfRows + `)" class="form-control" id="code` + noOfRows + `" required>
                                    <option></option>
                                    ${appenddata2}
                                </select>
                            </td>
                            <td id="typeName` + noOfRows + `">
                                <select onchange="getItemCode(` + noOfRows + `)" class="form-control" id="item` + noOfRows + `" required>
                                    <option></option>
                                    ${appenddata1}
                                </select>
                            </td>
                            <td>
                                <input class="form-control" type="number" id="minQuantity` + noOfRows + `"
                                    placeholder="{{__('enter-min-quantity')}}" required>
                            </td>
                            <td>
                                <input class="form-control" type="number" id="maxQuantity` + noOfRows + `"
                                    placeholder="{{__('enter-max-quantity')}}" required>
                            </td>
                            <td style="text-align: center">
                                <div class="form-check">
                                    <input type="checkbox" class="form-check-input" id="check` + noOfRows + `">
                                </div>
                            </td>
                            <td style="text-align: center"><span class="control-link remove"><i
                                class="far fa-trash-alt"></i></span>
                            </td>
                        </tr>
                        `
            );
            $("#code" + noOfRows).select2({
                placeholder: "{{__('select-code')}}",
                width: "100%",
            });
            $("#item" + noOfRows).select2({
                placeholder: "{{__('select-item')}}",
                width: "100%",
            });
        }
    });
</script>
@endsection