@extends('layouts.app')
@section('title', 'Edit Employee - {{ $employee->first_name }} {{ $employee->last_name }} - Blackberry Farm')
@section('content')

    <!-- Page Header -->
    <div class="page-header">
        <h1>✏️ Edit Employee</h1>
        <p>{{ $employee->first_name }} {{ $employee->last_name }} - {{ $employee->position }}</p>
        <p class="subtitle">Update employee information and employment details</p>
    </div>

    <!-- Quick Navigation -->
    <div class="responsive-grid cols-3" style="margin-bottom: 30px;">
        <a href="/employees/{{ $employee->id }}" class="touch-btn touch-btn-primary">← Back to Employee</a>
        <a href="/employees/{{ $employee->id }}/timesheet" class="touch-btn touch-btn-success">⏰ Timesheet</a>
        <a href="/employees" class="touch-btn touch-btn-primary">👥 All Employees</a>
    </div>

    <form method="POST" action="/employees/{{ $employee->id }}" enctype="multipart/form-data">
        @csrf
        @method('PUT')

        <!-- Personal Information -->
        <div class="mobile-card">
            <h3>👤 Personal Information</h3>
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px;">
                <div class="form-group">
                    <label for="first_name" class="form-label">First Name *</label>
                    <input type="text" id="first_name" name="first_name" class="form-control" 
                           value="{{ old('first_name', $employee->first_name) }}" required 
                           placeholder="Enter first name">
                    @error('first_name')
                        <div style="color: var(--berry-red); font-size: 0.9em; margin-top: 5px;">{{ $message }}</div>
                    @enderror
                </div>

                <div class="form-group">
                    <label for="middle_name" class="form-label">Middle Name</label>
                    <input type="text" id="middle_name" name="middle_name" class="form-control" 
                           value="{{ old('middle_name', $employee->middle_name) }}" 
                           placeholder="Enter middle name (optional)">
                </div>

                <div class="form-group">
                    <label for="last_name" class="form-label">Last Name *</label>
                    <input type="text" id="last_name" name="last_name" class="form-control" 
                           value="{{ old('last_name', $employee->last_name) }}" required 
                           placeholder="Enter last name">
                    @error('last_name')
                        <div style="color: var(--berry-red); font-size: 0.9em; margin-top: 5px;">{{ $message }}</div>
                    @enderror
                </div>

                <div class="form-group">
                    <label for="date_of_birth" class="form-label">Date of Birth</label>
                    <input type="date" id="date_of_birth" name="date_of_birth" class="form-control" 
                           value="{{ old('date_of_birth', $employee->date_of_birth ? $employee->date_of_birth->format('Y-m-d') : '') }}">
                </div>

                <div class="form-group">
                    <label for="gender" class="form-label">Gender</label>
                    <select id="gender" name="gender" class="form-control">
                        <option value="">Select Gender</option>
                        <option value="male" {{ old('gender', $employee->gender) == 'male' ? 'selected' : '' }}>Male</option>
                        <option value="female" {{ old('gender', $employee->gender) == 'female' ? 'selected' : '' }}>Female</option>
                        <option value="other" {{ old('gender', $employee->gender) == 'other' ? 'selected' : '' }}>Other</option>
                        <option value="prefer_not_to_say" {{ old('gender', $employee->gender) == 'prefer_not_to_say' ? 'selected' : '' }}>Prefer not to say</option>
                    </select>
                </div>

                <div class="form-group">
                    <label for="marital_status" class="form-label">Marital Status</label>
                    <select id="marital_status" name="marital_status" class="form-control">
                        <option value="">Select Status</option>
                        <option value="single" {{ old('marital_status', $employee->marital_status) == 'single' ? 'selected' : '' }}>Single</option>
                        <option value="married" {{ old('marital_status', $employee->marital_status) == 'married' ? 'selected' : '' }}>Married</option>
                        <option value="divorced" {{ old('marital_status', $employee->marital_status) == 'divorced' ? 'selected' : '' }}>Divorced</option>
                        <option value="widowed" {{ old('marital_status', $employee->marital_status) == 'widowed' ? 'selected' : '' }}>Widowed</option>
                    </select>
                </div>
            </div>
        </div>

        <!-- Contact Information -->
        <div class="mobile-card">
            <h3>📞 Contact Information</h3>
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px;">
                <div class="form-group">
                    <label for="email" class="form-label">Email Address *</label>
                    <input type="email" id="email" name="email" class="form-control" 
                           value="{{ old('email', $employee->email) }}" required 
                           placeholder="employee@example.com">
                    @error('email')
                        <div style="color: var(--berry-red); font-size: 0.9em; margin-top: 5px;">{{ $message }}</div>
                    @enderror
                </div>

                <div class="form-group">
                    <label for="phone_primary" class="form-label">Primary Phone *</label>
                    <input type="tel" id="phone_primary" name="phone_primary" class="form-control" 
                           value="{{ old('phone_primary', $employee->phone_primary) }}" required 
                           placeholder="(555) 123-4567">
                    @error('phone_primary')
                        <div style="color: var(--berry-red); font-size: 0.9em; margin-top: 5px;">{{ $message }}</div>
                    @enderror
                </div>

                <div class="form-group">
                    <label for="phone_secondary" class="form-label">Secondary Phone</label>
                    <input type="tel" id="phone_secondary" name="phone_secondary" class="form-control" 
                           value="{{ old('phone_secondary', $employee->phone_secondary) }}" 
                           placeholder="(555) 987-6543">
                </div>
            </div>

            <div class="form-group">
                <label for="address" class="form-label">Home Address</label>
                <textarea id="address" name="address" class="form-control" rows="3" 
                          placeholder="Street address, city, state, ZIP">{{ old('address', $employee->address) }}</textarea>
            </div>
        </div>

        <!-- Employment Information -->
        <div class="mobile-card">
            <h3>💼 Employment Information</h3>
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px;">
                <div class="form-group">
                    <label for="employee_id" class="form-label">Employee ID</label>
                    <input type="text" id="employee_id" name="employee_id" class="form-control" 
                           value="{{ old('employee_id', $employee->employee_id) }}" 
                           placeholder="Employee ID">
                </div>

                <div class="form-group">
                    <label for="department" class="form-label">Department *</label>
                    <select id="department" name="department" class="form-control" required>
                        <option value="">Select Department</option>
                        <option value="field_operations" {{ old('department', $employee->department) == 'field_operations' ? 'selected' : '' }}>Field Operations</option>
                        <option value="maintenance" {{ old('department', $employee->department) == 'maintenance' ? 'selected' : '' }}>Maintenance</option>
                        <option value="harvest" {{ old('department', $employee->department) == 'harvest' ? 'selected' : '' }}>Harvest</option>
                        <option value="administration" {{ old('department', $employee->department) == 'administration' ? 'selected' : '' }}>Administration</option>
                        <option value="quality_control" {{ old('department', $employee->department) == 'quality_control' ? 'selected' : '' }}>Quality Control</option>
                        <option value="security" {{ old('department', $employee->department) == 'security' ? 'selected' : '' }}>Security</option>
                    </select>
                    @error('department')
                        <div style="color: var(--berry-red); font-size: 0.9em; margin-top: 5px;">{{ $message }}</div>
                    @enderror
                </div>

                <div class="form-group">
                    <label for="position" class="form-label">Position/Job Title *</label>
                    <input type="text" id="position" name="position" class="form-control" 
                           value="{{ old('position', $employee->position) }}" required 
                           placeholder="e.g., Farm Worker, Supervisor, Manager">
                    @error('position')
                        <div style="color: var(--berry-red); font-size: 0.9em; margin-top: 5px;">{{ $message }}</div>
                    @enderror
                </div>

                <div class="form-group">
                    <label for="hire_date" class="form-label">Hire Date *</label>
                    <input type="date" id="hire_date" name="hire_date" class="form-control" 
                           value="{{ old('hire_date', $employee->hire_date ? $employee->hire_date->format('Y-m-d') : '') }}" required>
                    @error('hire_date')
                        <div style="color: var(--berry-red); font-size: 0.9em; margin-top: 5px;">{{ $message }}</div>
                    @enderror
                </div>

                <div class="form-group">
                    <label for="employment_type" class="form-label">Employment Type *</label>
                    <select id="employment_type" name="employment_type" class="form-control" required>
                        <option value="">Select Type</option>
                        <option value="full_time" {{ old('employment_type', $employee->employment_type) == 'full_time' ? 'selected' : '' }}>Full Time</option>
                        <option value="part_time" {{ old('employment_type', $employee->employment_type) == 'part_time' ? 'selected' : '' }}>Part Time</option>
                        <option value="seasonal" {{ old('employment_type', $employee->employment_type) == 'seasonal' ? 'selected' : '' }}>Seasonal</option>
                        <option value="contract" {{ old('employment_type', $employee->employment_type) == 'contract' ? 'selected' : '' }}>Contract</option>
                        <option value="temporary" {{ old('employment_type', $employee->employment_type) == 'temporary' ? 'selected' : '' }}>Temporary</option>
                    </select>
                    @error('employment_type')
                        <div style="color: var(--berry-red); font-size: 0.9em; margin-top: 5px;">{{ $message }}</div>
                    @enderror
                </div>

                <div class="form-group">
                    <label for="status" class="form-label">Status</label>
                    <select id="status" name="status" class="form-control">
                        <option value="active" {{ old('status', $employee->status) == 'active' ? 'selected' : '' }}>Active</option>
                        <option value="inactive" {{ old('status', $employee->status) == 'inactive' ? 'selected' : '' }}>Inactive</option>
                        <option value="on_leave" {{ old('status', $employee->status) == 'on_leave' ? 'selected' : '' }}>On Leave</option>
                        <option value="terminated" {{ old('status', $employee->status) == 'terminated' ? 'selected' : '' }}>Terminated</option>
                    </select>
                </div>
            </div>
        </div>

        <!-- Wage and Pay Information -->
        <div class="mobile-card">
            <h3>💰 Wage and Pay Information</h3>
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px;">
                <div class="form-group">
                    <label for="pay_type" class="form-label">Pay Type *</label>
                    <select id="pay_type" name="pay_type" class="form-control" required onchange="togglePayFields()">
                        <option value="">Select Pay Type</option>
                        <option value="hourly" {{ old('pay_type', $employee->pay_type) == 'hourly' ? 'selected' : '' }}>Hourly</option>
                        <option value="salary" {{ old('pay_type', $employee->pay_type) == 'salary' ? 'selected' : '' }}>Salary</option>
                        <option value="piece_rate" {{ old('pay_type', $employee->pay_type) == 'piece_rate' ? 'selected' : '' }}>Piece Rate</option>
                        <option value="commission" {{ old('pay_type', $employee->pay_type) == 'commission' ? 'selected' : '' }}>Commission</option>
                    </select>
                    @error('pay_type')
                        <div style="color: var(--berry-red); font-size: 0.9em; margin-top: 5px;">{{ $message }}</div>
                    @enderror
                </div>

                <div class="form-group" id="hourly_rate_field">
                    <label for="hourly_rate" class="form-label">Hourly Rate *</label>
                    <div style="position: relative;">
                        <span style="position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: #6c757d;">$</span>
                        <input type="number" id="hourly_rate" name="hourly_rate" class="form-control" 
                               style="padding-left: 25px;" step="0.01" min="0" 
                               value="{{ old('hourly_rate', $employee->hourly_rate) }}" 
                               placeholder="15.00">
                    </div>
                    @error('hourly_rate')
                        <div style="color: var(--berry-red); font-size: 0.9em; margin-top: 5px;">{{ $message }}</div>
                    @enderror
                </div>

                <div class="form-group" id="annual_salary_field" style="display: none;">
                    <label for="annual_salary" class="form-label">Annual Salary</label>
                    <div style="position: relative;">
                        <span style="position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: #6c757d;">$</span>
                        <input type="number" id="annual_salary" name="annual_salary" class="form-control" 
                               style="padding-left: 25px;" step="0.01" min="0" 
                               value="{{ old('annual_salary', $employee->annual_salary) }}" 
                               placeholder="35000.00">
                    </div>
                </div>

                <div class="form-group">
                    <label for="overtime_rate" class="form-label">Overtime Rate (Optional)</label>
                    <div style="position: relative;">
                        <span style="position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: #6c757d;">$</span>
                        <input type="number" id="overtime_rate" name="overtime_rate" class="form-control" 
                               style="padding-left: 25px;" step="0.01" min="0" 
                               value="{{ old('overtime_rate', $employee->overtime_rate) }}" 
                               placeholder="22.50">
                    </div>
                    <small style="color: #6c757d;">Leave blank to auto-calculate at 1.5x regular rate</small>
                </div>

                <div class="form-group">
                    <label for="pay_frequency" class="form-label">Pay Frequency *</label>
                    <select id="pay_frequency" name="pay_frequency" class="form-control" required>
                        <option value="">Select Frequency</option>
                        <option value="weekly" {{ old('pay_frequency', $employee->pay_frequency) == 'weekly' ? 'selected' : '' }}>Weekly</option>
                        <option value="bi_weekly" {{ old('pay_frequency', $employee->pay_frequency) == 'bi_weekly' ? 'selected' : '' }}>Bi-Weekly</option>
                        <option value="semi_monthly" {{ old('pay_frequency', $employee->pay_frequency) == 'semi_monthly' ? 'selected' : '' }}>Semi-Monthly</option>
                        <option value="monthly" {{ old('pay_frequency', $employee->pay_frequency) == 'monthly' ? 'selected' : '' }}>Monthly</option>
                    </select>
                    @error('pay_frequency')
                        <div style="color: var(--berry-red); font-size: 0.9em; margin-top: 5px;">{{ $message }}</div>
                    @enderror
                </div>

                <div class="form-group">
                    <label for="tax_id" class="form-label">Tax ID (SSN/TIN)</label>
                    <input type="text" id="tax_id" name="tax_id" class="form-control" 
                           value="{{ old('tax_id', $employee->tax_id) }}" 
                           placeholder="XXX-XX-XXXX">
                    <small style="color: #6c757d;">Required for payroll processing</small>
                </div>
            </div>
        </div>

        <!-- Emergency Contact Information -->
        <div class="mobile-card">
            <h3>🚨 Emergency Contact Information</h3>
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px;">
                <div class="form-group">
                    <label for="emergency_contact_name" class="form-label">Emergency Contact Name</label>
                    <input type="text" id="emergency_contact_name" name="emergency_contact_name" class="form-control" 
                           value="{{ old('emergency_contact_name', $employee->emergency_contact_name) }}" 
                           placeholder="Full name of emergency contact">
                </div>

                <div class="form-group">
                    <label for="emergency_contact_relationship" class="form-label">Relationship</label>
                    <input type="text" id="emergency_contact_relationship" name="emergency_contact_relationship" class="form-control" 
                           value="{{ old('emergency_contact_relationship', $employee->emergency_contact_relationship) }}" 
                           placeholder="e.g., Spouse, Parent, Sibling">
                </div>

                <div class="form-group">
                    <label for="emergency_contact_phone" class="form-label">Emergency Contact Phone</label>
                    <input type="tel" id="emergency_contact_phone" name="emergency_contact_phone" class="form-control" 
                           value="{{ old('emergency_contact_phone', $employee->emergency_contact_phone) }}" 
                           placeholder="(555) 123-4567">
                </div>
            </div>
        </div>

        <!-- Additional Information -->
        <div class="mobile-card">
            <h3>📄 Additional Information</h3>
            <div class="form-group">
                <label for="notes" class="form-label">Notes</label>
                <textarea id="notes" name="notes" class="form-control" rows="4" 
                          placeholder="Additional notes about the employee, skills, certifications, etc.">{{ old('notes', $employee->notes) }}</textarea>
            </div>

            <div class="form-group">
                <label for="profile_photo" class="form-label">Profile Photo</label>
                @if($employee->profile_photo)
                    <div style="margin-bottom: 10px;">
                        <img src="{{ asset('storage/' . $employee->profile_photo) }}" alt="Current Profile Photo" 
                             style="width: 80px; height: 80px; border-radius: 50%; object-fit: cover;">
                        <small style="display: block; color: #6c757d;">Current photo</small>
                    </div>
                @endif
                <input type="file" id="profile_photo" name="profile_photo" class="form-control" 
                       accept="image/*">
                <small style="color: #6c757d;">Upload new photo to replace current one (optional)</small>
            </div>
        </div>

        <!-- Form Actions -->
        <div class="mobile-card" style="text-align: center;">
            <button type="submit" class="touch-btn touch-btn-success" style="margin: 10px;">
                ✏️ Update Employee Record
            </button>
            <a href="/employees/{{ $employee->id }}" class="touch-btn" style="background: #6c757d; color: white; margin: 10px;">
                Cancel
            </a>
        </div>
    </form>

