@extends('master-user')


@section('content')
<section class="py-8">
  <div class="max-w-2xl mx-auto px-4">
    <div class="bg-white rounded-xl shadow-lg p-6">
      <h2 class="text-2xl font-bold text-[#3a3058] mb-6">Edit Profile</h2>
      @if(session('success'))
        <div class="bg-green-100 border border-green-300 text-green-700 rounded-lg px-6 py-4 mb-4">
          {{ session('success') }}
        </div>
      @endif
      <form action="{{ route('user.profile.update') }}" method="POST" enctype="multipart/form-data" class="space-y-8">
        @csrf
        <!-- Personal Information Section -->
        <div class="bg-gray-50 rounded-lg p-5 mb-4 border border-gray-200">
          <h3 class="text-lg font-semibold text-[#3a3058] mb-4">Personal Information</h3>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <label for="name" class="block font-medium text-gray-700 mb-1">Name</label>
              <input type="text" name="name" class="block w-full border border-gray-300 rounded-md px-4 py-2 focus:ring-2 focus:ring-yellow-300 focus:border-yellow-400 text-base" value="{{ old('name', $user->name) }}" required placeholder="Enter your name">
            </div>
            <div>
              <label for="email" class="block font-medium text-gray-700 mb-1">Email</label>
              <input type="email" name="email" class="block w-full border border-gray-300 rounded-md px-4 py-2 focus:ring-2 focus:ring-yellow-300 focus:border-yellow-400 text-base" value="{{ old('email', $user->email) }}" required placeholder="Enter your email">
            </div>
            <div>
              <label for="phone" class="block font-medium text-gray-700 mb-1">Phone</label>
              <input type="text" name="phone" class="block w-full border border-gray-300 rounded-md px-4 py-2 focus:ring-2 focus:ring-yellow-300 focus:border-yellow-400 text-base" value="{{ old('phone', $user->phone) }}" placeholder="Enter your phone number">
            </div>
            <div>
              <label for="avatar" class="block font-medium text-gray-700 mb-1">Avatar</label>
              <input type="file" name="avatar" class="block w-full border border-gray-300 rounded-md px-4 py-2 text-base">
              @if($user->avatar)
                <img src="{{ asset('storage/' . $user->avatar) }}" alt="Avatar" class="mt-2 rounded-full w-20 h-20 object-cover border border-gray-200">
              @endif
            </div>
          </div>
        </div>
        <!-- Address Section -->
        <div class="bg-gray-50 rounded-lg p-5 mb-4 border border-gray-200">
          <h3 class="text-lg font-semibold text-[#3a3058] mb-4">Address</h3>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <label for="address_1" class="block font-medium text-gray-700 mb-1">Address Line 1</label>
              <input type="text" name="address_1" class="block w-full border border-gray-300 rounded-md px-4 py-2 focus:ring-2 focus:ring-yellow-300 focus:border-yellow-400 text-base" value="{{ old('address_1', $user->address_1) }}" placeholder="Enter your address line 1">
            </div>
            <div>
              <label for="address_2" class="block font-medium text-gray-700 mb-1">Address Line 2</label>
              <input type="text" name="address_2" class="block w-full border border-gray-300 rounded-md px-4 py-2 focus:ring-2 focus:ring-yellow-300 focus:border-yellow-400 text-base" value="{{ old('address_2', $user->address_2) }}" placeholder="Enter your address line 2">
            </div>
            <div>
              <label for="landmark" class="block font-medium text-gray-700 mb-1">Landmark</label>
              <input type="text" name="landmark" class="block w-full border border-gray-300 rounded-md px-4 py-2 focus:ring-2 focus:ring-yellow-300 focus:border-yellow-400 text-base" value="{{ old('landmark', $user->landmark) }}" placeholder="Enter a nearby landmark">
            </div>
            <div>
              <label for="pincode" class="block font-medium text-gray-700 mb-1">Pincode</label>
              <input type="text" name="pincode" class="block w-full border border-gray-300 rounded-md px-4 py-2 focus:ring-2 focus:ring-yellow-300 focus:border-yellow-400 text-base" value="{{ old('pincode', $user->pincode) }}" placeholder="Enter your pincode">
            </div>
            <div>
              <label for="city" class="block font-medium text-gray-700 mb-1">City</label>
              <input type="text" name="city" class="block w-full border border-gray-300 rounded-md px-4 py-2 focus:ring-2 focus:ring-yellow-300 focus:border-yellow-400 text-base" value="{{ old('city', $user->city) }}" placeholder="Enter your city">
            </div>
            <div>
              <label for="state" class="block font-medium text-gray-700 mb-1">State</label>
              <input type="text" name="state" class="block w-full border border-gray-300 rounded-md px-4 py-2 focus:ring-2 focus:ring-yellow-300 focus:border-yellow-400 text-base" value="{{ old('state', $user->state) }}" placeholder="Enter your state">
            </div>
          </div>
        </div>
        <!-- Password Update Section -->
        <div class="bg-gray-50 rounded-lg p-5 border border-gray-200">
          <h3 class="font-semibold text-[#3a3058] mb-2">Change Password</h3>
          <p class="text-gray-600 mb-4">If you would like to change your password, please fill in the fields below.</p>
          <div class="flex items-center mb-4">
            <input type="checkbox" name="change_password" id="change_password" class="form-checkbox h-4 w-4 text-yellow-500">
            <label for="change_password" class="ml-2 text-gray-700 font-medium">Change Password</label>
          </div>
          <div class="grid grid-cols-1 md:grid-cols-3 gap-4 password-fields" style="display: none;">
            <div>
              <label for="old_password" class="block font-medium text-gray-700 mb-1">Old Password</label>
              <input type="password" name="old_password" class="block w-full border border-gray-300 rounded-md px-4 py-2 text-base" placeholder="Enter your current password">
            </div>
            <div>
              <label for="new_password" class="block font-medium text-gray-700 mb-1">New Password</label>
              <input type="password" name="new_password" class="block w-full border border-gray-300 rounded-md px-4 py-2 text-base" placeholder="Enter your new password">
            </div>
            <div>
              <label for="new_password_confirmation" class="block font-medium text-gray-700 mb-1">Confirm New Password</label>
              <input type="password" name="new_password_confirmation" class="block w-full border border-gray-300 rounded-md px-4 py-2 text-base" placeholder="Confirm your new password">
            </div>
          </div>
        </div>
        <div class="mt-8 text-center">
          <button type="submit" class="btn btn-primary bg-yellow-500 text-[#3a3058] border-yellow-500 hover:bg-yellow-400 hover:text-[#3a3058] py-2 px-4">Update Profile</button>
        </div>
      </form>
    </div>
  </div>
</section>
@endsection

@push('post_js')
<script>
    // Show/hide password fields when the checkbox is checked
    document.getElementById('change_password').addEventListener('change', function() {
        var passwordFields = document.querySelectorAll('.password-fields');
        var isChecked = document.getElementById('change_password').checked;
        passwordFields.forEach(function(field) {
            field.style.display = isChecked ? 'block' : 'none';
        });
    });
</script>
@endpush