@extends('layouts.app')
@section('title', 'Edit Timesheet - ' . $employee->first_name . ' ' . $employee->last_name)
@section('content')

    <!-- Page Header -->
    <div class="page-header">
        <h1>✏️ Edit Timesheet</h1>
        <p>Edit timesheet entry for {{ $employee->first_name }} {{ $employee->last_name }}</p>
        <p class="subtitle">{{ $timesheet->date->format('l, F j, Y') }}</p>
    </div>
    
    <!-- Quick Navigation -->
    <div class="responsive-grid cols-3" style="margin-bottom: 30px;">
        <a href="/employees/{{ $employee->id }}/timesheet" class="touch-btn touch-btn-primary">← Back to Timesheet</a>
        <a href="/employees/{{ $employee->id }}" class="touch-btn touch-btn-primary">👤 Employee Profile</a>
        <a href="/timecards/daily?date={{ $timesheet->date->format('Y-m-d') }}" class="touch-btn touch-btn-primary">📅 Daily View</a>
    </div>

    <!-- Current Timesheet Info -->
    <div class="mobile-card" style="margin-bottom: 30px; background: rgba(106, 27, 154, 0.05);">
        <h3>📋 Current Entry Details</h3>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin: 15px 0;">
            <div>
                <div style="font-weight: 600; color: var(--soil-brown); margin-bottom: 5px;">Clock In Time</div>
                <div style="font-size: 1.1em; color: var(--blackberry-purple);">
                    {{ $timesheet->clock_in ? $timesheet->clock_in->format('g:i A') : 'Not set' }}
                </div>
            </div>
            <div>
                <div style="font-weight: 600; color: var(--soil-brown); margin-bottom: 5px;">Clock Out Time</div>
                <div style="font-size: 1.1em; color: var(--blackberry-purple);">
                    {{ $timesheet->clock_out ? $timesheet->clock_out->format('g:i A') : 'Still working' }}
                </div>
            </div>
            <div>
                <div style="font-weight: 600; color: var(--soil-brown); margin-bottom: 5px;">Total Hours</div>
                <div style="font-size: 1.1em; font-weight: bold; color: var(--leaf-green);">
                    {{ number_format($timesheet->total_hours ?? 0, 1) }}h
                </div>
            </div>
            <div>
                <div style="font-weight: 600; color: var(--soil-brown); margin-bottom: 5px;">Total Pay</div>
                <div style="font-size: 1.1em; font-weight: bold; color: var(--blackberry-purple);">
                    ${{ number_format($timesheet->total_pay ?? 0, 2) }}
                </div>
            </div>
        </div>
    </div>

    <!-- Edit Form -->
    <div class="mobile-card">
        <h3>✏️ Edit Timesheet Entry</h3>
        
        <form method="POST" action="/employees/{{ $employee->id }}/timesheet/{{ $timesheet->id }}" style="margin-top: 20px;">
            @csrf
            @method('PUT')
            
            <!-- Date -->
            <div style="margin-bottom: 20px;">
                <label for="date" style="display: block; margin-bottom: 8px; font-weight: 600; color: var(--soil-brown);">
                    📅 Date *
                </label>
                <input type="date" 
                       id="date" 
                       name="date" 
                       class="form-control" 
                       value="{{ old('date', $timesheet->date->format('Y-m-d')) }}"
                       style="width: 100%; padding: 12px; border: 2px solid var(--medium-gray); border-radius: 8px; font-size: 16px;"
                       required>
                @error('date')
                    <div style="color: var(--berry-red); font-size: 0.9em; margin-top: 5px;">{{ $message }}</div>
                @enderror
            </div>
            
            <!-- Clock In Time -->
            <div style="margin-bottom: 20px;">
                <label for="clock_in" style="display: block; margin-bottom: 8px; font-weight: 600; color: var(--soil-brown);">
                    🟢 Clock In Time *
                </label>
                <input type="time" 
                       id="clock_in" 
                       name="clock_in" 
                       class="form-control" 
                       value="{{ old('clock_in', $timesheet->clock_in ? $timesheet->clock_in->format('H:i') : '') }}"
                       style="width: 100%; padding: 12px; border: 2px solid var(--medium-gray); border-radius: 8px; font-size: 16px;"
                       required>
                @error('clock_in')
                    <div style="color: var(--berry-red); font-size: 0.9em; margin-top: 5px;">{{ $message }}</div>
                @enderror
            </div>
            
            <!-- Clock Out Time -->
            <div style="margin-bottom: 20px;">
                <label for="clock_out" style="display: block; margin-bottom: 8px; font-weight: 600; color: var(--soil-brown);">
                    🔴 Clock Out Time
                    <small style="color: #6c757d; font-weight: normal;">(Leave empty if still working)</small>
                </label>
                <input type="time" 
                       id="clock_out" 
                       name="clock_out" 
                       class="form-control" 
                       value="{{ old('clock_out', $timesheet->clock_out ? $timesheet->clock_out->format('H:i') : '') }}"
                       style="width: 100%; padding: 12px; border: 2px solid var(--medium-gray); border-radius: 8px; font-size: 16px;">
                @error('clock_out')
                    <div style="color: var(--berry-red); font-size: 0.9em; margin-top: 5px;">{{ $message }}</div>
                @enderror
            </div>
            
            <!-- Break Duration -->
            <div style="margin-bottom: 20px;">
                <label for="break_duration" style="display: block; margin-bottom: 8px; font-weight: 600; color: var(--soil-brown);">
                    ⏸️ Break Duration (minutes)
                </label>
                <input type="number" 
                       id="break_duration" 
                       name="break_duration" 
                       class="form-control" 
                       min="0" 
                       max="480"
                       placeholder="0"
                       value="{{ old('break_duration', $timesheet->break_duration ?? 0) }}"
                       style="width: 100%; padding: 12px; border: 2px solid var(--medium-gray); border-radius: 8px; font-size: 16px;">
                <small style="color: #6c757d; margin-top: 5px; display: block;">Enter break time in minutes (0-480 minutes / 8 hours max)</small>
                @error('break_duration')
                    <div style="color: var(--berry-red); font-size: 0.9em; margin-top: 5px;">{{ $message }}</div>
                @enderror
            </div>
            
            <!-- Notes -->
            <div style="margin-bottom: 30px;">
                <label for="notes" style="display: block; margin-bottom: 8px; font-weight: 600; color: var(--soil-brown);">
                    📝 Notes
                </label>
                <textarea id="notes" 
                          name="notes" 
                          rows="4" 
                          class="form-control" 
                          placeholder="Optional notes about this work period..."
                          style="width: 100%; padding: 12px; border: 2px solid var(--medium-gray); border-radius: 8px; font-size: 16px; resize: vertical;">{{ old('notes', $timesheet->notes) }}</textarea>
                <small style="color: #6c757d; margin-top: 5px; display: block;">Add any relevant notes about tasks, projects, or special circumstances</small>
                @error('notes')
                    <div style="color: var(--berry-red); font-size: 0.9em; margin-top: 5px;">{{ $message }}</div>
                @enderror
            </div>
            
            <!-- Form Actions -->
            <div style="display: flex; gap: 15px; flex-wrap: wrap; justify-content: space-between; align-items: center;">
                <div style="display: flex; gap: 10px; flex-wrap: wrap;">
                    <button type="submit" class="touch-btn touch-btn-success">
                        💾 Update Timesheet
                    </button>
                    <a href="/employees/{{ $employee->id }}/timesheet" class="touch-btn touch-btn-primary">
                        ❌ Cancel
                    </a>
                </div>
                
                <!-- Delete Button -->
                <form method="POST" action="/employees/{{ $employee->id }}/timesheet/{{ $timesheet->id }}" style="display: inline;">
                    @csrf
                    @method('DELETE')
                    <button type="submit" 
                            class="touch-btn" 
                            style="background: var(--berry-red); color: white;"
                            onclick="return confirm('Are you sure you want to delete this timesheet entry? This action cannot be undone.')">
                        🗑️ Delete Entry
                    </button>
                </form>
            </div>
        </form>
    </div>

    <!-- Help Info -->
    <div class="mobile-card" style="background: rgba(56, 142, 60, 0.05); border-left: 4px solid var(--leaf-green); margin-top: 30px;">
        <h3 style="color: var(--leaf-green);">💡 Editing Guidelines</h3>
        <ul style="margin: 15px 0; padding-left: 20px; color: var(--soil-brown);">
            <li style="margin-bottom: 8px;"><strong>Clock Times:</strong> Use 24-hour format or the time picker for accurate entry</li>
            <li style="margin-bottom: 8px;"><strong>Break Duration:</strong> Automatically deducted from total hours worked</li>
            <li style="margin-bottom: 8px;"><strong>Overtime:</strong> Automatically calculated for hours over 8 per day</li>
            <li style="margin-bottom: 8px;"><strong>Pay Calculation:</strong> Updates automatically based on employee's hourly rate</li>
            <li style="margin-bottom: 8px;"><strong>Validation:</strong> System ensures clock out is after clock in time</li>
        </ul>
    </div>

    <!-- 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 calculation preview
