@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>{{__("groups")}}</h1>
        <p>{{__("all-groups")}}</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.group-index")}}">{{__("groups")}}</a></li>
        <li class="breadcrumb-item"><a href="#">{{__("create")}}</a></li>
    </ul>
</div>
@endsection

@section("content")
<form id="main_form" method="post">
    @csrf
    <div class="tile" style="margin-left: 35%; margin-right: 35%">
        <h3 style="text-align: center">{{__("groups-control")}}</h3>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="tile">
                <div class="tile-body">
                    <div class="row">
                        <input type="hidden" value="0" id="groupId">

                        <div class="col-lg-6">
                            <div class="form-group row">
                                <label style="padding-left: 40px" for="staticEmail" class="col-form-label"><b>{{__("group-number")}}</b></label>
                                <div class="col-sm-8">
                                    <input class="form-control @if($errors->has('number')) is-invalid @endif" type="text" name="number" id="number" placeholder="{{__("enter-group-number")}}" value="{{inputValue("number")}}">
                                    @error("number")
                                    <div class="input-error" style="padding-top: 10px">{{$message}}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-6">
                            <div class="form-group row">
                                <label style="padding-left: 40px" for="staticEmail" class="col-form-label"><b>{{__("group-name")}}</b></label>
                                <div class="col-sm-8">
                                    <input class="form-control @if($errors->has('name')) is-invalid @endif" type="text" name="name" id="name" placeholder="{{__("enter-group-name")}}" value="{{inputValue("name")}}">
                                    @error("name")
                                    <div class="input-error" style="padding-top: 10px">{{$message}}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>
                    <br>

                    <div class="row">
                        <div class="col-md-12">
                            <div class="table-responsive">
                                <table class="table table-hover table-bordered" id="sampleTable">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th style="width: 20%">{{__('type')}}</th>
                                            <th style="width: 20%">{{__('number')}}</th>
                                            <th style="width: 40%">{{__('name')}}</th>
                                            <th style="text-align: center">{{__('delete')}} </th>
                                        </tr>
                                    </thead>
                                    <tbody id="tableBody">
                                                                                <tr id="trControl{{$serial_number}}">
                                            <td>{{$serial_number}}</td>
                                            <input type="hidden" value="item" id="type{{$serial_number}}">
                                            <input type="hidden" value="0" id="id{{$serial_number}}">
                                            <td>
                                                <div class="row">
                                                    <div class="col-lg-6">
                                                        <div class="form-check">
                                                            <input onchange="getType({{$serial_number}})" class="form-check-input" type="radio" name="radioName{{$serial_number}}" id="itemRadio{{$serial_number}}" value="item" checked>
                                                            <label class="form-check-label" for="itemRadio{{$serial_number}}">
                                                                {{__('item')}}
                                                            </label>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <div class="form-check">
                                                            <input onchange="getType({{$serial_number}})" class="form-check-input" type="radio" name="radioName{{$serial_number}}" id="groupRadio{{$serial_number}}" value="group">
                                                            <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>
                                                </select>
                                            </td>
                                            <td id="typeName{{$serial_number}}">
                                                <select onchange="getItemCode({{$serial_number}})" class="form-control" id="item{{$serial_number}}" required>
                                                </select>
                                            </td>
                                            <td style="text-align: center"><span class="control-link remove"><i class="far fa-trash-alt"></i></span>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                                <div>
                                    <br>
                                    <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" 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 saveHide" style="display: none"></i><span id="textSpan" style="font-size: 14px">{{__("save")}}</span>
                            </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">
        $('#sampleTable').DataTable({
            "info": false,
            "paging": false,
            "searching": false
        });
