@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">Tambah</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">

      {{-- Form Input --}}
      <div class="row">
        <div class="col-12 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 Petugas</h5>
              <form action="{{ route('master-petugas-save') }}" class="mt-3 row g-3 needs-validation" method="POST" novalidate>
                @csrf

                <div class="col-md-4">
                  <label class="form-label fw-bold">Jabatan <span class="text-danger">*</span></label>
                  <select class="form-select" name="jabatan_id" id="jabatan_id" required>
                    <option value="">-- Pilih Jabatan --</option>
                    @foreach ($jabatan as $j)
                      <option value="{{ $j->id }}" data-nama="{{ $j->nama_jabatan }}">
                        {{ $j->kode_jabatan }} &mdash; {{ $j->nama_jabatan }}
                      </option>
                    @endforeach
                  </select>
                </div>

                <div class="col-md-4">
                  <label class="form-label fw-bold">Nama Jabatan</label>
                  <input type="text" class="form-control" id="nama_jabatan_display" readonly
                         placeholder="Otomatis terisi setelah pilih jabatan">
                </div>

                <div class="col-md-4">
                  <label class="form-label fw-bold">NIP</label>
                  <div class="input-group">
                    <span class="input-group-text">MHK-OF-</span>
                    <input type="text" class="form-control" name="nip" id="nip"
                           value="{{ $nipNext }}" readonly required>
                  </div>
                  <small class="text-muted">NIP dibuat otomatis</small>
                </div>

                <div class="col-md-4">
                  <label class="form-label fw-bold">Nama Petugas <span class="text-danger">*</span></label>
                  <input type="text" class="form-control" name="nama_petugas" id="nama_petugas"
                         placeholder="Nama lengkap petugas" required>
                </div>

                <div class="col-md-4">
                  <label class="form-label fw-bold">Tempat Lahir <span class="text-danger">*</span></label>
                  <input type="text" class="form-control" name="tempat_lahir" id="tempat_lahir"
                         placeholder="Kota tempat lahir" required>
                </div>

                <div class="col-md-4">
                  <label class="form-label fw-bold">Tanggal Lahir <span class="text-danger">*</span></label>
                  <input type="date" class="form-control" name="tanggal_lahir" id="tanggal_lahir" required>
                </div>

                <div class="col-md-4">
                  <label class="form-label fw-bold">Email</label>
                  <input type="email" class="form-control" name="email" id="email"
                         placeholder="email@contoh.com">
                </div>

                <div class="col-md-4">
                  <label class="form-label fw-bold">NIK <span class="text-danger">*</span></label>
                  <input type="text" class="form-control" name="nik" id="nik"
                         placeholder="Maks. 18 digit" maxlength="18" required>
                </div>

                <div class="col-md-4">
                  <label class="form-label fw-bold">NPWP</label>
                  <input type="text" class="form-control" name="npwp" id="npwp"
                         placeholder="Opsional">
                </div>

                <div class="col-md-4">
                  <label class="form-label fw-bold">No. HP / WhatsApp <span class="text-danger">*</span></label>
                  <input type="text" class="form-control" name="nohp" id="nohp"
                         placeholder="08xxxxxxxxxx" required>
                </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>
      </div>

      {{-- Datatable --}}
      <div class="row mt-2">
        <div class="col-12">
          <div class="card">
            <div class="card-body">
              <h5 class="card-title fs-4">List Petugas</h5>
              <div class="table-responsive">
                <table id="table-petugas" class="table table-striped display w-100">
                  <thead>
                    <tr>
                      <th class="text-center" style="width:50px">No</th>
                      <th>NIP</th>
                      <th>Nama Petugas</th>
                      <th>Jabatan</th>
                      <th>Tempat, Tgl Lahir</th>
                      <th>NIK</th>
                      <th>No. HP</th>
                      <th>Email</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::petugas.js')
@endsection