@extends('layouts.main')
@section('content')
  @push('style')
    <link rel="stylesheet" href="{{ asset('assets/css/toastr.min.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/datatables/datatables.min.css') }}">
  @endpush

  <div class="preloader" id="preloader">
    <div class="loading">
      <img src="{{ asset('assets/img/loading-buffering.gif') }}" width="80">
      <p>Harap Tunggu</p>
    </div>
  </div>

  <div class="content__header content__boxed overlapping">
    <div class="content__wrap">
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb mb-0">
          <li class="breadcrumb-item"><a href="{{ route('index-dashboard') }}">Home</a></li>
          <li class="breadcrumb-item">{{ $titleMenu }}</li>
          <li class="breadcrumb-item">Petugas</li>
          <li class="breadcrumb-item active">{{ $title }}</li>
        </ol>
      </nav>
      <h1 class="page-title mb-0 mt-2">{{ $titleMenu }} &mdash; {{ $title }}</h1>
    </div>
  </div>

  <div class="content__boxed">
    <div class="content__wrap">
      <div class="row">

        {{-- Form Input --}}
        <div class="col-sm-5 mt-2">
          <div class="card">
            <div class="card bg-info" style="min-height:5px; border-radius:1px;"></div>
            <div class="card-body">
              <h5 class="card-title fs-4">Input Data Jabatan</h5>
              <form action="{{ route('master-jabatan-save') }}" class="mt-3 row g-3 needs-validation" method="POST" novalidate>
                @csrf

                <div class="col-md-5">
                  <label class="form-label fw-bold">Kode Jabatan <span class="text-danger">*</span></label>
                  <div class="input-group">
                    <span class="input-group-text">MHK-ROL-</span>
                    <input type="text" class="form-control" name="kode_jabatan" id="kode_jabatan"
                           value="{{ $kodeNext }}" readonly required>
                  </div>
                  <small class="text-muted">Kode dibuat otomatis</small>
                </div>

                <div class="col-md-7">
                  <label class="form-label fw-bold">Nama Jabatan <span class="text-danger">*</span></label>
                  <input type="text" class="form-control" name="nama_jabatan" id="nama_jabatan"
                         placeholder="Contoh: Supervisor Lapangan" required>
                </div>

                <div class="col-12">
                  <label class="form-label fw-bold">Keterangan Jabatan</label>
                  <textarea class="form-control" name="keterangan_jabatan" id="keterangan_jabatan"
                            rows="3" placeholder="Keterangan opsional..."></textarea>
                </div>

                <div class="col-12">
                  <hr>
                  <div class="d-flex justify-content-end">
                    <button type="submit" class="btn btn-primary btn-sm px-4">Simpan</button>
                  </div>
                </div>

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

        {{-- Datatable --}}
        <div class="col-sm-7 mt-2">
          <div class="card">
            <div class="card-body">
              <h5 class="card-title fs-4">List Jabatan</h5>
              <div class="table-responsive">
                <table id="table-jabatan" class="table table-striped display w-100">
                  <thead>
                    <tr>
                      <th class="text-center" style="width:50px">No</th>
                      <th>Kode Jabatan</th>
                      <th>Nama Jabatan</th>
                      <th>Keterangan</th>
                      <th class="text-center" style="width:60px"><i class="demo-psi-gear"></i></th>
                    </tr>
                  </thead>
                  <tbody></tbody>
                </table>
              </div>
            </div>
          </div>
        </div>

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

@include('master::jabatan.js')
@endsection