@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-12">
            <form id="form" action="{{ route('performance.appraisal.form.store_update') }}" method="POST"
                enctype="multipart/form-data">
                @csrf
                <div class="card">
                    <div class="card-header">Performance Appraisal Form</div>
                    <div class="card-body">
                        <div class="row">
                            <div class='col-lg-3'>
                                <label>{{ __('obs.title') }} <span style="color: red">*</span></label>
                                <input type='text'
                                    @isset($edit) value="{{ $edit->title }}"@endisset id="Title"
                                    name="title" class="form-control" />
                                <input type='hidden' name="id"
                                    @isset($edit) value="{{ $edit->id }}" @endisset />
                            </div>

                            <div class='col-lg-3'>
                                <label>{{ __('obs.department') }} <span style="color: red">*</span></label>
                                <select class='form-control select_2' name="department_id">
                                    <option value="">{{ __('obs.select') }}</option>
                                    @foreach ($departments as $department)
                                        <option value="{{ $department->id }}"
                                            @isset($edit) {{ $department->id == $edit->department_id ? 'selected' : '' }} @endisset>
                                            {{ $department->name }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class='col-lg-3'>
                                <label>{{ __('obs.designation') }} <span style="color: red">*</span></label>
                                <select class="form-control select_2" name="designation_id[]" multiple="multiple">
                                    @foreach ($designations as $designation)
                                        <option value="{{ $designation->id }}"
                                            {{ in_array($designation->id, $selected_designation ?? []) ? 'selected' : '' }}>
                                            {{ $designation->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <table class="table table-bordered mt-4">
                            <thead>
                                <tr>
                                    <th class="text-center">{{ __('obs.group_title') }}</th>
                                    <th>Performance Criteria</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($groups as $key => $group)
                                    <tr>
                                        <td class="text-center">
                                            {{ $group->name }}
                                            <input type='hidden' id="groupTitleId-{{ $group->id }}"
                                                value="{{ $group->id }}" name="group_id[]" />
                                        </td>

                                        <td>
                                            <div class="d-flex justify-content-start">
                                                @foreach ($group->criteria as $key => $criterias)
                                                    <label class="p-2 m-2"
                                                        style="border: 1px solid black; background-color: #faf0f0">
                                                        {{ $criterias->name }}
                                                        <input type='checkbox' value="{{ $criterias->id }}"
                                                            id="TitleId-{{ $criterias->id }}"
                                                            @isset($edit) {{ in_array($criterias->id, $existed_criterias) ? 'checked' : '' }} @endisset
                                                            name="criteria_id[]" />
                                                    </label>
                                                @endforeach
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>

                        <div class="d-flex justify-content-center">
                            <button type="submit" id="submit" onclick="return confirm('Are you sure?')"
                                class="btn btn-primary mt-4 btn-sm">
                                {{ __('obs.submit') }}
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('script')
    <script>
        function loader(buttonId, title, status = true) {
            $("#" + buttonId).prop("disabled", status).text(title);
        }
        $(document).ready(function() {
            $('.select_2').select2();

            $('#form').on('submit', (function(e) {
                e.preventDefault();
                let formData = new FormData(this);

                $.ajax({
                    type: 'POST',
                    url: $(this).attr('action'),
                    data: formData,
                    cache: false,
                    contentType: false,
                    processData: false,
                    beforeSend: function() {
                        loader('submit', 'Please Wait...');
                    },
                    success: function(data) {
                        loader('submit', 'Submit', false);
                        callSweetAlert('success', data.message, '');
                        location.reload();
                    },
                    error: function(data) {
                        loader('submit', 'Submit', false);
                        if (data.status == 422) {
                            let object = data.responseJSON.errors,
                                result = Object.keys(object).reduce(function(r, k) {
                                    return r.concat(object[k] + '<br>');
                                }, []);
                            result = result.join("");
                            callSweetAlert('error', 'Opps!', result);
                        } else if (data.status == 421) {
                            callSweetAlert('error', 'Opps!', data.responseJSON.message);
                        } else {
                            callSweetAlert('error','<p class="text-danger">Something Went Wrong..!!!!</p>');
                        }
                    }
                });
            }));
        });
    </script>
@endsection