@extends('layouts.app')
@section('title', 'Quick Clock - Blackberry Farm')
@section('content')

    <!-- Page Header -->
    <div class="page-header">
        <h1>⏰ Quick Clock In/Out</h1>
        <p>Fast clock in/out interface for all employees</p>
    </div>
    
    <!-- Quick Navigation -->
    <div class="responsive-grid cols-4" style="margin-bottom: 30px;">
        <a href="/timecards" class="touch-btn touch-btn-primary">📊 Weekly View</a>
        <a href="/timecards/daily" class="touch-btn touch-btn-primary">📅 Daily View</a>
        <a href="/timecards/payroll-summary" class="touch-btn touch-btn-warning">💰 Payroll Summary</a>
        <a href="/employees" class="touch-btn touch-btn-primary">👥 Manage Employees</a>
    </div>

    <!-- Current Time Display -->
    <div class="mobile-card" style="text-align: center; margin-bottom: 30px;">
        <h3>⏰ Current Time</h3>
        <div style="font-size: 2.5em; font-weight: bold; color: var(--blackberry-purple); margin: 10px 0;" id="currentTime">
            {{ now()->format('g:i:s A') }}
        </div>
        <div style="font-size: 1.2em; color: var(--soil-brown);">
            {{ now()->format('l, F j, Y') }}
        </div>
    </div>

    <!-- Bulk Actions -->
    <div class="mobile-card" style="margin-bottom: 30px;">
        <h3>🚀 Bulk Actions</h3>
        <form method="POST" action="/timecards/bulk-clock" id="bulkActionForm">
            @csrf
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin: 20px 0;">
                <div>
                    <label style="display: block; margin-bottom: 8px; font-weight: 600; color: var(--soil-brown);">Select Action</label>
                    <select name="action" class="form-control" style="width: 100%; padding: 12px; border: 2px solid var(--medium-gray); border-radius: 8px;">
                        <option value="clock_in">🟢 Clock In All Selected</option>
                        <option value="clock_out">🔴 Clock Out All Selected</option>
                    </select>
                </div>
                <div style="align-self: end;">
                    <button type="submit" class="touch-btn touch-btn-success" style="width: 100%;">
                        🚀 Execute Bulk Action
                    </button>
                </div>
            </div>
            
            <!-- Select All Checkbox -->
            <div style="margin: 20px 0; padding: 15px; background: rgba(106, 27, 154, 0.05); border-radius: 8px;">
                <label style="display: flex; align-items: center; gap: 10px; font-weight: 600;">
                    <input type="checkbox" id="selectAll" style="transform: scale(1.2);">
                    Select All Employees
                </label>
            </div>
        </form>
    </div>

    <!-- Employee Quick Clock Interface -->
    @if($employees->count() > 0)
    <div class="mobile-card">
        <h3>👥 Employee Clock In/Out</h3>
        
        <div style="display: grid; gap: 15px; margin: 20px 0;">
            @foreach($employees as $employee)
            <div style="border: 2px solid var(--medium-gray); border-radius: 12px; padding: 20px; background: white; transition: all 0.3s;">
                <div style="display: flex; align-items: center; justify-content: space-between; gap: 15px;">
                    <!-- Employee Info -->
                    <div style="display: flex; align-items: center; gap: 15px; flex: 1;">
                        <input type="checkbox" name="employee_ids[]" value="{{ $employee->id }}" form="bulkActionForm" 
                               class="employee-checkbox" style="transform: scale(1.3);">
                        
                        <div style="width: 50px; height: 50px; border-radius: 50%; background: var(--blackberry-purple); color: white; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1.2em;">
                            {{ substr($employee->first_name, 0, 1) }}{{ substr($employee->last_name, 0, 1) }}
                        </div>
                        
                        <div style="flex: 1;">
                            <div style="font-weight: 700; font-size: 1.1em; color: var(--blackberry-purple);">
                                {{ $employee->first_name }} {{ $employee->last_name }}
                            </div>
                            <div style="font-size: 0.9em; color: var(--soil-brown);">
                                {{ ucwords(str_replace('_', ' ', $employee->department)) }} • {{ $employee->position }}
                            </div>
                            
                            <!-- Clock Status -->
                            @if($employee->is_clocked_in)
                                <div style="margin-top: 5px;">
                                    <span style="background: var(--leaf-green); color: white; padding: 3px 8px; border-radius: 12px; font-size: 0.8em; font-weight: bold;">
                                        🟢 Clocked In at {{ $employee->current_shift->clock_in->format('g:i A') }}
                                    </span>
                                </div>
                            @else
                                <div style="margin-top: 5px;">
                                    <span style="background: #6c757d; color: white; padding: 3px 8px; border-radius: 12px; font-size: 0.8em; font-weight: bold;">
                                        ⚪ Not Clocked In
                                    </span>
                                </div>
                            @endif
                        </div>
                    </div>
                    
                    <!-- Quick Action Buttons -->
                    <div style="display: flex; gap: 8px; flex-shrink: 0;">
                        @if($employee->is_clocked_in)
                            <a href="/employees/{{ $employee->id }}/timesheet/clock-out" 
                               class="touch-btn touch-btn-warning" 
                               style="padding: 8px 12px; font-size: 0.9em; white-space: nowrap;">
                                🔴 Clock Out
                            </a>
                        @else
                            <a href="/employees/{{ $employee->id }}/timesheet/clock-in" 
                               class="touch-btn touch-btn-success" 
                               style="padding: 8px 12px; font-size: 0.9em; white-space: nowrap;">
                                🟢 Clock In
                            </a>
                        @endif
                        
                        <a href="/employees/{{ $employee->id }}/timesheet" 
                           class="touch-btn touch-btn-primary" 
                           style="padding: 8px 12px; font-size: 0.9em; white-space: nowrap;">
                            📋 View
                        </a>
                    </div>
                </div>
                
                <!-- Today's Hours Summary -->
                @if($employee->current_shift && $employee->current_shift->total_hours > 0)
                <div style="margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--medium-gray);">
                    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; text-align: center;">
                        <div>
                            <div style="font-size: 1.2em; font-weight: bold; color: var(--leaf-green);">
                                {{ number_format($employee->current_shift->total_hours, 1) }}h
                            </div>
                            <div style="font-size: 0.8em; color: var(--soil-brown);">Total Hours</div>
                        </div>
                        @if($employee->current_shift->overtime_hours > 0)
                        <div>
                            <div style="font-size: 1.2em; font-weight: bold; color: #FF8F00;">
                                {{ number_format($employee->current_shift->overtime_hours, 1) }}h
                            </div>
                            <div style="font-size: 0.8em; color: var(--soil-brown);">Overtime</div>
                        </div>
                        @endif
                        <div>
                            <div style="font-size: 1.2em; font-weight: bold; color: var(--blackberry-purple);">
                                ${{ number_format($employee->current_shift->total_pay, 2) }}
                            </div>
                            <div style="font-size: 0.8em; color: var(--soil-brown);">Today's Pay</div>
                        </div>
                    </div>
                </div>
                @endif
            </div>
            @endforeach
        </div>
    </div>
    @else
    <div style="text-align: center; color: #6c757d; padding: 40px;">
        <h4>No Employees Found</h4>
        <p>No active employees found for clock management.</p>
        <a href="/employees/create" class="touch-btn touch-btn-success">Add First Employee</a>
    </div>
    @endif

    <!-- Success/Error Messages -->
    @if(session('success'))
    <div style="background: var(--leaf-green); color: white; padding: 15px; border-radius: 8px; margin: 20px 0;">
        ✅ {{ session('success') }}
    </div>
    @endif

    @if(session('error'))
    <div style="background: var(--berry-red); color: white; padding: 15px; border-radius: 8px; margin: 20px 0;">
        ❌ {{ session('error') }}
    </div>
    @endif

