@php
use App\Models\Attendance;
use App\Models\AttendanceLog;
use Illuminate\Support\Facades\Auth;
use App\Services\Settings\ModuleSettingsService;
use App\Services\AddonService\IAddonService;

$todayAttendance = null;
$isCheckedIn = false;
$checkInTime = null;
$checkOutTime = null;
$workingHours = null;
$isBreakSystemEnabled = false;
$isOnBreak = false;

if (Auth::check()) {
    $todayAttendance = Attendance::where('user_id', Auth::id())
        ->whereDate('date', today())
        ->with('attendanceLogs')
        ->first();

    // Check if BreakSystem addon is enabled
    $addonService = app(IAddonService::class);
    $isBreakSystemEnabled = $addonService->isAddonEnabled('BreakSystem');

    if ($todayAttendance) {
        // Check if multiple check-in is enabled
        $settingsService = app(ModuleSettingsService::class);
        $isMultipleCheckInEnabled = $settingsService->get('HRCore', 'is_multiple_check_in_enabled', true);

        if ($isMultipleCheckInEnabled && auth()->user()->can('hrcore.multiple-check-in')) {
            // For multiple check-in, check the last log
            $lastLog = $todayAttendance->attendanceLogs->sortByDesc('created_at')->first();
            $isCheckedIn = $lastLog && $lastLog->type === 'check_in';
        } else {
            // For single check-in, use attendance table
            $isCheckedIn = $todayAttendance->check_in_time && !$todayAttendance->check_out_time;
        }

        // Get times - fallback to logs if not in attendance table
        $checkInTime = $todayAttendance->check_in_time;
        if (!$checkInTime) {
            $checkInLog = $todayAttendance->attendanceLogs->where('type', 'check_in')->first();
            $checkInTime = $checkInLog ? $checkInLog->created_at : null;
        }

        $checkOutTime = $todayAttendance->check_out_time;
        if (!$checkOutTime) {
            $checkOutLog = $todayAttendance->attendanceLogs->where('type', 'check_out')->last();
            $checkOutTime = $checkOutLog ? $checkOutLog->created_at : null;
        }

        // Calculate working hours in "Xh Ym" format
        $workingHours = '0h 0m';
        if ($checkInTime) {
            $checkInCarbon = \Carbon\Carbon::parse($checkInTime);
            $totalMinutes = 0;

            // Match web attendance page: always calculate to NOW for live time
            $totalMinutes = now()->diffInMinutes($checkInCarbon);

            if ($totalMinutes > 0) {
                $hours = floor($totalMinutes / 60);
                $minutes = $totalMinutes % 60;
                $workingHours = $hours . 'h ' . $minutes . 'm';
            }
        }

        // Check if user is currently on break (only if break system is enabled and checked in)
        if ($isBreakSystemEnabled && $isCheckedIn) {
            // Get the latest check-in log for break tracking
            $checkInLog = $todayAttendance->attendanceLogs->where('type', 'check_in')->sortByDesc('created_at')->first();
            if ($checkInLog && class_exists(\Modules\BreakSystem\App\Models\AttendanceBreak::class)) {
                $runningBreak = \Modules\BreakSystem\App\Models\AttendanceBreak::where('attendance_log_id', $checkInLog->id)
                    ->whereNull('end_time')
                    ->first();
                $isOnBreak = (bool) $runningBreak;
            }
        }
    }
}
@endphp

<!-- Compact Attendance Badge -->
<div class="attendance-badge-toggle">
    <button type="button"
            class="attendance-compact-badge {{ $isCheckedIn ? 'checked-in' : 'not-checked-in' }}"
            id="attendanceWidgetToggle"
            data-bs-toggle="offcanvas"
            data-bs-target="#attendanceWidgetOffcanvas"
            title="{{ $isCheckedIn ? __('Checked In') : __('Click to Check In') }}">
        <div class="badge-icon">
            <i class="bx {{ $isCheckedIn ? 'bx-check-circle' : 'bx-time' }}"></i>
        </div>
        @if($isCheckedIn && $workingHours)
            <div class="badge-time" id="fabWorkingHours">{{ $workingHours }}</div>
        @else
            <div class="badge-label">{{ __('Check In') }}</div>
        @endif
    </button>
</div>