function calculateHours() {
    const clockIn = document.getElementById('clock_in').value;
    const clockOut = document.getElementById('clock_out').value;
    const breakDuration = parseInt(document.getElementById('break_duration').value) || 0;
    
    if (clockIn && clockOut) {
        const clockInTime = new Date(`2000-01-01 ${clockIn}`);
        const clockOutTime = new Date(`2000-01-01 ${clockOut}`);
        
        if (clockOutTime > clockInTime) {
            const totalMinutes = (clockOutTime - clockInTime) / (1000 * 60);
            const workMinutes = totalMinutes - breakDuration;
            const workHours = workMinutes / 60;
            
            // Show preview (you could add a preview element to display this)
            console.log(`Calculated hours: ${workHours.toFixed(1)}h`);
        }
    }
}

// Add event listeners for real-time calculation
document.getElementById('clock_in').addEventListener('change', calculateHours);
document.getElementById('clock_out').addEventListener('change', calculateHours);
document.getElementById('break_duration').addEventListener('input', calculateHours);

// Form validation
document.querySelector('form').addEventListener('submit', function(e) {
    const clockIn = document.getElementById('clock_in').value;
    const clockOut = document.getElementById('clock_out').value;
    
    if (clockIn && clockOut) {
        const clockInTime = new Date(`2000-01-01 ${clockIn}`);
        const clockOutTime = new Date(`2000-01-01 ${clockOut}`);
        
        if (clockOutTime <= clockInTime) {
            e.preventDefault();
            alert('Clock out time must be after clock in time.');
            return false;
        }
    }
});

// Auto-calculate when page loads
calculateHours();
</script>
@endpush