{#
    Team Member Detail Modal

    A tabbed modal for viewing and editing team member details.
    Contains 4 tabs: Profile, Employment, Access & Security, Activity

    Features:
    - Bootstrap 5 modal with tabs
    - Avatar header section with name, email, and source badge
    - Readonly fields for external source data (WhenIWork, Homebase)
    - Form validation and dirty state tracking
    - Activity timeline with load more functionality

    Usage:
    - JavaScript calls TeamMemberDetailModal.open(memberId)
    - Populated via AJAX from /api/:typeNum/team-members/:id endpoint
    - Save dispatches PUT to same endpoint

    CSS classes follow Bootstrap 5 conventions
#}

{# Team Member Detail Modal #}
<div class="modal fade"
     id="team-member-detail-modal"
     tabindex="-1"
     aria-labelledby="detail-modal-title"
     aria-hidden="true"
     data-bs-backdrop="static"
     data-bs-keyboard="false">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            {# Modal Header with Avatar #}
            <div class="modal-header bg-light">
                <div class="d-flex align-items-center gap-3 flex-grow-1">
                    {# Avatar - JS will show/hide appropriately based on photoUrl using d-none class #}
                    <div class="detail-avatar-container">
                        <img src=""
                             alt="Team member avatar"
                             id="detail-avatar"
                             class="rounded-circle d-none"
                             style="width: 80px; height: 80px; object-fit: cover; border: 3px solid var(--neutral-200);">
                        <div id="detail-avatar-placeholder"
                             class="rounded-circle d-flex align-items-center justify-content-center"
                             style="width: 80px; height: 80px; background: var(--neutral-100); border: 3px solid var(--neutral-200);">
                            <i class="fa-solid fa-user fa-2x text-muted"></i>
                        </div>
                    </div>

                    {# Name, Email, Source Badge #}
                    <div class="detail-header-info">
                        <h5 class="modal-title mb-1" id="detail-modal-title">
                            <span id="detail-name">Team Member</span>
                        </h5>
                        <div class="text-muted small mb-1" id="detail-email">email@example.com</div>
                        <div id="detail-source-badge">
                            {# Badge will be populated dynamically #}
                        </div>
                    </div>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            {# Tab Navigation #}
            <ul class="nav nav-tabs px-3 pt-2" id="detail-tabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active"
                            id="profile-tab"
                            data-bs-toggle="tab"
                            data-bs-target="#profile-pane"
                            type="button"
                            role="tab"
                            aria-controls="profile-pane"
                            aria-selected="true">
                        <i class="fa-solid fa-user me-1"></i> Profile
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link"
                            id="employment-tab"
                            data-bs-toggle="tab"
                            data-bs-target="#employment-pane"
                            type="button"
                            role="tab"
                            aria-controls="employment-pane"
                            aria-selected="false">
                        <i class="fa-solid fa-briefcase me-1"></i> Employment
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link"
                            id="access-tab"
                            data-bs-toggle="tab"
                            data-bs-target="#access-pane"
                            type="button"
                            role="tab"
                            aria-controls="access-pane"
                            aria-selected="false">
                        <i class="fa-solid fa-shield-halved me-1"></i> Access &amp; Security
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link"
                            id="activity-tab"
                            data-bs-toggle="tab"
                            data-bs-target="#activity-pane"
                            type="button"
                            role="tab"
                            aria-controls="activity-pane"
                            aria-selected="false">
                        <i class="fa-solid fa-clock-rotate-left me-1"></i> Activity
                    </button>
                </li>
            </ul>

            {# Tab Content #}
            <div class="modal-body">
                <form id="team-member-detail-form">
                    {# Hidden field for team member ID #}
                    <input type="hidden" name="teamMemberId" id="detail-team-member-id" value="">

                    <div class="tab-content" id="detail-tab-content">

                        {# ============================================
                           TAB 1: PROFILE
                           ============================================ #}
                        <div class="tab-pane fade show active"
                             id="profile-pane"
                             role="tabpanel"
                             aria-labelledby="profile-tab"
                             tabindex="0">

                            {# External Source Warning #}
                            <div class="alert alert-info d-none" id="profile-external-source-alert">
                                <i class="fa-solid fa-info-circle me-2"></i>
                                <span id="profile-external-source-message">Name and email are synced from an external source and cannot be edited here.</span>
                            </div>

                            {# Photo Upload Section #}
                            <div class="mb-4 text-center">
                                <div class="mb-3">
                                    {# Profile Photo - JS will show/hide appropriately based on photoUrl using d-none class #}
                                    <div id="profile-photo-preview" class="d-inline-block position-relative">
                                        <img src=""
                                             alt="Profile photo"
                                             id="profile-photo-img"
                                             class="rounded-circle d-none"
                                             style="width: 120px; height: 120px; object-fit: cover; border: 3px solid var(--neutral-200);">
                                        <div id="profile-photo-placeholder"
                                             class="rounded-circle d-flex align-items-center justify-content-center"
                                             style="width: 120px; height: 120px; background: var(--neutral-100); border: 3px solid var(--neutral-200);">
                                            <i class="fa-solid fa-user fa-3x text-muted"></i>
                                        </div>
                                    </div>
                                </div>
                                <div class="d-flex justify-content-center gap-2">
                                    <label for="profile-photo-file" class="btn btn-sm btn-outline-primary mb-0">
                                        <i class="fa-solid fa-upload me-1"></i> Upload Photo
                                    </label>
                                    <input type="file"
                                           id="profile-photo-file"
                                           name="photoFile"
                                           accept="image/*"
                                           class="d-none">
                                    <button type="button"
                                            class="btn btn-sm btn-outline-danger d-none"
                                            id="profile-photo-remove">
                                        <i class="fa-solid fa-trash me-1"></i> Remove
                                    </button>
                                </div>
                            </div>

                            {# Name Fields #}
                            <div class="row g-3 mb-3">
                                <div class="col-md-6">
                                    <label for="profile-first-name" class="form-label">
                                        First Name <span class="text-danger">*</span>
                                    </label>
                                    <input type="text"
                                           class="form-control"
                                           id="profile-first-name"
                                           name="firstName"
                                           placeholder="First name"
                                           required
                                           minlength="2"
                                           maxlength="50">
                                </div>
                                <div class="col-md-6">
                                    <label for="profile-last-name" class="form-label">
                                        Last Name <span class="text-danger">*</span>
                                    </label>
                                    <input type="text"
                                           class="form-control"
                                           id="profile-last-name"
                                           name="lastName"
                                           placeholder="Last name"
                                           required
                                           minlength="2"
                                           maxlength="50">
                                </div>
                            </div>

                            {# Contact Fields #}
                            <div class="row g-3 mb-3">
                                <div class="col-md-6">
                                    <label for="profile-email" class="form-label">Email</label>
                                    <input type="email"
                                           class="form-control"
                                           id="profile-email"
                                           name="email"
                                           placeholder="email@example.com">
                                </div>
                                <div class="col-md-6">
                                    <label for="profile-phone" class="form-label">Phone</label>
                                    <input type="tel"
                                           class="form-control"
                                           id="profile-phone"
                                           name="phone"
                                           placeholder="(555) 555-5555">
                                    <div class="form-text">Format: (555) 555-5555</div>
                                </div>
                            </div>

                            {# Emergency Contact #}
                            <h6 class="mt-4 mb-3 text-muted border-bottom pb-2">
                                <i class="fa-solid fa-phone-volume me-2"></i>Emergency Contact
                            </h6>
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label for="profile-emergency-name" class="form-label">Contact Name</label>
                                    <input type="text"
                                           class="form-control"
                                           id="profile-emergency-name"
                                           name="emergencyContactName"
                                           placeholder="Full name"
                                           maxlength="100">
                                </div>
                                <div class="col-md-6">
                                    <label for="profile-emergency-phone" class="form-label">Contact Phone</label>
                                    <input type="tel"
                                           class="form-control"
                                           id="profile-emergency-phone"
                                           name="emergencyContactPhone"
                                           placeholder="(555) 555-5555">
                                </div>
                            </div>
                        </div>

                        {# ============================================
                           TAB 2: EMPLOYMENT
                           ============================================ #}
                        <div class="tab-pane fade"
                             id="employment-pane"
                             role="tabpanel"
                             aria-labelledby="employment-tab"
                             tabindex="0">

                            {# Position and Role #}
                            <div class="row g-3 mb-3">
                                <div class="col-md-6">
                                    {# Schedule Positions multi-select (BuyerKiosk native scheduling) #}
                                    <div id="employment-schedule-positions-wrapper" class="d-none">
                                        <label for="employment-schedule-positions" class="form-label">
                                            Schedule Positions
                                        </label>
                                        <div id="employment-schedule-positions-container"></div>
                                        <div class="form-text">
                                            Which positions this team member can be scheduled for
                                        </div>
                                    </div>
                                    {# Free-text position (non-BuyerKiosk scheduling) #}
                                    <div id="employment-position-wrapper">
                                        <label for="employment-position" class="form-label">Position</label>
                                        <input type="text"
                                               class="form-control"
                                               id="employment-position"
                                               name="position"
                                               placeholder="e.g., Store Manager, Sales Associate"
                                               maxlength="100">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <label for="employment-role" class="form-label">Role</label>
                                    <select class="form-select" id="employment-role" name="role">
                                        <option value="0" data-color="bg-secondary" selected>Employee</option>
                                        <option value="1" data-color="bg-dark">Owner</option>
                                        <option value="2" data-color="bg-danger">Manager</option>
                                        <option value="3" data-color="bg-primary">Shift Lead</option>
                                        <option value="4" data-color="bg-warning">Buyer</option>
                                        <option value="5" data-color="bg-info">Cashier</option>
                                    </select>
                                    <div class="form-text">
                                        <i class="fa-solid fa-shield-halved me-1"></i>
                                        Role controls system permissions, not scheduling
                                    </div>
                                </div>
                            </div>

                            {# Status #}
                            <div class="mb-3">
                                <label class="form-label d-block">Status</label>
                                <div class="d-flex flex-wrap gap-3">
                                    <div class="form-check">
                                        <input class="form-check-input"
                                               type="radio"
                                               name="status"
                                               id="status-active"
                                               value="active"
                                               checked>
                                        <label class="form-check-label" for="status-active">
                                            <span class="badge bg-success me-1">Active</span>
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input"
                                               type="radio"
                                               name="status"
                                               id="status-inactive"
                                               value="inactive">
                                        <label class="form-check-label" for="status-inactive">
                                            <span class="badge bg-secondary me-1">Inactive</span>
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input"
                                               type="radio"
                                               name="status"
                                               id="status-on-leave"
                                               value="on_leave">
                                        <label class="form-check-label" for="status-on-leave">
                                            <span class="badge bg-warning me-1">On Leave</span>
                                        </label>
                                    </div>
                                </div>
                            </div>

                            {# Leave Period - shown when On Leave is selected #}
                            <div class="row g-3 mb-3 d-none" id="employment-leave-period">
                                <div class="col-md-6">
                                    <label for="employment-leave-start" class="form-label">Leave Start Date</label>
                                    <input type="date"
                                           class="form-control"
                                           id="employment-leave-start"
                                           name="leaveStartDate">
                                </div>
                                <div class="col-md-6">
                                    <label for="employment-leave-end" class="form-label">Leave End Date</label>
                                    <input type="date"
                                           class="form-control"
                                           id="employment-leave-end"
                                           name="leaveEndDate">
                                    <div class="form-text">Leave blank for indefinite leave</div>
                                </div>
                            </div>

                            {# Dates #}
                            <h6 class="mt-4 mb-3 text-muted border-bottom pb-2">
                                <i class="fa-solid fa-calendar-days me-2"></i>Employment Dates
                            </h6>
                            <div class="row g-3 mb-3">
                                <div class="col-md-6">
                                    <label for="employment-hire-date" class="form-label">Hire Date</label>
                                    <input type="date"
                                           class="form-control"
                                           id="employment-hire-date"
                                           name="hireDate">
                                </div>
                                <div class="col-md-6">
                                    <label for="employment-termination-date" class="form-label">Termination Date</label>
                                    <input type="date"
                                           class="form-control"
                                           id="employment-termination-date"
                                           name="terminationDate">
                                    <div class="form-text">Set when deactivating an employee</div>
                                </div>
                            </div>

                            {# Compensation and ID #}
                            <h6 class="mt-4 mb-3 text-muted border-bottom pb-2">
                                <i class="fa-solid fa-dollar-sign me-2"></i>Compensation &amp; Identifiers
                            </h6>
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label for="employment-hourly-rate" class="form-label">Hourly Rate</label>
                                    <div class="input-group">
                                        <span class="input-group-text">$</span>
                                        <input type="number"
                                               class="form-control"
                                               id="employment-hourly-rate"
                                               name="hourlyRate"
                                               placeholder="0.00"
                                               step="0.01"
                                               min="0"
                                               max="999.99">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <label for="employment-drs-id" class="form-label">DRS Employee ID</label>
                                    <input type="text"
                                           class="form-control"
                                           id="employment-drs-id"
                                           name="drsEmployeeId"
                                           placeholder="DRS System ID"
                                           maxlength="50">
                                    <div class="form-text">Link to external DRS/POS system</div>
                                </div>
                            </div>

                            {# Hours Preferences - Spec 026: AI Smart Scheduling #}
                            <h6 class="mt-4 mb-3 text-muted border-bottom pb-2">
                                <i class="fa-solid fa-clock me-2"></i>Hours Preferences
                            </h6>
                            <p class="text-muted small mb-3">
                                <i class="fa-solid fa-robot me-1 text-primary"></i>
                                Used by AI scheduling to optimize shift assignments
                            </p>
                            <div class="row g-3">
                                <div class="col-md-4">
                                    <label for="employment-hours-requested" class="form-label">
                                        Hours Requested
                                        <i class="fa-solid fa-circle-question text-muted ms-1"
                                           data-bs-toggle="tooltip"
                                           title="Target hours per week this employee wants to work"></i>
                                    </label>
                                    <div class="input-group">
                                        <input type="number"
                                               class="form-control"
                                               id="employment-hours-requested"
                                               name="hoursRequested"
                                               placeholder="40"
                                               step="0.5"
                                               min="0"
                                               max="168">
                                        <span class="input-group-text">hrs/week</span>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <label for="employment-hours-min" class="form-label">
                                        Minimum Hours
                                        <i class="fa-solid fa-circle-question text-muted ms-1"
                                           data-bs-toggle="tooltip"
                                           title="Minimum hours per week this employee needs"></i>
                                    </label>
                                    <div class="input-group">
                                        <input type="number"
                                               class="form-control"
                                               id="employment-hours-min"
                                               name="hoursMin"
                                               placeholder="20"
                                               step="0.5"
                                               min="0"
                                               max="168">
                                        <span class="input-group-text">hrs/week</span>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <label for="employment-hours-max" class="form-label">
                                        Maximum Hours
                                        <i class="fa-solid fa-circle-question text-muted ms-1"
                                           data-bs-toggle="tooltip"
                                           title="Maximum hours per week (hard cap, AI will not exceed)"></i>
                                    </label>
                                    <div class="input-group">
                                        <input type="number"
                                               class="form-control"
                                               id="employment-hours-max"
                                               name="hoursMax"
                                               placeholder="40"
                                               step="0.5"
                                               min="0"
                                               max="168">
                                        <span class="input-group-text">hrs/week</span>
                                    </div>
                                </div>
                            </div>
                            <div class="form-text mt-2">
                                <i class="fa-solid fa-info-circle me-1"></i>
                                AI scheduling will respect the maximum hours cap as a hard limit.
                                Leave blank to use system defaults.
                            </div>
                        </div>

                        {# ============================================
                           TAB 3: ACCESS & SECURITY
                           ============================================ #}
                        <div class="tab-pane fade"
                             id="access-pane"
                             role="tabpanel"
                             aria-labelledby="access-tab"
                             tabindex="0">

                            {# Login Access #}
                            <div class="card mb-4">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between align-items-start mb-3">
                                        <div>
                                            <h6 class="mb-1">
                                                <i class="fa-solid fa-right-to-bracket me-2"></i>BuyerKiosk Login
                                            </h6>
                                            <p class="text-muted small mb-0">Allow this team member to log into the BuyerKiosk system</p>
                                        </div>
                                        <div class="form-check form-switch">
                                            <input class="form-check-input"
                                                   type="checkbox"
                                                   id="access-login-toggle"
                                                   name="canLogin"
                                                   role="switch">
                                            <label class="form-check-label visually-hidden" for="access-login-toggle">
                                                Enable login
                                            </label>
                                        </div>
                                    </div>

                                    {# Login details - shown when enabled #}
                                    <div class="d-none" id="access-login-details">
                                        <div class="row g-3 mb-3">
                                            <div class="col-md-6">
                                                <label class="form-label text-muted small">Username</label>
                                                <div class="form-control-plaintext" id="access-username">-</div>
                                            </div>
                                            <div class="col-md-6">
                                                <label class="form-label text-muted small">Last Login</label>
                                                <div class="form-control-plaintext" id="access-last-login">Never</div>
                                            </div>
                                        </div>
                                        <div class="d-flex gap-2">
                                            <button type="button"
                                                    class="btn btn-sm btn-outline-primary"
                                                    id="access-edit-credentials-btn">
                                                <i class="fa-solid fa-key me-1"></i> Change Password
                                            </button>
                                            <button type="button"
                                                    class="btn btn-sm btn-outline-secondary"
                                                    id="access-edit-username-btn">
                                                <i class="fa-solid fa-user-pen me-1"></i> Change Username
                                            </button>
                                        </div>
                                    </div>

                                    {# Warning when disabling #}
                                    <div class="alert alert-warning small mb-0 d-none" id="access-login-warning">
                                        <i class="fa-solid fa-exclamation-triangle me-2"></i>
                                        Disabling login will prevent this team member from accessing the system. Any active sessions will be terminated.
                                    </div>
                                </div>
                            </div>

                            {# Clock PIN #}
                            <div class="card mb-4">
                                <div class="card-body">
	                                    <h6 class="mb-3">
	                                        <i class="fa-solid fa-hashtag me-2"></i>Clock PIN
	                                    </h6>
	                                    <p class="text-muted small mb-3">
	                                        A 4-6 digit PIN used for clocking in/out at the time clock
	                                    </p>

                                    {# Current PIN Status #}
                                    <div class="d-flex align-items-center gap-2 mb-3" id="access-pin-status">
                                        <span class="badge" id="access-pin-badge">No PIN Set</span>
                                    </div>

                                    {# PIN Input #}
                                    <div class="row g-2 align-items-end">
                                        <div class="col-auto">
                                            <label for="access-pin-input" class="form-label">New PIN</label>
	                                            <input type="text"
	                                                   class="form-control"
	                                                   id="access-pin-input"
	                                                   name="clockPin"
	                                                   placeholder="4-6 digits"
	                                                   pattern="[0-9]{4,6}"
	                                                   maxlength="6"
	                                                   inputmode="numeric"
	                                                   style="width: 120px;">
                                        </div>
                                        <div class="col-auto">
                                            <button type="button"
                                                    class="btn btn-outline-primary"
                                                    id="access-pin-update">
                                                <i class="fa-solid fa-check me-1"></i> Update PIN
                                            </button>
                                        </div>
                                        <div class="col-auto">
                                            <button type="button"
                                                    class="btn btn-outline-danger d-none"
                                                    id="access-pin-remove">
                                                <i class="fa-solid fa-times me-1"></i> Remove PIN
                                            </button>
                                        </div>
                                    </div>
	                                    <div class="form-text">PIN must be 4-6 digits</div>
	                                </div>
	                            </div>

                            {# Email Reports #}
                            <div class="card">
                                <div class="card-body">
                                    <div class="form-check">
                                        <input class="form-check-input"
                                               type="checkbox"
                                               id="access-daily-reports"
                                               name="dailyEmailEnabled"
                                               value="1">
                                        <label class="form-check-label" for="access-daily-reports">
                                            <strong>Receive Daily Reports</strong>
                                            <span class="d-block text-muted small">
                                                Send daily summary emails to this team member
                                            </span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {# ============================================
                           TAB 4: ACTIVITY
                           ============================================ #}
                        <div class="tab-pane fade"
                             id="activity-pane"
                             role="tabpanel"
                             aria-labelledby="activity-tab"
                             tabindex="0">

                            {# Activity Timeline #}
                            <div id="activity-timeline" class="activity-timeline">
                                {# Timeline items will be loaded dynamically #}
                                <div class="text-center text-muted py-4" id="activity-loading">
                                    <i class="fa-solid fa-spinner fa-spin me-2"></i>
                                    Loading activity...
                                </div>
                                <div class="text-center text-muted py-4 d-none" id="activity-empty">
                                    <i class="fa-solid fa-clock-rotate-left fa-2x mb-2 d-block"></i>
                                    No activity recorded yet
                                </div>
                            </div>

                            {# Load More Button #}
                            <div class="text-center mt-3 d-none" id="activity-load-more-container">
                                <button type="button"
                                        class="btn btn-outline-secondary"
                                        id="activity-load-more">
                                    <i class="fa-solid fa-arrow-down me-1"></i> Load More
                                </button>
                            </div>
                        </div>

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

            {# Modal Footer #}
            <div class="modal-footer">
                <button type="button"
                        class="btn btn-secondary"
                        data-bs-dismiss="modal">
                    Cancel
                </button>
                <button type="button"
                        class="btn btn-primary"
                        id="detail-save-btn">
                    <i class="fa-solid fa-check me-1"></i> Save Changes
                </button>
            </div>
        </div>
    </div>
</div>

<style>
/* Activity Timeline Styles */
.activity-timeline {
    max-height: 400px;
    overflow-y: auto;
}

.activity-timeline .timeline-item {
    position: relative;
    padding-left: 2rem;
    padding-bottom: 1rem;
    border-left: 2px solid var(--neutral-200);
    margin-left: 0.5rem;
}

.activity-timeline .timeline-item:last-child {
    border-left-color: transparent;
    padding-bottom: 0;
}

.activity-timeline .timeline-item::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--primary-500);
    border: 2px solid white;
}

.activity-timeline .timeline-item.login::before {
    background: var(--bs-success);
}

.activity-timeline .timeline-item.logout::before {
    background: var(--bs-secondary);
}

.activity-timeline .timeline-item.clock-in::before {
    background: var(--bs-info);
}

.activity-timeline .timeline-item.clock-out::before {
    background: var(--bs-warning);
}

.activity-timeline .timeline-item.update::before {
    background: var(--primary-500);
}

.activity-timeline .timeline-date {
    font-size: 0.75rem;
    color: var(--neutral-500);
}

.activity-timeline .timeline-content {
    font-size: 0.875rem;
    color: var(--neutral-700);
}

/* PIN status badge colors */
#access-pin-badge.has-pin {
    background-color: var(--bs-success);
    color: white;
}

#access-pin-badge.no-pin {
    background-color: var(--neutral-200);
    color: var(--neutral-600);
}

/* Form control readonly state */
.form-control[readonly],
.form-select[readonly] {
    background-color: var(--neutral-100);
    cursor: not-allowed;
}

/* Tab content padding */
#detail-tab-content > .tab-pane {
    padding-top: 1rem;
}
</style>