<?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>
    /* Ensure dropdown menus are visible */
    .dropdown-menu {
        display: none;
        position: absolute;
        transform: translate3d(0px, 38px, 0px);
        top: 0px;
        left: 0px;
        will-change: transform;
    }

    .dropdown-menu.show {
        display: block;
    }

    /* Ensure dropdown toggle button is clickable */
    .dropdown-toggle {
        cursor: pointer;
        position: relative;
        z-index: 1;
    }

    /* Fix for dropdown positioning */
    .dropdown {
        position: relative;
    }

    /* Tabs */
    #loanTabs {
        border-bottom: 2px solid #e9ecef;
    }

    #loanTabs .nav-link {
        border: none;
        padding: 12px 20px;
        font-weight: 500;
        color: #6c757d;
    }

    #loanTabs .nav-link.active {
        color: #0d6efd;
        border-bottom: 3px solid #0d6efd;
    }

    /* Card */
    .card {
        border-radius: 14px;
        border: none;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    }

    /* Inputs */
    .form-control,
    .form-select {
        border-radius: 10px;
        border: 1.8px solid #d3d9e5;
        padding: 10px 14px;
    }

    .form-control:focus,
    .form-select:focus {
        border-color: #5b76ff;
        box-shadow: 0 0 0 3px rgba(91, 118, 255, 0.25);
    }

    /* Button */
    .btn-primary-600 {
        border-radius: 10px;
        padding: 10px 26px;
        font-weight: 600;
        background: linear-gradient(135deg, #4a63ff, #6b8aff);
        border: none;
    }

    .btn-col {
        display: flex;
        align-items: flex-end;
        gap: 6px;
        padding-bottom: 2px;
    }

    .resident-row {
        border-bottom: 1px dashed #e3e6ef;
        padding-bottom: 14px;
    }

    .resident-title {
        font-size: 15px;
        border-left: 4px solid #4a63ff;
        padding-left: 10px;
    }

    .parking-row {
        border-bottom: 1px dashed #e3e6ef;
        padding-bottom: 14px;
    }

    .parking-title {
        font-size: 15px;
        border-left: 4px solid #20c997;
        padding-left: 10px;
    }
</style>

<div class="dashboard-main-body">
    <div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-24">
        <h6 class="fw-semibold mb-0">Add Announcement</h6>
    </div>
    <div class="d-flex flex-wrap align-items-center justify-content-end gap-3 mb-3">
        <a type="button" href="announcement_notices.php" class="tooltip-button btn bg-primary-600 text-white border border-primary-600 radius-8 px-12 py-11 d-flex align-items-center" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true" data-bs-custom-class="tooltip-primary" title="Listing">
            <iconify-icon icon="ic:baseline-arrow-back" class="icon text-xl line-height-1"></iconify-icon>
        </a>
    </div>
    <div class="container-fluid mt-3">

        <!-- ===================== TABS ===================== -->
        <ul class="nav nav-tabs" id="loanTabs">
            <li class="nav-item">
                <a class="nav-link active" data-bs-toggle="tab" href="#societyTab">
                    Basic Information
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-bs-toggle="tab" href="#bhkTab">
                    Message & Schedule
                </a>
            </li>
        </ul>

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

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

                        <h6 class="mb-4 text-xl">Add Basic Information</h6>
                        <form method="post">
                            <div id="residentRows">

                                <div class="resident-row mb-3">

                                    <!-- Resident Fields Row -->
                                    <div class="row gy-3 align-items-end">
                                        <div class="col-sm-4">
                                            <label class="form-label mb-2">Title<span class="text-danger">*</span></label>
                                            <input type="text" name="name[]" class="form-control py-2" placeholder="Enter Title" required>
                                        </div>
                                        
                                        <div class="col-sm-4">
                                            <label class="form-label mb-2">Author / Issuer<span class="text-danger">*</span></label>
                                            <input type="text" name="name" class="form-control py-2" placeholder="Enter Name" required>
                                        </div>
                                    </div>
                                </div>
                            </div>

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

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

            <!-- ========== Message & Schedule TAB ========== -->
            <div class="tab-pane fade show" id="bhkTab">
                <div class="card">
                    <div class="card-body">

                        <h6 class="mb-10 text-xl ">Add Message & Schedule Details</h6>

                        <form method="post">
                            <div class="row gy-3">
    
                                <!-- Timing -->
                                <div class="col-sm-4">
                                    <label class="form-label">Date of Issue<span class="text-danger">*</span></label>
                                    <input id="issueDate" type="text" name="issue_date" class="form-control" required placeholder="dd-mm-yyyy" readonly />
                                </div>
    
                                <div class="col-sm-4">
                                    <label class="form-label">Expiry Date</label>
                                    <input  id="expiryDate" type="text" name="expiry_date" class="form-control" placeholder="dd-mm-yyyy" readonly/>
                                </div>
                                
                                <!-- Content -->
                                <div class="col-sm-4">
                                    <label class="form-label">Description / Message<span class="text-danger">*</span></label>
                                    <textarea name="description" class="form-control" rows="3" placeholder="Enter message details" required></textarea>
                                </div>
                                
                            </div>
                            <div class="text-end mt-4">
                                <button type="submit" class="btn btn-primary-600">
                                    <i class="bi bi-floppy"></i>
                                </button>
                            </div>
                        </form>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--Date picker-->
<script src="https://cdn.jsdelivr.net/npm/litepicker/dist/bundle.js"></script>
<!--Date Picker -->
<script>
    new Litepicker({
    element: document.getElementById('issueDate'),
    singleMode: true,
    format: 'DD-MM-YYYY',

    dropdowns: {
      months: true,
      years: true
    }
  });
   new Litepicker({
    element: document.getElementById('expiryDate'),
    singleMode: true,
    format: 'DD-MM-YYYY',

    dropdowns: {
      months: true,
      years: true
    }
  });
</script>

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