</script>
<!-- Google analytics script-->
<script type="text/javascript">
    let noOfRows = 1;
    $("#code" + noOfRows).select2({
        placeholder: "{{__('select-code')}}",
        width: "100%",
    });
    $("#item" + noOfRows).select2({
        placeholder: "{{__('select-item')}}",
        width: "100%",
    });

    var item_code = "";
    var item_name = "";
    var allItems = {!!json_encode($items) !!};

    allItems.forEach(function(item) {
        item_code += `<option value="${item.id}">${item.item_code}</option>`;
        item_name += `<option value="${item.id}">${item.name}</option>`;
    });

    var group_name = "";
    var group_number = "";
    var allGroups = {!!json_encode($groups) !!};

    allGroups.forEach(function(item) {
        group_name += `<option value="${item.id}">${item.name}</option>`;
        group_number += `<option value="${item.id}">${item.number}</option>`;
    });

    $('#code'+noOfRows).empty();
    $('#code'+noOfRows).append(`<option></option>`);
    $('#code'+noOfRows).append(item_code);

    $('#item'+noOfRows).empty();
    $('#item'+noOfRows).append(`<option></option>`);
    $('#item'+noOfRows).append(item_name);

    // function to check the value of radio button
    function getType(rowNo) {
        var rowName = "radioName" + rowNo;
        let selectedValue;
        if ($('input[name="' + rowName + '"]:checked').val() == "item")
            selectedValue = "item";
        else
            selectedValue = "group";

        $("#typeNo" + rowNo).empty();
        $("#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>
                ${item_code}
            </select>
        `);

            $("#typeName" + rowNo).append(`
            <select onchange="getItemCode(` + rowNo + `)" class="form-control" id="item` + rowNo + `" required>
                <option></option>
                ${item_name}
            </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>
                ${group_number}
            </select>
        `);

            $("#typeName" + rowNo).append(`
            <select onchange="getItemCode(` + rowNo + `)" class="form-control" id="item` + rowNo + `" required>
                <option></option>
                ${group_name}
            </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(`
                ${item_name}
            `);
            var codeVal = $("#code" + rowNo).val();
            $("#item" + rowNo + " option[value='" + codeVal + "']").attr("selected", "selected");
        } else {
            $('#item' + rowNo)
                .empty()
                .append(`
                ${group_name}
            `);
            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(`
                ${item_code}
            `);
            var nameVal = $("#item" + rowNo).val();
            $("#code" + rowNo + " option[value='" + nameVal + "']").attr("selected", "selected");
        } else {
            $('#code' + rowNo)
                .empty()
                .append(`
                ${group_number}
            `);
            var nameVal = $("#item" + rowNo).val();
            $("#code" + rowNo + " option[value='" + nameVal + "']").attr("selected", "selected");
        }
    }

    function addRow() {
        noOfRows++;
        $('#tableBody').append(`
            <tr id="trControl` + noOfRows + `">
                <td>` + noOfRows + `</td>
                <input type="hidden" value="item" id="type` + noOfRows + `">
                <input type="hidden" value="0" id="id` + 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>
                        ${item_code}
                    </select>
                </td>
                <td id="typeName` + noOfRows + `">
                    <select onchange="getItemCode(` + noOfRows + `)" class="form-control" id="item` + noOfRows + `" required>
                        <option></option>
                        ${item_name}
                    </select>
                </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%",
        });
    }

    $("#btn").on("click", async function() {
        var baseUrl = window.location.origin;
        var dataArray = [];
        var completed = 1;
        if ($("#name").val() == "") {
            swal({
                icon: 'error',
                title: "{{__('error ')}}",
                text: "{{__('fill - group - name ')}}"
            })
            completed = 0;
        } else if ($("#number").val() == "") {
            swal({
                icon: 'error',
                title: "{{__('error ')}}",
                text: "{{__('fill - group - number ')}}"
            })
            completed = 0;
        } else {
            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 = {
                        id: $("#id" + i).val(),
                        content_type: $("#type" + i).val(),
                        content_id: $("#item" + i).val(),
                    };
                    dataArray.push(dataObj);
                }
            }
        }
        if (completed == 1) {
            $(".saveHide").css({'display': ''});
            $(".fa-check-circle")[0].style.display = "none";
            $("#btn").attr("disabled", true);
            $("#saveAndCreateVouchersBtn").attr("disabled", true);
            $.ajax({
                type: "post",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url: baseUrl + "/en/ajax/items/group/store",
                data: {
                    "groupId": $("#groupId").val(),
                    "groupName": $("#name").val(),
                    "groupNumber": $("#number").val(),
                    "parameters": JSON.stringify(dataArray)
                },
                success: function(response) {
                    //  response = JSON.parse(response);
                    if (response["status"] === 200) {
                        if ($("#groupId").val() == 0)
                            var title = "Added Successfully";
                        else
                            var title = "Updated Successfully";
                        swal({
                            title: title,
                            text: response["message"],
                            icon: "success",
                        }).then(function() {
                            window.location.href = '{{route("admin.items.group-index")}}';
                        })

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

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

        if (noOfRows == 0) {
            noOfRows++;
            const newRow = `
                <tr id="trControl${noOfRows}">
                    <td>${noOfRows}</td>
                    <input type="hidden" value="item" id="type${noOfRows}">
                    <input type="hidden" value="0" id="id${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>
                            ${item_code}
                        </select>
                    </td>
                    <td id="typeName${noOfRows}">
                        <select onchange="getItemCode(${noOfRows})" class="form-control" id="item${noOfRows}" required>
                            <option></option>
                            ${item_name}
                        </select>
                    </td>
                    <td style="text-align: center">
                        <span class="control-link remove"><i class="far fa-trash-alt"></i></span>
                    </td>
                </tr>
            `;
            $('#tableBody').append(newRow);
            $(`#code${noOfRows}`).select2({
                placeholder: "{{__('select-code')}}",
                width: "100%",
            });
            $(`#item${noOfRows}`).select2({
                placeholder: "{{__('select-item')}}",
                width: "100%",
            });
        }
    });
</script>
@endsection