@extends('layouts.master')
@section('title', $title)

@section('content')
    {{-- <h4 class="fw-bold py-3 mb-4"><span class="text-muted fw-light">User Profile /</span> Profile</h4> --}}
    @include('employee.staff.profile.menu')
  <div id="data_target">
    <div class="col-md-12">
        <div class="card shadow-sm border-0">

            <div class="card-header bg-white border-0 pt-4 pb-0">
                <h4 class="fw-bold text-primary">
                    <i class="fas fa-user-plus me-2"></i> Employee Registration
                </h4>
            </div>

            <div class="card-body">
                <form class="needs-validation" novalidate method="post" id="form" enctype="multipart/form-data">
                    <input type="hidden" name="id" id="id" value="{{ $staff?->id }}">

                    <!-- ========================================================= -->
                    <!--                     BASIC INFORMATION                     -->
                    <!-- ========================================================= -->

             
                       <h5 class="mt-4 mb-3 fw-bold border-start border-3 border-primary ps-2 text-primary">
                        <i class="fas fa-briefcase me-2"></i> Job Information
                    </h5>

                    <div class="row g-3">

                     



                        <!-- Job Title -->
                      <div class="col-md-6">
    <label class="form-label fw-bold">Job Title <span class="text-danger">*</span></label>
    <select name="job_title_id" id="job_title_id" class="form-control modalselect2">
        <option value=""> -- Select -- </option>
              @foreach ($jobtitles as $item)
                                    <option value="{{ $item->id }}" {{ $staff?->job_title_id == $item->id ? 'selected' : '' }}>
                                        {{ $item->name }}
                                    </option>
                                @endforeach
    
    </select>
</div>

   <!-- Job Grade -->
                        <div class="col-md-6">
                            <label class="form-label fw-bold">Job Grade <span class="text-danger">*</span></label>
                            <select name="job_grade_id" id="job_grade_id" class="form-control modalselect2">
                                <option value=""> -- Select -- </option>
                                @foreach ($grades as $item)
                                    <option value="{{ $item->id }}" {{ $staff?->job_grade_id == $item->id ? 'selected' : '' }}>
                                        {{ $item->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

   <div class="col-md-6">
                            <label class="form-label fw-bold">Salary Scale <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="salary_scale"
                                   value="{{ $staff?->salary_scale }}" required>
                        </div>


   <div class="col-md-6">
                            <label class="form-label fw-bold">Allowance <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="allowance"
                                   value="{{ $staff?->allowance }}" required>
                        </div>


                              <div class="col-md-6">
                            <label class="form-label fw-bold">Deduction Type <span class="text-danger">*</span></label>
                            <select name="deduction_type_id" class="form-control modalselect2">
                                <option value=""> -- Select -- </option>
                                @foreach ($deductions as $item)
                                    <option value="{{ $item->id }}" {{ $staff?->deduction_type_id == $item->id ? 'selected' : '' }}>
                                        {{ $item->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>



                         <div class="col-md-6">
                            <label class="form-label fw-bold">
                                <i class="fas fa-envelope me-2 text-secondary"></i> Join Date <span class="text-danger">*</span>
                            </label>
                            <input type="date" class="form-control" name="join_date"
                                   value="{{ $staff?->join_date }}" required>
                            <small class="text-danger errors"></small>
                        </div>


                     

                        <!-- Supervisor -->
                   
                    </div>





                    <div class="modal-footer border-0 mt-4">
                        <button type="submit" class="btn btn-success px-4">
                            <i class="fas fa-check me-2"></i>
                            <span id="spinners" class="d-none me-2"><i class="fas fa-spinner fa-spin"></i></span>
                            {{ __('messages.btn_update') }}
                        </button>
                    </div>

                </form>
            </div>

        </div>
    </div>
</div>


@endsection


@section('page_js')
    <script>
        $(function() {
            $("#form").on("submit", async function(e) {
                e.preventDefault()
                data = objectifyForm($(this).serializeArray())
             
                btn = $(this).find("button[type='submit']")
                console.log(btn)
                btn.prop("disabled", true)
                $("#spinners").removeClass("d-none")
                let res = await client($(this), '{{ route($route . '.payroll_employment') }}', 'post', data)
                $("#spinners").addClass("d-none")
                btn.prop("disabled", false)
                if (res && res.status == 200) {
                    // $("#table").DataTable().ajax.reload()
                    Swal.fire({
                        text: res.data,
                        icon: "success",
                        buttonsStyling: !1,
                        confirmButtonText: "Ok, got it!",
                        customClass: {
                            confirmButton: "btn btn-primary",
                        },
                    });
                    // $("#modal").modal("toggle")
                }
            })


                $("#department_id").on("change", async function() {
                let res = await _client('{{ route('structure.jobtitle.dropdown') }}', "post", {
                    id: $(this).val()
                })

                if (res && res.status == 200) {
                    $("#job_title_id").empty()
                    $("#job_title_id").select2({
                        data: res.data,
                    });
                }

                res = await _client('{{ route('structure.section.dropdown') }}', "post", {
                    id: $(this).val()
                })

                if (res && res.status == 200) {
                    $("#section_id").empty()
                    $("#section_id").select2({
                        data: res.data,
                    });
                }
            })






        })
    </script>
@endsection