@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="#">{{__("edit")}}</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">{{$name}} - {{__("group-control")}}</h3>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="tile">
                <div class="tile-body">
                    <br>
                    <div class="row">
                        <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="{{$number}}" disabled>
                                    @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="{{$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">
                                                                                @foreach($contents as $key => $content)
                                        <tr id="trControl{{++$serial_number}}">
                                            <td>{{$serial_number}}</td>
                                            <input type="hidden" value="{{$id}}" id="id">
                                            <input type="hidden" value="{{$content->content_type}}" id="type{{$serial_number}}">
                                            <input type="hidden" value="{{$content->id}}" id="contentId{{$serial_number}}">
                                            <td>
                                                <div class="row">
                                                    <div class="col-lg-3 m-1">
                                                        <div class="form-check">
                                                            <input class="form-check-input" type="radio" name="radioName{{$serial_number}}" id="itemRadio{{$serial_number}}" value="item" @if($content->content_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-4">
                                                        <div class="form-check">
                                                            <input class="form-check-input" type="radio" name="radioName{{$serial_number}}" id="groupRadio{{$serial_number}}" value="group" @if($content->content_type == "group") checked @endif onchange="getType({{$serial_number}})">
                                                            <label class="form-check-label" for="groupRadio{{$serial_number}}">
                                                                {{__('group')}}
                                                            </label>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-3">
                                                        <div class="form-check">
                                                            <input class="form-check-input" type="radio" name="radioName{{$serial_number}}" id="change{{$serial_number}}" value="item" onchange="getType({{$serial_number}})">
                                                            <label class="form-check-label" for="change{{$serial_number}}">
                                                                {{__('change')}}
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td id="typeNo{{$serial_number}}">
                                                <div onclick="">
                                                    <select disabled onchange="getItemName({{$serial_number}})" class="form-control" id="code{{$serial_number}}" required>
                                                        <option></option>
                                                        @if($content->content_type == "item")
                                                        <option selected value="{{$content->id}}">{{$content->code->code.$content->code->item_code}}</option>
                                                        @else
                                                        <option selected value="{{$content->id}}">{{$content->number}}</option>
                                                        @endif
                                                    </select>
                                                </div>
                                            </td>
                                            <td id="typeName{{$serial_number}}">
                                                <select disabled onchange="getItemCode({{$serial_number}})" class="form-control" id="item{{$serial_number}}" required>
                                                    <option></option>
                                                    @if($content->content_type == "item")
                                                    <option selected value="{{$content->id}}">{{$content->name}}</option>
                                                    @else
                                                    <option selected value="{{$content->id}}">{{$content->name}}</option>
                                                    @endif
                                                </select>
                                            </td>
                                            <td style="text-align: center">
                                                <span class="control-link" style="color: greenyellow;" onclick="update({{$serial_number}})" type="button"><i class="fa fa-pencil-square-o"></i></span>
                                                <span class="control-link" style="color: #FF4500;" onclick="delete_item({{$content->id}},{{$serial_number}})" type="button"><i class="far fa-trash-alt"></i></span>
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                                @if ($showAddButton)
                                <div class="d-flex justify-content-lg-between mt-3">
                                    <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>
                                        {{$contents->links("pagination::bootstrap-4")}}
                                    </div>
                                </div>
                                <div id="submitFormDiv" class="d-flex justify-content-end">
                                    <div 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>
                                @else
                                <div class="d-flex justify-content-lg-between mt-3">
                                    <div></div>
                                    <div>
                                        {{$contents->links("pagination::bootstrap-4")}}
                                    </div>
                                </div>
                                @endif
                            </div>
                            <br><br>
                        </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
    });
</script>

