@extends('layouts.base')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header"><h3>Form Cuti Pegawai RSAR</h3></div>

                <div class="card-body">
                    <form class="row g-3" method="POST" action="{{ url('/form-cuti') }}">
                        @csrf
                        <div class="mb-3">
                            <label for="nama" class="form-label">Nama</label>
                            <input type="text" class="form-control" id="nama" name="nama" required placeholder="Masukkan nama lengkap dan titel">
                            
                        </div>
                        <div class="mb-3">
                            <label for="nip" class="form-label">NIP</label>
                            <input type="text" class="form-control" id="nip" name="nip" required placeholder="Masukkan NIP">
                        </div>
                        <div class="mb-3">
                            <label for="pangkat" class="form-label">Pangkat</label>
                            <select class="form-select" id="pangkat" name="pangkat" aria-label="jenis-cuti">
                                <option value="Juru Muda">Juru Muda</option>
                                <option value="Juru Muda Tingkat I">Juru Muda Tingkat I</option>
                                <option value="Juru">Juru</option>
                                <option value="Juru Tingkat I">Juru Tingkat I</option>
                                <option value="Pengatur Muda">Pengatur Muda</option>
                                <option value="Pengatur Muda Tingkat I">Pengatur Muda Tingkat I</option>
                                <option value="Pengatur">Pengatur</option>
                                <option value="Pengatur Tingkat I">Pengatur Tingkat I</option>
                                <option value="Penata Muda">Penata Muda</option>
                                <option value="Penata Muda Tingkat I">Penata Muda Tingkat I</option>
                                <option value="Penata">Penata</option>
                                <option value="Penata Tingkat I">Penata Tingkat I</option>
                                <option value="Pembina">Pembina</option>
                                <option value="Pembina Tingkat I">Pembina Tingkat I</option>
                                <option value="Pembina Muda">Pembina Muda</option>
                                <option value="Pembina Madya">Pembina Madya</option>
                                <option value="Pembina Utama">Pembina Utama</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="golru" class="form-label">Golongan Ruang</label>
                            <select class="form-select" id="golru" name="golru" aria-label="jenis-cuti">
                                <option value="I-a">I-a</option>
                                <option value="I-b">I-b</option>
                                <option value="I-c">I-c</option>
                                <option value="I-d">I-d</option>
                                <option value="II-a">II-a</option>
                                <option value="II-b">II-b</option>
                                <option value="II-c">II-c</option>
                                <option value="II-d">II-d</option>
                                <option value="III-a">III-a</option>
                                <option value="III-b">III-b</option>
                                <option value="III-c">III-c</option>
                                <option value="III-d">III-d</option>
                                <option value="IV-a">IV-a</option>
                                <option value="IV-b">IV-b</option>
                                <option value="IV-c">IV-c</option>
                                <option value="IV-d">IV-d</option>
                                <option value="IV-e">IV-e</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="jabatan" class="form-label">Jabatan</label>
                            <input type="text" class="form-control" id="jabatan" name="jabatan" required placeholder="misal : Perawat Ahli Muda">
                        </div>
                        <div class="mb-3">
                            <label for="masa" class="form-label">Masa Kerja</label>
                            <input type="text" class="form-control" id="masa" name="masa" required placeholder="Masukkan Masa Kerja">
                        </div>
                        <div class="mb-3">
                            <label for="jenis" class="form-label">Jenis cuti yang diambil</label>
                            <select class="form-select" id="jenis" name="jenis" aria-label="jenis-cuti">
                                <option value="1">Cuti Tahunan</option>
                                <option value="2">Cuti Besar</option>
                                <option value="3">Cuti Sakit</option>
                                <option value="4">Cuti Melahirkan</option>
                                <option value="5">Cuti Alasan Penting</option>
                                <option value="6">Cuti Di Luar Tanggungan Negara</option>
                              </select>
                        </div>
                        <div class="mb-3">
                            <label for="alasan" class="form-label">Alasan Cuti</label>
                            <input type="text" class="form-control" id="alasan" name="alasan" required placeholder="Masukkan alasan cuti">
                        </div>
                        <div class="mb-3">
                            <label for="lama" class="form-label">Lama Cuti</label>
                            <input type="text" class="form-control" id="lama" name="lama" required placeholder="contoh : 3 hari">
                        </div>
                        <div class="mb-3">
                            <label for="mulai" class="form-label">Mulai Tanggal</label>
                            <input required id="mulai" name="mulai" width="276" />
                        </div>
                        <div class="mb-3">
                            <label for="sampai" class="form-label">Sampai Dengan</label>
                            <input required id="sampai" name="sampai" width="276" />
                        </div>
                        <div class="mb-3">
                            <label for="alamat" class="form-label">Alamat selama menjalankan cuti</label>
                            <textarea required class="form-control" id="alamat" name="alamat" rows="3"></textarea>
                        </div>
                        <div class="mb-3">
                            <label for="hp" class="form-label">Nomor HP</label>
                            <input type="text" class="form-control" id="hp" name="hp" required placeholder="Nomor Hp / WA">
                        </div>
                        <div class="mb-3">
                            <label for="tgl_surat" class="form-label">Tanggal surat cuti</label>
                            <input required id="tgl_surat" name="tgl_surat" width="276" />
                        </div>
                        <div class="col-auto">
                          <button type="submit" class="btn btn-primary mb-3">Buat Ajuan</button> &nbsp;
                          <a class="btn btn-secondary mb-3" href="{{ url('/') }}">Batal</a>
                        </div>
                      </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('js')
<script>
    $('#mulai').datepicker({
        uiLibrary: 'bootstrap5',
        format: 'yyyy-mm-dd'
    });
    $('#sampai').datepicker({
        uiLibrary: 'bootstrap5',
        format: 'yyyy-mm-dd'
    });
    $('#tgl_surat').datepicker({
        uiLibrary: 'bootstrap5',
        format: 'yyyy-mm-dd'
    });
</script>
@endsection