@extends('layouts.app')

@section('content')
<div class="container-fluid py-4">
    <!-- Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="h3 mb-0">Attendance</h1>
                    <p class="text-muted">View and Manage Attendances.</p>
                </div>
                <div>
                    <a href="{{ route('companies.hr.dashboard', $company) }}" class="btn btn-outline-secondary me-2">
                        <i class="fas fa-arrow-left"></i> Back to Admin
                    </a>
                    <button type="button" class="btn btn-info">
                        Import Data
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Filter Data -->
    <div class="mb-4">
        <h6 class="mb-3">Filter data:</h6>
        <form method="GET" class="row g-3 align-items-end">
            <div class="col-md-3">
                <input type="text" class="form-control" name="employee_filter" value="{{ request('employee_filter') }}"
                       placeholder="Filter by employee">
            </div>
            <div class="col-md-3">
                <input type="text" class="form-control" name="shift_filter" value="{{ request('shift_filter') }}"
                       placeholder="Filter by shift">
            </div>
            <div class="col-md-3">
                <input type="date" class="form-control" name="date_filter" value="{{ request('date_filter', date('Y-m-d')) }}">
            </div>
            <div class="col-md-3">
                <button type="submit" class="btn btn-primary rounded-circle me-2">
                    <i class="bi bi-funnel"></i>
                </button>
                <button type="button" class="btn btn-outline-secondary rounded-circle me-2" onclick="window.location.href='{{ route('companies.hr.attendance.index', $company) }}'">
                    <i class="bi bi-arrow-clockwise"></i>
                </button>
                <button type="button" class="btn btn-outline-info" onclick="exportAttendance()">
                    <i class="bi bi-download me-1"></i> Export Data
                </button>
            </div>
        </form>
    </div>

    <!-- Quick Actions -->
    <div class="row mb-4">
        <div class="col-md-8">
            <div class="card">
                <div class="card-body">
                    <h6 class="card-title mb-3">Quick Clock In/Out</h6>
                    <div class="row">
                        <div class="col-md-6">
                            <select class="form-select mb-2" id="employee-select">
                                <option value="">Select Employee</option>
                                @foreach($company->employees()->active()->get() as $employee)
                                    <option value="{{ $employee->id }}">{{ $employee->full_name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6">
                            <div class="d-flex gap-2">
                                <button class="btn btn-success" onclick="quickClockIn()">
                                    <i class="bi bi-clock"></i> Clock In
                                </button>
                                <button class="btn btn-warning" onclick="quickClockOut()">
                                    <i class="bi bi-clock-fill"></i> Clock Out
                                </button>
                            </div>
                        </div>
                    </div>
                    <div id="location-status" class="small text-muted mt-2"></div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card">
                <div class="card-body">
                    <h6 class="card-title mb-3">Today's Summary</h6>
                    <div class="row text-center">
                        <div class="col-4">
                            <div class="text-success fs-4">{{ $presentAttendances->count() }}</div>
                            <small class="text-muted">Present</small>
                        </div>
                        <div class="col-4">
                            <div class="text-danger fs-4">{{ $absentEmployees->count() }}</div>
                            <small class="text-muted">Absent</small>
                        </div>
                        <div class="col-4">
                            <div class="text-warning fs-4">{{ $attendances->where('status', 'late')->count() }}</div>
                            <small class="text-muted">Late</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Attendance Tabs -->
    <div class="mb-4">
        <ul class="nav nav-tabs" id="attendanceTab" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="todays-attendance-tab" data-bs-toggle="tab" data-bs-target="#todays-attendance" type="button" role="tab">
                    Today's Attendance
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="present-tab" data-bs-toggle="tab" data-bs-target="#present" type="button" role="tab">
                    Present
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="absent-tab" data-bs-toggle="tab" data-bs-target="#absent" type="button" role="tab">
                    Absent
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="ot-request-tab" data-bs-toggle="tab" data-bs-target="#ot-request" type="button" role="tab">
                    OT Request
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="ot-form-tab" data-bs-toggle="tab" data-bs-target="#ot-form" type="button" role="tab">
                    OT Form
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="visit-tab" data-bs-toggle="tab" data-bs-target="#visit" type="button" role="tab">
                    Visit
                </button>
            </li>
            <li class="nav-item ms-auto" role="presentation">
                <button class="nav-link" id="summary-reports-tab" data-bs-toggle="tab" data-bs-target="#summary-reports" type="button" role="tab">
                    Summary Reports
                </button>
            </li>
        </ul>
    </div>

    <!-- Tab Content -->
    <div class="tab-content" id="attendanceTabContent">

        <!-- Today's Attendance Tab -->
        <div class="tab-pane fade show active" id="todays-attendance" role="tabpanel">
            <div class="card">
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>Employee</th>
                                    <th>Attendance</th>
                                    <th>Shift</th>
                                    <th>Day Type</th>
                                    <th>Type</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($attendances ?? [] as $attendance)
                                <tr>
                                    <td>{{ $attendance->employee->full_name ?? '' }}</td>
                                    <td>
                                        @if($attendance->clock_in && $attendance->clock_out)
                                            <span class="text-success">
                                                {{ \Carbon\Carbon::parse($attendance->clock_in)->format('H:i') }} -
                                                {{ \Carbon\Carbon::parse($attendance->clock_out)->format('H:i') }}
                                            </span>
                                        @elseif($attendance->clock_in)
                                            <span class="text-warning">
                                                {{ \Carbon\Carbon::parse($attendance->clock_in)->format('H:i') }} - Present
                                            </span>
                                        @else
                                            <span class="text-danger">Absent</span>
                                        @endif
                                    </td>
                                    <td>{{ $attendance->shift ?? 'Day Shift' }}</td>
                                    <td>{{ $attendance->day_type ?? 'Normal' }}</td>
                                    <td>
                                        @if($attendance->status === 'present')
                                            <span class="badge bg-success">Present</span>
                                        @elseif($attendance->status === 'absent')
                                            <span class="badge bg-danger">Absent</span>
                                        @elseif($attendance->status === 'late')
                                            <span class="badge bg-warning">Late</span>
                                        @else
                                            <span class="badge bg-secondary">{{ ucfirst($attendance->status ?? 'Unknown') }}</span>
                                        @endif
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="5" class="text-center py-4 text-muted">No attendance found.</td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- Present Tab -->
        <div class="tab-pane fade" id="present" role="tabpanel">
            <div class="card">
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>Employee</th>
                                    <th>Clock In</th>
                                    <th>Clock Out</th>
                                    <th>Total Hours</th>
                                    <th>Overtime Hours</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($presentAttendances ?? [] as $attendance)
                                <tr>
                                    <td>{{ $attendance->employee->full_name }}</td>
                                    <td>{{ $attendance->clock_in ? \Carbon\Carbon::parse($attendance->clock_in)->format('H:i') : '-' }}</td>
                                    <td>{{ $attendance->clock_out ? \Carbon\Carbon::parse($attendance->clock_out)->format('H:i') : '-' }}</td>
                                    <td>{{ number_format($attendance->total_hours ?? 0, 2) }}h</td>
                                    <td>{{ number_format($attendance->overtime_hours ?? 0, 2) }}h</td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="5" class="text-center py-4 text-muted">No present employees found.</td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- Absent Tab -->
        <div class="tab-pane fade" id="absent" role="tabpanel">
            <div class="card">
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>Employee</th>
                                    <th>Expected Shift</th>
                                    <th>Reason</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($absentEmployees ?? [] as $employee)
                                <tr>
                                    <td>{{ $employee->full_name }}</td>
                                    <td>Day Shift</td>
                                    <td>No show</td>
                                    <td><span class="badge bg-danger">Absent</span></td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="4" class="text-center py-4 text-muted">No absent employees found.</td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- OT Request Tab -->
        <div class="tab-pane fade" id="ot-request" role="tabpanel">
            <div class="card">
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>Employee</th>
                                    <th>Date</th>
                                    <th>Requested Hours</th>
                                    <th>Reason</th>
                                    <th>Status</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($overtimeRequests ?? [] as $request)
                                <tr>
                                    <td>{{ $request->employee->full_name }}</td>
                                    <td>{{ $request->date->format('M d, Y') }}</td>
                                    <td>{{ $request->requested_hours }}h</td>
                                    <td>{{ $request->reason }}</td>
                                    <td>
                                        @if($request->status === 'pending')
                                            <span class="badge bg-warning">Pending</span>
                                        @elseif($request->status === 'approved')
                                            <span class="badge bg-success">Approved</span>
                                        @else
                                            <span class="badge bg-danger">Rejected</span>
                                        @endif
                                    </td>
                                    <td>
                                        @if($request->status === 'pending')
                                            <button class="btn btn-sm btn-success">Approve</button>
                                            <button class="btn btn-sm btn-danger">Reject</button>
                                        @endif
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="6" class="text-center py-4 text-muted">No overtime requests found.</td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- OT Form Tab -->
        <div class="tab-pane fade" id="ot-form" role="tabpanel">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Submit Overtime Request</h5>
                    <form method="POST" action="{{ route('companies.hr.attendance.overtime.store', $company) }}">
                        @csrf
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="form-label">Employee</label>
                                <select class="form-select" name="employee_id" id="ot_employee_select" required>
                                    <option value="">Select Employee</option>
                                    @foreach($employees ?? [] as $employee)
                                        <option value="{{ $employee->id }}" 
                                                @if($employee->not_entitled_to_ot) disabled @endif>
                                            {{ $employee->full_name }}
                                            @if($employee->not_entitled_to_ot)
                                                - Not entitled to OT (Executive/Management)
                                            @endif
                                        </option>
                                    @endforeach
                                </select>
                                <div class="text-muted small mt-1">
                                    <i class="bi bi-info-circle"></i> Employees marked as Executive/Management are not entitled to overtime.
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Date</label>
                                <input type="date" class="form-control" name="date" value="{{ date('Y-m-d') }}" required>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="form-label">Start Time</label>
                                <input type="time" class="form-control" name="start_time" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">End Time</label>
                                <input type="time" class="form-control" name="end_time" required>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Reason</label>
                            <textarea class="form-control" name="reason" rows="3" placeholder="Explain the reason for overtime..." required></textarea>
                        </div>
                        <button type="submit" class="btn btn-primary">Submit Request</button>
                    </form>
                </div>
            </div>
        </div>

        <!-- Visit Tab -->
        <div class="tab-pane fade" id="visit" role="tabpanel">
            <div class="card">
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>Employee</th>
                                    <th>Client/Location</th>
                                    <th>Check In</th>
                                    <th>Check Out</th>
                                    <th>Purpose</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($visits ?? [] as $visit)
                                <tr>
                                    <td>{{ $visit->employee->full_name }}</td>
                                    <td>{{ $visit->location }}</td>
                                    <td>{{ $visit->check_in ? \Carbon\Carbon::parse($visit->check_in)->format('H:i') : '-' }}</td>
                                    <td>{{ $visit->check_out ? \Carbon\Carbon::parse($visit->check_out)->format('H:i') : '-' }}</td>
                                    <td>{{ $visit->purpose }}</td>
                                    <td>
                                        @if($visit->status === 'in_progress')
                                            <span class="badge bg-info">In Progress</span>
                                        @elseif($visit->status === 'completed')
                                            <span class="badge bg-success">Completed</span>
                                        @else
                                            <span class="badge bg-secondary">{{ ucfirst($visit->status) }}</span>
                                        @endif
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="6" class="text-center py-4 text-muted">No visits found.</td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- Summary Reports Tab -->
        <div class="tab-pane fade" id="summary-reports" role="tabpanel">
            <div class="card">
                <div class="card-body">
                    <h4 class="mb-4">Attendance Summary Reports</h4>
                    <p class="text-muted mb-4">You can now download an attendance summary report in xlsx (an Excel spreadsheet). Choose the start date and end date, a report will be generated immediately.</p>

                    <!-- Report Type Buttons -->
                    <div class="mb-4">
                        <button type="button" class="btn btn-info me-2" id="individual-report-btn" onclick="showReportForm('individual')">
                            Report by individual
                        </button>
                        <button type="button" class="btn btn-outline-secondary" id="shift-report-btn" onclick="showReportForm('shift')">
                            Report by shift
                        </button>
                    </div>

                    <!-- Individual Report Form -->
                    <div id="individual-report-form" class="report-form">
                        <form method="POST" action="{{ route('companies.hr.attendance.export', $company) }}" class="row g-3 align-items-end">
                            @csrf
                            <input type="hidden" name="report_type" value="individual">
                            <div class="col-md-3">
                                <select class="form-select" name="employee_id">
                                    <option value="">Select an employee</option>
                                    @foreach($employees ?? [] as $employee)
                                        <option value="{{ $employee->id }}">{{ $employee->full_name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-2">
                                <input type="date" class="form-control" name="start_date" value="{{ date('Y-m-01') }}" required>
                            </div>
                            <div class="col-md-2">
                                <input type="date" class="form-control" name="end_date" value="{{ date('Y-m-t') }}" required>
                            </div>
                            <div class="col-md-2">
                                <select class="form-select" name="attendance_status">
                                    <option value="">Select attendances status</option>
                                    <option value="present">Present</option>
                                    <option value="absent">Absent</option>
                                    <option value="late">Late</option>
                                    <option value="half_day">Half Day</option>
                                </select>
                            </div>
                            <div class="col-md-2">
                                <select class="form-select" name="ot_status">
                                    <option value="">Select OT status</option>
                                    <option value="pending">Pending</option>
                                    <option value="approved">Approved</option>
                                    <option value="rejected">Rejected</option>
                                </select>
                            </div>
                            <div class="col-md-1">
                                <button type="submit" class="btn btn-primary">Export Report</button>
                            </div>
                        </form>
                    </div>

                    <!-- Shift Report Form (initially hidden) -->
                    <div id="shift-report-form" class="report-form" style="display: none;">
                        <form method="POST" action="{{ route('companies.hr.attendance.export', $company) }}" class="row g-3 align-items-end">
                            @csrf
                            <input type="hidden" name="report_type" value="shift">
                            <div class="col-md-3">
                                <select class="form-select" name="shift">
                                    <option value="">Select shift</option>
                                    <option value="day">Day Shift</option>
                                    <option value="night">Night Shift</option>
                                    <option value="morning">Morning Shift</option>
                                    <option value="evening">Evening Shift</option>
                                </select>
                            </div>
                            <div class="col-md-2">
                                <input type="date" class="form-control" name="start_date" value="{{ date('Y-m-01') }}" required>
                            </div>
                            <div class="col-md-2">
                                <input type="date" class="form-control" name="end_date" value="{{ date('Y-m-t') }}" required>
                            </div>
                            <div class="col-md-2">
                                <select class="form-select" name="attendance_status">
                                    <option value="">Select attendances status</option>
                                    <option value="present">Present</option>
                                    <option value="absent">Absent</option>
                                    <option value="late">Late</option>
                                    <option value="half_day">Half Day</option>
                                </select>
                            </div>
                            <div class="col-md-2">
                                <select class="form-select" name="ot_status">
                                    <option value="">Select OT status</option>
                                    <option value="pending">Pending</option>
                                    <option value="approved">Approved</option>
                                    <option value="rejected">Rejected</option>
                                </select>
                            </div>
                            <div class="col-md-1">
                                <button type="submit" class="btn btn-primary">Export Report</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
// User location tracking
let userLocation = null;

// Get user location on page load
document.addEventListener('DOMContentLoaded', function() {
    console.log('🔍 Starting location detection...');
    
    if (navigator.geolocation) {
        const options = {
            enableHighAccuracy: true,
            timeout: 10000,
            maximumAge: 300000 // 5 minutes
        };
        
        console.log('📍 Geolocation API available, requesting position...');
        
        navigator.geolocation.getCurrentPosition(
            function(position) {
                userLocation = {
                    latitude: position.coords.latitude,
                    longitude: position.coords.longitude,
                    accuracy: position.coords.accuracy
                };
                
                console.log('✅ Location obtained successfully:', userLocation);
                
                document.getElementById('location-status').innerHTML = 
                    '<i class="bi bi-geo-alt text-success"></i> Location: Available (±' + 
                    Math.round(position.coords.accuracy) + 'm accuracy)';
            },
            function(error) {
                console.error('❌ Location detection failed:', error);
                
                let errorMessage = '';
                switch(error.code) {
                    case error.PERMISSION_DENIED:
                        errorMessage = 'Location access denied. Geofencing may be required for clock-in.';
                        break;
                    case error.POSITION_UNAVAILABLE:
                        errorMessage = 'Location information unavailable.';
                        break;
                    case error.TIMEOUT:
                        errorMessage = 'Location request timeout.';
                        break;
                    default:
                        errorMessage = 'Unknown location error.';
                        break;
                }
                
                console.log('Location error details:', {
                    code: error.code,
                    message: error.message,
                    translated: errorMessage
                });
                
                document.getElementById('location-status').innerHTML = 
                    '<i class="bi bi-geo-alt text-warning"></i> ' + errorMessage;
            },
            options
        );
    } else {
        console.error('❌ Geolocation API not supported by this browser');
        document.getElementById('location-status').innerHTML = 
            '<i class="bi bi-geo-alt text-danger"></i> Geolocation not supported by this browser.';
    }
});

function quickClockIn() {
    const employeeId = document.getElementById('employee-select').value;
    
    if (!employeeId) {
        alert('Please select an employee first');
        return;
    }

    const button = event.target;
    const originalText = button.innerHTML;
    button.disabled = true;
    button.innerHTML = '<i class="bi bi-hourglass-split"></i> Clocking In...';

    // Prepare request data
    const requestData = {
        employee_id: employeeId,
        _token: '{{ csrf_token() }}'
    };

    // Add location data if available
    if (userLocation) {
        requestData.latitude = userLocation.latitude;
        requestData.longitude = userLocation.longitude;
        requestData.accuracy = userLocation.accuracy;
        console.log('Clock-in with location data:', {
            latitude: userLocation.latitude,
            longitude: userLocation.longitude,
            accuracy: userLocation.accuracy
        });
    } else {
        console.log('Clock-in WITHOUT location data - userLocation is null');
    }

    console.log('Sending clock-in request with data:', requestData);

    fetch('{{ route('companies.hr.attendance.clock-in', $company) }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: JSON.stringify(requestData)
    })
    .then(response => {
        console.log('📡 Clock-in response received:', {
            status: response.status,
            statusText: response.statusText
        });
        return response.json();
    })
    .then(data => {
        console.log('📦 Clock-in response data:', data);
        
        button.disabled = false;
        button.innerHTML = originalText;
        
        if (data.success) {
            console.log('✅ Clock-in successful');
            alert('✅ ' + data.success);
            // Refresh the page to show updated attendance
            location.reload();
        } else if (data.error) {
            console.log('❌ Clock-in blocked:', data.error);
            let errorMsg = '❌ ' + data.error;
            if (data.distance_to_nearest_office) {
                errorMsg += '\n\n📍 You are ' + data.distance_to_nearest_office + 'm from ' + (data.nearest_office || 'office');
                errorMsg += '\n📏 Allowed radius: ' + data.allowed_radius + 'm';
                console.log('🚫 Geofencing details:', {
                    distance: data.distance_to_nearest_office,
                    allowed_radius: data.allowed_radius,
                    nearest_office: data.nearest_office
                });
            }
            alert(errorMsg);
        }
    })
    .catch(error => {
        console.error('💥 Clock-in request failed:', error);
        button.disabled = false;
        button.innerHTML = originalText;
        alert('❌ Clock-in failed: ' + error.message);
    });
}

function quickClockOut() {
    const employeeId = document.getElementById('employee-select').value;
    
    if (!employeeId) {
        alert('Please select an employee first');
        return;
    }

    const button = event.target;
    const originalText = button.innerHTML;
    button.disabled = true;
    button.innerHTML = '<i class="bi bi-hourglass-split"></i> Clocking Out...';

    fetch('{{ route('companies.hr.attendance.clock-out', $company) }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: JSON.stringify({
            employee_id: employeeId,
            _token: '{{ csrf_token() }}'
        })
    })
    .then(response => response.json())
    .then(data => {
        button.disabled = false;
        button.innerHTML = originalText;
        
        if (data.success) {
            alert('✅ ' + data.success);
            // Refresh the page to show updated attendance
            location.reload();
        } else if (data.error) {
            alert('❌ ' + data.error);
        }
    })
    .catch(error => {
        button.disabled = false;
        button.innerHTML = originalText;
        alert('❌ Clock-out failed: ' + error.message);
        console.error('Clock-out error:', error);
    });
}

