@extends('layouts.bootstrap')

@section('title', 'Edit Profile')
@section('breadcrumb', 'Dashboard / Profile / Edit')

@section('content')
<div class="row">
  <div class="col-lg-8 mx-auto">
    <div class="card shadow-sm">
      <div class="card-header d-flex justify-content-between align-items-center">
        <h6 class="mb-0">Edit Profile</h6>
        <a href="{{ route('profile.show') }}" class="btn btn-sm btn-outline-secondary">
          <i class="bi bi-arrow-left me-1"></i>Back to Profile
        </a>
      </div>
      <div class="card-body">
        <form id="profileForm" method="POST" action="{{ route('profile.update') }}">
          @csrf
          @method('PUT')

          <!-- Basic Information -->
          <div class="row g-3 mb-4">
            <div class="col-12">
              <h6 class="text-muted mb-3">Basic Information</h6>
            </div>
            <div class="col-md-6">
              <label for="name" class="form-label">Full Name <span class="text-danger">*</span></label>
              <input type="text" class="form-control @error('name') is-invalid @enderror" 
                     id="name" name="name" value="{{ old('name', $user->name) }}" required>
              @error('name')
                <div class="invalid-feedback">{{ $message }}</div>
              @enderror
            </div>
            <div class="col-md-6">
              <label for="email" class="form-label">Email Address <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 class="col-md-6">
              <label for="department_id" class="form-label">Department</label>
              <select class="form-select @error('department_id') is-invalid @enderror" 
                      id="department_id" name="department_id">
                <option value="">Select Department</option>
                @foreach($departments as $department)
                  <option value="{{ $department->id }}" 
                          {{ old('department_id', $user->department_id) == $department->id ? 'selected' : '' }}>
                    {{ $department->name }}
                  </option>
                @endforeach
              </select>
              @error('department_id')
                <div class="invalid-feedback">{{ $message }}</div>
              @enderror
            </div>
          </div>

          <!-- Password Section -->
          <div class="row g-3 mb-4">
            <div class="col-12">
              <h6 class="text-muted mb-3">Change Password</h6>
              <p class="text-muted small">Leave password fields empty if you don't want to change your password.</p>
            </div>
            <div class="col-md-6">
              <label for="current_password" class="form-label">Current Password</label>
              <input type="password" class="form-control @error('current_password') is-invalid @enderror" 
                     id="current_password" name="current_password">
              @error('current_password')
                <div class="invalid-feedback">{{ $message }}</div>
              @enderror
            </div>
            <div class="col-md-6">
              <label for="password" class="form-label">New Password</label>
              <input type="password" class="form-control @error('password') is-invalid @enderror" 
                     id="password" name="password" minlength="8">
              @error('password')
                <div class="invalid-feedback">{{ $message }}</div>
              @enderror
            </div>
            <div class="col-md-6">
              <label for="password_confirmation" class="form-label">Confirm New Password</label>
              <input type="password" class="form-control" 
                     id="password_confirmation" name="password_confirmation" minlength="8">
            </div>
          </div>

          <!-- Form Actions -->
          <div class="d-flex gap-2">
            <button type="submit" class="btn btn-primary">
              <i class="bi bi-check-lg me-1"></i>Update Profile
            </button>
            <a href="{{ route('profile.show') }}" class="btn btn-outline-secondary">
              <i class="bi bi-x-lg me-1"></i>Cancel
            </a>
          </div>
        </form>
      </div>
    </div>

    <!-- Account Security -->
    <div class="card shadow-sm mt-3">
      <div class="card-header">
        <h6 class="mb-0">Account Security</h6>
      </div>
      <div class="card-body">
        <div class="row g-3">
          <div class="col-md-6">
            <div class="d-flex align-items-center">
              <div class="flex-shrink-0">
                <i class="bi bi-shield-check text-success fs-4"></i>
              </div>
              <div class="flex-grow-1 ms-3">
                <h6 class="mb-1">Password Security</h6>
                <p class="text-muted small mb-0">Your password is encrypted and secure</p>
              </div>
            </div>
          </div>
          <div class="col-md-6">
            <div class="d-flex align-items-center">
              <div class="flex-shrink-0">
                <i class="bi bi-person-check text-primary fs-4"></i>
              </div>
              <div class="flex-grow-1 ms-3">
                <h6 class="mb-1">Account Status</h6>
                <p class="text-muted small mb-0">
                  Status: <span class="badge {{ $user->status === 'active' ? 'bg-success' : 'bg-secondary' }}">
                    {{ ucfirst($user->status) }}
                  </span>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
  const form = document.getElementById('profileForm');
  const passwordField = document.getElementById('password');
  const currentPasswordField = document.getElementById('current_password');
  const confirmPasswordField = document.getElementById('password_confirmation');

  // Show/hide password fields based on new password input
  function togglePasswordFields() {
    const hasNewPassword = passwordField.value.length > 0;
    currentPasswordField.required = hasNewPassword;
    confirmPasswordField.required = hasNewPassword;
  }

  passwordField.addEventListener('input', togglePasswordFields);
  togglePasswordFields(); // Initial check

  // Form submission with AJAX
  form.addEventListener('submit', async function(e) {
    e.preventDefault();
    
    const formData = new FormData(this);
    const data = Object.fromEntries(formData.entries());

    try {
      const response = await fetch(this.action, {
        method: 'PUT',
        headers: {
          'Content-Type': 'application/json',
          'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
          'Accept': 'application/json',
          'X-Requested-With': 'XMLHttpRequest'
        },
        credentials: 'same-origin',
        body: JSON.stringify(data)
      });

      if (response.ok) {
        const result = await response.json();
        alert(result.success || 'Profile updated successfully!');
        window.location.href = '{{ route("profile.show") }}';
      } else {
        const result = await response.json();
        if (result.errors) {
          // Handle validation errors
          Object.keys(result.errors).forEach(field => {
            const input = document.querySelector(`[name="${field}"]`);
            if (input) {
              input.classList.add('is-invalid');
              const feedback = input.parentNode.querySelector('.invalid-feedback') || 
                             input.parentNode.appendChild(document.createElement('div'));
              feedback.className = 'invalid-feedback';
              feedback.textContent = result.errors[field][0];
            }
          });
        } else {
          alert(result.message || 'An error occurred while updating your profile');
        }
      }
    } catch (error) {
      console.error('Error:', error);
      alert('An error occurred while updating your profile');
    }
  });

  // Clear validation errors on input
  form.querySelectorAll('input, select').forEach(field => {
    field.addEventListener('input', function() {
      this.classList.remove('is-invalid');
      const feedback = this.parentNode.querySelector('.invalid-feedback');
      if (feedback) {
        feedback.remove();
      }
    });
  });
});
</script>
@endpush