<script type="text/javascript">
    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%",
        });
    }

    var options_code = "";
    var options_name = "";
    var allItems = {!!json_encode($all_item) !!};

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

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

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

    // 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(); // 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>
                    ${options_code}
                </select>
            `);

            $("#typeName" + rowNo).append(`
                <select onchange="getItemCode(` + rowNo + `)" class="form-control" id="item` + rowNo + `" required>
                    <option></option>
                    ${options_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(`
                    ${options_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(`
                ${options_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() {
        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="item" id="type` + noOfRows + `">
                    <input type="hidden" value="0" id="contentId` + 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>
                        ${options_code}
                        </select>
                    </td>
                    <td id="typeName` + noOfRows + `">
                        <select onchange="getItemCode(` + noOfRows + `)" class="form-control" id="item` + noOfRows + `" required>
                        <option></option>
                        ${options_name}
                        </select>
                    </td>
                    <td style="text-align: center">
                    </td>
                </tr>
                `);

            $("#code" + noOfRows).select2({
                placeholder: "{{__('select-code')}}",
                width: "100%",
            });
            $("#item" + noOfRows).select2({
                placeholder: "{{__('select-item')}}",
                width: "100%",
            });
        }

    }

    $("#btn").on("click", async function() {
        var id = $('#id').val();
        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: $("#contentId" + 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/create",
                data: {
                    "groupId": id,
                    "groupName": $("#name").val(),
                    "parameters": JSON.stringify(dataArray)
                },
                success: function(response) {
                    console.log(response);
                    //  response = JSON.parse(response);
                    if (response["status"] === 200) {
                        swal({
                            title: "Created Successfully",
                            text: "The Group Has Been Created Successfully",
                            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(xhr, error) {
                    console.log(xhr);
                }
            });
        }
    });

    function update(rowNo) {
        var id = $('#id').val();
        var baseUrl = window.location.origin;
        var dataArray = [];
        var completed = 1;

        const dataObj = {
            id: $("#contentId" + rowNo).val(),
            content_type: $("#type" + rowNo).val(),
            content_id: $("#item" + rowNo).val(),
        };
        dataArray.push(dataObj);

        if (completed === 1) {
            swal({
                title: "Are you sure?",
                text: "This action will update the group. Do you want to proceed?",
                icon: "warning",
                buttons: {
                    cancel: "No",
                    confirm: "Yes"
                },
            }).then(function(confirmed) {
                if (confirmed) {
                    $.ajax({
                        type: "post",
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        url: baseUrl + "/en/ajax/items/group/update",
                        data: {
                            "groupId": id,
                            "groupName": $("#name").val(),
                            "parameters": JSON.stringify(dataArray)
                        },
                        success: function(response) {
                            console.log(response);
                            //  response = JSON.parse(response);
                            if (response["status"] === 200) {
                                swal({
                                    title: "Updated Successfully",
                                    text: "The Group Has Been Updated Successfully",
                                    icon: "success",
                                }).then(function() {});
                            } else if (response["status"] === 201) {
                                swal({
                                    icon: 'error',
                                    title: "{{__('error ')}}",
                                    text: response["message"]
                                });
                            }
                        },
                        error: function(xhr, error) {
                            console.log(xhr);
                        }
                    });
                }
            });
        }
    }

    function delete_item(content_id, rowNo) {
        var baseUrl = window.location.origin;

        swal({
            title: "Are you sure?",
            text: "This action will delete the group. Do you want to proceed?",
            icon: "warning",
            buttons: {
                cancel: "No",
                confirm: "Yes"
            },
        }).then(function(confirmed) {
            if (confirmed) {
                $.ajax({
                    type: "get",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    url: baseUrl + "/en/ajax/items/group/delete/" + content_id,
                    dataType: 'json',
                    success: function(response) {
                        if (response["status"] === 200) {
                            swal({
                                title: "Deleted Successfully",
                                text: "The Group Has Been Deleted Successfully",
                                icon: "success",
                            }).then(function() {});
                        } else if (response["status"] === 201) {
                            swal({
                                icon: 'error',
                                title: "{{__('error ')}}",
                                text: response["message"]
                            });
                        }
                        $('#trControl' + rowNo).closest('tr').remove();
                    },
                    error: function(xhr, error) {}
                });
            }
        });
    }
</script>
@endsection