@extends('layouts.employee')

@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">My Profile</h1>
                    <p class="text-muted mb-0">Manage your personal information and account settings</p>
                </div>
                <div>
                    <a href="{{ route('employee.dashboard') }}" class="btn btn-outline-secondary">
                        <i class="bi bi-arrow-left me-2"></i>Dashboard
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-4">
            <!-- Profile Card -->
            <div class="card">
                <div class="card-body text-center">
                    <div class="position-relative d-inline-block mb-3">
                        @if($employee->avatar_path)
                            <img src="{{ Storage::url($employee->avatar_path) }}" 
                                 alt="Profile Picture" 
                                 class="rounded-circle" 
                                 style="width: 120px; height: 120px; object-fit: cover;">
                        @else
                            <div class="rounded-circle bg-primary d-flex align-items-center justify-content-center text-white" 
                                 style="width: 120px; height: 120px; font-size: 3rem;">
                                {{ strtoupper(substr($employee->first_name, 0, 1)) }}{{ strtoupper(substr($employee->last_name, 0, 1)) }}
                            </div>
                        @endif
                        <button class="btn btn-sm btn-outline-primary position-absolute bottom-0 end-0 rounded-circle" 
                                data-bs-toggle="modal" data-bs-target="#avatarModal" title="Change Photo">
                            <i class="bi bi-camera"></i>
                        </button>
                    </div>
                    
                    <h4 class="mb-1">{{ $employee->preferred_name ?? $employee->first_name }} {{ $employee->last_name }}</h4>
                    <p class="text-muted mb-2">{{ $employee->position }}</p>
                    <p class="text-muted mb-3">{{ $employee->department }} • {{ $company->name }}</p>
                    
                    <div class="row text-center">
                        <div class="col-4">
                            <div class="h5 mb-0">{{ $stats['attendance_this_month'] }}</div>
                            <small class="text-muted">Days This Month</small>
                        </div>
                        <div class="col-4">
                            <div class="h5 mb-0">{{ $stats['pending_leaves'] }}</div>
                            <small class="text-muted">Pending Leaves</small>
                        </div>
                        <div class="col-4">
                            <div class="h5 mb-0">{{ $stats['pending_claims'] }}</div>
                            <small class="text-muted">Pending Claims</small>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Quick Stats -->
            <div class="card mt-3">
                <div class="card-header">
                    <h6 class="mb-0">Quick Stats</h6>
                </div>
                <div class="card-body">
                    <div class="d-flex justify-content-between mb-2">
                        <span class="text-muted">Employee ID:</span>
                        <strong>{{ $employee->employee_id }}</strong>
                    </div>
                    <div class="d-flex justify-content-between mb-2">
                        <span class="text-muted">Join Date:</span>
                        <strong>{{ $employee->hire_date ? $employee->hire_date->format('M j, Y') : 'N/A' }}</strong>
                    </div>
                    <div class="d-flex justify-content-between mb-2">
                        <span class="text-muted">Employment Type:</span>
                        <strong>{{ ucfirst($employee->employment_type ?? 'Full-time') }}</strong>
                    </div>
                    <div class="d-flex justify-content-between">
                        <span class="text-muted">Status:</span>
                        <span class="badge bg-success">Active</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-8">
            <!-- Profile Information Tabs -->
            <div class="card">
                <div class="card-header">
                    <ul class="nav nav-tabs card-header-tabs" role="tablist">
                        <li class="nav-item">
                            <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#personal-info" 
                                    type="button" role="tab">Personal Information</button>
                        </li>
                        <li class="nav-item">
                            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#contact-info" 
                                    type="button" role="tab">Contact Details</button>
                        </li>
                        <li class="nav-item">
                            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#emergency-contact" 
                                    type="button" role="tab">Emergency Contact</button>
                        </li>
                        <li class="nav-item">
                            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#security" 
                                    type="button" role="tab">Security</button>
                        </li>
                    </ul>
                </div>
                <div class="card-body">
                    <div class="tab-content">
                        <!-- Personal Information -->
                        <div class="tab-pane fade show active" id="personal-info" role="tabpanel">
                            <form method="POST" action="{{ route('employee.profile.update') }}">
                                @csrf
                                @method('PUT')
                                <input type="hidden" name="section" value="personal">
                                
                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <label for="first_name" class="form-label">First Name <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control @error('first_name') is-invalid @enderror" 
                                               id="first_name" name="first_name" value="{{ old('first_name', $employee->first_name) }}" required>
                                        @error('first_name')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-md-6">
                                        <label for="last_name" class="form-label">Last Name <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control @error('last_name') is-invalid @enderror" 
                                               id="last_name" name="last_name" value="{{ old('last_name', $employee->last_name) }}" required>
                                        @error('last_name')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <label for="preferred_name" class="form-label">Preferred Name</label>
                                        <input type="text" class="form-control @error('preferred_name') is-invalid @enderror" 
                                               id="preferred_name" name="preferred_name" value="{{ old('preferred_name', $employee->preferred_name) }}">
                                        @error('preferred_name')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-md-6">
                                        <label for="email" class="form-label">Work Email <span class="text-danger">*</span></label>
                                        <input type="email" class="form-control @error('email') is-invalid @enderror" 
                                               id="email" name="email" value="{{ old('email', $user->email) }}" required>
                                        @error('email')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <label for="phone" class="form-label">Phone Number</label>
                                        <input type="tel" class="form-control @error('phone') is-invalid @enderror" 
                                               id="phone" name="phone" value="{{ old('phone', $employee->phone) }}">
                                        @error('phone')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-md-6">
                                        <label for="date_of_birth" class="form-label">Date of Birth</label>
                                        <input type="date" class="form-control @error('date_of_birth') is-invalid @enderror" 
                                               id="date_of_birth" name="date_of_birth" value="{{ old('date_of_birth', $employee->date_of_birth ? $employee->date_of_birth->format('Y-m-d') : '') }}">
                                        @error('date_of_birth')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <label for="gender" class="form-label">Gender</label>
                                        <select class="form-select @error('gender') is-invalid @enderror" id="gender" name="gender">
                                            <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>
                                        </select>
                                        @error('gender')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-md-6">
                                        <label for="marital_status" class="form-label">Marital Status</label>
                                        <select class="form-select @error('marital_status') is-invalid @enderror" id="marital_status" name="marital_status">
                                            <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>
                                        @error('marital_status')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <div class="d-flex justify-content-end">
                                    <button type="submit" class="btn btn-primary">
                                        <i class="bi bi-check-circle me-2"></i>Update Personal Information
                                    </button>
                                </div>
                            </form>
                        </div>

                        <!-- Contact Information -->
                        <div class="tab-pane fade" id="contact-info" role="tabpanel">
                            <form method="POST" action="{{ route('employee.profile.update') }}">
                                @csrf
                                @method('PUT')
                                <input type="hidden" name="section" value="contact">
                                
                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <label for="personal_email" class="form-label">Personal Email</label>
                                        <input type="email" class="form-control @error('personal_email') is-invalid @enderror" 
                                               id="personal_email" name="personal_email" value="{{ old('personal_email', $employee->personal_email) }}">
                                        @error('personal_email')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-md-6">
                                        <label for="mobile_phone" class="form-label">Mobile Phone</label>
                                        <input type="tel" class="form-control @error('mobile_phone') is-invalid @enderror" 
                                               id="mobile_phone" name="mobile_phone" value="{{ old('mobile_phone', $employee->mobile_phone) }}">
                                        @error('mobile_phone')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <div class="mb-3">
                                    <label for="home_phone" class="form-label">Home Phone</label>
                                    <input type="tel" class="form-control @error('home_phone') is-invalid @enderror" 
                                           id="home_phone" name="home_phone" value="{{ old('home_phone', $employee->home_phone) }}">
                                    @error('home_phone')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <h6 class="text-primary mb-3">Address Information</h6>

                                <div class="mb-3">
                                    <label for="address_line_1" class="form-label">Address Line 1</label>
                                    <input type="text" class="form-control @error('address_line_1') is-invalid @enderror" 
                                           id="address_line_1" name="address_line_1" value="{{ old('address_line_1', $employee->address_line_1) }}">
                                    @error('address_line_1')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="mb-3">
                                    <label for="address_line_2" class="form-label">Address Line 2</label>
                                    <input type="text" class="form-control @error('address_line_2') is-invalid @enderror" 
                                           id="address_line_2" name="address_line_2" value="{{ old('address_line_2', $employee->address_line_2) }}">
                                    @error('address_line_2')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="row mb-3">
                                    <div class="col-md-4">
                                        <label for="city" class="form-label">City</label>
                                        <input type="text" class="form-control @error('city') is-invalid @enderror" 
                                               id="city" name="city" value="{{ old('city', $employee->city) }}">
                                        @error('city')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-md-4">
                                        <label for="state" class="form-label">State</label>
                                        <input type="text" class="form-control @error('state') is-invalid @enderror" 
                                               id="state" name="state" value="{{ old('state', $employee->state) }}">
                                        @error('state')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-md-4">
                                        <label for="postal_code" class="form-label">Postal Code</label>
                                        <input type="text" class="form-control @error('postal_code') is-invalid @enderror" 
                                               id="postal_code" name="postal_code" value="{{ old('postal_code', $employee->postal_code) }}">
                                        @error('postal_code')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <div class="mb-3">
                                    <label for="country" class="form-label">Country</label>
                                    <input type="text" class="form-control @error('country') is-invalid @enderror" 
                                           id="country" name="country" value="{{ old('country', $employee->country ?? 'Malaysia') }}">
                                    @error('country')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="d-flex justify-content-end">
                                    <button type="submit" class="btn btn-primary">
                                        <i class="bi bi-check-circle me-2"></i>Update Contact Information
                                    </button>
                                </div>
                            </form>
                        </div>

                        <!-- Emergency Contact -->
                        <div class="tab-pane fade" id="emergency-contact" role="tabpanel">
                            <form method="POST" action="{{ route('employee.profile.update') }}">
                                @csrf
                                @method('PUT')
                                <input type="hidden" name="section" value="emergency">
                                
                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <label for="emergency_contact_name" class="form-label">Contact Name <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control @error('emergency_contact_name') is-invalid @enderror" 
                                               id="emergency_contact_name" name="emergency_contact_name" 
                                               value="{{ old('emergency_contact_name', $employee->emergency_contact_name) }}" required>
                                        @error('emergency_contact_name')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-md-6">
                                        <label for="emergency_contact_relationship" class="form-label">Relationship <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control @error('emergency_contact_relationship') is-invalid @enderror" 
                                               id="emergency_contact_relationship" name="emergency_contact_relationship" 
                                               value="{{ old('emergency_contact_relationship', $employee->emergency_contact_relationship) }}" 
                                               placeholder="e.g., Spouse, Parent, Sibling" required>
                                        @error('emergency_contact_relationship')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <label for="emergency_contact_phone" class="form-label">Phone Number <span class="text-danger">*</span></label>
                                        <input type="tel" class="form-control @error('emergency_contact_phone') is-invalid @enderror" 
                                               id="emergency_contact_phone" name="emergency_contact_phone" 
                                               value="{{ old('emergency_contact_phone', $employee->emergency_contact_phone) }}" required>
                                        @error('emergency_contact_phone')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-md-6">
                                        <label for="emergency_contact_email" class="form-label">Email Address</label>
                                        <input type="email" class="form-control @error('emergency_contact_email') is-invalid @enderror" 
                                               id="emergency_contact_email" name="emergency_contact_email" 
                                               value="{{ old('emergency_contact_email', $employee->emergency_contact_email) }}">
                                        @error('emergency_contact_email')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <div class="mb-3">
                                    <label for="emergency_contact_address" class="form-label">Address</label>
                                    <textarea class="form-control @error('emergency_contact_address') is-invalid @enderror" 
                                              id="emergency_contact_address" name="emergency_contact_address" rows="3">{{ old('emergency_contact_address', $employee->emergency_contact_address) }}</textarea>
                                    @error('emergency_contact_address')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="d-flex justify-content-end">
                                    <button type="submit" class="btn btn-primary">
                                        <i class="bi bi-check-circle me-2"></i>Update Emergency Contact
                                    </button>
                                </div>
                            </form>
                        </div>

                        <!-- Security -->
                        <div class="tab-pane fade" id="security" role="tabpanel">
                            <form method="POST" action="{{ route('employee.profile.update') }}">
                                @csrf
                                @method('PUT')
                                <input type="hidden" name="section" value="password">
                                
                                <div class="mb-3">
                                    <label for="current_password" class="form-label">Current Password <span class="text-danger">*</span></label>
                                    <input type="password" class="form-control @error('current_password') is-invalid @enderror" 
                                           id="current_password" name="current_password" required>
                                    @error('current_password')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="mb-3">
                                    <label for="new_password" class="form-label">New Password <span class="text-danger">*</span></label>
                                    <input type="password" class="form-control @error('new_password') is-invalid @enderror" 
                                           id="new_password" name="new_password" required>
                                    <div class="form-text">Password must be at least 8 characters long.</div>
                                    @error('new_password')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="mb-3">
                                    <label for="new_password_confirmation" class="form-label">Confirm New Password <span class="text-danger">*</span></label>
                                    <input type="password" class="form-control @error('new_password_confirmation') is-invalid @enderror" 
                                           id="new_password_confirmation" name="new_password_confirmation" required>
                                    @error('new_password_confirmation')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="d-flex justify-content-end">
                                    <button type="submit" class="btn btn-primary">
                                        <i class="bi bi-shield-check me-2"></i>Update Password
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Avatar Upload Modal -->
<div class="modal fade" id="avatarModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Update Profile Picture</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" action="{{ route('employee.profile.update') }}" enctype="multipart/form-data">
                @csrf
                @method('PUT')
                <input type="hidden" name="section" value="avatar">
                
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="avatar" class="form-label">Choose New Photo</label>
                        <input type="file" class="form-control @error('avatar') is-invalid @enderror" 
                               id="avatar" name="avatar" accept="image/*" required>
                        <div class="form-text">Upload a JPG, PNG, or JPEG file. Maximum size: 2MB</div>
                        @error('avatar')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
                
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-upload me-2"></i>Upload Photo
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection