@extends('layouts.admin.master')

@section('content')
<div class="card">
    <div class="card-body">
        <div class="card-title d-flex justify-content-between">
            <h6 class="mt-2">Tambah Petugas Baru</h6>
        </div>
        <hr>
        <form method="post" action="{{ route('admin.kegiatan.petugas.store') }}" id="MainForm">
            @csrf
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="penduduk_id">Pilih Penduduk</label>
                        <select class="form-control select2" id="penduduk_id" name="penduduk_id" required>
                            <option value="">- Pilih -</option>
                            @foreach($penduduks as $p)
                                <option value="{{ $p->id }}" data-nik="{{ $p->nik }}">
                                    {{ $p->nama }} (NIK: {{ $p->nik }})
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="jabatan">Jabatan</label>
                        <select class="form-control" id="jabatan" name="jabatan" required>
                            @foreach(Petugas::$jabatans as $key => $val)
                                <option value="{{ $key }}">{{ $val }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="nomor_identitas">Nomor Identitas (NIP/NIK)</label>
                        <input type="text" class="form-control" id="nomor_identitas"
                            name="nomor_identitas" required>
                    </div>
                </div>
            </div>
            <div class="text-end">
                <button type="submit" class="btn btn-primary">Simpan</button>
            </div>
        </form>
    </div>
</div>
@endsection

@section('stylesheet')
<link rel="stylesheet" href="{{ asset('assets/templates/admin/plugins/select2/css/select2.min.css') }}">
@endsection

@section('javascript')
<script src="{{ asset('assets/templates/admin/plugins/select2/js/select2.full.min.js') }}"></script>
<script>
$(document).ready(function() {
    $('.select2').select2({
        theme: 'bootstrap-5',
        width: '100%'
    });

    $('#penduduk_id').change(function() {
        const nik = $(this).find(':selected').data('nik');
        $('#nomor_identitas').val(nik);
    });
});
</script>
@endsection