<div id="addNewDarjaContent" dir="rtl" class="p-2">
    <!-- Main Form Card -->
    <div class="card w-75 mx-auto border-0 shadow-sm rounded-4 overflow-hidden mb-3">
        <!-- Card Header -->
        <div class="card-header bg-success bg-opacity-10 border-0 py-3 px-4">
            <h5 class="mb-0 fw-bold text-success d-flex align-items-center justify-content-start urdu-regular fs-4">
                <i class="bi bi-journal-plus ms-2"></i> نیا درجہ شامل کریں
            </h5>
        </div>

        <!-- Card Body -->
        <div class="card-body p-4 bg-white">
            <div class="row g-4 text-end">
                <!-- Shoba Combo (Right side in RTL) -->
                <div class="col-md-6">
                    <label class="form-label fw-bold text-dark mb-3 urdu-regular fs-4" for="shoba">شعبہ منتخب
                        کریں</label>
                    <div class="input-group input-group-lg shadow-sm rounded-3 overflow-hidden" dir="ltr">
                        <span class="input-group-text bg-light border-0 text-success"><i
                                class="bi bi-diagram-3"></i></span>
                        <?php $crud->shobaCmb('shoba', 'form-select border-0 text-end urdu-regular', 'dir="rtl"'); ?>
                    </div>
                </div>

                <!-- Darja Name (Left side in RTL) -->
                <div class="col-md-6">
                    <label class="form-label fw-bold text-dark mb-3 urdu-regular fs-4" for="darjaLbl">درجہ کا
                        نام</label>
                    <div class="input-group input-group-lg shadow-sm rounded-3 overflow-hidden" dir="ltr">
                        <span class="input-group-text bg-light border-0 text-success"><i
                                class="bi bi-clipboard-check"></i></span>
                        <input type="text" id="darjaLbl" name="darjaLbl"
                            class="form-control border-0 text-end urdu-regular" placeholder="مثال: درجہ اول" dir="rtl">
                    </div>
                </div>
            </div>

            <!-- Save Button Row (Bottom) -->
            <div class="row mt-5">
                <div class="col-12">
                    <button type="button" id="btnSaveDarja"
                        class="btn btn-success w-100 shadow fw-bold d-flex align-items-center justify-content-center py-3"
                        style="border-radius: 12px; background-color: #198754; border: none;">
                        <i class="bi bi-floppy ms-2 fs-4"></i>
                        <span class="urdu-regular fs-4">محفوظ کریں</span>

                    </button>
                    <div class="text-center mt-3 urdu-regular text-muted small">
                        نئے درجہ کو شعبہ کے ساتھ منسلک کر کے محفوظ کریں
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    /* Ensure input group icons appear correctly in RTL context */
    #addNewDarjaContent .input-group {
        flex-direction: row-reverse;
    }

    #addNewDarjaContent .form-select {
        background-position: left 0.75rem center;
        padding-left: 2.5rem;
        padding-right: 1rem;
    }

    #addNewDarjaContent .card {
        border: 1px solid rgba(25, 135, 84, 0.1) !important;
    }
</style>
<!-- Page Specific JS -->
<script src="assets/js/add_new_darja.js"></script>