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

<!-- Tom Select CSS -->
<link href="https://cdn.jsdelivr.net/npm/tom-select/dist/css/tom-select.bootstrap5.min.css" rel="stylesheet">

<style>

/* Form Input Design */
.form-control,
.form-select {
    height: 44px;
    border-radius: 10px;
}

/* Tom Select Design */
.ts-wrapper.single .ts-control {
    min-height: 44px !important;
    border-radius: 10px !important;
    border: 1px solid #d1d5db !important;
    padding: 8px 12px !important;
    box-shadow: none !important;
    background: #fff !important;
}

.ts-wrapper.focus .ts-control {
    border-color: #4a63ff !important;
    box-shadow: 0 0 0 3px rgba(74, 99, 255, 0.1) !important;
}

.ts-dropdown {
    border-radius: 12px !important;
    border: 1px solid #e5e7eb !important;
    overflow: hidden;
    margin-top: 6px !important;
}

.ts-dropdown .option {
    padding: 12px 14px !important;
    font-size: 15px;
}

.ts-dropdown .active {
    background: #f3f4f6 !important;
    color: #111827 !important;
}

.ts-control input {
    font-size: 14px !important;
}

/* Time Button Design */
.time-btn {
    min-width: 110px;
    height: 44px;
    border-radius: 10px;
    font-weight: 500;
    white-space: nowrap;
}

</style>

<div class="dashboard-main-body">

    <!-- Header -->
    <div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-24">
        <h6 class="fw-semibold mb-0">Add Staff Attendance</h6>
    </div>

    <!-- Back Button -->
    <div class="d-flex flex-wrap align-items-center justify-content-end gap-3 mb-3">
        <a type="button"
            href="staff_attendance.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">

            <iconify-icon icon="ic:baseline-arrow-back"
                class="icon text-xl line-height-1">
            </iconify-icon>
        </a>
    </div>

    <!-- Form -->
    <div class="row gy-4">
        <div class="col-md-12">

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

                    <h6 class="mb-4 text-xl">Add Staff Attendance</h6>

                    <form id="staffForm"
                        action=""
                        method="post"
                        autocomplete="off">

                        <div class="row gy-3">

                            <!-- Staff Dropdown -->
                            <div class="col-sm-4">
                                <label class="form-label">
                                    Staff Name
                                    <span class="text-danger">*</span>
                                </label>

                                <select id="staffSelect"
                                    name="staff_name">

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

                                    <option value="Rahul Sharma">Rahul Sharma</option>
                                    <option value="Amit Patel">Amit Patel</option>
                                    <option value="Priya Verma">Priya Verma</option>
                                    <option value="Neha Singh">Neha Singh</option>

                                </select>
                            </div>

                            <!-- In Time -->
                            <div class="col-sm-4">
                                <label class="form-label">
                                    In Time
                                    <span class="text-danger">*</span>
                                </label>

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

                                    <input type="time"
                                        name="in_time"
                                        id="inTime"
                                        class="form-control">

                                    <button type="button"
                                        class="btn btn-success time-btn"
                                        onclick="makeInTime()">

                                        Make In
                                    </button>

                                </div>
                            </div>

                            <!-- Out Time -->
                            <div class="col-sm-4">
                                <label class="form-label">
                                    Out Time
                                    <span class="text-danger">*</span>
                                </label>

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

                                    <input type="time"
                                        name="out_time"
                                        id="outTime"
                                        class="form-control">

                                    <button type="button"
                                        class="btn btn-danger time-btn"
                                        onclick="makeOutTime()">

                                        Make Out
                                    </button>

                                </div>
                            </div>

                        </div>

                        <!-- Save Button -->
                        <div class="form-group text-end mt-4">
                            <button type="submit"
                                class="btn btn-primary-600">

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

                    </form>

                </div>
            </div>

        </div>
    </div>

</div>

<!-- Tom Select JS -->
<script src="https://cdn.jsdelivr.net/npm/tom-select/dist/js/tom-select.complete.min.js"></script>

<script>

/* Searchable Dropdown */
new TomSelect("#staffSelect", {

    create: false,

    placeholder: "Search Staff...",

    sortField: {
        field: "text",
        direction: "asc"
    }

});

/* Make In Time */
function makeInTime() {

    const inTime = document.getElementById('inTime');

    // If already selected manually then do nothing
    if (inTime.value !== '') {
        return;
    }

    let now = new Date();

    let hours = String(now.getHours()).padStart(2, '0');
    let minutes = String(now.getMinutes()).padStart(2, '0');

    inTime.value = `${hours}:${minutes}`;
}

/* Make Out Time */
function makeOutTime() {

    const outTime = document.getElementById('outTime');

    // If already selected manually then do nothing
    if (outTime.value !== '') {
        return;
    }

    let now = new Date();

    let hours = String(now.getHours()).padStart(2, '0');
    let minutes = String(now.getMinutes()).padStart(2, '0');

    outTime.value = `${hours}:${minutes}`;
}

</script>

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