@extends('admin.layout.master')
@section('content')
    <div class="row">
        <div class="col-xs-12">
            <h4 class="page-title"></h4>
        </div>
    </div>

    <div class="card">
        <div class="card-header">Appraisal Date Select</div>
        <div class="card-body">
            <form id="getData" method="POST" action="#">
                @csrf
                <div class='row'>
                    <div class='col-lg-2'>
                        <label>{{ __('obs.department') }}</label>
                        <select class='form-control select_2' name="department_id" id="departmentId">
                            <option>{{ __('obs.choose_one') }}</option>
                            @foreach ($departments as $item)
                                <option value="{{ $item->id }}">{{ $item->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class='col-lg-2'>
                        <label>{{ __('obs.designation') }} <span style="color: red">*</span></label>
                        <select onchange="search(this.value)" name="designation_id" class='form-control select_2'
                            id="designationId">
                            <option>{{ __('obs.choose_one') }}</option>
                            @foreach ($designations as $item)
                                <option value="{{ $item->id }}">{{ $item->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class='col-lg-2'>
                        <label>{{ __('obs.status') }}</label>
                        <select class="form-control select_2" name="status" id="status">
                            <option value="1">{{ __('obs.active') }}</option>
                            <option value="2">{{ __('obs.inactive') }}</option>
                        </select>
                    </div>

                    <div class="col-lg-3">
                        <label>Appraisal</label>
                        <select class="form-control select_2" id="paform_id" name="paform_id">
                            <option value="">Select Appraisal</option>
                            @foreach ($pa_form as $item)
                                <option value="{{ $item->id }}">{{ $item->title }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-lg-2">
                        <label>{{ __('obs.date') }} <span style="color: red">*</span></label>
                        <input type="date" class="form-control" name="date" id="Date" />
                    </div>

                    <div class="col-lg-12">
                        <table class="display  table table-stripped table-bordered mt-3" id="dataResult">
                            <thead>
                                <tr>
                                    <th>
                                        <label>
                                            {{ __('obs.sl') }}
                                            <input type="checkbox" id="select-all" onchange="checkAllCheckboxes()">
                                        </label>
                                    </th>
                                    <th>{{ __('obs.employee') }}</th>
                                    <th>{{ __('obs.department') }}</th>
                                    <th>{{ __('obs.designation') }}</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                    <div class='d-flex justify-content-center mt-4'>
                        <button type="submit" id="btn_submit"
                            class="btn btn-primary btn-sm">{{ __('obs.submit') }}</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('script')
    <script>
        $(document).ready(function() {
            $('.select_2').select2();
        });

        function search(id) {
            $('#loader').show();
            ajaxCallV2("{{ route('performance.appraisal.select.search') }}", "GET", {
                'designation_id': id
            }, function(data) {
                $('#loader').hide();
                $("#dataResult").html(data);
            }, function(error) {
                $('#loader').hide();
            });
        };

        function loader(buttonId, title, status = true) {
            $("#" + buttonId).prop("disabled", status).text(title);
        }

        $("#getData").on("submit", function(event) {
            event.preventDefault();
            let request = $("#getData").serializeArray();

            $.ajax({
                url: "{{ route('performance.appraisal.select.store') }}",
                method: "POST",
                data: new FormData(this),
                dataType: "JSON",
                contentType: false,
                cache: false,
                processData: false,
                beforeSend: function() {
                    loader('btn_submit', 'Please Wait...');
                },
                success: function(response) {
                    loader('btn_submit', 'Submit', false);
                    callSweetAlert('success', response.message, '');
                    location.reload();
                },
                error: function(error) {
                    loader('btn_submit', 'Submit', false);
                    if (error.status == 422) {
                        let object = error.responseJSON.errors;
                        let result = Object.keys(object).reduce(function(r, k) {
                            return r.concat(object[k] + '<br>');
                        }, []);

                        result = result.join("");
                        callSweetAlert('error', 'Opps!', result);
                    } else if (error.status == 421) {
                        callSweetAlert('error', 'Opps!', error.responseJSON.message);
                    } else {
                        callSweetAlert('error',
                            '<p class="text-danger">Something Went Wrong..!!!!</p>');
                    }

                },
            });
        });

        function checkAllCheckboxes() {
            if ($('#select-all').is(':checked')) {
                $('.emp_check').prop('checked', true);
                return;
            }
            $('.emp_check').prop('checked', false);
        }
    </script>
@endsection