<?php include 'header.php'; ?>

<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />

<!-- JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

<style>

.welcome-popup{
    border-radius:20px !important;
    box-shadow:0 20px 50px rgba(79,70,229,.18) !important;
}

.welcome-box{
    text-align:center;
}

.welcome-emoji{
    font-size:50px;
    margin-bottom:12px;
}

.welcome-title{
    font-size:24px;
    font-weight:700;
    color:#111827;
    margin-bottom:15px;
}

.welcome-text{
    font-size:15px;
    color:#64748b;
    margin-bottom:5px;
}

.welcome-name{
    font-size:28px;
    font-weight:700;
    color:#4f46e5;
    margin-bottom:10px;
}

.welcome-subtitle{
    font-size:14px;
    color:#94a3b8;
}

@media(max-width:576px){

    .welcome-title{
        font-size:24px;
    }

    .welcome-name{
        font-size:22px;
    }

    .swal2-popup{
        width:90% !important;
    }
}

    /* SEARCHABLE DROPDOWN */
    .select2-container {
        width: 100% !important;
    }

    .select2-container--default .select2-selection--single {
        height: 46px !important;

        border-radius: 14px !important;

        border: 1.5px solid #e2e8f0 !important;

        padding-left: 34px !important;

        display: flex !important;
        align-items: center !important;
    }

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 44px !important;

        color: #334155 !important;

        font-size: 14px;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 44px !important;
    }

    .select2-dropdown {
        border-radius: 12px !important;
        border: 1px solid #e2e8f0 !important;

        overflow: hidden;
    }

    .select2-search__field {
        border-radius: 10px !important;
        padding: 8px !important;
    }

    .select2-results__option {
        padding: 10px 14px !important;
        font-size: 14px;
    }

    /* =====================================================
   PREMIUM COMPACT FORM UI
===================================================== */

    body {
        background: #f5f7fb;
    }

    /* MAIN WRAPPER */
    .dashboard-main-body {
        padding: 18px;
    }

    /* =====================================================
   CARD
===================================================== */

    .card {
        border: none;
        border-radius: 22px;
        overflow: hidden;

        background: rgba(255, 255, 255, .92);

        box-shadow:
            0 10px 30px rgba(15, 23, 42, .06);
    }

    .card-body {
        padding: 22px;
    }

    /* =====================================================
   PAGE TITLE
===================================================== */

    .dashboard-main-body h6 {
        color: #0f172a;
        font-weight: 700;
    }

    /* =====================================================
   TABS
===================================================== */

    #loanTabs {
        border: none;
        gap: 10px;
        flex-wrap: nowrap;
        overflow: auto;
        padding-bottom: 4px;
    }

    #loanTabs::-webkit-scrollbar {
        display: none;
    }

    #loanTabs .nav-link {
        border: none;
        border-radius: 12px;

        padding: 10px 18px;

        background: #fff;

        font-size: 14px;
        font-weight: 600;

        color: #64748b;

        transition: .3s;

        white-space: nowrap;

        box-shadow:
            0 4px 14px rgba(15, 23, 42, .05);
    }

    #loanTabs .nav-link:hover {
        color: #4f46e5;
    }

    #loanTabs .nav-link.active {
        background: linear-gradient(135deg, #4f46e5, #6366f1);
        color: #fff;

        box-shadow:
            0 10px 25px rgba(79, 70, 229, .25);
    }

    /* =====================================================
   FORM LABEL
===================================================== */

    .form-label {
        font-size: 13px;
        font-weight: 600;
        color: #475569;
        margin-bottom: 7px;
    }

    /* =====================================================
   INPUTS
===================================================== */

    .form-control,
    .form-select {
        height: 46px;

        border-radius: 14px;

        border: 1.5px solid #e2e8f0;

        background: #fff;

        padding: 10px 14px;

        font-size: 14px;

        transition: .25s ease;

        box-shadow: none;
    }

    textarea.form-control {
        min-height: 110px;
        height: auto;
        resize: none;
    }

    .form-control:focus,
    .form-select:focus {
        border-color: #6366f1;

        box-shadow:
            0 0 0 4px rgba(99, 102, 241, .12);

        background: #fff;
    }

    /* =====================================================
   BUTTONS
===================================================== */

    .btn-primary-600 {
        border: none;

        border-radius: 14px;

        padding: 11px 24px;

        background: linear-gradient(135deg, #4f46e5, #6366f1);

        color: #fff;

        font-size: 14px;
        font-weight: 600;

        transition: .3s;

        box-shadow:
            0 10px 20px rgba(79, 70, 229, .18);
    }

    .btn-primary-600:hover {
        transform: translateY(-2px);
    }

    /* =====================================================
   ADD REMOVE BUTTONS
===================================================== */

    .btn-sm.addRow,
    .btn-sm.removeRow,
    .btn-sm.addFlatRow,
    .btn-sm.removeFlatRow,
    .btn-sm.addFamilyRow,
    .btn-sm.removeFamilyRow,
    .btn-sm.addVehicleRow,
    .btn-sm.removeVehicleRow {
        width: 42px;
        height: 42px;

        border: none;
        border-radius: 12px;

        display: flex;
        align-items: center;
        justify-content: center;

        font-size: 18px;
        font-weight: 700;

        transition: .25s;
    }

    .btn-sm.addRow,
    .btn-sm.addFlatRow,
    .btn-sm.addFamilyRow,
    .btn-sm.addVehicleRow {
        background: linear-gradient(135deg, #4f46e5, #6366f1);
        color: #fff;
    }

    .btn-sm.removeRow,
    .btn-sm.removeFlatRow,
    .btn-sm.removeFamilyRow,
    .btn-sm.removeVehicleRow {
        background: linear-gradient(135deg, #ef4444, #f87171);
        color: #fff;
    }

    .btn-sm:hover {
        transform: translateY(-2px);
    }

    /* =====================================================
   TABLE
===================================================== */

    .table-responsive {
        border-radius: 16px;
        overflow: hidden;
    }

    .table {
        margin: 0;
    }


    .table tbody td {
        padding: 15px;

        border-color: #eef2f7;

        font-size: 14px;

        color: #334155;

        vertical-align: middle;
    }

    .table tbody tr:hover {
        background: #fafbff;
    }

    /* =====================================================
   SECTION BOXES
===================================================== */

    .mt-4.p-3 {
        background: #fff !important;

        border: 1px solid #eef2f7 !important;

        border-radius: 18px !important;

        box-shadow:
            0 4px 14px rgba(15, 23, 42, .03);
    }

    /* =====================================================
   ACTION ICONS
===================================================== */

    .w-32-px {
        width: 34px !important;
        height: 34px !important;

        border-radius: 10px !important;

        transition: .25s;
    }

    .w-32-px:hover {
        transform: translateY(-2px);
    }

    /* =====================================================
   TOGGLE
===================================================== */

    .custom-toggle-wrap {
        width: 54px;
        height: 30px;
    }

    .custom-toggle-label {
        background: #dbe2ea;
    }

    .custom-toggle-input:checked+.custom-toggle-label {
        background: #6366f1;
    }

    .custom-toggle-label::before {
        width: 24px;
        height: 24px;
        top: 3px;
        left: 3px;
    }

    .custom-toggle-input:checked+.custom-toggle-label::before {
        transform: translateX(24px);
    }

    /* =====================================================
   BADGES
===================================================== */

    .badge {
        font-size: 12px;
        font-weight: 600;

        padding: 7px 12px;
    }

    /* =====================================================
   SELECT2
===================================================== */

    .select2-container--default .select2-selection--single {
        height: 46px !important;

        border-radius: 14px !important;

        border: 1.5px solid #e2e8f0 !important;

        display: flex !important;
        align-items: center !important;
    }

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 44px !important;
        padding-left: 14px !important;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 44px !important;
    }

    /* =====================================================
   HR
===================================================== */

    hr {
        border-color: #eef2f7;
        opacity: 1;
    }

    /* =====================================================
   RESPONSIVE
===================================================== */

    @media(max-width:992px) {

        .card-body {
            padding: 18px;
        }

        .form-control,
        .form-select {
            height: 44px;
            font-size: 13px;
        }

        .btn-primary-600 {
            padding: 10px 20px;
        }
    }

    @media(max-width:576px) {

        .dashboard-main-body {
            padding: 12px;
        }

        .card {
            border-radius: 18px;
        }

        .card-body {
            padding: 16px;
        }

        #loanTabs .nav-link {
            padding: 9px 14px;
            font-size: 13px;
        }

        .form-label {
            font-size: 12px;
        }

        .form-control,
        .form-select {
            height: 42px;
            border-radius: 12px;
            font-size: 13px;
        }

        textarea.form-control {
            min-height: 90px;
        }

        .btn-primary-600 {
            width: 100%;
        }

        .table thead th,
        .table tbody td {
            padding: 12px;
            font-size: 12px;
        }
    }


    .input-icon-wrap {
        position: relative;
    }

    .input-icon-wrap i {
        position: absolute;
        top: 50%;
        left: 16px;
        transform: translateY(-50%);

        font-size: 16px;
        z-index: 5;
    }

    /* INPUT PADDING */
    .input-icon-wrap .form-control,
    .input-icon-wrap .form-select {
        padding-left: 48px !important;
    }

    /* COLORS */
    .icon-purple {
        color: #6366f1;
    }

    .icon-green {
        color: #22c55e;
    }

    .icon-orange {
        color: #f97316;
    }

    .icon-blue {
        color: #3b82f6;
    }

    .icon-red {
        color: #ef4444;
    }

    .icon-cyan {
        color: #06b6d4;
    }

    .icon-pink {
        color: #ec4899;
    }

    .textarea-icon-wrap i {
        top: 18px !important;
        left: 16px;
        transform: none !important;
        line-height: 1;
    }

    .textarea-with-icon {
        padding-left: 48px !important;
        padding-top: 14px !important;
    }

    .table {
        margin: 0;
        background: #fff;
    }

    .table thead th {
        background: #ddeeff !important;
        color: #111827;

        font-weight: 700;
        font-size: 13px;

        border: none !important;

        padding-top: 14px !important;
        padding-bottom: 14px !important;
    }

    .table tbody {
        background: #fff !important;
    }

    .table tbody td {
        background: #fff !important;

        padding: 15px;
        border-color: #eef2f7;

        font-size: 14px;
        color: #334155;

        vertical-align: middle;
    }

    /* SMALL TOGGLE SWITCH */
    .custom-toggle-wrap {
        position: relative;
        width: 42px;
        height: 22px;
    }

    .custom-toggle-input {
        display: none;
    }

    .custom-toggle-label {
        position: absolute;
        inset: 0;

        cursor: pointer;

        background: #cbd5e1;

        border-radius: 999px;

        transition: .3s;
    }

    .custom-toggle-label::before {
        content: "";

        position: absolute;

        width: 16px;
        height: 16px;

        left: 3px;
        top: 3px;

        background: #fff;

        border-radius: 50%;

        transition: .3s;

        box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
    }

    .custom-toggle-input:checked+.custom-toggle-label {
        background: #6366f1;
    }

    .custom-toggle-input:checked+.custom-toggle-label::before {
        transform: translateX(20px);
    }

    .toggle-status-text {
        font-size: 13px;
        font-weight: 600;
        color: #64748b;
    }

    .small-swal {
        border-radius: 12px !important;
    }

    .small-swal-title {
        font-size: 18px !important;
    }

    .small-swal-text {
        font-size: 14px !important;
    }

    .swal2-icon {
        transform: scale(0.75);
        margin-top: 10px !important;
        margin-bottom: 10px !important;
    }

    .swal2-confirm {
        padding: 6px 18px !important;
        font-size: 14px !important;
        border-radius: 8px !important;
    }
</style>

<div class="dashboard-main-body">
    <div class="container-fluid mt-3">

        <div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-24">
            <h6 class="fw-semibold mb-0">Society Onboarding Form</h6>
        </div>

        <!-- ===================== TABS ===================== -->
        <ul class="nav nav-tabs" id="loanTabs">

            <li class="nav-item">
                <a class="nav-link active" data-bs-toggle="tab" href="#societyTab">
                    <i class="bi bi-buildings-fill me-2"></i>
                    Society
                </a>
            </li>

            <li class="nav-item">
                <a class="nav-link" data-bs-toggle="tab" href="#bhkTab">
                    <i class="bi bi-building me-2"></i>
                    Towers
                </a>
            </li>

            <li class="nav-item">
                <a class="nav-link" data-bs-toggle="tab" href="#flatTab">
                    <i class="bi bi-door-open-fill me-2"></i>
                    Flats
                </a>
            </li>

            <li class="nav-item">
                <a class="nav-link" data-bs-toggle="tab" href="#residentsTab">
                    <i class="bi bi-people-fill me-2"></i>
                    Residents
                </a>
            </li>

            <li class="nav-item">
                <a class="nav-link" data-bs-toggle="tab" href="#maintenanceTab">
                    <i class="bi bi-cash-coin me-2"></i>
                    Maintenance
                </a>
            </li>

        </ul>

        <!-- ===================== TAB CONTENT ===================== -->
        <div class="tab-content mt-4">

            <!-- ========== Society TAB ========== -->
            <div class="tab-pane fade show active" id="societyTab">
                <div class="card">
                    <div class="card-body">

                        <h6 class="mb-4 text-xl">Add Society Details</h6>

                        <form method="post">
                            <div class="row gy-3">

                                <div class="col-sm-3">
                                    <label class="form-label">
                                        Society Name <span class="text-danger">*</span>
                                    </label>

                                    <div class="input-icon-wrap">
                                        <i class="bi bi-buildings-fill icon-purple"></i>

                                        <input type="text" class="form-control" placeholder="Society Name">
                                    </div>
                                </div>

                                <div class="col-md-3">
                                    <label class="form-label">
                                        Society Type <span class="text-danger">*</span>
                                    </label>

                                    <div class="input-icon-wrap">
                                        <i class="bi bi-house-check-fill icon-green"></i>

                                        <select name="society_type" class="form-select searchSelect" required>

                                            <option value="">Select Type</option>

                                            <option value="Co-Operative Housing Society">
                                                Co-Operative Housing Society
                                            </option>

                                            <option value="Gated Community Society">
                                                Gated Community Society
                                            </option>

                                            <option value="Residential Society">
                                                Residential Society
                                            </option>

                                            <option value="Commercial Society">
                                                Commercial Society
                                            </option>

                                            <option value="Tenament Society">
                                                Tenament Society
                                            </option>

                                        </select>
                                    </div>
                                </div>

                                <div class="col-md-3">
                                    <label class="form-label">
                                        How many towers? <span class="text-danger">*</span>
                                    </label>

                                    <div class="input-icon-wrap">
                                        <i class="bi bi-building icon-blue"></i>

                                        <input type="text" name="num_towers" class="form-control"
                                            placeholder="Enter number of towers" maxlength="3" inputmode="numeric"
                                            oninput="this.value = this.value.replace(/[^0-9]/g, '')" required>
                                    </div>
                                </div>

                                <div class="col-md-3">
                                    <label class="form-label">
                                        Total Floors <span class="text-danger">*</span>
                                    </label>

                                    <div class="input-icon-wrap">
                                        <i class="bi bi-layers-fill icon-orange"></i>

                                        <input type="text" name="total_floors" class="form-control"
                                            placeholder="Enter number of Floors" maxlength="3" inputmode="numeric"
                                            oninput="this.value = this.value.replace(/[^0-9]/g, '')" required>
                                    </div>
                                </div>

                                <div class="col-md-3">
                                    <label class="form-label">
                                        Total Units <span class="text-danger">*</span>
                                    </label>

                                    <div class="input-icon-wrap">
                                        <i class="bi bi-door-open-fill icon-green"></i>

                                        <input type="text" name="total_units" class="form-control"
                                            placeholder="Enter number of Units" maxlength="3" inputmode="numeric"
                                            oninput="this.value = this.value.replace(/[^0-9]/g, '')" required>
                                    </div>
                                </div>

                                <div class="col-md-3">
                                    <label class="form-label">
                                        Society Registration No. <span class="text-danger">*</span>
                                    </label>

                                    <div class="input-icon-wrap">
                                        <i class="bi bi-patch-check-fill icon-purple"></i>

                                        <input type="text" name="reg_no" class="form-control"
                                            placeholder="Enter Society Registration No." required>
                                    </div>
                                </div>

                                <div class="col-12 text-end mt-4">
                                    <button type="submit" class="btn btn-primary-600">
                                        <i class="bi bi-floppy"></i> Save
                                    </button>
                                </div>

                            </div>
                        </form>

                    </div><!-- /card-body -->
                </div><!-- /card -->
            </div>
            <!-- ========== END Society TAB ========== -->


            <!-- ========== Towers / Wings TAB ========== -->
            <div class="tab-pane fade" id="bhkTab">
                <div class="card">
                    <div class="card-body">

                        <h6 class="mb-4 text-xl">Add Towers / Wings</h6>

                        <form method="post" id="towersForm">

                            <!-- Column Headers -->
                            <!-- Column Headers -->
                            <div class="row gy-0 mb-1">
                                <div class="col-md-3">
                                    <label class="form-label">
                                        Tower / Wing Name <span class="text-danger">*</span>
                                    </label>
                                </div>

                                <div class="col-md-3">
                                    <label class="form-label">
                                        Number of Floors <span class="text-danger">*</span>
                                    </label>
                                </div>

                                <div class="col-md-3">
                                    <label class="form-label">
                                        Units per Floor <span class="text-danger">*</span>
                                    </label>
                                </div>
                            </div>

                            <div id="towersContainer">

                                <div class="row gy-2 mb-3 tower-row align-items-end">

                                    <!-- Tower Name -->
                                    <div class="col-md-3">

                                        <div class="input-icon-wrap">
                                            <i class="bi bi-building-fill icon-blue"></i>

                                            <input type="text" name="tower_name[]" class="form-control"
                                                placeholder="Enter Tower Name" required>
                                        </div>

                                    </div>

                                    <!-- Number of Floors -->
                                    <div class="col-md-3">

                                        <div class="input-icon-wrap">
                                            <i class="bi bi-layers-fill icon-orange"></i>

                                            <input type="text" name="num_floors[]" class="form-control"
                                                placeholder="Enter Number of Floor" inputmode="numeric"
                                                oninput="this.value=this.value.replace(/[^0-9]/g,'')" required>
                                        </div>

                                    </div>

                                    <!-- Units Per Floor -->
                                    <div class="col-md-3">

                                        <div class="input-icon-wrap">
                                            <i class="bi bi-door-open-fill icon-green"></i>

                                            <input type="text" name="units_per_floor[]" class="form-control"
                                                placeholder="Enter Units per Floor" inputmode="numeric"
                                                oninput="this.value=this.value.replace(/[^0-9]/g,'')" required>
                                        </div>

                                    </div>

                                    <!-- Buttons -->
                                    <div class="col-md-2 d-flex gap-2">
                                        <button type="button" class="btn btn-sm btn-primary addRow" title="Add row">
                                            +
                                        </button>

                                        <button type="button" class="btn btn-sm btn-danger removeRow"
                                            title="Remove row">
                                            −
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <!-- Tower Details Table -->
                            <div class="mt-4 p-3" style="border:1px solid #e5e7eb; border-radius:14px;">

                                <h6 class="mb-3 fw-semibold">Tower Details</h6>

                                <div class="table-responsive">
                                    <table class="table align-middle mb-0">
                                        <thead style="background:#ddeeff;">
                                            <tr>
                                                <th class="py-3">Tower Name</th>
                                                <th class="py-3">Floors</th>
                                                <th class="py-3">Units per Floor</th>
                                                <th class="py-3 text-center">Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>Tower A</td>
                                                <td>10</td>
                                                <td>4</td>
                                                <td class="text-center">
                                                    <div class="d-flex justify-content-center gap-1">
                                                        <a href="javascript:void(0);" onclick=""
                                                            class="w-32-px h-32-px bg-success-focus text-success-main rounded-circle d-inline-flex align-items-center justify-content-center"
                                                            title="Edit">
                                                            <iconify-icon icon="lucide:edit"></iconify-icon>
                                                        </a>
                                                        <a href="javascript:void(0);" onclick=""
                                                            class="delete-btn w-32-px h-32-px bg-danger-focus text-danger-main rounded-circle d-inline-flex align-items-center justify-content-center"
                                                            title="Delete">
                                                            <iconify-icon icon="mingcute:delete-2-line"></iconify-icon>
                                                        </a>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>Tower B</td>
                                                <td>12</td>
                                                <td>6</td>
                                                <td class="text-center">
                                                    <div class="d-flex justify-content-center gap-1">
                                                        <a href="javascript:void(0);" onclick=""
                                                            class="w-32-px h-32-px bg-success-focus text-success-main rounded-circle d-inline-flex align-items-center justify-content-center"
                                                            title="Edit">
                                                            <iconify-icon icon="lucide:edit"></iconify-icon>
                                                        </a>
                                                        <a href="javascript:void(0);" onclick=""
                                                            class="delete-btn w-32-px h-32-px bg-danger-focus text-danger-main rounded-circle d-inline-flex align-items-center justify-content-center"
                                                            title="Delete">
                                                            <iconify-icon icon="mingcute:delete-2-line"></iconify-icon>
                                                        </a>
                                                    </div>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>

                            </div>
                            <!-- END Tower Details Table -->

                            <div class="text-end mt-4">
                                <button type="submit" class="btn btn-primary-600">
                                    <i class="bi bi-floppy"></i> Save
                                </button>
                            </div>

                        </form>

                    </div><!-- /card-body -->
                </div><!-- /card -->
            </div>
            <!-- ========== END Towers / Wings TAB ========== -->


            <!-- ========== No. of Flats TAB ========== -->
            <div class="tab-pane fade" id="flatTab">
                <div class="card">
                    <div class="card-body">
                        <h6 class="mb-4 text-xl">Add Flat Details</h6>
                        <form method="post" id="flatsForm">

                            <div id="flatsContainer">

                                <div class="row gy-3 mb-3 flat-row">

                                    <!-- Tower -->
                                    <div class="col-md-4">

                                        <label class="form-label">
                                            Tower / Wing <span class="text-danger">*</span>
                                        </label>

                                        <div class="input-icon-wrap">
                                            <i class="bi bi-building-fill icon-blue"></i>

                                            <select name="flat_tower[]" class="form-select searchSelect" required>

                                                <option value="">Select Tower</option>
                                                <option value="Tower A">Tower A</option>
                                                <option value="Tower B">Tower B</option>

                                            </select>
                                        </div>

                                    </div>

                                    <!-- Floor -->
                                    <div class="col-md-4">

                                        <label class="form-label">
                                            Floor <span class="text-danger">*</span>
                                        </label>

                                        <div class="input-icon-wrap">
                                            <i class="bi bi-layers-fill icon-orange"></i>

                                            <input type="text" name="flat_floor[]" class="form-control"
                                                placeholder="Enter Floors" inputmode="numeric"
                                                oninput="this.value=this.value.replace(/[^0-9]/g,'')" required>
                                        </div>

                                    </div>

                                    <!-- Flat Number -->
                                    <div class="col-md-4">

                                        <label class="form-label">
                                            Flat Number <span class="text-danger">*</span>
                                        </label>

                                        <div class="input-icon-wrap">
                                            <i class="bi bi-door-open-fill icon-green"></i>

                                            <input type="text" name="flat_number[]" class="form-control"
                                                placeholder="Enter Flat Number" required>
                                        </div>

                                    </div>

                                    <!-- Unit Type -->
                                    <div class="col-md-4">

                                        <label class="form-label">
                                            Unit Type <span class="text-danger">*</span>
                                        </label>

                                        <div class="input-icon-wrap">
                                            <i class="bi bi-house-fill icon-purple"></i>

                                            <select name="flat_unit_type[]" class="form-select searchSelect" required>

                                                <option value="">Select Unit Type</option>
                                                <option value="1 BHK">1 BHK</option>
                                                <option value="2 BHK">2 BHK</option>
                                                <option value="3 BHK">3 BHK</option>
                                                <option value="4 BHK">4 BHK</option>
                                                <option value="Studio">Studio</option>
                                                <option value="Penthouse">Penthouse</option>
                                                <option value="Commercial">Commercial</option>

                                            </select>
                                        </div>

                                    </div>

                                    <!-- Area -->
                                    <div class="col-md-4">

                                        <label class="form-label">
                                            Area (Sq.ft) <span class="text-danger">*</span>
                                        </label>

                                        <div class="input-icon-wrap">
                                            <i class="bi bi-rulers icon-cyan"></i>

                                            <input type="text" name="flat_area[]" class="form-control"
                                                placeholder="Enter Area (Sq.ft)" inputmode="numeric"
                                                oninput="this.value=this.value.replace(/[^0-9]/g,'')" required>
                                        </div>

                                    </div>

                                    <!-- Maintenance -->
                                    <div class="col-md-4">

                                        <label class="form-label">
                                            Maintenance Type <span class="text-danger">*</span>
                                        </label>

                                        <div class="input-icon-wrap">
                                            <i class="bi bi-cash-coin icon-pink"></i>

                                            <select name="flat_maintenance_type[]" class="form-select searchSelect"
                                                required>

                                                <option value="">Select Type</option>
                                                <option value="Fixed">Fixed</option>
                                                <option value="Per Sq.ft">Per Sq.ft</option>
                                                <option value="Slab Based">Slab Based</option>

                                            </select>
                                        </div>

                                    </div>

                                    <!-- Parking -->
                                    <div class="col-md-4">

                                        <label class="form-label">
                                            Parking Slots
                                        </label>

                                        <div class="input-icon-wrap">
                                            <i class="bi bi-p-square-fill icon-red"></i>

                                            <input type="text" name="flat_parking[]" class="form-control"
                                                placeholder="Enter Parking Slot" inputmode="numeric"
                                                oninput="this.value=this.value.replace(/[^0-9]/g,'')">
                                        </div>

                                    </div>

                                    <!-- Buttons -->
                                    <div class="col-md-4 d-flex align-items-end gap-2">

                                        <button type="button" class="btn btn-sm btn-primary addFlatRow" title="Add row">
                                            +
                                        </button>

                                        <button type="button" class="btn btn-sm btn-danger removeFlatRow"
                                            title="Remove row">
                                            −
                                        </button>

                                    </div>

                                </div>


                            </div>
                            <div class="mt-4 p-3" style="border:1px solid #e5e7eb;
                border-radius:14px;
                background:#fff;">

                                <h6 class="mb-3 fw-semibold">
                                    Flat Details
                                </h6>

                                <div class="table-responsive">

                                    <table class="table align-middle mb-0">

                                        <thead style="background:#ddeeff;">

                                            <tr>
                                                <th class="py-3">Flat No.</th>
                                                <th class="py-3">Tower</th>
                                                <th class="py-3">Floor</th>
                                                <th class="py-3">Type</th>
                                                <th class="py-3">Area</th>
                                                <th class="py-3">Action</th>
                                            </tr>

                                        </thead>

                                        <tbody>

                                            <tr>
                                                <td>101</td>
                                                <td>Tower A</td>
                                                <td>1</td>
                                                <td>2 BHK</td>
                                                <td>850</td>
                                                <td class="text-center">
                                                    <div class="d-flex justify-content-center gap-1">
                                                        <a href="javascript:void(0);" onclick=""
                                                            class="w-32-px h-32-px bg-success-focus text-success-main rounded-circle d-inline-flex align-items-center justify-content-center"
                                                            title="Edit">
                                                            <iconify-icon icon="lucide:edit"></iconify-icon>
                                                        </a>
                                                        <a href="javascript:void(0);" onclick=""
                                                            class="delete-btn w-32-px h-32-px bg-danger-focus text-danger-main rounded-circle d-inline-flex align-items-center justify-content-center"
                                                            title="Delete">
                                                            <iconify-icon icon="mingcute:delete-2-line"></iconify-icon>
                                                        </a>
                                                    </div>
                                                </td>
                                            </tr>

                                        </tbody>

                                    </table>

                                </div>

                                <div class="text-end mt-4">
                                    <button type="submit" class="btn btn-primary-600">
                                        <i class="bi bi-floppy"></i> Save
                                    </button>
                                </div>
                            </div>

                        </form>
                    </div><!-- /card-body -->
                </div><!-- /card -->
            </div>
            <!-- ========== END No. of Flats TAB ========== -->


            <!-- ========== Residents TAB ========== -->
            <div class="tab-pane fade" id="residentsTab">
                <div class="card">
                    <div class="card-body">

                        <h6 class="mb-4 text-xl">Add Resident Details</h6>

                        <form method="post" id="residentsForm">

                            <!-- ── Main Resident Fields ── -->
                            <!-- ── Main Resident Fields ── -->
                            <div class="row gy-3">

                                <!-- Owner / Tenant -->
                                <div class="col-md-4">

                                    <label class="form-label">
                                        Owner / Tenant <span class="text-danger">*</span>
                                    </label>

                                    <div class="input-icon-wrap">
                                        <i class="bi bi-person-badge-fill icon-purple"></i>

                                        <select name="resident_type" class="form-select searchSelect" required>

                                            <option value="">Select Type</option>
                                            <option value="Owner">Owner</option>
                                            <option value="Tenant">Tenant</option>

                                        </select>
                                    </div>

                                </div>

                                <!-- Full Name -->
                                <div class="col-md-4">

                                    <label class="form-label">
                                        Full Name <span class="text-danger">*</span>
                                    </label>

                                    <div class="input-icon-wrap">
                                        <i class="bi bi-person-fill icon-blue"></i>

                                        <input type="text" name="resident_name" class="form-control"
                                            placeholder="Enter Full Name" required>
                                    </div>

                                </div>

                                <!-- Mobile -->
                                <div class="col-md-4">

                                    <label class="form-label">
                                        Mobile Number <span class="text-danger">*</span>
                                    </label>

                                    <div class="input-icon-wrap">
                                        <i class="bi bi-telephone-fill icon-green"></i>

                                        <input type="text" name="resident_mobile" class="form-control"
                                            placeholder="Enter Mobile Number" inputmode="numeric" maxlength="10"
                                            oninput="this.value=this.value.replace(/[^0-9]/g,'')" required>
                                    </div>

                                </div>

                                <!-- Email -->
                                <div class="col-md-4">

                                    <label class="form-label">
                                        Email Address <span class="text-danger">*</span>
                                    </label>

                                    <div class="input-icon-wrap">
                                        <i class="bi bi-envelope-fill icon-red"></i>

                                        <input type="email" name="resident_email" class="form-control"
                                            placeholder="Enter Email Address" required>
                                    </div>

                                </div>

                                <!-- Aadhaar -->
                                <div class="col-md-4">

                                    <label class="form-label">
                                        Aadhaar Number <span class="text-danger">*</span>
                                    </label>

                                    <div class="input-icon-wrap">
                                        <i class="bi bi-person-vcard-fill icon-orange"></i>

                                        <input type="text" name="resident_aadhaar" class="form-control"
                                            placeholder="Enter 12-digit Aadhaar No." inputmode="numeric" maxlength="12"
                                            oninput="this.value=this.value.replace(/[^0-9]/g,'')" required>
                                    </div>

                                </div>

                                <!-- Occupation -->
                                <div class="col-md-4">

                                    <label class="form-label">
                                        Occupation
                                    </label>

                                    <div class="input-icon-wrap">
                                        <i class="bi bi-briefcase-fill icon-cyan"></i>

                                        <input type="text" name="resident_occupation" class="form-control"
                                            placeholder="Enter Occupation">
                                    </div>

                                </div>

                                <!-- Emergency Contact -->
                                <div class="col-md-4">

                                    <label class="form-label">
                                        Emergency Contact <span class="text-danger">*</span>
                                    </label>

                                    <div class="input-icon-wrap">
                                        <i class="bi bi-shield-fill-exclamation icon-pink"></i>

                                        <input type="text" name="resident_emergency" class="form-control"
                                            placeholder="Enter Emergency Contact No." inputmode="numeric" maxlength="10"
                                            oninput="this.value=this.value.replace(/[^0-9]/g,'')" required>
                                    </div>

                                </div>

                                <!-- Tower -->
                                <div class="col-md-4">

                                    <label class="form-label">
                                        Tower <span class="text-danger">*</span>
                                    </label>

                                    <div class="input-icon-wrap">
                                        <i class="bi bi-building-fill icon-blue"></i>

                                        <select name="resident_tower" class="form-select searchSelect" required>

                                            <option value="">Select Tower</option>
                                            <option value="Tower A">Tower A</option>
                                            <option value="Tower B">Tower B</option>
                                            <option value="Tower C">Tower C</option>

                                        </select>
                                    </div>

                                </div>

                                <!-- Floor -->
                                <div class="col-md-4">

                                    <label class="form-label">
                                        Floor <span class="text-danger">*</span>
                                    </label>

                                    <div class="input-icon-wrap">
                                        <i class="bi bi-layers-fill icon-orange"></i>

                                        <select name="resident_floor" class="form-select searchSelect" required>

                                            <option value="">Select Floor</option>
                                            <option value="Ground Floor">Ground Floor</option>
                                            <option value="1">1</option>
                                            <option value="2">2</option>
                                            <option value="3">3</option>
                                            <option value="4">4</option>
                                            <option value="5">5</option>

                                        </select>
                                    </div>

                                </div>

                                <!-- Flat -->
                                <div class="col-md-4">

                                    <label class="form-label">
                                        Flat <span class="text-danger">*</span>
                                    </label>

                                    <div class="input-icon-wrap">
                                        <i class="bi bi-door-open-fill icon-green"></i>

                                        <select name="resident_flat" class="form-select searchSelect" required>

                                            <option value="">Select Flat</option>
                                            <option value="101">101</option>
                                            <option value="102">102</option>
                                            <option value="103">103</option>
                                            <option value="201">201</option>
                                            <option value="202">202</option>

                                        </select>
                                    </div>

                                </div>


                            </div>
                            <!-- END Main Resident Fields -->

                            <hr class="my-4">

                            <!-- ══════════════════════════════════════
                                 FAMILY DETAILS
                            ══════════════════════════════════════ -->
                            <div class="d-flex align-items-center justify-content-between mb-3">
                                <h6 class="mb-4 text-xl">Add Family Details</h6>
                            </div>


                            <div id="familyContainer">

                                <div class="row gy-3 mb-3 family-row">

                                    <!-- Member Name -->
                                    <div class="col-md-4">

                                        <label class="form-label">
                                            Member Name <span class="text-danger">*</span>
                                        </label>

                                        <div class="input-icon-wrap">
                                            <i class="bi bi-person-fill icon-blue"></i>

                                            <input type="text" name="family_name[]" class="form-control"
                                                placeholder="Enter Member Name" required>
                                        </div>

                                    </div>

                                    <!-- Relation -->
                                    <div class="col-md-4">

                                        <label class="form-label">
                                            Relation <span class="text-danger">*</span>
                                        </label>

                                        <div class="input-icon-wrap">
                                            <i class="bi bi-people-fill icon-purple"></i>

                                            <select name="family_relation[]" class="form-select searchSelect" required>

                                                <option value="">Select Relation</option>
                                                <option value="Spouse">Spouse</option>
                                                <option value="Son">Son</option>
                                                <option value="Daughter">Daughter</option>
                                                <option value="Father">Father</option>
                                                <option value="Mother">Mother</option>
                                                <option value="Brother">Brother</option>
                                                <option value="Sister">Sister</option>
                                                <option value="Other">Other</option>

                                            </select>
                                        </div>

                                    </div>

                                    <!-- DOB -->
                                    <div class="col-md-4">

                                        <label class="form-label">
                                            Date of Birth <span class="text-danger">*</span>
                                        </label>

                                        <div class="input-icon-wrap">
                                            <i class="bi bi-calendar-event-fill icon-pink"></i>

                                            <input type="date" name="family_dob[]" class="form-control" required>
                                        </div>

                                    </div>

                                    <!-- Gender -->
                                    <div class="col-md-4">

                                        <label class="form-label">
                                            Gender <span class="text-danger">*</span>
                                        </label>

                                        <div class="input-icon-wrap">
                                            <i class="bi bi-gender-ambiguous icon-orange"></i>

                                            <select name="family_gender[]" class="form-select searchSelect" required>

                                                <option value="">Select Gender</option>
                                                <option value="Male">Male</option>
                                                <option value="Female">Female</option>
                                                <option value="Other">Other</option>

                                            </select>
                                        </div>

                                    </div>

                                    <!-- Mobile -->
                                    <div class="col-md-4">

                                        <label class="form-label">
                                            Mobile Number
                                        </label>

                                        <div class="input-icon-wrap">
                                            <i class="bi bi-telephone-fill icon-green"></i>

                                            <input type="text" name="family_mobile[]" class="form-control"
                                                placeholder="Enter Mobile Number" inputmode="numeric" maxlength="10"
                                                oninput="this.value=this.value.replace(/[^0-9]/g,'')">
                                        </div>

                                    </div>

                                    <!-- Buttons -->
                                    <div class="col-md-4 d-flex align-items-end gap-2">

                                        <button type="button" class="btn btn-sm btn-primary addFamilyRow"
                                            title="Add row">
                                            +
                                        </button>

                                        <button type="button" class="btn btn-sm btn-danger removeFamilyRow"
                                            title="Remove row">
                                            −
                                        </button>

                                    </div>

                                </div>

                                <hr class="my-3">

                            </div>
                            <!-- END Family Container -->

                            <hr class="my-4">

                            <!-- ══════════════════════════════════════
                                 VEHICLE DETAILS
                            ══════════════════════════════════════ -->
                            <div class="d-flex align-items-center justify-content-between mb-3">
                                <h6 class="mb-4 text-xl">Add Vehicle Details</h6>
                            </div>



                            <div id="vehicleContainer">

                                <div class="row gy-3 mb-3 vehicle-row">

                                    <!-- Vehicle Number -->
                                    <div class="col-md-4">

                                        <label class="form-label">
                                            Vehicle Number <span class="text-danger">*</span>
                                        </label>

                                        <div class="input-icon-wrap">
                                            <i class="bi bi-car-front-fill icon-blue"></i>

                                            <input type="text" name="vehicle_number[]" class="form-control"
                                                placeholder="Enter Vehicle Number" style="text-transform:uppercase"
                                                oninput="this.value=this.value.toUpperCase()" required>
                                        </div>

                                    </div>

                                    <!-- Vehicle Type -->
                                    <div class="col-md-4">

                                        <label class="form-label">
                                            Vehicle Type <span class="text-danger">*</span>
                                        </label>

                                        <div class="input-icon-wrap">
                                            <i class="bi bi-truck-front-fill icon-purple"></i>

                                            <select name="vehicle_type[]" class="form-select searchSelect" required>

                                                <option value="">Select Vehicle Type</option>
                                                <option value="Car">Car</option>
                                                <option value="Motorcycle">Motorcycle</option>
                                                <option value="Scooter">Scooter</option>
                                                <option value="SUV">SUV</option>
                                                <option value="Electric Vehicle">Electric Vehicle</option>
                                                <option value="Bicycle">Bicycle</option>
                                                <option value="Other">Other</option>

                                            </select>
                                        </div>

                                    </div>

                                    <!-- Vehicle Model -->
                                    <div class="col-md-4">

                                        <label class="form-label">
                                            Vehicle Name / Model <span class="text-danger">*</span>
                                        </label>

                                        <div class="input-icon-wrap">
                                            <i class="bi bi-car-front icon-green"></i>

                                            <input type="text" name="vehicle_model[]" class="form-control"
                                                placeholder="Enter Vehicle Model" required>
                                        </div>

                                    </div>

                                    <!-- Vehicle Colour -->
                                    <div class="col-md-4">

                                        <label class="form-label">
                                            Colour
                                        </label>

                                        <div class="input-icon-wrap">
                                            <i class="bi bi-palette-fill icon-pink"></i>

                                            <input type="text" name="vehicle_colour[]" class="form-control"
                                                placeholder="Enter Vehicle Colour">
                                        </div>

                                    </div>

                                    <!-- Parking Slot -->
                                    <div class="col-md-4">

                                        <label class="form-label">
                                            Parking Slot
                                        </label>

                                        <div class="input-icon-wrap">
                                            <i class="bi bi-p-square-fill icon-orange"></i>

                                            <input type="text" name="vehicle_parking[]" class="form-control"
                                                placeholder="Enter Parking Slot"
                                                oninput="this.value=this.value.toUpperCase()">
                                        </div>

                                    </div>

                                    <!-- Buttons -->
                                    <div class="col-md-4 d-flex align-items-end gap-2">

                                        <button type="button" class="btn btn-sm btn-primary addVehicleRow"
                                            title="Add row">
                                            +
                                        </button>

                                        <button type="button" class="btn btn-sm btn-danger removeVehicleRow"
                                            title="Remove row">
                                            −
                                        </button>

                                    </div>

                                </div>

                                <hr class="my-3">

                            </div>
                            <!-- END Vehicle Container -->

                            <div class="col-12 text-end mt-4">
                                <button type="submit" class="btn btn-primary-600">
                                    <i class="bi bi-floppy"></i> Save
                                </button>
                            </div>

                        </form>

                        <!-- Residents Table -->
                        <div class="mt-4 p-3" style="border:1px solid #e5e7eb; border-radius:14px; background:#fff;">

                            <h6 class="mb-3 fw-semibold">Resident Details</h6>

                            <div class="table-responsive">
                                <table class="table align-middle mb-0">
                                    <thead style="background:#ddeeff;">
                                        <tr>
                                            <th class="py-3">Type</th>
                                            <th class="py-3">Full Name</th>
                                            <th class="py-3">Mobile</th>
                                            <th class="py-3">Email</th>
                                            <th class="py-3">Aadhaar No.</th>
                                            <th class="py-3">Occupation</th>
                                            <th class="py-3">Emergency Contact</th>
                                            <th class="py-3 text-center">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><span
                                                    class="badge bg-primary-subtle text-primary rounded-pill px-3 py-1">Owner</span>
                                            </td>
                                            <td>Rajesh Sharma</td>
                                            <td>9876543210</td>
                                            <td>rajesh@email.com</td>
                                            <td>1234 5678 1234</td>
                                            <td>Engineer</td>
                                            <td>9876500000</td>
                                            <td class="text-center">
                                                <div class="d-flex justify-content-center gap-1">
                                                    <a href="javascript:void(0);" onclick=""
                                                        class="w-32-px h-32-px bg-success-focus text-success-main rounded-circle d-inline-flex align-items-center justify-content-center"
                                                        title="Edit">
                                                        <iconify-icon icon="lucide:edit"></iconify-icon>
                                                    </a>
                                                    <a href="javascript:void(0);" onclick=""
                                                        class="delete-btn w-32-px h-32-px bg-danger-focus text-danger-main rounded-circle d-inline-flex align-items-center justify-content-center"
                                                        title="Delete">
                                                        <iconify-icon icon="mingcute:delete-2-line"></iconify-icon>
                                                    </a>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><span
                                                    class="badge bg-warning-subtle text-warning rounded-pill px-3 py-1">Tenant</span>
                                            </td>
                                            <td>Priya Mehta</td>
                                            <td>9123456789</td>
                                            <td>priya@email.com</td>
                                            <td>9876 5432 5678</td>
                                            <td>Doctor</td>
                                            <td>9123400000</td>
                                            <td class="text-center">
                                                <div class="d-flex justify-content-center gap-1">
                                                    <a href="javascript:void(0);" onclick=""
                                                        class="w-32-px h-32-px bg-success-focus text-success-main rounded-circle d-inline-flex align-items-center justify-content-center"
                                                        title="Edit">
                                                        <iconify-icon icon="lucide:edit"></iconify-icon>
                                                    </a>
                                                    <a href="javascript:void(0);" onclick=""
                                                        class="delete-btn w-32-px h-32-px bg-danger-focus text-danger-main rounded-circle d-inline-flex align-items-center justify-content-center"
                                                        title="Delete">
                                                        <iconify-icon icon="mingcute:delete-2-line"></iconify-icon>
                                                    </a>
                                                </div>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                        </div>
                        <!-- END Residents Table -->

                        <!-- Family Table -->
                        <div class="mt-4 p-3" style="border:1px solid #e5e7eb; border-radius:14px; background:#fff;">

                            <h6 class="mb-3 fw-semibold">Family Details</h6>

                            <div class="table-responsive">
                                <table class="table align-middle mb-0">
                                    <thead style="background:#ddeeff;">
                                        <tr>
                                            <th class="py-3">Member Name</th>
                                            <th class="py-3">Relation</th>
                                            <th class="py-3">Date of Birth</th>
                                            <th class="py-3">Gender</th>
                                            <th class="py-3">Mobile No.</th>
                                            <th class="py-3 text-center">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>Rajesh Sharma</td>
                                            <td>Brother</td>
                                            <td>28-09-2000</td>
                                            <td>Male</td>
                                            <td>9876500000</td>
                                            <td class="text-center">
                                                <div class="d-flex justify-content-center gap-1">
                                                    <a href="javascript:void(0);" onclick=""
                                                        class="w-32-px h-32-px bg-success-focus text-success-main rounded-circle d-inline-flex align-items-center justify-content-center"
                                                        title="Edit">
                                                        <iconify-icon icon="lucide:edit"></iconify-icon>
                                                    </a>
                                                    <a href="javascript:void(0);" onclick=""
                                                        class="delete-btn w-32-px h-32-px bg-danger-focus text-danger-main rounded-circle d-inline-flex align-items-center justify-content-center"
                                                        title="Delete">
                                                        <iconify-icon icon="mingcute:delete-2-line"></iconify-icon>
                                                    </a>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>Suresh Patel</td>
                                            <td>Son</td>
                                            <td>28-09-2000</td>
                                            <td>Male</td>
                                            <td>9876543210</td>
                                            <td class="text-center">
                                                <div class="d-flex justify-content-center gap-1">
                                                    <a href="javascript:void(0);" onclick=""
                                                        class="w-32-px h-32-px bg-success-focus text-success-main rounded-circle d-inline-flex align-items-center justify-content-center"
                                                        title="Edit">
                                                        <iconify-icon icon="lucide:edit"></iconify-icon>
                                                    </a>
                                                    <a href="javascript:void(0);" onclick=""
                                                        class="delete-btn w-32-px h-32-px bg-danger-focus text-danger-main rounded-circle d-inline-flex align-items-center justify-content-center"
                                                        title="Delete">
                                                        <iconify-icon icon="mingcute:delete-2-line"></iconify-icon>
                                                    </a>
                                                </div>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                        </div>
                        <!-- END Residents Table -->

                        <!-- Vehicle Table -->
                        <div class="mt-4 p-3" style="border:1px solid #e5e7eb; border-radius:14px; background:#fff;">

                            <h6 class="mb-3 fw-semibold">Vehicle Details</h6>

                            <div class="table-responsive">
                                <table class="table align-middle mb-0">
                                    <thead style="background:#ddeeff;">
                                        <tr>
                                            <th class="py-3">Vehicle No.</th>
                                            <th class="py-3">Vehicle Type</th>
                                            <th class="py-3">Vehicle Name / Model </th>
                                            <th class="py-3">Colour</th>
                                            <th class="py-3">Parking Slot</th>
                                            <th class="py-3 text-center">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>GJ05-SK-9876</td>
                                            <td>Car</td>
                                            <td>Maruti Swift</td>
                                            <td>White</td>
                                            <td>P1</td>
                                            <td class="text-center">
                                                <div class="d-flex justify-content-center gap-1">
                                                    <a href="javascript:void(0);" onclick=""
                                                        class="w-32-px h-32-px bg-success-focus text-success-main rounded-circle d-inline-flex align-items-center justify-content-center"
                                                        title="Edit">
                                                        <iconify-icon icon="lucide:edit"></iconify-icon>
                                                    </a>
                                                    <a href="javascript:void(0);" onclick=""
                                                        class="delete-btn w-32-px h-32-px bg-danger-focus text-danger-main rounded-circle d-inline-flex align-items-center justify-content-center"
                                                        title="Delete">
                                                        <iconify-icon icon="mingcute:delete-2-line"></iconify-icon>
                                                    </a>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>GJ05-SK-5421</td>
                                            <td>Two Wheeler</td>
                                            <td>Suzuki Access</td>
                                            <td>White</td>
                                            <td>P2</td>
                                            <td class="text-center">
                                                <div class="d-flex justify-content-center gap-1">
                                                    <a href="javascript:void(0);" onclick=""
                                                        class="w-32-px h-32-px bg-success-focus text-success-main rounded-circle d-inline-flex align-items-center justify-content-center"
                                                        title="Edit">
                                                        <iconify-icon icon="lucide:edit"></iconify-icon>
                                                    </a>
                                                    <a href="javascript:void(0);" onclick=""
                                                        class="delete-btn w-32-px h-32-px bg-danger-focus text-danger-main rounded-circle d-inline-flex align-items-center justify-content-center"
                                                        title="Delete">
                                                        <iconify-icon icon="mingcute:delete-2-line"></iconify-icon>
                                                    </a>
                                                </div>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                        </div>
                        <!-- END Residents Table -->

                    </div><!-- /card-body -->
                </div><!-- /card -->
            </div>
            <!-- ========== END Residents TAB ========== -->


            <!-- ========== Maintenance TAB ========== -->
            <div class="tab-pane fade" id="maintenanceTab">

                <div class="card">
                    <div class="card-body">

                        <h6 class="mb-4 text-xl">
                            Add Maintenance Details
                        </h6>

                        <form method="post" id="maintenanceForm">

                            <div class="row gy-3">

                                <!-- Maintenance Frequency -->
                                <div class="col-md-4">

                                    <label class="form-label">
                                        Maintenance Frequency
                                        <span class="text-danger">*</span>
                                    </label>

                                    <div class="input-icon-wrap">
                                        <i class="bi bi-calendar2-week-fill icon-purple"></i>

                                        <select name="maintenance_frequency" class="form-select searchSelect" required>

                                            <option value="">Select Frequency</option>
                                            <option value="Monthly">Monthly</option>
                                            <option value="Quarterly">Quarterly</option>
                                            <option value="Half Yearly">Half Yearly</option>
                                            <option value="Yearly">Yearly</option>

                                        </select>
                                    </div>

                                </div>

                                <!-- Due Date -->
                                <div class="col-md-4">

                                    <label class="form-label">
                                        Due Date
                                        <span class="text-danger">*</span>
                                    </label>

                                    <div class="input-icon-wrap">
                                        <i class="bi bi-calendar-event-fill icon-pink"></i>

                                        <input type="date" name="due_date" class="form-control" required>
                                    </div>

                                </div>

                                <!-- GST Applicable -->
                                <div class="col-md-4">

                                    <label class="form-label d-block">
                                        GST Applicable
                                    </label>

                                    <div class="d-flex align-items-center gap-2 mt-2">

                                        <div class="custom-toggle-wrap">
                                            <input type="checkbox" id="gstApplicable" name="gst_applicable"
                                                class="custom-toggle-input">

                                            <label class="custom-toggle-label" for="gstApplicable"></label>
                                        </div>

                                        <span class="toggle-status-text" id="gstStatusText">
                                            No
                                        </span>

                                    </div>

                                </div>
                                
                                <!-- GST Percentage -->
                                <div class="col-md-4" id="gstPercentDiv" style="display:none;">

    <label class="form-label">
        GST Percentage <span class="text-danger">*</span>
    </label>

    <div class="input-icon-wrap">
        <i class="bi bi-percent icon-green"></i>

        <input type="text"
            name="gst_percent"
            id="gstPercent"
            class="form-control"
            placeholder="Enter GST Percentage"
            maxlength="2"
            inputmode="numeric"
            oninput="this.value=this.value.replace(/[^0-9]/g,'')">
    </div>

</div>

                                <!-- Bank Details -->
                                <div class="col-md-4">

                                    <label class="form-label">
                                        Bank Details
                                        <span class="text-danger">*</span>
                                    </label>

                                    <div class="input-icon-wrap textarea-icon-wrap">

                                        <i class="bi bi-bank2 icon-blue"></i>

                                        <textarea name="bank_details" class="form-control textarea-with-icon" rows="2"
                                            placeholder="Enter Bank Name, Account Number, IFSC Code etc."
                                            required></textarea>

                                    </div>

                                </div>

                                <!-- Late Fees Rules -->
                                <div class="col-md-4">

                                    <label class="form-label">
                                        Late Fees Rules
                                    </label>

                                    <div class="input-icon-wrap textarea-icon-wrap">

                                        <i class="bi bi-cash-coin icon-orange"></i>

                                        <textarea name="late_fees_rules" class="form-control textarea-with-icon"
                                            rows="2" placeholder="Enter late fees rules"></textarea>

                                    </div>

                                </div>

                                <!-- UPI QR Upload -->
                                <div class="col-md-4">

                                    <label class="form-label">
                                        UPI QR Upload
                                    </label>

                                    <div class="input-icon-wrap">

                                        <i class="bi bi-qr-code-scan icon-green"></i>

                                        <input type="file" name="upi_qr" class="form-control" accept="image/*">

                                    </div>

                                </div>

                                <!-- Save Button -->
                                <div class="col-12 text-end mt-4">

                                    <button type="submit" class="btn btn-primary-600">

                                        <i class="bi bi-floppy"></i>
                                        Save

                                    </button>

                                </div>

                            </div>

                        </form>

                    </div>
                </div>

            </div>
            <!-- ========== END Maintenance TAB ========== -->

        </div>
        <!-- ===================== END TAB CONTENT ===================== -->

    </div><!-- /container-fluid -->
</div><!-- /dashboard-main-body -->


<!-- SweetAlert2 CDN -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
    // ADD ROW
    $(document).on('click', '.addRow', function () {

        const currentRow = $(this).closest('.tower-row');

        const towerName = currentRow.find('input[name="tower_name[]"]').val().trim();
        const floors = currentRow.find('input[name="num_floors[]"]').val().trim();
        const units = currentRow.find('input[name="units_per_floor[]"]').val().trim();

        if (towerName === '' || floors === '' || units === '') {
            Swal.fire({
                icon: 'warning',
                title: 'Fill all fields',
                text: 'Complete current row first.',
                width: '320px',
                padding: '1rem',
                confirmButtonColor: '#4a63ff',
                customClass: {
                    popup: 'small-swal',
                    title: 'small-swal-title',
                    htmlContainer: 'small-swal-text'
                }
            });
            return;
        }

        const newRow = `
    <div class="row gy-2 mb-3 tower-row align-items-end">
        <div class="col-md-3">
            <div class="input-icon-wrap">
                <i class="bi bi-building-fill icon-blue"></i>
                <input type="text" name="tower_name[]" class="form-control" placeholder="Enter Tower Name" required>
            </div>
        </div>
        <div class="col-md-3">
            <div class="input-icon-wrap">
                <i class="bi bi-layers-fill icon-orange"></i>
                <input type="text" name="num_floors[]" class="form-control" placeholder="Enter Number of Floor"
                    inputmode="numeric" oninput="this.value=this.value.replace(/[^0-9]/g,'')" required>
            </div>
        </div>
        <div class="col-md-3">
            <div class="input-icon-wrap">
                <i class="bi bi-door-open-fill icon-green"></i>
                <input type="text" name="units_per_floor[]" class="form-control" placeholder="Enter Units per Floor"
                    inputmode="numeric" oninput="this.value=this.value.replace(/[^0-9]/g,'')" required>
            </div>
        </div>
        <div class="col-md-2 d-flex gap-2">
            <button type="button" class="btn btn-sm btn-primary addRow" title="Add row">+</button>
            <button type="button" class="btn btn-sm btn-danger removeRow" title="Remove row">−</button>
        </div>
    </div>
`;

        $('#towersContainer').append(newRow);
        $('.searchSelect').select2({
            placeholder: "Search here",
            allowClear: true,
            width: '100%'
        });
    });


    // REMOVE ROW
    $(document).on('click', '.removeRow', function () {

        const rows = $('#towersContainer .tower-row');

        if (rows.length === 1) {
            Swal.fire({
                icon: 'warning',
                title: 'Cannot remove',
                text: 'At least one row is required.',
                width: '320px',
                padding: '1rem',
                confirmButtonColor: '#4a63ff',
                customClass: {
                    popup: 'small-swal',
                    title: 'small-swal-title',
                    htmlContainer: 'small-swal-text'
                }
            });
            return;
        }

        $(this).closest('.tower-row').remove();
    });


    // ===================== FLATS TAB =====================

    // ADD FLAT ROW
    $(document).on('click', '.addFlatRow', function () {

        const currentRow = $(this).closest('.flat-row');

        const tower = currentRow.find('select[name="flat_tower[]"]').val();
        const floor = currentRow.find('input[name="flat_floor[]"]').val().trim();
        const flatNo = currentRow.find('input[name="flat_number[]"]').val().trim();
        const unitType = currentRow.find('select[name="flat_unit_type[]"]').val();
        const area = currentRow.find('input[name="flat_area[]"]').val().trim();
        const maintType = currentRow.find('select[name="flat_maintenance_type[]"]').val();

        if (!tower || floor === '' || flatNo === '' || !unitType || area === '' || !maintType) {
            Swal.fire({
                icon: 'warning',
                title: 'Fill all fields',
                text: 'Complete current row first.',
                width: '320px',
                padding: '1rem',
                confirmButtonColor: '#4a63ff',
                customClass: {
                    popup: 'small-swal',
                    title: 'small-swal-title',
                    htmlContainer: 'small-swal-text'
                }
            });
            return;
        }


        const newRow = `

<div class="row gy-3 mb-3 flat-row">

    <!-- Tower -->
    <div class="col-md-4">

        <label class="form-label">
            Tower / Wing <span class="text-danger">*</span>
        </label>

        <div class="input-icon-wrap">
            <i class="bi bi-building-fill icon-blue"></i>

            <select name="flat_tower[]"
                    class="form-select searchSelect"
                    required>

                <option value="">Select Tower</option>
                <option value="Tower A">Tower A</option>
                <option value="Tower B">Tower B</option>

            </select>
        </div>

    </div>

    <!-- Floor -->
    <div class="col-md-4">

        <label class="form-label">
            Floor <span class="text-danger">*</span>
        </label>

        <div class="input-icon-wrap">
            <i class="bi bi-layers-fill icon-orange"></i>

            <input type="text"
                   name="flat_floor[]"
                   class="form-control"
                   placeholder="Enter Floors"
                   inputmode="numeric"
                   oninput="this.value=this.value.replace(/[^0-9]/g,'')"
                   required>
        </div>

    </div>

    <!-- Flat Number -->
    <div class="col-md-4">

        <label class="form-label">
            Flat Number <span class="text-danger">*</span>
        </label>

        <div class="input-icon-wrap">
            <i class="bi bi-door-open-fill icon-green"></i>

            <input type="text"
                   name="flat_number[]"
                   class="form-control"
                   placeholder="Enter Flat Number"
                   required>
        </div>

    </div>

    <!-- Unit Type -->
    <div class="col-md-4">

        <label class="form-label">
            Unit Type <span class="text-danger">*</span>
        </label>

        <div class="input-icon-wrap">
            <i class="bi bi-house-fill icon-purple"></i>

            <select name="flat_unit_type[]"
                    class="form-select searchSelect"
                    required>

                <option value="">Select Unit Type</option>
                <option value="1 BHK">1 BHK</option>
                <option value="2 BHK">2 BHK</option>
                <option value="3 BHK">3 BHK</option>
                <option value="4 BHK">4 BHK</option>
                <option value="Studio">Studio</option>
                <option value="Penthouse">Penthouse</option>
                <option value="Commercial">Commercial</option>

            </select>
        </div>

    </div>

    <!-- Area -->
    <div class="col-md-4">

        <label class="form-label">
            Area (Sq.ft) <span class="text-danger">*</span>
        </label>

        <div class="input-icon-wrap">
            <i class="bi bi-rulers icon-cyan"></i>

            <input type="text"
                   name="flat_area[]"
                   class="form-control"
                   placeholder="Enter Area (Sq.ft)"
                   inputmode="numeric"
                   oninput="this.value=this.value.replace(/[^0-9]/g,'')"
                   required>
        </div>

    </div>

    <!-- Maintenance -->
    <div class="col-md-4">

        <label class="form-label">
            Maintenance Type <span class="text-danger">*</span>
        </label>

        <div class="input-icon-wrap">
            <i class="bi bi-cash-coin icon-pink"></i>

            <select name="flat_maintenance_type[]"
                    class="form-select searchSelect"
                    required>

                <option value="">Select Type</option>
                <option value="Fixed">Fixed</option>
                <option value="Per Sq.ft">Per Sq.ft</option>
                <option value="Slab Based">Slab Based</option>

            </select>
        </div>

    </div>

    <!-- Parking -->
    <div class="col-md-4">

        <label class="form-label">
            Parking Slots
        </label>

        <div class="input-icon-wrap">
            <i class="bi bi-p-square-fill icon-red"></i>

            <input type="text"
                   name="flat_parking[]"
                   class="form-control"
                   placeholder="Enter Parking Slot"
                   inputmode="numeric"
                   oninput="this.value=this.value.replace(/[^0-9]/g,'')">
        </div>

    </div>

    <!-- Buttons -->
    <div class="col-md-4 d-flex align-items-end gap-2">

        <button type="button"
                class="btn btn-sm btn-primary addFlatRow"
                title="Add row">
            +
        </button>

        <button type="button"
                class="btn btn-sm btn-danger removeFlatRow"
                title="Remove row">
            −
        </button>

    </div>

</div>

<hr class="my-3">

`;

        $('#flatsContainer').append(newRow);
        $('.searchSelect').select2({
            placeholder: "Search here",
            allowClear: true,
            width: '100%'
        });
    });


    // REMOVE FLAT ROW
    $(document).on('click', '.removeFlatRow', function () {

        const rows = $('#flatsContainer .flat-row');

        if (rows.length === 1) {
            Swal.fire({
                icon: 'warning',
                title: 'Cannot remove',
                text: 'At least one row is required.',
                width: '320px',
                padding: '1rem',
                confirmButtonColor: '#4a63ff',
                customClass: {
                    popup: 'small-swal',
                    title: 'small-swal-title',
                    htmlContainer: 'small-swal-text'
                }
            });
            return;
        }

        $(this).closest('.flat-row').remove();
    });


    // ===================== FAMILY DETAILS =====================

    function swalWarn(title, text) {
        return Swal.fire({
            icon: 'warning',
            title: title,
            text: text,
            width: '320px',
            padding: '1rem',
            confirmButtonColor: '#4a63ff',
            customClass: {
                popup: 'small-swal',
                title: 'small-swal-title',
                htmlContainer: 'small-swal-text'
            }
        });
    }

    // ADD FAMILY ROW
    $(document).on('click', '.addFamilyRow', function () {

        const currentRow = $(this).closest('.family-row');
        const name = currentRow.find('input[name="family_name[]"]').val().trim();
        const relation = currentRow.find('select[name="family_relation[]"]').val();
        const dob = currentRow.find('input[name="family_dob[]"]').val();
        const gender = currentRow.find('select[name="family_gender[]"]').val();

        if (!name || !relation || !dob || !gender) {
            swalWarn('Fill all fields', 'Complete current row first.');
            return;
        }

        const newRow = `

<div class="row gy-3 mb-3 family-row">

    <!-- Member Name -->
    <div class="col-md-4">

        <label class="form-label">
            Member Name <span class="text-danger">*</span>
        </label>

        <div class="input-icon-wrap">
            <i class="bi bi-person-fill icon-blue"></i>

            <input type="text"
                   name="family_name[]"
                   class="form-control"
                   placeholder="Enter Member Name"
                   required>
        </div>

    </div>

    <!-- Relation -->
    <div class="col-md-4">

        <label class="form-label">
            Relation <span class="text-danger">*</span>
        </label>

        <div class="input-icon-wrap">
            <i class="bi bi-people-fill icon-purple"></i>

            <select name="family_relation[]"
                    class="form-select searchSelect"
                    required>

                <option value="">Select Relation</option>
                <option value="Spouse">Spouse</option>
                <option value="Son">Son</option>
                <option value="Daughter">Daughter</option>
                <option value="Father">Father</option>
                <option value="Mother">Mother</option>
                <option value="Brother">Brother</option>
                <option value="Sister">Sister</option>
                <option value="Other">Other</option>

            </select>
        </div>

    </div>

    <!-- DOB -->
    <div class="col-md-4">

        <label class="form-label">
            Date of Birth <span class="text-danger">*</span>
        </label>

        <div class="input-icon-wrap">
            <i class="bi bi-calendar-event-fill icon-pink"></i>

            <input type="date"
                   name="family_dob[]"
                   class="form-control"
                   required>
        </div>

    </div>

    <!-- Gender -->
    <div class="col-md-4">

        <label class="form-label">
            Gender <span class="text-danger">*</span>
        </label>

        <div class="input-icon-wrap">
            <i class="bi bi-gender-ambiguous icon-orange"></i>

            <select name="family_gender[]"
                    class="form-select searchSelect"
                    required>

                <option value="">Select Gender</option>
                <option value="Male">Male</option>
                <option value="Female">Female</option>
                <option value="Other">Other</option>

            </select>
        </div>

    </div>

    <!-- Mobile -->
    <div class="col-md-4">

        <label class="form-label">
            Mobile Number
        </label>

        <div class="input-icon-wrap">
            <i class="bi bi-telephone-fill icon-green"></i>

            <input type="text"
                   name="family_mobile[]"
                   class="form-control"
                   placeholder="Enter Mobile Number"
                   inputmode="numeric"
                   maxlength="10"
                   oninput="this.value=this.value.replace(/[^0-9]/g,'')">
        </div>

    </div>

    <!-- Buttons -->
    <div class="col-md-4 d-flex align-items-end gap-2">

        <button type="button"
                class="btn btn-sm btn-primary addFamilyRow"
                title="Add row">
            +
        </button>

        <button type="button"
                class="btn btn-sm btn-danger removeFamilyRow"
                title="Remove row">
            −
        </button>

    </div>

</div>

<hr class="my-3">

`;

        $('#familyContainer').append(newRow);
        $('.searchSelect').select2({
            placeholder: "Search here",
            allowClear: true,
            width: '100%'
        });
    });

    // REMOVE FAMILY ROW
    $(document).on('click', '.removeFamilyRow', function () {
        if ($('#familyContainer .family-row').length === 1) {
            swalWarn('Cannot remove', 'At least one row is required.');
            return;
        }
        $(this).closest('.family-row').remove();
    });


    // ===================== VEHICLE DETAILS =====================

    // ADD VEHICLE ROW
    $(document).on('click', '.addVehicleRow', function () {

        const currentRow = $(this).closest('.vehicle-row');
        const vNumber = currentRow.find('input[name="vehicle_number[]"]').val().trim();
        const vType = currentRow.find('select[name="vehicle_type[]"]').val();
        const vModel = currentRow.find('input[name="vehicle_model[]"]').val().trim();

        if (!vNumber || !vType || !vModel) {
            swalWarn('Fill all fields', 'Complete current row first.');
            return;
        }

        const newRow = `

<div class="row gy-3 mb-3 vehicle-row">

    <!-- Vehicle Number -->
    <div class="col-md-4">

        <label class="form-label">
            Vehicle Number <span class="text-danger">*</span>
        </label>

        <div class="input-icon-wrap">
            <i class="bi bi-car-front-fill icon-blue"></i>

            <input type="text"
                   name="vehicle_number[]"
                   class="form-control"
                   placeholder="Enter Vehicle Number"
                   style="text-transform:uppercase"
                   oninput="this.value=this.value.toUpperCase()"
                   required>
        </div>

    </div>

    <!-- Vehicle Type -->
    <div class="col-md-4">

        <label class="form-label">
            Vehicle Type <span class="text-danger">*</span>
        </label>

        <div class="input-icon-wrap">
            <i class="bi bi-truck-front-fill icon-purple"></i>

            <select name="vehicle_type[]"
                    class="form-select searchSelect"
                    required>

                <option value="">Select Vehicle Type</option>
                <option value="Car">Car</option>
                <option value="Motorcycle">Motorcycle</option>
                <option value="Scooter">Scooter</option>
                <option value="SUV">SUV</option>
                <option value="Electric Vehicle">Electric Vehicle</option>
                <option value="Bicycle">Bicycle</option>
                <option value="Other">Other</option>

            </select>
        </div>

    </div>

    <!-- Vehicle Model -->
    <div class="col-md-4">

        <label class="form-label">
            Vehicle Name / Model <span class="text-danger">*</span>
        </label>

        <div class="input-icon-wrap">
            <i class="bi bi-car-front icon-green"></i>

            <input type="text"
                   name="vehicle_model[]"
                   class="form-control"
                   placeholder="Enter Vehicle Model"
                   required>
        </div>

    </div>

    <!-- Vehicle Colour -->
    <div class="col-md-4">

        <label class="form-label">
            Colour
        </label>

        <div class="input-icon-wrap">
            <i class="bi bi-palette-fill icon-pink"></i>

            <input type="text"
                   name="vehicle_colour[]"
                   class="form-control"
                   placeholder="Enter Vehicle Colour">
        </div>

    </div>

    <!-- Parking Slot -->
    <div class="col-md-4">

        <label class="form-label">
            Parking Slot
        </label>

        <div class="input-icon-wrap">
            <i class="bi bi-p-square-fill icon-orange"></i>

            <input type="text"
                   name="vehicle_parking[]"
                   class="form-control"
                   placeholder="Enter Parking Slot"
                   oninput="this.value=this.value.toUpperCase()">
        </div>

    </div>

    <!-- Buttons -->
    <div class="col-md-4 d-flex align-items-end gap-2">

        <button type="button"
                class="btn btn-sm btn-primary addVehicleRow"
                title="Add row">
            +
        </button>

        <button type="button"
                class="btn btn-sm btn-danger removeVehicleRow"
                title="Remove row">
            −
        </button>

    </div>

</div>

<hr class="my-3">

`;

        $('#vehicleContainer').append(newRow);
        $('.searchSelect').select2({
            placeholder: "Search here",
            allowClear: true,
            width: '100%'
        });
    });

    // REMOVE VEHICLE ROW
    $(document).on('click', '.removeVehicleRow', function () {
        if ($('#vehicleContainer .vehicle-row').length === 1) {
            swalWarn('Cannot remove', 'At least one row is required.');
            return;
        }
        $(this).closest('.vehicle-row').remove();
    });


    $(document).ready(function () {

        $('.searchSelect').select2({
            placeholder: "Search here",
            allowClear: true,
            width: '100%'
        });

    });
</script>
<script>
    $(document).ready(function () {

        $('.searchSelect').select2({
            placeholder: "Search here",
            allowClear: true,
            width: '100%'
        });

    });
    
    $(document).ready(function () {

    $('#gstApplicable').on('change', function () {

        if ($(this).is(':checked')) {

            $('#gstStatusText').text('Yes');

            $('#gstPercentDiv').slideDown();

            $('#gstPercent').prop('required', true);

        } else {

            $('#gstStatusText').text('No');

            $('#gstPercentDiv').slideUp();

            $('#gstPercent').prop('required', false).val('');
        }

    });

});
</script>
<script>
$(document).ready(function () {

    Swal.fire({
        icon: 'success',
        title: '',
        html: `
            <div class="welcome-box">
                <div class="welcome-emoji">🎉</div>

                <h4 class="welcome-title">
                    Welcome to SocietyPro
                </h4>

                <div class="welcome-name">
                    Rajesh
                </div>

                <p class="welcome-subtitle">
                    Have a great day!
                </p>
            </div>
        `,
        width: '500px',
        padding: '2rem',
        showConfirmButton: false,
        timer: 3000,
        timerProgressBar: true,
        backdrop: 'rgba(15,23,42,.35)',
        customClass: {
            popup: 'welcome-popup'
        }
    });

});
</script>

<?php include 'footer.php'; ?>