@extends('admin.layouts.admin')
@section('content')
<div class="page-content">
    {!! globalSearchFilter($filters) !!}
    <div class="card mb-0">
        <div class="card-body">

            @if (canAccess('job-active', 'create'))
            <div class="d-flex gap-2 mb-3 align-items-center">
                <!--<button class="btn btn-primary" id="btnTambahData">-->
                <button class="btn btn-primary" id="addJobBtn">
                    <i class="bi bi-plus fw-bold"></i> Add
                </button>
            </div>
            @endif

            <div class="table-responsive table-sticky">
                <table class="table table-bordered" id="masterTable">
                    <thead class="table-light text-center text-uppercase">
                    <tr>
                        <th rowspan="2" class="text-center">No</th>
						<th rowspan="2" class="text-center">Hiring Stage</th>
						<th rowspan="2" class="text-center">Client</th>
						<th rowspan="2" class="text-center">Position</th>
						<th rowspan="2" class="text-center">Total CV</th>
						<th rowspan="2" class="text-center">PIC</th>
						<th rowspan="2" class="text-center">BD</th>
						<th rowspan="2" class="text-center">Job Detail</th>
						<th rowspan="2" class="text-center">Remarks</th>
						<th colspan="2" class="text-center">Due Date</th>
						<th rowspan="2" class="text-center">Updated By</th>
						<th rowspan="2" class="text-center">Updated At</th>
						<th rowspan="2" class="text-center">Action</th>
                    </tr>
					<tr>
						<th class="text-center">Submited</th>
						<th class="text-center">Deadline</th>
					</tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="mt-3 d-flex justify-content-center">
        <nav>
            <ul class="d-inline-block pagination justify-content-end text-center" id="pagination"></ul>
        </nav>
    </div>

</div>

<div class="modal fade" id="formModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalTitle">Tambah Master Produk</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <button class="btn btn-primary mb-3" id="addRowBtn">Add Row</button>
                <div class="table-responsive">
                    <table class="table table-bordered" id="modalTable">
                        <thead>
							<tr>
								<th rowspan="2" class="text-center">Hiring Stage</th>
								<th rowspan="2" class="text-center">Client</th>
								<th rowspan="2" class="text-center">Position</th>
								<th rowspan="2" class="text-center">PIC</th>
								<th rowspan="2" class="text-center">BD</th>
								<th rowspan="2" class="text-center">Job Detail</th>
								<th rowspan="2" class="text-center">Remarks</th>
								<th colspan="2" class="text-center">Due Date</th>
								<th rowspan="2" class="text-center">Action</th>
							</tr>
							<tr>
								<th class="text-center">Submited</th>
								<th class="text-center">Deadline</th>
							</tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="saveBtn">Save</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="targetModal" tabindex="-1">
    <div class="modal-dialog modal-full modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Recruitment Form</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body"></div>
        </div>
    </div>
</div>

<style>
.form-label-col{width:250px}
.form-row{display:flex;gap:8px;margin-bottom:6px; padding: 0;}
.form-row label{margin:0;font-weight:600;font-size:13px}
.form-row .form-control,
.form-row .form-select{height:30px;font-size:13px;padding:2px 6px}
textarea.form-control{height:auto}
</style>

