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

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

    .tabs .nav-link.active {
        color: #0d6efd;
        border-bottom: 3px solid #0d6efd;
    }
</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 Event Notification</h6>
    </div>
    <div class="d-flex flex-wrap align-items-center justify-content-end gap-3 mb-3">
        <a type="button" href="event_notify.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">

        <ul class="nav nav-tabs tabs mb-4">
            <li class="nav-item">
                <a class="nav-link active" data-bs-toggle="tab" href="#visitorTab">
                    Event Details
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-bs-toggle="tab" href="#residentTab">
                    Date & Time
                </a>
            </li>
        </ul>


        <div class="tab-content mt-4">

            <!-------------------- Event Tab------------------>
            <div class="tab-pane fade show active" id="visitorTab">
                <div class="card">
                    <div class="card-body">

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

                        <form method="post" id="visitorForm">
                            <div class="row gy-3 mt-4">

                                <div class="col-sm-4">
                                    <label class="form-label">Event Name / Title<span class="text-danger">*</span></label>
                                    <input type="text" name="event_name" class="form-control" placeholder="Enter Event Name" required />
                                </div>


                                <div class="col-sm-4 position-relative">
                                    <label class="form-label">Event Type</label>
                                    <select name="occupancy_status" class="form-control">
                                        <option value="">-- Select --</option>
                                        <option>Meeting</option>
                                        <option>Festival</option>
                                        <option>Sports</option>
                                        <option>Workshop</option>
                                        <option>Party</option>
                                    </select>
                                </div>

                                <div class="col-sm-4">
                                    <label class="form-label">Organizer / Host<span class="text-danger">*</span></label>
                                    <input type="text" name="organizer" class="form-control" placeholder="Enter Organizer / Host" required />
                                </div>



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

                            </div>
                        </form>

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

            <!-------------------- Date & Time Tab------------------>
            <div class="tab-pane fade show" id="residentTab">
                <div class="card">
                    <div class="card-body">

                        <h6 class="mb-4 text-xl">Add Venue, Date & Time</h6>

                        <form method="post" id="residentForm">
                            <div class="row gy-3 mt-4">


                                <!-- Start Date & Time -->
                                <div class="col-sm-4">
                                    <label class="form-label">Start Date & Time<span class="text-danger">*</span></label>
                                    <input type="datetime-local" name="start_datetime" class="form-control" required />
                                </div>

                                <!-- End Date & Time -->
                                <div class="col-sm-4">
                                    <label class="form-label">End Date & Time<span class="text-danger">*</span></label>
                                    <input type="datetime-local" name="start_datetime" class="form-control" required />
                                </div>

                                <!-- End Date & Time -->
                                <div class="col-sm-4">
                                    <label class="form-label">Venue / Location<span class="text-danger">*</span></label>
                                    <input type="text" name="venue" class="form-control" placeholder="Enter Venue / Location" required />
                                </div>

                                <!-- Notification -->
                                <div class="col-sm-4 position-relative">
                                    <label class="form-label">Event Type</label>
                                    <select name="occupancy_status" class="form-control">
                                        <option value="">-- Select --</option>
                                        <option>SMS</option>
                                        <option>EMAIL</option>
                                    </select>
                                </div>

                                <!--Special Instructions-->
                                <div class="col-sm-6">
                                    <label class="form-label">Special Instructions</label>
                                    <textarea name="instructions" class="form-control" rows="2" placeholder="Dress code, items to bring, etc."></textarea>
                                </div>

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

                            </div>
                        </form>

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

        </div>


    </div>

</div>

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