@extends('layouts.base')

@section('content')
<main class="page-main container mx-auto px-4 py-8">
  <div class="profile-editor-container max-w-2xl mx-auto bg-white p-8 rounded-xl shadow-lg">
    
    <!-- Page Header -->
    <header class="mb-8 text-center">
      <h1 class="text-3xl font-bold text-gray-800">Edit Your Profile</h1>
    </header>

    <form id="rcp_profile_editor_form" action="{{route('user.profile')}}" method="post" enctype="multipart/form-data" class="space-y-8" x-data="passwordForm()">
      @csrf

      <!-- Change Name Section -->
      <section class="space-y-6 p-6 bg-gray-50 rounded-lg border border-gray-200">
        <h2 class="text-xl font-semibold text-gray-700 mb-4">Change Your Name</h2>

        <!-- Full Name Floating Label -->
        <div class="relative">
          <input type="text" name="rcp_full_name" id="rcp_first_name" x-model="fullName"
                 placeholder=" " value="{{$user->full_name}}"
                 class="peer w-full border border-gray-300 rounded-lg px-4 py-3 focus:ring-2 focus:ring-teal-500 focus:outline-none">
          <label for="rcp_first_name" 
                 class="absolute left-4 transition-all px-1 bg-gray-50 text-gray-400"
                 :class="fullName ? 'top-[-0.5rem] text-teal-500 text-sm' : 'top-3 text-gray-400 text-base'">
            Full Name
          </label>
        </div>

        <!-- Phone -->
        <div class="relative">
          <input type="text" name="rcp_phone" id="rcp_phone" x-model="phone" placeholder=" " value="{{$user->phone}}"
                 class="peer w-full border border-gray-300 rounded-lg px-4 py-3 focus:ring-2 focus:ring-teal-500 focus:outline-none">
          <label for="rcp_phone"
                 class="absolute left-4 transition-all px-1 bg-gray-50 text-gray-400"
                 :class="phone ? 'top-[-0.5rem] text-teal-500 text-sm' : 'top-3 text-gray-400 text-base'">
            Phone
          </label>
        </div>

        <!-- Email (Readonly) -->
        <div class="relative">
          <input type="text" id="rcp_email" value="{{$user->email}}" readonly placeholder=" "
                 class="w-full border border-gray-300 bg-gray-100 rounded-lg px-4 py-3 cursor-not-allowed text-gray-500">
          <label for="rcp_email"
                 class="absolute left-4 top-3 px-1 bg-gray-50 text-gray-400 text-sm">Email Address</label>
        </div>

        <!-- Country -->
        <div class="relative">
          <select name="rcp_country" id="rcp_country"
                  class="peer w-full border border-gray-300 rounded-lg px-4 py-3 focus:ring-2 focus:ring-teal-500 focus:outline-none">
            {!!get_country_select_html($user->country)!!}
          </select>
          <label for="rcp_country" class="absolute left-4 top-3 text-gray-400 text-sm px-1 bg-gray-50 peer-focus:text-teal-500">Country</label>
        </div>
      </section>

      <!-- Change Password Section -->
      <section class="space-y-6 p-6 bg-gray-50 rounded-lg border border-gray-200">
        <h2 class="text-xl font-semibold text-gray-700 mb-4">Change Your Password</h2>

        <!-- New Password -->
        <div class="relative">
          <input :type="showNewPassword ? 'text' : 'password'" name="rcp_new_user_pass1" id="rcp_new_user_pass1"
                 placeholder=" " x-model="newPassword"
                 class="peer w-full border border-gray-300 rounded-lg px-4 py-3 focus:ring-2 focus:ring-teal-500 focus:outline-none">
          <label for="rcp_new_user_pass1" class="absolute left-4 transition-all px-1 bg-gray-50 text-gray-400"
                 :class="newPassword ? 'top-[-0.5rem] text-teal-500 text-sm' : 'top-3 text-gray-400 text-base'">
            New Password
          </label>
          <button type="button" @click="showNewPassword = !showNewPassword" class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500">
            <template x-if="showNewPassword">👁️</template>
            <template x-if="!showNewPassword">🙈</template>
          </button>
        </div>

        <!-- Password Strength Bar -->
        <div class="h-2 w-full bg-gray-200 rounded mt-2 overflow-hidden">
          <div :style="{ width: strength + '%' }" :class="strengthColor" class="h-full transition-all"></div>
        </div>
        <p class="text-gray-500 text-sm mt-1">Password strength: <span x-text="strengthText"></span></p>

        <!-- Confirm Password -->
        <div class="relative">
          <input :type="showConfirmPassword ? 'text' : 'password'" name="rcp_new_user_pass2" id="rcp_new_user_pass2"
                 placeholder=" " x-model="confirmPassword"
                 class="peer w-full border border-gray-300 rounded-lg px-4 py-3 focus:ring-2 focus:ring-teal-500 focus:outline-none">
          <label for="rcp_new_user_pass2" class="absolute left-4 transition-all px-1 bg-gray-50 text-gray-400"
                 :class="confirmPassword ? 'top-[-0.5rem] text-teal-500 text-sm' : 'top-3 text-gray-400 text-base'">
            Re-enter Password
          </label>
          <button type="button" @click="showConfirmPassword = !showConfirmPassword" class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500">
            <template x-if="showConfirmPassword">👁️</template>
            <template x-if="!showConfirmPassword">🙈</template>
          </button>
        </div>

        <p class="text-gray-500 text-sm">After changing your password, you must log back in.</p>
      </section>

      <!-- Hidden Inputs -->
      <input type="hidden" name="rcp_profile_editor_nonce" value="12bb971046">
      <input type="hidden" name="rcp_action" value="edit_user_profile">
      <input type="hidden" name="rcp_redirect" value="https://bookingagentinfo.com/register/edit-your-profile/">

      <!-- Submit Button -->
      <div class="flex justify-end">
        <input type="submit" value="Save Changes"
               class="bg-teal-500 hover:bg-teal-700 text-white font-semibold px-6 py-3 rounded-lg shadow-md hover:shadow-lg transition-all">
      </div>
    </form>
  </div>

  <!-- Alpine.js Script -->
  <script src="//unpkg.com/alpinejs" defer></script>
  <script>
    function passwordForm() {
      return {
        fullName: '{{$user->full_name}}',
        phone: '{{$user->phone}}',
        newPassword: '',
        confirmPassword: '',
        showNewPassword: false,
        showConfirmPassword: false,
        get strength() {
          const len = this.newPassword.length;
          if (len === 0) return 0;
          if (len < 6) return 25;
          if (len < 10) return 50;
          if (len < 14) return 75;
          return 100;
        },
        get strengthColor() {
          if (this.strength < 50) return 'bg-red-500';
          if (this.strength < 75) return 'bg-yellow-400';
          return 'bg-green-500';
        },
        get strengthText() {
          if (this.strength < 50) return 'Weak';
          if (this.strength < 75) return 'Medium';
          return 'Strong';
        }
      }
    }
  </script>
</main>

@endsection