<?xml version="1.0" encoding="utf-8"?>
<odoo>

    <!-- Clock link removed from portal home - now handled by fusion_authorizer_portal -->
    <template id="portal_my_home_clock" name="Portal My Home: Clock"
              inherit_id="portal.portal_my_home" priority="60">
        <xpath expr="//div[hasclass('o_portal_docs')]" position="inside">
        </xpath>
    </template>

    <!-- ================================================================
         Portal FAB - Floating clock button on ALL portal pages
         Injected into portal.portal_layout so it appears everywhere.
         ================================================================ -->
    <template id="portal_layout_clock_fab" name="Portal Clock FAB"
              inherit_id="portal.portal_layout">
        <xpath expr="//div[@id='wrap']" position="after">
            <t t-set="fclk_emp" t-value="fclk_employee if fclk_employee is defined else False"/>
            <t t-if="fclk_emp and fclk_emp.x_fclk_enable_clock">
                <div id="fclk-portal-fab"
                     t-att-data-checked-in="'true' if fclk_checked_in else 'false'"
                     t-att-data-check-in-time="fclk_check_in_time or ''"
                     t-att-data-location-name="fclk_location_name or ''">

                    <!-- Expandable panel (above button) -->
                    <div class="fclk-pfab-panel" style="display:none;">
                        <div class="fclk-pfab-panel-header">
                            <div class="fclk-pfab-panel-title">
                                <span class="fclk-pfab-status-dot"/>
                                <span class="fclk-pfab-status-text">Ready</span>
                            </div>
                            <a href="/my/clock" class="fclk-pfab-open-link" title="Open Full Clock">
                                <i class="fa fa-external-link"/>
                            </a>
                        </div>
                        <div class="fclk-pfab-location" style="display:none;">
                            <i class="fa fa-map-marker"/>
                            <span class="fclk-pfab-location-text"/>
                        </div>
                        <div class="fclk-pfab-timer">00:00:00</div>
                        <div class="fclk-pfab-stats">
                            <div class="fclk-pfab-stat">
                                <span class="fclk-pfab-stat-val fclk-pfab-today">0.0h</span>
                                <span class="fclk-pfab-stat-lbl">Today</span>
                            </div>
                            <div class="fclk-pfab-stat-divider"/>
                            <div class="fclk-pfab-stat">
                                <span class="fclk-pfab-stat-val fclk-pfab-week">0.0h</span>
                                <span class="fclk-pfab-stat-lbl">Week</span>
                            </div>
                        </div>
                        <button class="fclk-pfab-action fclk-pfab-action--in">
                            <i class="fa fa-play-circle-o"/> Clock In
                        </button>
                        <div class="fclk-pfab-error" style="display:none;">
                            <i class="fa fa-exclamation-triangle"/>
                            <span class="fclk-pfab-error-text"/>
                        </div>
                        <div class="fclk-pfab-panel-arrow"/>
                    </div>

                    <!-- Floating button -->
                    <button class="fclk-pfab-btn">
                        <span class="fclk-pfab-ripple-ring fclk-pfab-ripple-ring--1"/>
                        <span class="fclk-pfab-ripple-ring fclk-pfab-ripple-ring--2"/>
                        <span class="fclk-pfab-ripple-ring fclk-pfab-ripple-ring--3"/>
                        <span class="fclk-pfab-icon">
                            <i class="fa fa-clock-o"/>
                        </span>
                        <span class="fclk-pfab-badge" style="display:none;">00:00:00</span>
                    </button>
                </div>
            </t>
        </xpath>
    </template>

    <!-- Main Clock Page -->
    <template id="portal_clock_page" name="Fusion Clock Portal">
        <t t-call="portal.portal_layout">
            <t t-set="breadcrumbs_searchbar" t-value="False"/>
            <t t-set="no_breadcrumbs" t-value="True"/>
            <t t-set="no_header" t-value="True"/>

            <div id="fusion-clock-app" class="fclk-app"
                 t-att-data-checked-in="'true' if is_checked_in else 'false'"
                 t-att-data-check-in-time="current_attendance.check_in.isoformat() if current_attendance and current_attendance.check_in else ''"
                 t-att-data-location-name="current_attendance.x_fclk_location_id.name if current_attendance and current_attendance.x_fclk_location_id else ''"
                 t-att-data-location-address="current_attendance.x_fclk_location_id.address if current_attendance and current_attendance.x_fclk_location_id else ''"
                 t-att-data-location-id="current_attendance.x_fclk_location_id.id if current_attendance and current_attendance.x_fclk_location_id else '0'"
                 t-att-data-enable-sounds="'true' if enable_sounds else 'false'"
                 t-att-data-google-maps-key="google_maps_key or ''">

                <!-- Dark Background Container -->
                <div class="fclk-container">

                    <!-- Header -->
                    <div class="fclk-header">
                        <div class="fclk-date" id="fclk-date-display"></div>
                        <h1 class="fclk-greeting">Hello, <t t-esc="employee.name.split(' ')[0]"/></h1>
                    </div>

                    <!-- Status Card -->
                    <div class="fclk-status-card">
                        <div class="fclk-status-row">
                            <div class="fclk-status-indicator">
                                <span class="fclk-dot" id="fclk-status-dot"
                                      t-attf-class="fclk-dot {{ 'fclk-dot-active' if is_checked_in else '' }}"></span>
                                <span class="fclk-status-text" id="fclk-status-text">
                                    <t t-if="is_checked_in">Clocked In</t>
                                    <t t-else="">Not Clocked In</t>
                                </span>
                            </div>
                            <span class="fclk-current-time" id="fclk-current-time"></span>
                        </div>

                        <!-- Location Selector -->
                        <div class="fclk-location-card" id="fclk-location-card">
                            <div class="fclk-location-icon">
                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#10B981" stroke-width="2">
                                    <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
                                    <circle cx="12" cy="10" r="3"/>
                                </svg>
                            </div>
                            <div class="fclk-location-info">
                                <div class="fclk-location-name" id="fclk-location-name">
                                    <t t-if="locations">
                                        <t t-esc="locations[0].name"/>
                                    </t>
                                    <t t-else="">No locations configured</t>
                                </div>
                                <div class="fclk-location-address" id="fclk-location-address">
                                    <t t-if="locations">
                                        <t t-esc="locations[0].address or 'No address'"/>
                                    </t>
                                </div>
                            </div>
                            <div class="fclk-location-arrow" t-if="len(locations) > 1">
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#6b7280" stroke-width="2">
                                    <polyline points="9 18 15 12 9 6"/>
                                </svg>
                            </div>
                        </div>
                    </div>

                    <!-- Timer Section -->
                    <div class="fclk-timer-section">
                        <div class="fclk-timer-label" id="fclk-timer-label">
                            <t t-if="is_checked_in">Time Elapsed</t>
                            <t t-else="">Ready to Clock In</t>
                        </div>
                        <div class="fclk-timer" id="fclk-timer">00 : 00 : 00</div>
                    </div>

                    <!-- Clock Button -->
                    <div class="fclk-button-section">
                        <button class="fclk-clock-btn" id="fclk-clock-btn"
                                t-attf-class="fclk-clock-btn {{ 'fclk-clock-btn-out' if is_checked_in else '' }}">
                            <div class="fclk-btn-ripple"></div>
                            <svg id="fclk-btn-icon-play" class="fclk-btn-icon"
                                 t-attf-style="display: {{ 'none' if is_checked_in else 'block' }}"
                                 width="48" height="48" viewBox="0 0 24 24" fill="white">
                                <polygon points="5 3 19 12 5 21 5 3"/>
                            </svg>
                            <svg id="fclk-btn-icon-stop" class="fclk-btn-icon"
                                 t-attf-style="display: {{ 'block' if is_checked_in else 'none' }}"
                                 width="40" height="40" viewBox="0 0 24 24" fill="white">
                                <rect x="4" y="4" width="16" height="16" rx="2"/>
                            </svg>
                        </button>
                        <div class="fclk-btn-label" id="fclk-btn-label">
                            <t t-if="is_checked_in">Tap to Clock Out</t>
                            <t t-else="">Tap to Clock In</t>
                        </div>
                    </div>

                    <!-- Stats Cards -->
                    <div class="fclk-stats-row">
                        <div class="fclk-stat-card">
                            <div class="fclk-stat-header">
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#10B981" stroke-width="2">
                                    <circle cx="12" cy="12" r="10"/>
                                    <polyline points="12 6 12 12 16 14"/>
                                </svg>
                                <span>Today</span>
                            </div>
                            <div class="fclk-stat-value" id="fclk-today-hours">
                                <t t-esc="'%.1f' % today_hours"/>h
                            </div>
                            <div class="fclk-stat-target">of 8h target</div>
                        </div>
                        <div class="fclk-stat-card">
                            <div class="fclk-stat-header">
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#10B981" stroke-width="2">
                                    <circle cx="12" cy="12" r="10"/>
                                    <polyline points="12 6 12 12 16 14"/>
                                </svg>
                                <span>This Week</span>
                            </div>
                            <div class="fclk-stat-value" id="fclk-week-hours">
                                <t t-esc="'%.1f' % week_hours"/>h
                            </div>
                            <div class="fclk-stat-target">of 40h target</div>
                        </div>
                    </div>

                    <!-- Request Leave -->
                    <button id="fclk-leave-btn" class="fclk-leave-btn">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
                            <line x1="16" y1="2" x2="16" y2="6"/>
                            <line x1="8" y1="2" x2="8" y2="6"/>
                            <line x1="3" y1="10" x2="21" y2="10"/>
                        </svg>
                        Request Leave
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="fclk-leave-btn-arrow">
                            <polyline points="9 18 15 12 9 6"/>
                        </svg>
                    </button>

                    <!-- Recent Activity -->
                    <div class="fclk-recent-section">
                        <div class="fclk-recent-header">
                            <h3>Recent Activity</h3>
                            <a href="/my/clock/timesheets" class="fclk-view-all">View All</a>
                        </div>
                        <div class="fclk-recent-list" id="fclk-recent-list">
                            <t t-foreach="recent_attendances" t-as="entry">
                                <div class="fclk-recent-item">
                                    <div class="fclk-recent-date">
                                        <div class="fclk-recent-day-name">
                                            <t t-esc="entry['day_name']"/>
                                        </div>
                                        <div class="fclk-recent-day-num">
                                            <t t-esc="entry['day_num']"/>
                                        </div>
                                    </div>
                                    <div class="fclk-recent-info">
                                        <div class="fclk-recent-location">
                                            <t t-esc="entry['att'].x_fclk_location_id.name or 'Unknown'"/>
                                        </div>
                                        <div class="fclk-recent-times">
                                            <t t-esc="entry['time_in']"/>
                                            - <t t-esc="entry['time_out']"/>
                                        </div>
                                    </div>
                                    <div class="fclk-recent-hours">
                                        <t t-esc="'%.1f' % (entry['att'].x_fclk_net_hours or 0)"/>h
                                    </div>
                                </div>
                            </t>
                            <t t-if="not recent_attendances">
                                <div class="fclk-recent-empty">
                                    No recent activity
                                </div>
                            </t>
                        </div>
                    </div>

                    <!-- Navigation Bar -->
                    <div class="fclk-nav-bar">
                        <a href="/my/clock" class="fclk-nav-item fclk-nav-active">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <circle cx="12" cy="12" r="10"/>
                                <polyline points="12 6 12 12 16 14"/>
                            </svg>
                            <span>Clock</span>
                        </a>
                        <a href="/my/clock/timesheets" class="fclk-nav-item">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
                                <line x1="16" y1="2" x2="16" y2="6"/>
                                <line x1="8" y1="2" x2="8" y2="6"/>
                                <line x1="3" y1="10" x2="21" y2="10"/>
                            </svg>
                            <span>Timesheets</span>
                        </a>
                        <a href="/my/clock/reports" class="fclk-nav-item">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
                                <polyline points="14 2 14 8 20 8"/>
                                <line x1="16" y1="13" x2="8" y2="13"/>
                                <line x1="16" y1="17" x2="8" y2="17"/>
                            </svg>
                            <span>Reports</span>
                        </a>
                    </div>

                </div>

                <!-- Reason Modal (missed clock-out) -->
                <div class="fclk-wizard-overlay" id="fclk-reason-modal" style="display:none;">
                    <div class="fclk-wizard-backdrop" data-dismiss="fclk-reason-modal"></div>
                    <div class="fclk-wizard-dialog">
                        <div class="fclk-wizard-header fclk-wizard-header--warning">
                            <div class="fclk-wizard-header-icon">
                                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
                                    <line x1="12" y1="9" x2="12" y2="13"/>
                                    <line x1="12" y1="17" x2="12.01" y2="17"/>
                                </svg>
                            </div>
                            <h3 class="fclk-wizard-title">Missed Clock-Out</h3>
                            <p class="fclk-wizard-subtitle">You didn't clock out on your last shift. Please provide details before continuing.</p>
                        </div>
                        <div class="fclk-wizard-body">
                            <div class="fclk-wizard-field">
                                <label class="fclk-wizard-label" for="fclk-reason-text">
                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
                                    Reason <span class="fclk-wizard-required">*</span>
                                </label>
                                <textarea id="fclk-reason-text" class="fclk-wizard-input fclk-wizard-textarea" rows="3"
                                          placeholder="Please explain why you didn't clock out..."></textarea>
                            </div>
                            <div class="fclk-wizard-field">
                                <label class="fclk-wizard-label" for="fclk-reason-time">
                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                                    Departure Time
                                </label>
                                <input type="datetime-local" id="fclk-reason-time" class="fclk-wizard-input"/>
                                <span class="fclk-wizard-hint">When did you actually leave? (optional)</span>
                            </div>
                        </div>
                        <div class="fclk-wizard-footer">
                            <button class="fclk-wizard-btn fclk-wizard-btn--secondary" data-dismiss="fclk-reason-modal">Cancel</button>
                            <button id="fclk-reason-submit" class="fclk-wizard-btn fclk-wizard-btn--primary">
                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
                                Submit Reason
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Clock-Out Confirmation Modal -->
                <div class="fclk-wizard-overlay" id="fclk-clockout-confirm-modal" style="display:none;">
                    <div class="fclk-wizard-backdrop" data-dismiss="fclk-clockout-confirm-modal"></div>
                    <div class="fclk-wizard-dialog fclk-wizard-dialog--compact">
                        <div class="fclk-wizard-header fclk-wizard-header--danger">
                            <div class="fclk-wizard-header-icon">
                                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <rect x="4" y="4" width="16" height="16" rx="2"/>
                                </svg>
                            </div>
                            <h3 class="fclk-wizard-title">Clock Out?</h3>
                            <p class="fclk-wizard-subtitle">Are you sure you want to end your current shift?</p>
                        </div>
                        <div class="fclk-wizard-body">
                            <div class="fclk-clockout-summary">
                                <div class="fclk-clockout-summary-row">
                                    <span class="fclk-clockout-summary-label">Clocked in at</span>
                                    <span class="fclk-clockout-summary-value" id="fclk-confirm-checkin-time">--</span>
                                </div>
                                <div class="fclk-clockout-summary-row">
                                    <span class="fclk-clockout-summary-label">Duration</span>
                                    <span class="fclk-clockout-summary-value" id="fclk-confirm-duration">--</span>
                                </div>
                            </div>
                        </div>
                        <div class="fclk-wizard-footer">
                            <button class="fclk-wizard-btn fclk-wizard-btn--secondary" data-dismiss="fclk-clockout-confirm-modal">Cancel</button>
                            <button id="fclk-clockout-confirm-btn" class="fclk-wizard-btn fclk-wizard-btn--danger">
                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="4" y="4" width="16" height="16" rx="2"/></svg>
                                Confirm Clock Out
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Leave Request Modal -->
                <div class="fclk-wizard-overlay" id="fclk-leave-modal" style="display:none;">
                    <div class="fclk-wizard-backdrop" data-dismiss="fclk-leave-modal"></div>
                    <div class="fclk-wizard-dialog">
                        <div class="fclk-wizard-header fclk-wizard-header--info">
                            <div class="fclk-wizard-header-icon">
                                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
                                    <line x1="16" y1="2" x2="16" y2="6"/>
                                    <line x1="8" y1="2" x2="8" y2="6"/>
                                    <line x1="3" y1="10" x2="21" y2="10"/>
                                </svg>
                            </div>
                            <h3 class="fclk-wizard-title">Request Leave</h3>
                            <p class="fclk-wizard-subtitle">Submit a leave request for your manager to review.</p>
                        </div>
                        <div class="fclk-wizard-body">
                            <div class="fclk-wizard-field">
                                <label class="fclk-wizard-label" for="fclk-leave-date">
                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
                                    Leave Date <span class="fclk-wizard-required">*</span>
                                </label>
                                <input type="date" id="fclk-leave-date" class="fclk-wizard-input"/>
                            </div>
                            <div class="fclk-wizard-field">
                                <label class="fclk-wizard-label" for="fclk-leave-reason">
                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
                                    Reason <span class="fclk-wizard-required">*</span>
                                </label>
                                <textarea id="fclk-leave-reason" class="fclk-wizard-input fclk-wizard-textarea" rows="3"
                                          placeholder="Please provide a reason for your leave request..."></textarea>
                            </div>
                        </div>
                        <div class="fclk-wizard-footer">
                            <button class="fclk-wizard-btn fclk-wizard-btn--secondary" data-dismiss="fclk-leave-modal">Cancel</button>
                            <button id="fclk-leave-submit" class="fclk-wizard-btn fclk-wizard-btn--primary">
                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
                                Submit Leave Request
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Location Picker Modal -->
                <div class="fclk-modal" id="fclk-location-modal" style="display:none;">
                    <div class="fclk-modal-backdrop" onclick="document.getElementById('fclk-location-modal').style.display='none'"></div>
                    <div class="fclk-modal-content">
                        <h3>Select Location</h3>
                        <div class="fclk-modal-list">
                            <t t-foreach="locations" t-as="loc">
                                <div class="fclk-modal-item"
                                     t-att-data-id="loc.id"
                                     t-att-data-name="loc.name"
                                     t-att-data-address="loc.address or ''"
                                     t-att-data-lat="loc.latitude"
                                     t-att-data-lng="loc.longitude"
                                     t-att-data-radius="loc.radius">
                                    <div class="fclk-modal-item-icon">
                                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#10B981" stroke-width="2">
                                            <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
                                            <circle cx="12" cy="10" r="3"/>
                                        </svg>
                                    </div>
                                    <div>
                                        <div class="fclk-modal-item-name"><t t-esc="loc.name"/></div>
                                        <div class="fclk-modal-item-addr"><t t-esc="loc.address or 'No address'"/></div>
                                    </div>
                                </div>
                            </t>
                        </div>
                    </div>
                </div>

                <!-- Notification Toast -->
                <div class="fclk-toast" id="fclk-toast" style="display:none;">
                    <div class="fclk-toast-icon" id="fclk-toast-icon"></div>
                    <div class="fclk-toast-msg" id="fclk-toast-msg"></div>
                </div>

                <!-- GPS Loading Overlay -->
                <div class="fclk-gps-overlay" id="fclk-gps-overlay" style="display:none;">
                    <div class="fclk-gps-spinner"></div>
                    <div class="fclk-gps-text">Verifying your location...</div>
                </div>

            </div>

            <!-- Hidden location data for JS -->
            <script type="application/json" id="fclk-locations-data">
                <t t-out="locations_json"/>
            </script>

        </t>
    </template>

</odoo>
