{# Clock In/Out Modal #}
{# This modal displays as an overlay on top of any page and allows employees to clock in/out and manage breaks #}
<div class="modal fade" id="clockInModal" tabindex="-1" role="dialog" data-bs-backdrop="static">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content clock-modal-content">
            <div class="modal-header">
                <h4 class="modal-title">
                    <i class="fa fa-clock-o"></i> Time Clock
                </h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                {# Loading State #}
                <div id="clockStateLoading" class="clock-state-loading text-center">
                    <i class="fa fa-spinner fa-spin fa-2x"></i>
                    <p>Loading...</p>
                </div>

                {# Error State #}
                <div id="clockStateError" class="clock-state-error text-center" style="display: none;">
                    <i class="fa fa-exclamation-triangle fa-2x text-warning"></i>
                    <p id="clockErrorMessage">Unable to load time clock status</p>
                    <button class="btn btn-secondary btn-sm" id="clockRetryBtn">
                        <i class="fa fa-refresh"></i> Retry
                    </button>
                </div>

                {# Not Linked State #}
                <div id="clockStateNotLinked" class="clock-state-not-linked text-center" style="display: none;">
                    <i class="fa fa-user-times fa-2x text-muted"></i>
                    <p>Your account is not linked to a WhenIWork employee.</p>
                    <p class="text-muted small">Contact your manager to link your account.</p>
                </div>

                {# Clock Actions State #}
                <div id="clockStateActions" class="clock-actions-container" style="display: none;">
                    {# Current Status Display #}
                    <div id="clockCurrentStatus" class="clock-current-status">
                        <div class="status-badge" id="clockStatusBadge">
                            <i class="fa fa-circle"></i>
                            <span id="clockStatusText">Not Clocked In</span>
                        </div>
                        <div id="clockedInTime" class="clocked-in-time" style="display: none;">
                            <span class="time-label">Time:</span>
                            <span id="clockDuration" class="time-value">0:00</span>
                        </div>
                    </div>

                    {# Break Status #}
                    <div id="breakStatusContainer" class="break-status" style="display: none;">
                        <div class="break-badge">
                            <i class="fa fa-coffee"></i>
                            <span>On Break</span>
                        </div>
                        <div id="breakDuration" class="break-duration">0:00</div>
                    </div>

                    {# Employee Selector (for managers) #}
                    <div id="employeeSelectorContainer" class="employee-selector-container" style="display: none;">
                        <label for="clockEmployeeSelect">Select Employee:</label>
                        <select id="clockEmployeeSelect" class="form-control">
                            <option value="">-- My Clock --</option>
                        </select>
                    </div>

                    {# Main Action Buttons #}
                    <div class="clock-action-buttons">
                        <button type="button" class="btn btn-lg btn-success btn-clock-in" id="btnClockIn" style="display: none;">
                            <i class="fa fa-sign-in"></i> Clock In
                        </button>
                        <button type="button" class="btn btn-lg btn-danger btn-clock-out" id="btnClockOut" style="display: none;">
                            <i class="fa fa-sign-out"></i> Clock Out
                        </button>
                    </div>

                    {# Break Buttons #}
                    <div class="break-action-buttons">
                        <button type="button" class="btn btn-secondary btn-break-start" id="btnStartBreak" style="display: none;">
                            <i class="fa fa-coffee"></i> Start Break
                        </button>
                        <button type="button" class="btn btn-warning btn-break-end" id="btnEndBreak" style="display: none;">
                            <i class="fa fa-check"></i> End Break
                        </button>
                    </div>

                    {# Shift Selection (when multiple shifts available) #}
                    <div id="shiftSelectionContainer" class="shift-selection-container" style="display: none;">
                        <label>Select Shift:</label>
                        <div id="shiftOptions" class="shift-options">
                            {# Shift options loaded dynamically #}
                        </div>
                    </div>

                    {# Notes Input #}
                    <div class="clock-notes-container">
                        <label for="clockNotes">Notes (optional):</label>
                        <input type="text" class="form-control" id="clockNotes" placeholder="Add a note...">
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<style>
.clock-modal-content {
    border-radius: 8px;
    overflow: hidden;
}

.clock-modal-content .modal-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-bottom: none;
    padding: 15px 20px;
}

.clock-modal-content .modal-header .close {
    color: white;
    opacity: 0.8;
    text-shadow: none;
}

.clock-modal-content .modal-header .close:hover {
    opacity: 1;
}

.clock-modal-content .modal-body {
    padding: 20px;
    min-height: 200px;
}

.clock-state-loading,
.clock-state-error,
.clock-state-not-linked {
    padding: 30px 20px;
}

.clock-state-loading i,
.clock-state-error i,
.clock-state-not-linked i {
    margin-bottom: 15px;
    color: #999;
}

.clock-current-status {
    text-align: center;
    margin-bottom: 20px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
}

.status-badge {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
}

.status-badge i {
    margin-right: 8px;
}

.status-badge.clocked-in {
    color: #28a745;
}

.status-badge.clocked-out {
    color: #6c757d;
}

.status-badge.on-break {
    color: #ffc107;
}

.clocked-in-time {
    font-size: 14px;
    color: #666;
}

.clocked-in-time .time-value {
    font-weight: 600;
    font-size: 24px;
    color: #333;
    display: block;
    margin-top: 5px;
}

.break-status {
    text-align: center;
    padding: 10px;
    background: #fff3cd;
    border-radius: 8px;
    margin-bottom: 20px;
}

.break-badge {
    color: #856404;
    font-weight: 600;
}

.break-badge i {
    margin-right: 5px;
}

.break-duration {
    font-size: 18px;
    font-weight: 600;
    color: #856404;
}

.employee-selector-container {
    margin-bottom: 20px;
}

.employee-selector-container label {
    font-weight: 600;
    margin-bottom: 5px;
    display: block;
}

.clock-action-buttons {
    display: flex;
    justify-content: center;
    margin-bottom: 15px;
}

.clock-action-buttons .btn {
    min-width: 150px;
    padding: 15px 30px;
    font-size: 18px;
    border-radius: 8px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.clock-action-buttons .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.clock-action-buttons .btn:active {
    transform: translateY(0);
}

.break-action-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 15px;
}

.break-action-buttons .btn {
    padding: 10px 20px;
    border-radius: 6px;
}

.shift-selection-container {
    margin-bottom: 20px;
}

.shift-selection-container label {
    font-weight: 600;
    margin-bottom: 10px;
    display: block;
}

.shift-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.shift-option {
    padding: 10px 15px;
    border: 2px solid #e9ecef;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.shift-option:hover {
    border-color: #667eea;
    background: #f8f9fa;
}

.shift-option.selected {
    border-color: #667eea;
    background: #eef2ff;
}

.shift-option .shift-time {
    font-weight: 600;
}

.shift-option .shift-position {
    font-size: 12px;
    color: #666;
}

.clock-notes-container {
    margin-top: 15px;
}

.clock-notes-container label {
    font-weight: 500;
    font-size: 12px;
    color: #666;
    margin-bottom: 5px;
    display: block;
}

.clock-notes-container input {
    border-radius: 6px;
    border: 1px solid #e0e0e0;
}

.clock-notes-container input:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}

/* Dark mode support */
.dark-mode .clock-modal-content .modal-body {
    background: #2d3748;
    color: #e2e8f0;
}

.dark-mode .clock-current-status {
    background: #1a202c;
}

.dark-mode .clocked-in-time .time-value {
    color: #e2e8f0;
}

.dark-mode .break-status {
    background: #744210;
}

.dark-mode .break-badge,
.dark-mode .break-duration {
    color: #fbd38d;
}

.dark-mode .shift-option {
    border-color: #4a5568;
    background: #2d3748;
}

.dark-mode .shift-option:hover {
    border-color: #667eea;
    background: #374151;
}

.dark-mode .shift-option.selected {
    background: #3b4d7a;
}
</style>