<div
    class="offcanvas offcanvas-end"
    tabindex="-1"
    id="offcanvasAddProvinsi"
    aria-labelledby="offcanvasAddProvinsiLabel">
    <div class="offcanvas-header border-bottom">
        <h5 id="offcanvasAddProvinsiLabel" class="offcanvas-title">Add Provinsi</h5>
        <button
            type="button"
            class="btn-close text-reset"
            data-bs-dismiss="offcanvas"
            aria-label="Close"></button>
    </div>
    <div class="offcanvas-body mx-0 flex-grow-0 p-6 h-100">
        <form class="add-new-provinsi pt-0" id="addNewProvinsiForm" action="{{ route('provinsi.store') }}" method="POST">
            @csrf
            
            <div class="mb-6 form-control-validation">
                <label class="form-label" for="add-provinsi-code">Kode Provinsi<span class="text-danger">*</span></label>
                <input
                    type="text"
                    class="form-control"
                    id="add-provinsi-code"
                    placeholder="11"
                    name="kode"
                    maxlength="2"
                    inputmode="numeric"
                    pattern="[0-9]*"
                    oninput="this.value = this.value.replace(/[^0-9]/g, '')" />
            </div>

            <div class="mb-6 form-control-validation">
                <label class="form-label" for="add-provinsi-name">Provinsi Name<span class="text-danger">*</span></label>
                <input
                    type="text"
                    class="form-control"
                    id="add-provinsi-name"
                    placeholder="Aceh"
                    name="nama" />
            </div>

            <div class="mb-6 form-control-validation">
                <label class="form-label" for="add-provinsi-path">Path</label>
                <textarea
                    class="form-control"
                    id="add-provinsi-path"
                    placeholder="[1.9862099699142046,97.38631487313297]"
                    name="path"
                    rows="3"></textarea>
            </div>

            <div class="mb-6 form-control-validation">
                <label class="form-label" for="add-provinsi-iso">ISO<span class="text-danger">*</span></label>
                <input
                    type="text"
                    id="add-provinsi-iso"
                    class="form-control"
                    placeholder="ID-AC"
                    name="iso" />
            </div>

            <button type="submit" class="btn btn-primary me-3 data-submit">Submit</button>
            <button type="reset" class="btn btn-label-danger" data-bs-dismiss="offcanvas">Cancel</button>
        </form>
    </div>
</div>