@endsection

@push('scripts')
<script>
function togglePayFields() {
    const payType = document.getElementById('pay_type').value;
    const hourlyField = document.getElementById('hourly_rate_field');
    const salaryField = document.getElementById('annual_salary_field');
    const hourlyInput = document.getElementById('hourly_rate');
    const salaryInput = document.getElementById('annual_salary');
    
    if (payType === 'salary') {
        hourlyField.style.display = 'none';
        salaryField.style.display = 'block';
        hourlyInput.removeAttribute('required');
        salaryInput.setAttribute('required', '');
    } else {
        hourlyField.style.display = 'block';
        salaryField.style.display = 'none';
        salaryInput.removeAttribute('required');
        if (payType === 'hourly' || payType === 'piece_rate') {
            hourlyInput.setAttribute('required', '');
        } else {
            hourlyInput.removeAttribute('required');
        }
    }
}

// Auto-format phone numbers
document.querySelectorAll('input[type="tel"]').forEach(input => {
    input.addEventListener('input', function(e) {
        let value = e.target.value.replace(/\D/g, '');
        if (value.length >= 6) {
            value = `(${value.slice(0,3)}) ${value.slice(3,6)}-${value.slice(6,10)}`;
        } else if (value.length >= 3) {
            value = `(${value.slice(0,3)}) ${value.slice(3)}`;
        }
        e.target.value = value;
    });
});

// Auto-format Tax ID
document.getElementById('tax_id').addEventListener('input', function(e) {
    let value = e.target.value.replace(/\D/g, '');
    if (value.length >= 5) {
        value = `${value.slice(0,3)}-${value.slice(3,5)}-${value.slice(5,9)}`;
    } else if (value.length >= 3) {
        value = `${value.slice(0,3)}-${value.slice(3)}`;
    }
    e.target.value = value;
});

// Initialize pay fields based on current selection
document.addEventListener('DOMContentLoaded', function() {
    togglePayFields();
});
</script>
@endpush