<!-- Attendance Widget Offcanvas -->
<div class="offcanvas offcanvas-end"
     tabindex="-1"
     id="attendanceWidgetOffcanvas"
     aria-labelledby="attendanceWidgetLabel"
     style="width: 360px;">
    <div class="offcanvas-header border-bottom">
        <h5 class="offcanvas-title" id="attendanceWidgetLabel">
            <i class="bx bx-time-five me-2"></i>{{ __('Attendance') }}
        </h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body p-0">
        <!-- Status Card -->
        <div class="p-4 bg-label-{{ $isCheckedIn ? 'success' : 'secondary' }}">
            <div class="text-center">
                <div class="mb-3">
                    <i class="bx {{ $isCheckedIn ? 'bx-check-circle' : 'bx-time' }} bx-lg text-{{ $isCheckedIn ? 'success' : 'secondary' }}"></i>
                </div>
                <h4 class="mb-1">
                    @if($isCheckedIn)
                        {{ __('You are Checked In') }}
                    @else
                        {{ __('Not Checked In') }}
                    @endif
                </h4>
                <p class="mb-0 text-muted">
                    {{ now()->format('l, F j, Y') }}
                </p>
            </div>
        </div>

        <!-- Today's Summary -->
        <div class="p-4">
            <h6 class="mb-3">{{ __("Today's Summary") }}</h6>

            <div class="d-flex justify-content-between align-items-center mb-3">
                <div class="d-flex align-items-center">
                    <div class="avatar avatar-sm me-3">
                        <div class="avatar-initial bg-label-success rounded">
                            <i class="bx bx-log-in"></i>
                        </div>
                    </div>
                    <div>
                        <small class="text-muted d-block">{{ __('Check In') }}</small>
                        <strong id="widgetCheckInTime">{{ $checkInTime ? \Carbon\Carbon::parse($checkInTime)->format('h:i A') : '--:--' }}</strong>
                    </div>
                </div>
            </div>

            <div class="d-flex justify-content-between align-items-center mb-3">
                <div class="d-flex align-items-center">
                    <div class="avatar avatar-sm me-3">
                        <div class="avatar-initial bg-label-danger rounded">
                            <i class="bx bx-log-out"></i>
                        </div>
                    </div>
                    <div>
                        <small class="text-muted d-block">{{ __('Check Out') }}</small>
                        <strong id="widgetCheckOutTime">{{ $checkOutTime ? \Carbon\Carbon::parse($checkOutTime)->format('h:i A') : '--:--' }}</strong>
                    </div>
                </div>
            </div>

            <div class="d-flex justify-content-between align-items-center mb-4">
                <div class="d-flex align-items-center">
                    <div class="avatar avatar-sm me-3">
                        <div class="avatar-initial bg-label-primary rounded">
                            <i class="bx bx-time"></i>
                        </div>
                    </div>
                    <div>
                        <small class="text-muted d-block">{{ __('Working Hours') }}</small>
                        <strong id="widgetWorkingHours">{{ $workingHours ?? '0h 0m' }}</strong>
                    </div>
                </div>
            </div>

            <!-- Check In/Out Button -->
            @if($isCheckedIn)
                <button type="button" class="btn btn-danger w-100" id="widgetCheckOutBtn" onclick="widgetCheckOut()">
                    <i class="bx bx-log-out me-2"></i>{{ __('Check Out Now') }}
                </button>
            @else
                <button type="button" class="btn btn-success w-100" id="widgetCheckInBtn" onclick="widgetCheckIn()">
                    <i class="bx bx-log-in me-2"></i>{{ __('Check In Now') }}
                </button>
            @endif

            <!-- Break Button (only shown when checked in and BreakSystem is enabled) -->
            @if($isBreakSystemEnabled && $isCheckedIn)
                @if($isOnBreak)
                    <button type="button" class="btn btn-warning w-100 mt-2" id="widgetBreakBtn" onclick="widgetToggleBreak()">
                        <i class="bx bx-stop-circle me-2"></i>{{ __('Stop Break') }}
                    </button>
                @else
                    <button type="button" class="btn btn-info w-100 mt-2" id="widgetBreakBtn" onclick="widgetToggleBreak()">
                        <i class="bx bx-coffee me-2"></i>{{ __('Start Break') }}
                    </button>
                @endif
            @endif

            <!-- View Full Attendance -->
            <a href="{{ route('hrcore.attendance.web-attendance') }}" class="btn btn-label-secondary w-100 mt-2">
                <i class="bx bx-calendar me-2"></i>{{ __('View Full Attendance') }}
            </a>
        </div>
    </div>
</div>

<style>
/* Compact Attendance Badge - Minimal Side Tab */
.attendance-badge-toggle {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    inset-inline-end: 0;
    z-index: 1049;
}

.attendance-compact-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 12px;
    min-width: 64px;
    border: none;
    border-radius: 8px 0 0 8px;
    box-shadow: -2px 0 12px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: system-ui, -apple-system, sans-serif;
}

