@extends('layouts.app')
@section('title', 'Add New Employee - Blackberry Farm')
@section('content')

    <!-- Page Header -->
    <div class="page-header">
        <h1>👥 Add New Employee</h1>
        <p>Employee onboarding and bio data collection</p>
        <p class="subtitle">Complete employee information for payroll and workforce management</p>
    </div>

    <!-- Quick Navigation -->
    <div class="responsive-grid cols-3" style="margin-bottom: 30px;">
        <a href="/employees" class="touch-btn touch-btn-primary">← Back to Employees</a>
        <a href="/employees/bulk-import" class="touch-btn touch-btn-warning">📋 Bulk Import</a>
        <a href="/employees/templates" class="touch-btn touch-btn-success">📄 Templates</a>
    </div>

    <form method="POST" action="/employees" enctype="multipart/form-data">
        @csrf

        <!-- 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') }}" 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') }}" 
                           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') }}" 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') }}">
                </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') == 'male' ? 'selected' : '' }}>Male</option>
                        <option value="female" {{ old('gender') == 'female' ? 'selected' : '' }}>Female</option>
                        <option value="other" {{ old('gender') == 'other' ? 'selected' : '' }}>Other</option>
                        <option value="prefer_not_to_say" {{ old('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') == 'single' ? 'selected' : '' }}>Single</option>
                        <option value="married" {{ old('marital_status') == 'married' ? 'selected' : '' }}>Married</option>
                        <option value="divorced" {{ old('marital_status') == 'divorced' ? 'selected' : '' }}>Divorced</option>
                        <option value="widowed" {{ old('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') }}" 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') }}" 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') }}" 
                           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') }}</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', 'EMP-' . date('Y') . '-' . str_pad(rand(1, 9999), 4, '0', STR_PAD_LEFT)) }}" 
                           placeholder="Auto-generated if blank">
                </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="administration" {{ old('department') == 'administration' ? 'selected' : '' }}>Management</option>
                        <option value="field_operations" {{ old('department') == 'field_operations' ? 'selected' : '' }}>Field Operations</option>
                        <option value="maintenance" {{ old('department') == 'maintenance' ? 'selected' : '' }}>Maintenance</option>
                        <option value="harvest" {{ old('department') == 'harvest' ? 'selected' : '' }}>Harvest</option>
                        <option value="administration" {{ old('department') == 'administration' ? 'selected' : '' }}>Administration</option>
                        <option value="quality_control" {{ old('department') == 'quality_control' ? 'selected' : '' }}>Quality Control</option>
                        <option value="security" {{ old('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') }}" 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', date('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') == 'full_time' ? 'selected' : '' }}>Full Time</option>
                        <option value="part_time" {{ old('employment_type') == 'part_time' ? 'selected' : '' }}>Part Time</option>
                        <option value="seasonal" {{ old('employment_type') == 'seasonal' ? 'selected' : '' }}>Seasonal</option>
                        <option value="contract" {{ old('employment_type') == 'contract' ? 'selected' : '' }}>Contract</option>
                        <option value="temporary" {{ old('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', 'active') == 'active' ? 'selected' : '' }}>Active</option>
                        <option value="inactive" {{ old('status') == 'inactive' ? 'selected' : '' }}>Inactive</option>
                        <option value="on_leave" {{ old('status') == 'on_leave' ? 'selected' : '' }}>On Leave</option>
                        <option value="terminated" {{ old('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') == 'hourly' ? 'selected' : '' }}>Hourly</option>
                        <option value="salary" {{ old('pay_type') == 'salary' ? 'selected' : '' }}>Salary</option>
                        <option value="piece_rate" {{ old('pay_type') == 'piece_rate' ? 'selected' : '' }}>Piece Rate</option>
                        <option value="commission" {{ old('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') }}" 
                               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') }}" 
                               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') }}" 
                               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') == 'weekly' ? 'selected' : '' }}>Weekly</option>
                        <option value="bi_weekly" {{ old('pay_frequency') == 'bi_weekly' ? 'selected' : '' }}>Bi-Weekly</option>
                        <option value="semi_monthly" {{ old('pay_frequency') == 'semi_monthly' ? 'selected' : '' }}>Semi-Monthly</option>
                        <option value="monthly" {{ old('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') }}" 
                           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') }}" 
                           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') }}" 
                           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') }}" 
                           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') }}</textarea>
            </div>

            <div class="form-group">
                <label for="profile_photo" class="form-label">Profile Photo</label>
                <input type="file" id="profile_photo" name="profile_photo" class="form-control" 
                       accept="image/*">
                <small style="color: #6c757d;">Upload employee photo for identification (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;">
                👥 Create Employee Record
            </button>
            <a href="/employees" 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