function exportAttendance() {
    // Get current filter parameters
    const form = document.querySelector('form[method="GET"]');
    const formData = new FormData(form);
    const params = new URLSearchParams(formData);

    // Add export parameter and redirect
    params.set('export', '1');
    window.location.href = `{{ route('companies.hr.attendance.index', $company) }}?${params.toString()}`;
}

function showReportForm(type) {
    // Toggle button states
    const individualBtn = document.getElementById('individual-report-btn');
    const shiftBtn = document.getElementById('shift-report-btn');
    const individualForm = document.getElementById('individual-report-form');
    const shiftForm = document.getElementById('shift-report-form');

    if (type === 'individual') {
        individualBtn.className = 'btn btn-info me-2';
        shiftBtn.className = 'btn btn-outline-secondary';
        individualForm.style.display = 'block';
        shiftForm.style.display = 'none';
    } else {
        individualBtn.className = 'btn btn-outline-secondary me-2';
        shiftBtn.className = 'btn btn-info';
        individualForm.style.display = 'none';
        shiftForm.style.display = 'block';
    }
}

// OT Employee Selection Handler
document.addEventListener('DOMContentLoaded', function() {
    const otEmployeeSelect = document.getElementById('ot_employee_select');
    if (otEmployeeSelect) {
        otEmployeeSelect.addEventListener('change', function() {
            const selectedOption = this.options[this.selectedIndex];
            if (selectedOption && selectedOption.disabled) {
                alert('This employee is not entitled to overtime. Executive/Management positions cannot request overtime.');
                this.value = '';
            }
        });
    }
});
</script>
@endpush
@endsection