/* Checked In State - Green */
.attendance-compact-badge.checked-in {
    background: linear-gradient(180deg, #10B981 0%, #059669 100%);
    color: white;
}

.attendance-compact-badge.checked-in:hover {
    background: linear-gradient(180deg, #059669 0%, #047857 100%);
    transform: translateX(-4px);
    box-shadow: -4px 0 16px rgba(16, 185, 129, 0.3);
}

/* Not Checked In State - Orange */
.attendance-compact-badge.not-checked-in {
    background: linear-gradient(180deg, #F59E0B 0%, #D97706 100%);
    color: white;
}

.attendance-compact-badge.not-checked-in:hover {
    background: linear-gradient(180deg, #D97706 0%, #B45309 100%);
    transform: translateX(-4px);
    box-shadow: -4px 0 16px rgba(245, 158, 11, 0.3);
}

.attendance-compact-badge .badge-icon {
    font-size: 24px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.attendance-compact-badge .badge-icon i {
    display: block;
}

.attendance-compact-badge .badge-time {
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.3px;
    text-align: center;
    white-space: nowrap;
}

.attendance-compact-badge .badge-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.2;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .attendance-badge-toggle {
        top: auto;
        bottom: 90px;
        transform: none;
        inset-inline-end: 10px;
    }

    .attendance-compact-badge {
        padding: 10px 8px;
        min-width: 56px;
        border-radius: 8px;
        gap: 6px;
    }

    .attendance-compact-badge .badge-icon {
        font-size: 20px;
    }

    .attendance-compact-badge .badge-time {
        font-size: 9px;
    }

    .attendance-compact-badge .badge-label {
        font-size: 8px;
    }
}

#attendanceWidgetOffcanvas {
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.1);
}
</style>

<script>
let updateInterval = null;
let fabUpdateInterval = null;

// Update widget data when offcanvas is opened
document.getElementById('attendanceWidgetToggle')?.addEventListener('click', function() {
    updateWidgetData();
});

// Auto-update FAB working hours every minute (always running if checked in)
@if($isCheckedIn)
fabUpdateInterval = setInterval(updateFabWorkingHours, 60000);
@endif

// Auto-refresh working hours every minute when offcanvas is open
const offcanvasElement = document.getElementById('attendanceWidgetOffcanvas');
if (offcanvasElement) {
    offcanvasElement.addEventListener('shown.bs.offcanvas', function() {
        updateWidgetData();
        // Update every 30 seconds while open
        updateInterval = setInterval(updateWidgetData, 30000);
    });

    offcanvasElement.addEventListener('hidden.bs.offcanvas', function() {
        // Stop updating when closed
        if (updateInterval) {
            clearInterval(updateInterval);
            updateInterval = null;
        }
    });
}

// Function to update FAB working hours display
function updateFabWorkingHours() {
    @if($isCheckedIn && $checkInTime)
    const checkInDate = new Date('{{ $checkInTime }}');
    const now = new Date();
    const workingMinutes = Math.abs(now - checkInDate) / (1000 * 60);

    const hours = Math.floor(workingMinutes / 60);
    const minutes = Math.floor(workingMinutes % 60);

    const fabTimeElement = document.getElementById('fabWorkingHours');
    if (fabTimeElement) {
        fabTimeElement.textContent = hours + 'h ' + minutes + 'm';
    }
    @endif
}

// Function to update widget data from API
function updateWidgetData() {
    $.ajax({
        url: '{{ route("hrcore.attendance.today-status") }}',
        type: 'GET',
        success: function(response) {
            if (response.status === 'success' && response.data) {
                const data = response.data;

                // Update check-in time
                if (data.checkInTime) {
                    const checkInDate = new Date(data.checkInTime);
                    $('#widgetCheckInTime').text(checkInDate.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: true }));
                }

                // Update check-out time
                if (data.checkOutTime) {
                    const checkOutDate = new Date(data.checkOutTime);
                    $('#widgetCheckOutTime').text(checkOutDate.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: true }));
                } else {
                    $('#widgetCheckOutTime').text('--:--');
                }

                // Calculate and update working hours in "Xh Ym" format
                // Match web attendance page: always calculate to NOW for live elapsed time
                if (data.checkInTime) {
                    const checkInDate = new Date(data.checkInTime);
                    const now = new Date();
                    const workingMinutes = Math.abs(now - checkInDate) / (1000 * 60);

                    const hours = Math.floor(workingMinutes / 60);
                    const minutes = Math.floor(workingMinutes % 60);
                    const timeText = hours + 'h ' + minutes + 'm';

                    $('#widgetWorkingHours').text(timeText);

                    // Also update FAB time
                    const fabTimeElement = document.getElementById('fabWorkingHours');
                    if (fabTimeElement) {
                        fabTimeElement.textContent = timeText;
                    }
                }
            }
        },
        error: function() {
            console.log('Failed to update widget data');
        }
    });
}