<div class="modal fade" id="jobModal" tabindex="-1">
  <div class="modal-dialog modal-md">
    <div class="modal-content">
      <div class="modal-header py-2">
        <h6 class="modal-title" id="modalTitle">Add New Job Requirement</h6>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>

      <form id="jobForm">
        <div class="modal-body">
          <input type="hidden" name="id" id="job_id">

          <div class="row g-2">

            <div class="col-md-12">
            
            <div class="p-0">
                <h5 class="text-uppercase border-bottom border-3">
                    Job Profile
                </h5>
            </div>

              <div class="form-row">
                <label class="form-label-col">Submit Date</label>
                <input type="date" name="tgl_submit" class="form-control" value="2026-06-11">
              </div>
              <div class="form-row">
                <label class="form-label-col">Deadline</label>
                <input type="date" name="tgl_deadline" class="form-control">
              </div>
              <div class="form-row">
                <label class="form-label-col">Status</label>
                <select name="status" class="form-select">
                    <option value="">Status Job Active</option>
                    @foreach ($JobActive as $i)
                    <option value="{{ $i->kode }}">{{ $i->name }}</option>
                    @endforeach
                </select>
              </div>
              <div class="form-row">
                <label class="form-label-col">Business Development</label>
                <select name="bd" class="form-select" data-placeholder="Choose BD">
                    <option value="">Business Development</option>
                    @foreach ($bd as $i)
                    <option value="{{ $i->id }}" {{ $i->id == session('user.username') ? 'selected' : '' }}>{{ $i->name }}</option>
                    @endforeach
                </select>
              </div>
              <div class="form-row">
                <label class="form-label-col">PIC</label>
                <select name="pic[]" class="form-select" multiple data-placeholder="Choose PIC">
                    @foreach ($pic as $i)
                    <option value="{{ $i->id }}">{{ $i->name }}</option>
                    @endforeach
                </select>
              </div>
              <div class="form-row">
                <label class="form-label-col">Client / Company Name</label>
                <select name="client_id" class="form-select">
                    <option value="">Client / Company Name</option>
                    @foreach ($clients as $i)
                    <option value="{{ $i->id }}">{{ $i->name }}</option>
                    @endforeach
                </select>
              </div>
              <div class="form-row">
                <label class="form-label-col">Position</label>
                <select name="position" class="form-select">
                    <option value="">Position</option>
                    @foreach ($position as $i)
                    <option value="{{ $i->id }}">{{ $i->name }}</option>
                    @endforeach
                </select>
              </div>
              <div class="form-row">
                <label class="form-label-col">Division</label>
                <input type="text" name="division" class="form-control">
              </div>
              <div class="form-row">
                <label class="form-label-col">Department</label>
                <input type="text" name="department" class="form-control">
              </div>
              <div class="form-row">
                <label class="form-label-col">Location</label>
                <input type="text" name="location" class="form-control">
              </div>
              <div class="form-row">
                <label class="form-label-col">Effective Date Working</label>
                <input type="text" name="effective_date_working" class="form-control">
              </div>
              <div class="form-row">
                <label class="form-label-col">Number of Vacancies</label>
                <input type="number" name="number_of_vacancies" class="form-control">
              </div>
              <div class="form-row">
                <label class="form-label-col">Employment Status</label>
                <input type="text" name="employment_status" class="form-control">
              </div>
              <div class="form-row">
                <label class="form-label-col">Files</label>
                <input type="file" name="job_details" class="form-control">
              </div>

              <div class="p-0">
                <h5 class="text-uppercase border-bottom border-3">
                    Organization Chart
                </h5>
              </div>

              <div class="form-row">
                <label class="form-label-col">Superior</label>
                <input type="text" name="superior" class="form-control">
              </div>
              <div class="form-row">
                <label class="form-label-col">Subordinate</label>
                <input type="text" name="subordinate" class="form-control">
              </div>
              <div class="form-row">
                <label class="form-label-col">In Coordination With</label>
                <input type="text" name="in_coordination_with" class="form-control">
              </div>
              <div class="form-row">
                <label class="form-label-col">indirect Superior</label>
                <input type="text" name="indirection_superior" class="form-control">
              </div>

              <div class="p-0">
                <h5 class="text-uppercase border-bottom border-3">
                    Role & Jon Responsibility
                </h5>
              </div>

              <div class="form-row">
                <label class="form-label-col">Main Function</label>
                <textarea name="main_function" class="form-control" rows="2"></textarea>
              </div>
              <div class="form-row">
                <label class="form-label-col">Job Description (Daily, Weekly, Monthly)</label>
                <textarea name="job_description" class="form-control" rows="2"></textarea>
              </div>

              <div class="form-row">
                <label class="form-label-col">KPI</label>
                <input type="text" name="kpi" class="form-control">
              </div>

              <div class="p-0">
                <h5 class="text-uppercase border-bottom border-3">
                    Education & Competency
                </h5>
              </div>

              <div class="form-row">
                <label class="form-label-col">Formal Education</label>
                <input type="text" name="formal_education" class="form-control">
              </div>
              <div class="form-row">
                <label class="form-label-col">Experience</label>
                <input type="text" name="experience" class="form-control">
              </div>
              <div class="form-row">
                <label class="form-label-col">Knowledge</label>
                <textarea name="knowledge" class="form-control" rows="2"></textarea>
              </div>
              <div class="form-row">
                <label class="form-label-col">Language</label>
                <input type="text" name="langs" class="form-control">
              </div>
              <div class="form-row">
                <label class="form-label-col">Technical Skill</label>
                <textarea name="technical_skill" class="form-control" rows="2"></textarea>
              </div>
              <div class="form-row">
                <label class="form-label-col">Non-Technical Skill</label>
                <textarea name="non_technical_skill" class="form-control" rows="2"></textarea>
              </div>

              <div class="p-0">
                <h5 class="text-uppercase border-bottom border-3">
                    Recruitment Process
                </h5>
              </div>

              <div class="form-row">
                <label class="form-label-col">Fulfillment Target</label>
                <input type="text" name="fulfillment_target" class="form-control">
              </div>

              <div class="form-row">
                <label class="form-label-col">Process Interview</label>
                <input type="text" name="proses_interview" class="form-control">
              </div>

              <div class="p-0">
                <h5 class="text-uppercase border-bottom border-3">
                    Compensation & Benefit
                </h5>
              </div>

              <div class="form-row">
                <label class="form-label-col">Basic Salary</label>
                <input type="text" name="basic_salary" class="form-control">
              </div>

              <div class="form-row">
                <label class="form-label-col">Position Allowance</label>
                <input type="text" name="position_allowance" class="form-control">
              </div>

                <div class="row">
                    <div class="col-6">
                        <label class="form-check d-flex align-items-center gap-2 m-0">
                            <input type="hidden" name="meal_allowance" value="0">
                            <input type="checkbox" name="meal_allowance" class="form-check-input">
                            <span>Meal Allowance</span>
                        </label>
                    </div>

                    <div class="col-6">
                        <label class="form-check d-flex align-items-center gap-2 m-0">
                            <input type="hidden" name="transport_allowance" value="0">
                            <input type="checkbox" name="transport_allowance" class="form-check-input">
                            <span>Transport Allowance</span>
                        </label>
                    </div>

                    <div class="col-6 mt-2">
                        <label class="form-check d-flex align-items-center gap-2 m-0">
                            <input type="hidden" name="operation_allowance" value="0">
                            <input type="checkbox" name="operation_allowance" class="form-check-input">
                            <span>Operation Allowance</span>
                        </label>
                    </div>

                    <div class="col-6 mt-2">
                        <label class="form-check d-flex align-items-center gap-2 m-0">
                            <input type="hidden" name="communication_allowance" value="0">
                            <input type="checkbox" name="communication_allowance" class="form-check-input">
                            <span>Communication Allowance</span>
                        </label>
                    </div>

                    <div class="col-6 mt-2">
                        <label class="form-check d-flex align-items-center gap-2 m-0">
                            <input type="hidden" name="car_allowance" value="0">
                            <input type="checkbox" name="car_allowance" class="form-check-input">
                            <span>Car Allowance</span>
                        </label>
                    </div>

                    <div class="col-6 mt-2">
                        <label class="form-check d-flex align-items-center gap-2 m-0">
                            <input type="hidden" name="housing_allowance" value="0">
                            <input type="checkbox" name="housing_allowance" class="form-check-input">
                            <span>Housing Allowance</span>
                        </label>
                    </div>
                </div>

                <div class="form-row mt-2">
                    <label class="form-label-col">Health Allowance</label>
                    <textarea name="health_allowance" class="form-control" rows="2"></textarea>
                </div>

                <div class="p-0">
                    <h5 class="text-uppercase border-bottom border-3">
                        Unique Selling Point
                    </h5>
                </div>

                <div class="form-row">
                    <label class="form-label-col">Attractive C&B Package</label>
                    <input type="text" name="attractive_c_b_package" class="form-control">
                </div>
                <div class="form-row">
                    <label class="form-label-col">Career Path</label>
                    <input type="text" name="career_path" class="form-control">
                </div>
                <div class="form-row">
                    <label class="form-label-col">Self-Development</label>
                    <input type="text" name="self_development" class="form-control">
                </div>
                <div class="form-row">
                    <label class="form-label-col">Culture & Value</label>
                    <input type="text" name="culture_value" class="form-control">
                </div>

                <div class="form-row">
                    <label class="form-label-col">Remarks</label>
                    <textarea name="remarks" class="form-control" rows="2"></textarea>
                </div>

            </div>

          </div>
        </div>

        <div class="modal-footer py-2">
          <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-primary btn-sm" id="submitBtn">
            <span class="spinner-border spinner-border-sm d-none"></span>
            <span class="submit-text">Save</span>
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

@endsection

@push('scripts')
@include('admin.jobactive.js')
@endpush