@extends('layouts.app')

@push('page-styles')
    <!-- Page Css -->
    <style>
        /* Sticky page header and search bar */
        .page-header-sticky {
            position: sticky;
            top: 0;
            z-index: 1000;
            background-color: #fff;
            padding-top: 1rem;
            padding-bottom: 0.5rem;
            box-shadow: 0 2px 4px rgba(0,0,0,0.08);
            margin-bottom: 0;
        }
        
        .filter-sticky {
            position: sticky;
            top: 70px; /* Adjust based on header height */
            z-index: 999;
            background-color: #fff;
            padding: 1rem 0;
            margin-bottom: 1rem;
            box-shadow: 0 2px 4px rgba(0,0,0,0.08);
        }
        
        /* Attendance table scroll container */
        .attendance-scroll-container {
            position: relative;
            overflow-x: auto;
            overflow-y: visible;
            -webkit-overflow-scrolling: touch;
        }
        
        /* Top scrollbar */
        .attendance-scroll-top {
            overflow-x: auto;
            overflow-y: hidden;
            height: 20px;
            margin-bottom: 0;
            border-bottom: 1px solid #dee2e6;
        }
        
        .attendance-scroll-top::-webkit-scrollbar {
            height: 12px;
        }
        
        .attendance-scroll-top::-webkit-scrollbar-track {
            background: #f1f1f1;
        }
        
        .attendance-scroll-top::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 6px;
        }
        
        .attendance-scroll-top::-webkit-scrollbar-thumb:hover {
            background: #555;
        }
        
        /* Bottom scrollbar */
        .attendance-scroll-bottom {
            overflow-x: auto;
            overflow-y: hidden;
            height: 20px;
            margin-top: 0;
            border-top: 1px solid #dee2e6;
        }
        
        .attendance-scroll-bottom::-webkit-scrollbar {
            height: 12px;
        }
        
        .attendance-scroll-bottom::-webkit-scrollbar-track {
            background: #f1f1f1;
        }
        
        .attendance-scroll-bottom::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 6px;
        }
        
        .attendance-scroll-bottom::-webkit-scrollbar-thumb:hover {
            background: #555;
        }
        
        /* Table wrapper - hide default scrollbar */
        .attendance-table-wrapper {
            overflow-x: auto;
            overflow-y: visible;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none; /* Firefox */
            -ms-overflow-style: none; /* IE and Edge */
            max-height: calc(100vh - 280px); /* Adjust based on header + filter height */
            overflow-y: auto;
        }
        
        .attendance-table-wrapper::-webkit-scrollbar {
            width: 8px;
            height: 0;
        }
        
        .attendance-table-wrapper::-webkit-scrollbar-track {
            background: #f1f1f1;
        }
        
        .attendance-table-wrapper::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 4px;
        }
        
        /* Sticky table header */
        .attendance-table-wrapper table thead {
            position: sticky;
            top: 0;
            z-index: 100;
            background-color: #f8f9fa;
        }
        
        .attendance-table-wrapper table thead th {
            background-color: #f8f9fa;
            border-bottom: 2px solid #dee2e6;
            padding: 0.75rem;
            vertical-align: middle;
            text-align: center;
        }
        
        /* Sticky first column (Employee name) */
        .attendance-table-wrapper table thead th:first-child,
        .attendance-table-wrapper table tbody td:first-child {
            position: sticky;
            left: 0;
            z-index: 50;
            background-color: #fff;
            border-right: 2px solid #dee2e6;
        }
        
        .attendance-table-wrapper table thead th:first-child {
            z-index: 150; /* Higher than header and first column to stay on top of both */
            background-color: #f8f9fa;
        }
        
        .attendance-table-wrapper table tbody tr:nth-of-type(2n+1) td:first-child {
            background-color: #f8f9fa;
        }
        
        /* Ensure table cells have proper width */
        .attendance-table-wrapper table {
            min-width: 100%;
        }
        
        .attendance-table-wrapper table th:first-child,
        .attendance-table-wrapper table td:first-child {
            min-width: 200px;
            max-width: 200px;
            width: 200px;
            word-wrap: break-word;
            word-break: break-word;
            overflow-wrap: break-word;
            white-space: normal;
            overflow: hidden;
            text-overflow: ellipsis;
            padding: 0.5rem 0.75rem;
        }
        
        /* Date column headers */
        .attendance-table-wrapper table th:not(:first-child) {
            min-width: 80px;
            white-space: nowrap;
        }
        
        /* Ensure content inside first column doesn't overflow */
        .attendance-table-wrapper table td:first-child > * {
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        /* Handle user avatar and name properly */
        .attendance-table-wrapper table td:first-child a,
        .attendance-table-wrapper table td:first-child .avatar {
            max-width: 100%;
            display: inline-block;
            vertical-align: middle;
        }
        
        /* Scrollbar spacer for top scrollbar */
        .scrollbar-spacer {
            height: 1px;
            visibility: hidden;
        }
    </style>
@endpush

@section('page-content')
<div class="content container-fluid">

    <!-- Page Header -->
    <div class="page-header-sticky">
        <x-breadcrumb>
            <x-slot name="title">{{ __('Attendances') }}</x-slot>
            <ul class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">{{ __('Dashboard') }}</a></li>
                <li class="breadcrumb-item active">{{ __('Attendance List') }}</li>
            </ul>
        </x-breadcrumb>
    </div>

    <!-- Search Filter -->
    <div class="filter-sticky">
        <form action="" method="get">
            <div class="row filter-row">
                <div class="col-sm-6 col-md-2">  
                    <div class="input-block mb-3 form-focus">
                        <input type="text" name="employee" value="{{ request()->employee }}" class="form-control floating">
                        <label class="focus-label">{{ __('Employee Name') }}</label>
                    </div>
                </div>
                <div class="col-sm-6 col-md-2"> 
                    <div class="input-block mb-3 form-focus select-focus">
                        <select name="department_id" class="select floating"> 
                            <option value="">{{ __('All Departments') }}</option>
                            @foreach($departments as $dept)
                                <option value="{{ $dept->id }}" {{ $dept->id == request()->department_id ? 'selected' : '' }}>
                                    {{ $dept->name }}
                                </option>
                            @endforeach
                        </select>
                        <label class="focus-label">{{ __('Select Department') }}</label>
                    </div>
                </div>
                <div class="col-sm-6 col-md-2"> 
                    <div class="input-block mb-3 form-focus select-focus">
                        <select name="month" class="select floating"> 
                            <option value="">-</option>
                            @foreach(range(1,12) as $m)
                                <option value="{{ sprintf('%02d', $m) }}" {{ $m == (request()->month ?? now()->month) ? 'selected' : '' }}>
                                    {{ \Carbon\Carbon::create()->month($m)->format('M') }}
                                </option>
                            @endforeach
                        </select>
                        <label class="focus-label">{{ __('Select Month') }}</label>
                    </div>
                </div>
                <div class="col-sm-6 col-md-2"> 
                    <div class="input-block mb-3 form-focus select-focus">
                        <select name="year" class="select floating"> 
                            <option value="">-</option>
                            @foreach ($years_range as $year)
                                <option {{ $year->year == (request()->year ?? now()->year) ? 'selected' : '' }}>
                                    {{ $year->year }}
                                </option>
                            @endforeach
                        </select>
                        <label class="focus-label">{{ __('Select Year') }}</label>
                    </div>
                </div>
                <div class="col-sm-6 col-md-2">  
                    <div class="d-grid">
                        <button type="submit" class="btn btn-success">{{ __('Search') }}</button>
                    </div>
                </div>
                <div class="col-sm-6 col-md-2">  
                    <div class="d-grid">
                        <a href="{{ route('attendances.index') }}" class="btn btn-secondary">{{ __('Reset') }}</a>
                    </div>
                </div>       
            </div>
        </form> 
    </div>
    <!-- /Search Filter -->
    
    <div class="row">
        <div class="col-lg-12">
            <div class="attendance-scroll-container">
                <!-- Top Scrollbar -->
                <div class="attendance-scroll-top" id="topScrollbar">
                    <div class="scrollbar-spacer" id="scrollbarSpacer"></div>
                </div>
                
                <!-- Table Wrapper -->
                <div class="attendance-table-wrapper" id="tableWrapper">
                    <table class="table table-striped custom-table table-nowrap mb-0">
                        <thead>
                            <tr>
                                <th>{{ __('Employee') }}</th>
                                @for ($day = 1; $day <= $days_in_month; $day++)
                                    @php
                                        $currentMonth = request()->month ?? now()->month;
                                        $year = request()->year ?? now()->year;
                                        $date = \Carbon\Carbon::createFromDate($year, $currentMonth, $day);
                                        $dayName = $date->format('D'); // Mon, Tue, Wed, etc.
                                    @endphp
                                    <th>{{ $day }}<br><small style="font-size: 0.7rem; font-weight: normal;">({{ $dayName }})</small></th>
                                @endfor
                            </tr>
                        </thead>
                        <tbody>
                            @if (!empty($employees))
                                @foreach ($employees as $employee)
                                    <tr>
                                        <td>
                                            @php
                                                $img = !empty($employee->avatar) ? asset('storage/users/'.$employee->avatar): asset('images/user.jpg');
                                                $link = route('employees.show', ['employee' => Crypt::encrypt($employee->id)]);
                                                $departmentName = $employee->employeeDetail && $employee->employeeDetail->department 
                                                    ? $employee->employeeDetail->department->name 
                                                    : '';
                                            @endphp 
                                            <div>
                                                {!! \Spatie\Menu\Laravel\Html::userAvatar($employee->fullname, $img, $link) !!}
                                                @if($departmentName)
                                                    <div class="text-muted" style="font-size: 0.75rem; margin-top: 2px;">
                                                        <i class="fa fa-building-o"></i> {{ $departmentName }}
                                                    </div>
                                                @endif
                                            </div>
                                        </td>

                                        @for ($day = 1; $day <= $days_in_month; $day++)
                                        @php
                                            $currentMonth = request()->month ?? now()->month;
                                            $year = request()->year ?? now()->year;
                                            $currentDate = \Carbon\Carbon::createFromDate($year, $currentMonth, $day)->toDateString();

                                            // Pre-bucket attendances by 09:40 AM shift logic using device punches
                                            static $attendanceCache = [];
                                            $employeeKey = $employee->id;
                                            
                                            if (!isset($attendanceCache[$employeeKey])) {
                                                $attendanceCache[$employeeKey] = [];
                                                
                                                // 1. Process Device Punches
                                                $punches = $employee->devicePunches; 
                                                // Note: Controller filters these roughly by month, 
                                                // but we should iterate all available to ensuring binding.

                                                foreach ($punches as $punch) {
                                                    $time = \Carbon\Carbon::parse($punch->punch_time);
                                                    
                                                    // Determine "Logical Date": If before 09:40 AM, it belongs to previous day
                                                    if ($time->format('H:i') < '09:40') {
                                                        $dateKey = $time->copy()->subDay()->toDateString();
                                                    } else {
                                                        $dateKey = $time->toDateString();
                                                    }

                                                    if (!isset($attendanceCache[$employeeKey][$dateKey])) {
                                                        $attendanceCache[$employeeKey][$dateKey] = [
                                                            'punches' => [],
                                                            'attendance_id' => null // will try to find matching attendance
                                                        ];
                                                    }
                                                    $attendanceCache[$employeeKey][$dateKey]['punches'][] = $time;
                                                }

                                                // 2. Map existing Attendances to dates to get IDs for the popup link
                                                foreach ($employee->attendances as $att) {
                                                     if ($att->attendance_date) {
                                                         $dKey = $att->attendance_date->toDateString();
                                                         if (!isset($attendanceCache[$employeeKey][$dKey])) {
                                                             $attendanceCache[$employeeKey][$dKey] = [
                                                                 'punches' => [],
                                                                 'attendance_id' => $att->id
                                                             ];
                                                         } else {
                                                             $attendanceCache[$employeeKey][$dKey]['attendance_id'] = $att->id;
                                                         }
                                                     }
                                                }
                                            }

                                            // Retrieve for current cell
                                            $dayData = $attendanceCache[$employeeKey][$currentDate] ?? null;
                                            
                                            $displayCheckIn = null;
                                            $displayCheckOut = null;
                                            $attendanceId = $dayData['attendance_id'] ?? null;

                                            if ($dayData && !empty($dayData['punches'])) {
                                                $sortedPunches = collect($dayData['punches'])->sort();
                                                $displayCheckIn = $sortedPunches->first();
                                                $displayCheckOut = $sortedPunches->count() > 1 ? $sortedPunches->last() : null;
                                                
                                                // If only one punch, it's check-in. Check-out stays null.
                                            } else {
                                                // Fallback to strict attendance object dates if no punches found but attendance exists
                                                // (Already handled by step 2 above, if punches array is empty)
                                                // But if we want to trust the attendance object's checks:
                                                 if ($dayData && $attendanceId) {
                                                     // We have attendance ID but no punches found in that bucket.
                                                     // This might happen if punches are not synced or deleted.
                                                     // Ideally we should have loaded attendance times earlier if we wanted this fallback.
                                                     // For now, let's rely on punches as primary source of truth for 11AM logic.
                                                 }
                                            }
                                        @endphp

                                        <td>
                                            @if ($displayCheckIn)
                                                {{-- We need an ID for the link. If we have derived formatted times but no DB attendance record yet, we can't show details --}}
                                                {{-- However, usually an attendance record exists if punches exist. If not, link might be broken or we leave it. --}}
                                                 
                                                @if ($attendanceId)
                                                <a href="javascript:void(0);" data-ajax-modal="true" data-title="{{ __('Attendance Details') }}" data-size="lg" data-url="{{ route('attendance.details', $attendanceId) }}">
                                                @else
                                                <a href="javascript:void(0);" class="text-dark" style="cursor: default;">
                                                @endif
                                                
                                                    <div class="mb-1">
                                                        <i class="fa-solid fa-arrow-right-to-bracket text-success"></i>
                                                        <small class="text-success" style="font-size: 0.8rem;">
                                                            {{ $displayCheckIn->format('h:i A') }}
                                                        </small>
                                                        
                                                        @php
                                                            // Lateness Calculation with Grace Period Color Coding
                                                            $startTimeStr = $employee->employeeDetail ? $employee->employeeDetail->start_time : null;
                                                            $lateText = '';
                                                            $lateColorClass = 'text-danger'; // Default red
                                                            $gracePeriodMinutes = 15;
                                                            
                                                            if ($startTimeStr) {
                                                                // Parse start time (it's usually H:i:s from DB)
                                                                // We need to combine it with the current date of the punch to compare apples to apples
                                                                $scheduleStartTime = \Carbon\Carbon::parse($displayCheckIn->format('Y-m-d') . ' ' . $startTimeStr);
                                                                
                                                                if ($displayCheckIn->gt($scheduleStartTime)) {
                                                                    $diffInMinutes = $scheduleStartTime->diffInMinutes($displayCheckIn);
                                                                    
                                                                    if ($diffInMinutes > 0) {
                                                                        $hours = intdiv($diffInMinutes, 60);
                                                                        $minutes = $diffInMinutes % 60;
                                                                        
                                                                        // Set color based on grace period: Red only for 16 minutes or more
                                                                        if ($diffInMinutes >= 16) {
                                                                            $lateColorClass = 'text-danger'; // Red for 16+ minutes late
                                                                        } else {
                                                                            $lateColorClass = 'text-success'; // Green for 1-15 minutes late
                                                                        }
                                                                        
                                                                        if ($hours > 0) {
                                                                            if ($minutes > 0) {
                                                                                $lateText = sprintf('%d hr %d min late', $hours, $minutes);
                                                                            } else {
                                                                                $lateText = sprintf('%d hr late', $hours);
                                                                            }
                                                                        } else {
                                                                            $lateText = sprintf('%d min late', $minutes);
                                                                        }
                                                                    }
                                                                }
                                                            }
                                                        @endphp
                                                        
                                                        @if ($lateText)
                                                            <div class="{{ $lateColorClass }}" style="font-size: 0.7rem; line-height: 1.1;">
                                                                {{ $lateText }}
                                                            </div>
                                                        @endif
                                                    </div>

                                                    @if ($displayCheckOut)
                                                        @php
                                                            $checkoutNextDay = $displayCheckOut->gt($displayCheckIn->copy()->endOfDay());
                                                        @endphp
                                                        <div>
                                                            <i class="fa-solid fa-arrow-right-to-bracket text-secondary" style="transform: scaleX(-1); display: inline-block;"></i>
                                                            <small class="text-secondary" style="font-size: 0.8rem;">
                                                                {{ $displayCheckOut->format('h:i A') }}
                                                                @if ($checkoutNextDay)
                                                                    <span class="badge bg-light text-muted ms-1" title="{{ $displayCheckOut->toDateString() }}">next day</span>
                                                                @endif
                                                            </small>
                                                        </div>
                                                    @endif
                                                </a>
                                            @else
                                                <span class="text-muted">-</span>
                                            @endif
                                        </td>
                                        @endfor
                                    </tr>
                                @endforeach
                            @endif
                        </tbody>
                    </table>
                </div>
                
                <!-- Bottom Scrollbar -->
                <div class="attendance-scroll-bottom" id="bottomScrollbar">
                    <div class="scrollbar-spacer" id="scrollbarSpacerBottom"></div>
                </div>
            </div>
        </div>
    </div>

</div>

{{-- Edit Time Modal - Placed here to avoid nested modal issues --}}
<div class="modal fade" id="edit_time_modal" tabindex="-1" style="z-index: 1060;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editTimeModalLabel">{{ __('Edit Time') }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="editTimeForm" method="POST">
                @csrf
                @method('PUT')
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="edit_time" class="form-label">{{ __('Time') }}</label>
                        <input type="datetime-local" class="form-control" id="edit_time" name="time" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('Cancel') }}</button>
                    <button type="submit" class="btn btn-primary">{{ __('Save Changes') }}</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
// Set modal data when edit icon is clicked
function setEditModal(type, attendanceId, currentTime) {
    const form = document.getElementById('editTimeForm');
    const titleElement = document.getElementById('editTimeModalLabel');
    const timeInput = document.getElementById('edit_time');
    
    // Set modal title
    titleElement.textContent = type === 'checkin' ? '{{ __("Edit Check In Time") }}' : '{{ __("Edit Check Out Time") }}';
    
    // Set form action
    form.action = `/attendances/${attendanceId}/update-${type}`;
    
    // Set current time value
    timeInput.value = currentTime;
}

// Handle form submission
document.addEventListener('DOMContentLoaded', function() {
    const editForm = document.getElementById('editTimeForm');
    if (editForm) {
        editForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            const formData = new FormData(this);
            const url = this.action;
            
            fetch(url, {
                method: 'POST',
                body: formData,
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Show success message
                    if (typeof Toastify !== 'undefined') {
                        Toastify({
                            text: data.message || '{{ __("Time updated successfully") }}',
                            className: "success",
                        }).showToast();
                    } else {
                        alert(data.message || '{{ __("Time updated successfully") }}');
                    }
                    
                    // Reload the page after a short delay
                    setTimeout(() => {
                        location.reload();
                    }, 1000);
                } else {
                    if (typeof Toastify !== 'undefined') {
                        Toastify({
                            text: data.message || '{{ __("Failed to update time") }}',
                            className: "error",
                        }).showToast();
                    } else {
                        alert(data.message || '{{ __("Failed to update time") }}');
                    }
                }
            })
            .catch(error => {
                console.error('Error:', error);
                if (typeof Toastify !== 'undefined') {
                    Toastify({
                        text: '{{ __("An error occurred") }}',
                        className: "error",
                    }).showToast();
                } else {
                    alert('{{ __("An error occurred") }}');
                }
            });
        });
    }
    
    // Sync scrollbars for attendance table
    const tableWrapper = document.getElementById('tableWrapper');
    const topScrollbar = document.getElementById('topScrollbar');
    const bottomScrollbar = document.getElementById('bottomScrollbar');
    const scrollbarSpacer = document.getElementById('scrollbarSpacer');
    const scrollbarSpacerBottom = document.getElementById('scrollbarSpacerBottom');
    
    if (tableWrapper && topScrollbar && bottomScrollbar) {
        // Set spacer width to match table width
        function updateScrollbarSpacers() {
            const table = tableWrapper.querySelector('table');
            if (table) {
                const tableWidth = table.scrollWidth;
                scrollbarSpacer.style.width = tableWidth + 'px';
                scrollbarSpacerBottom.style.width = tableWidth + 'px';
            }
        }
        
        // Initial update
        updateScrollbarSpacers();
        
        // Update on window resize
        window.addEventListener('resize', updateScrollbarSpacers);
        
        // Sync top scrollbar with table wrapper
        topScrollbar.addEventListener('scroll', function() {
            tableWrapper.scrollLeft = topScrollbar.scrollLeft;
        });
        
        // Sync bottom scrollbar with table wrapper
        bottomScrollbar.addEventListener('scroll', function() {
            tableWrapper.scrollLeft = bottomScrollbar.scrollLeft;
        });
        
        // Sync table wrapper with scrollbars
        tableWrapper.addEventListener('scroll', function() {
            topScrollbar.scrollLeft = tableWrapper.scrollLeft;
            bottomScrollbar.scrollLeft = tableWrapper.scrollLeft;
        });
        
        // Enable mouse wheel scrolling on table wrapper
        // Only scroll horizontally when Shift is held or when actually scrolling horizontally
        tableWrapper.addEventListener('wheel', function(e) {
            // If Shift is held, convert vertical scroll to horizontal
            if (e.shiftKey && e.deltaY !== 0) {
                e.preventDefault();
                tableWrapper.scrollLeft += e.deltaY;
            }
            // If scrolling horizontally (trackpad or horizontal mouse wheel), allow it
            else if (e.deltaX !== 0) {
                // Allow default horizontal scrolling behavior - don't prevent default
                return;
            }
            // Otherwise, allow normal vertical scrolling (don't interfere)
        });
    }
});
</script>
@endsection

@push('page-scripts')
    <!-- Page JS -->
@endpush