// Widget Check-In function
function widgetCheckIn() {
    const btn = document.getElementById('widgetCheckInBtn');
    const originalHTML = btn.innerHTML;
    btn.disabled = true;
    btn.innerHTML = '<i class="bx bx-loader-alt bx-spin me-2"></i>{{ __("Processing...") }}';

    // Get current time
    const now = new Date();
    const time = now.toTimeString().split(' ')[0]; // HH:MM:SS format

    $.ajax({
        url: '{{ route("hrcore.attendance.web-check-in") }}',
        type: 'POST',
        data: {
            time: time,
            latitude: null,
            longitude: null
        },
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        success: function(response) {
            if (response.status === 'success') {
                Swal.fire({
                    icon: 'success',
                    title: '{{ __("Success!") }}',
                    text: response.data?.message || '{{ __("Checked in successfully!") }}',
                    timer: 2000,
                    showConfirmButton: false
                }).then(() => {
                    window.location.reload();
                });
            } else {
                Swal.fire({
                    icon: 'error',
                    title: '{{ __("Error!") }}',
                    text: response.data || '{{ __("Failed to check in. Please try again.") }}'
                });
                btn.disabled = false;
                btn.innerHTML = originalHTML;
            }
        },
        error: function(xhr) {
            let errorMessage = '{{ __("An error occurred. Please try again.") }}';
            if (xhr.responseJSON && xhr.responseJSON.data) {
                errorMessage = xhr.responseJSON.data;
            }
            Swal.fire({
                icon: 'error',
                title: '{{ __("Error!") }}',
                text: errorMessage
            });
            btn.disabled = false;
            btn.innerHTML = originalHTML;
        }
    });
}

// Widget Check-Out function
function widgetCheckOut() {
    const btn = document.getElementById('widgetCheckOutBtn');
    const originalHTML = btn.innerHTML;
    btn.disabled = true;
    btn.innerHTML = '<i class="bx bx-loader-alt bx-spin me-2"></i>{{ __("Processing...") }}';

    // Get current time
    const now = new Date();
    const time = now.toTimeString().split(' ')[0]; // HH:MM:SS format

    $.ajax({
        url: '{{ route("hrcore.attendance.web-check-in") }}',
        type: 'POST',
        data: {
            time: time,
            latitude: null,
            longitude: null
        },
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        success: function(response) {
            if (response.status === 'success') {
                Swal.fire({
                    icon: 'success',
                    title: '{{ __("Success!") }}',
                    text: response.data?.message || '{{ __("Checked out successfully!") }}',
                    timer: 2000,
                    showConfirmButton: false
                }).then(() => {
                    window.location.reload();
                });
            } else {
                Swal.fire({
                    icon: 'error',
                    title: '{{ __("Error!") }}',
                    text: response.data || '{{ __("Failed to check out. Please try again.") }}'
                });
                btn.disabled = false;
                btn.innerHTML = originalHTML;
            }
        },
        error: function(xhr) {
            let errorMessage = '{{ __("An error occurred. Please try again.") }}';
            if (xhr.responseJSON && xhr.responseJSON.data) {
                errorMessage = xhr.responseJSON.data;
            }
            Swal.fire({
                icon: 'error',
                title: '{{ __("Error!") }}',
                text: errorMessage
            });
            btn.disabled = false;
            btn.innerHTML = originalHTML;
        }
    });
}

// Widget Break Toggle function
function widgetToggleBreak() {
    const btn = document.getElementById('widgetBreakBtn');
    const originalHTML = btn.innerHTML;
    btn.disabled = true;
    btn.innerHTML = '<i class="bx bx-loader-alt bx-spin me-2"></i>{{ __("Processing...") }}';

    $.ajax({
        url: '{{ route("hrcore.attendance.start-stop-break") }}',
        type: 'POST',
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        success: function(response) {
            if (response.status === 'success') {
                const message = response.data.isOnBreak 
                    ? '{{ __("Break started successfully!") }}' 
                    : '{{ __("Break stopped successfully!") }}';
                Swal.fire({
                    icon: 'success',
                    title: '{{ __("Success!") }}',
                    text: message,
                    timer: 2000,
                    showConfirmButton: false
                }).then(() => {
                    window.location.reload();
                });
            } else {
                Swal.fire({
                    icon: 'error',
                    title: '{{ __("Error!") }}',
                    text: response.data || '{{ __("Failed to toggle break. Please try again.") }}'
                });
                btn.disabled = false;
                btn.innerHTML = originalHTML;
            }
        },
        error: function(xhr) {
            let errorMessage = '{{ __("An error occurred. Please try again.") }}';
            if (xhr.responseJSON && xhr.responseJSON.data) {
                errorMessage = xhr.responseJSON.data;
            }
            Swal.fire({
                icon: 'error',
                title: '{{ __("Error!") }}',
                text: errorMessage
            });
            btn.disabled = false;
            btn.innerHTML = originalHTML;
        }
    });
}
</script>