@extends('admin.layout.master')
@section('content')
    <div class="row">
        <div class="col-xs-12">
            <h4 class="page-title"></h4>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-5">
            <div class="card">
                <div class="card-header">{{ __('obs.criteria_group') }}</div>
                <div class="card-body">
                    <table class="table table-bordered text-center">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>{{ __('obs.title') }}</th>
                                <th>{{ __('obs.status') }}</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody id="dataResult">
                            @php($i = 1)
                            @foreach ($result as $v_result)
                                <tr data-id="{{ $v_result->id }}">
                                    <td>{{ $i++ }}</td>
                                    <td id="nameid-{{ $v_result->id }}">{{ $v_result->name }}</td>
                                    <td id="statusId-{{ $v_result->id }}">
                                        @if ($v_result->status == 1)
                                            <span style="color:green">{{ __('obs.active') }}</span>
                                        @elseif($v_result->status == 2)
                                            <span style="color:red">{{ __('obs.inactive') }}</span>
                                        @endif
                                    </td>
                                    <td id="actionforgptitle-{{ $v_result->id }}">
                                        <button onclick="editGroupTitle({{ $v_result->id }})"
                                            class="btn btn-primary btn-sm">{{ __('obs.edit') }}</button>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>

                    </table>
                    <div class="row">
                        <div class='col-md-6'>
                            <label>{{ __('obs.name') }}</label>
                            <input type='text' name="name" id="names" class="form-control">
                        </div>
                        <div class='col-md-3'>
                            <label>{{ __('obs.status') }}</label>
                            <select class="form-control input-sm" name="status" id="statuss">
                                <option value="1">{{ __('obs.active') }}</option>
                                <option value="2">{{ __('obs.inactive') }}</option>
                            </select>
                        </div>

                        <div class="col-md-3">
                            <label></label>
                            <button class="btn btn-danger mt-4 btn-sm"
                                onclick="SavegroupTitle()">{{ __('obs.submit') }}</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-7">
            <div class="card">
                <div class="card-header">{{ __('obs.criteria') }}</div>
                <div class="card-body">
                    <table class="table table-striped table-bordered text-center">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>{{ __('obs.criteria') }}</th>
                                <th>{{ __('obs.parent') }}</th>
                                <th>{{ __('obs.total_marks') }}</th>
                                <th>{{ __('obs.status') }}</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody id="dataCriteriaResult">
                            @php($i = 1)
                            @foreach ($criteriaresult as $v_criteriaresult)
                                <tr>
                                    <td>{{ $i++ }}</td>
                                    <td id="namesid-{{ $v_criteriaresult->id }}">{{ $v_criteriaresult->name }}</td>
                                    <td id="parentId-{{ $v_criteriaresult->id }}">
                                        {{ $v_criteriaresult->criteria_group_title->name ?? '' }}
                                    </td>

                                    <td id="PointId-{{ $v_criteriaresult->id }}">
                                        {{ $v_criteriaresult->point }}
                                    </td>
                                    <td id="statussId-{{ $v_criteriaresult->id }}">
                                        @if ($v_criteriaresult->status == 1)
                                            <span style="color:green">{{ __('obs.active') }}</span>
                                        @elseif($v_criteriaresult->status == 2)
                                            <span style="color:red">{{ __('obs.inactive') }}</span>
                                        @endif
                                    </td>
                                    <td id="actionforcriteria-{{ $v_criteriaresult->id }}" class="d-flex">
                                        <button onclick="editCriteria({{ $v_criteriaresult->id }})"
                                            class="btn btn-primary btn-sm">
                                            {{ __('obs.edit') }}
                                        </button>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>

                    <div class="row">
                        <div class='col-md-3'>
                            <label>{{ __('obs.criteria') }}</label>
                            <input type='text' id="cname" name="name" class="form-control" />
                        </div>
                        <div class='col-md-3'>
                            <label>{{ __('obs.criteria_group') }}</label>
                            <select class="form-control input-sm remote_class" name="root_id" id="Root_id">
                            </select>
                        </div>
                        <div class='col-md-3'>
                            <label>{{ __('obs.point') }}</label>
                            <input type='number' id="point" name="point" class="form-control" />
                        </div>

                        <div class="col-md-3 mt-4">
                            <label>&nbsp;</label>
                            <button class="btn btn-success btn-sm" onclick="SaveCriteria()">
                                {{ __('obs.submit') }}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        $(document).ready(function() {
            remote_select("remote_class");
        });

        function SavegroupTitle() {
            ajaxCallV2("{{ route('performance.criteria.group.store') }}", 'POST', {
                name: $("#names").val(),
                status: $("#statuss").val(),
                id: $("#ids").val()
            }, (data) => {
                $('#loader').hide();
                let HtmlValue = '';
                let status = '';
                let color = '';
                $.each(data.result, function(key, val) {
                    if (val.status == 1) {
                        status = 'Active';
                        color = 'color:green';
                    } else if (val.status == 2) {
                        status = 'Inactive';
                        color = 'color:red';
                    }
                    HtmlValue +=
                        '<tr>' +
                        '<td>' + Number(key + 1) + '</td>' +
                        '<td id="nameid-' + val.id + '">' + val.name + '</td>' +
                        '<td id="statusId-' + val.id + '">' + '<span style="' + color + '">' + status +
                        '</span>' + '</td>' +
                        '<td class="d-flex" id="actionforgptitle-' + val.id + '">' +
                        '<button onclick="editGroupTitle(' + val.id +
                        ')" class="btn btn-primary btn-sm">Edit</button>' + '</td>' +
                        '</tr>'
                });
                $('#dataResult').html(HtmlValue);
                $("#names").val('');
                $("#ids").val(0);

                Swal.fire({
                    position: 'top-end',
                    icon: 'success',
                    title: data.message,
                    showConfirmButton: false,
                    timer: 1500
                })
            }, (error) => {
                $('#loader').hide();
            });
        };


        function editGroupTitle(id) {
            ajaxCallV2('/performance/crietria/group/edit/' + id, 'GET', {}, (data) => {
                $('#loader').hide();

                let NameHtml = '';
                let StatusHtml = '';
                let ActionTilte = '';

                NameHtml += '<input type="text" id="names" name="name" value="' + data.name +
                    '" class="form-control"/>' +
                    '<input type="hidden" id="ids" name="id" value="' + data.id + '" class="form-control"/>';

                StatusHtml +=
                    '<select class="form-control input-sm status' + data.id + '" name="status" id="statuss">' +
                    '<option value="1">' + 'Active' + ' </option>' +
                    '<option value="2">' + 'inactive' + ' </option>' +
                    '</select>';

                ActionTilte += '<button onclick="SavegroupTitle()" class="btn btn-danger btn-sm">' + 'Update' +
                    '</button>' + '&nbsp' +
                    '<button class="btn btn-success btn-sm" onclick="CancelgroupTitle(' + data.id + ')">' +
                    'Cancel' + '</button>';

                $('#nameid-' + data.id).html(NameHtml);
                $('#statusId-' + data.id).html(StatusHtml);
                $('#actionforgptitle-' + data.id).html(ActionTilte);
                $('.status' + data.id).val(data.status).trigger('change');
            });
        }

        function CancelgroupTitle(id) {
            ajaxCallV2('/performance/crietria/group/edit/' + id, 'GET', {}, (data) => {
                $('#loader').hide();

                let NameHtml = '';
                let StatusHtml = '';
                let ActionTilte = '';
                let status = '';
                let color = '';

                if (data.status == 1) {
                    status = 'Active';
                    color = 'color:green';
                } else if (data.status == 2) {
                    status = 'Inactive';
                    color = 'color:red';
                }

                NameHtml += '<span>' + data.name + '</span>';
                StatusHtml += '<span style="' + color + '">' + status + '</span>';
                ActionTilte += '<button onclick="editGroupTitle(' + data.id +
                    ')" class="btn btn-primary btn-sm">Edit</button>';

                $('#nameid-' + data.id).html(NameHtml);
                $('#statusId-' + data.id).html(StatusHtml);
                $('#actionforgptitle-' + data.id).html(ActionTilte);
            });
        }

        function SaveCriteria() {
            ajaxCallV2("{{ route('performance.criteria.store') }}", 'POST', {
                name: $("#cname").val(),
                status: $("#cstatus").val(),
                id: $("#cid").val(),
                root_id: $("#Root_id").val(),
                point: $("#point").val()
            }, function(data) {
                $('#loader').hide();
                let HtmlValue = '';
                let status = '';
                let color = '';
                $.each(data.result, function(key, val) {
                    if (val.status == 1) {
                        status = 'Active';
                        color = 'color:green';
                    } else if (val.status == 2) {
                        status = 'Inactive';
                        color = 'color:red';
                    }

                    HtmlValue +=
                        '<tr>' +
                        '<td>' + Number(key + 1) + '</td>' +
                        '<td id="namesid-' + val.id + '">' + val.name + '</td>' +
                        '<td id="parentId-' + val.id + '">' + val.criteria_group_title.name + '</td>' +
                        '<td id="PointId-' + val.id + '">' + val.point + '</td>' +
                        '<td id="statussId-' + val.id + '">' + '<span style="' + color + '">' + status +
                        '</span>' + '</td>' +
                        '<td class="d-flex" id="actionforcriteria-' + val.id + '">' +
                        '<button onclick="editCriteria(' + val.id +
                        ')" class="btn btn-primary btn-sm">Edit</button>' + '</td>' +
                        '</tr>'
                });
                $('#dataCriteriaResult').html(HtmlValue);
                $("#cname").val('');
                $("#cid").val(0);

                remote_select("remote_class");
                Swal.fire({
                    position: 'top-end',
                    icon: 'success',
                    title: data.message,
                    showConfirmButton: false,
                    timer: 1500
                })
            }, (error) => {
                $('#loader').hide();
            });

        };


        function editCriteria(id) {
            ajaxCallV2('/performance/crietria/' + id, 'GET', {}, (data) => {
                $('#loader').hide();
                let NameHtml = '';
                let StatusHtml = '';
                let ActionTilte = '';
                let Rootid = '';
                let PointHtml = '';

                NameHtml += '<input type="text" id="cname" name="name" value="' + data.name +
                    '" class="form-control"/>' +
                    '<input type="hidden" id="cid" name="id" value="' + data.id + '" class="form-control"/>';

                Rootid += '<select class="form-control input-sm remote_classs" name="root_id" id="Root_id">' +
                    '<option value="' + data.criteria_group_title.id + '">' + data.criteria_group_title.name +
                    '</option>' + '</select>';

                PointHtml += '<input type="number" id="point" name="point" value="' + data.point +
                    '" class="form-control"/>';

                StatusHtml +=
                    '<select class="form-control input-sm status' + data.id + '" name="status" id="cstatus">' +
                    '<option value="1">' + 'Active' + ' </option>' +
                    '<option value="2">' + 'inactive' + ' </option>' +
                    '</select>';

                ActionTilte += '<button onclick="SaveCriteria()" class="btn btn-danger btn-sm">' + 'Update' +
                    '</button>' + '&nbsp' +
                    '<button class="btn btn-success btn-sm" onclick="CancelCriteria(' + data.id + ')">' +
                    'Cancel' + '</button>';

                $('#namesid-' + data.id).html(NameHtml);
                $('#statussId-' + data.id).html(StatusHtml);
                $('#actionforcriteria-' + data.id).html(ActionTilte);
                $('#parentId-' + data.id).html(Rootid);
                $('#PointId-' + data.id).html(PointHtml);
                $('#status-' + data.id).val(data.status).trigger('change');

                remote_select("remote_classs");
            })

        }


        function CancelCriteria(id) {
            ajaxCallV2('/performance/crietria/' + id, 'GET', {}, (data) => {
                $('#loader').hide();
                let NameHtml = '';
                let StatusHtml = '';
                let ActionTilte = '';
                let ParentId = '';
                let Point = '';
                let status = '';
                let color = '';

                if (data.status == 1) {
                    status = 'Active';
                    color = 'color:green';
                } else if (data.status == 2) {
                    status = 'Inactive';
                    color = 'color:red';
                }

                NameHtml += '<span>' + data.name + '</span>';
                ParentId += '<span>' + data.criteria_group_title.name + '</span>';
                Point += '<span>' + data.point + '</span>';
                StatusHtml += '<span style="' + color + '">' + status + '</span>';
                ActionTilte += '<button onclick="editCriteria(' + data.id +
                    ')" class="btn btn-primary btn-sm">Edit</button>';

                $('#namesid-' + data.id).html(NameHtml);
                $('#statussId-' + data.id).html(StatusHtml);
                $('#actionforcriteria-' + data.id).html(ActionTilte);
                $('#parentId-' + data.id).html(ParentId);
                $('#PointId-' + data.id).html(Point);
                remote_select("remote_class");
            });

        }

        function remote_select(cls) {
            $.ajaxSetup({
                headers: {
                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                },
            });

            $("." + cls).select2({
                minimumInputLength: 3,

                ajax: {
                    url: "{{ route('performance.criteria.group.index') }}",
                    dataType: "json",
                    type: "GET",
                    quietMillis: 50,
                    data: function(term) {
                        return {
                            _token: $("meta[name=csrf-token]").attr("content"),
                            name: term,
                        };
                    },

                    processResults: function(data) {
                        return {
                            results: $.map(data, function(item) {
                                return {
                                    text: item.name,
                                    id: item.id,
                                };
                            }),
                        };
                    },
                    transport: function(params, success, failure) {
                        let $request = $.ajax(params);

                        $request.then(success);
                        $request.fail(failure);

                        return $request;
                    },
                },
            });
        }
    </script>
@endsection