@endsection

@push('scripts')
<script>
// Real-time clock update
function updateTime() {
    const now = new Date();
    const timeString = now.toLocaleTimeString('en-US', {
        hour: 'numeric',
        minute: '2-digit',
        second: '2-digit',
        hour12: true
    });
    document.getElementById('currentTime').textContent = timeString;
}

// Update time every second
setInterval(updateTime, 1000);

// Select All functionality
document.getElementById('selectAll').addEventListener('change', function() {
    const checkboxes = document.querySelectorAll('.employee-checkbox');
    checkboxes.forEach(checkbox => {
        checkbox.checked = this.checked;
    });
});

// Update select all state when individual checkboxes change
document.querySelectorAll('.employee-checkbox').forEach(checkbox => {
    checkbox.addEventListener('change', function() {
        const allCheckboxes = document.querySelectorAll('.employee-checkbox');
        const checkedBoxes = document.querySelectorAll('.employee-checkbox:checked');
        const selectAllBox = document.getElementById('selectAll');
        
        if (checkedBoxes.length === 0) {
            selectAllBox.indeterminate = false;
            selectAllBox.checked = false;
        } else if (checkedBoxes.length === allCheckboxes.length) {
            selectAllBox.indeterminate = false;
            selectAllBox.checked = true;
        } else {
            selectAllBox.indeterminate = true;
        }
    });
});

// Bulk action form validation
document.getElementById('bulkActionForm').addEventListener('submit', function(e) {
    const checkedBoxes = document.querySelectorAll('.employee-checkbox:checked');
    if (checkedBoxes.length === 0) {
        e.preventDefault();
        alert('Please select at least one employee for the bulk action.');
        return false;
    }
    
    const action = document.querySelector('select[name="action"]').value;
    const actionText = action === 'clock_in' ? 'clock in' : 'clock out';
    
    if (!confirm(`Are you sure you want to ${actionText} ${checkedBoxes.length} employee(s)?`)) {
        e.preventDefault();
        return false;
    }
});

// Add visual feedback for clock actions
document.querySelectorAll('a[href*="clock-"]').forEach(link => {
    link.addEventListener('click', function() {
        this.style.opacity = '0.6';
        this.style.pointerEvents = 'none';
        const originalText = this.textContent;
        this.textContent = 'Processing...';
        
        // Reset after 5 seconds in case of navigation issues
        setTimeout(() => {
            this.style.opacity = '';
            this.style.pointerEvents = '';
            this.textContent = originalText;
        }, 5000);
    });
});
</script>
@endpush