@extends('layouts/layoutMaster')

@php
  $pageConfigs = [
    'myLayout' => 'blank',
    'navbarType' => 'hidden',
    'menuFixed' => false,
    'contentLayout' => 'compact',
  ];
@endphp

@section('title')
  {{ __('rider.profile.meta_title') }}
@endsection

@section('page-style')
  <style>
    :root {
      --rider-accent: #e63946;
      --rider-accent-soft: #ffecee;
      --rider-text: #212529;
      --rider-muted: #6c757d;
      --rider-card-radius: 18px;
    }

    body {
      background: #f8f9fb;
      color: var(--rider-text);
    }

    .rider-profile {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      background: #fff;
    }

    .rider-profile__header {
      padding: clamp(1.4rem, 4vw, 2.4rem) clamp(1.1rem, 5vw, 2.2rem) clamp(1.8rem, 4vw, 2.6rem);
      background: linear-gradient(165deg, rgba(230, 57, 70, 0.08), rgba(230, 57, 70, 0));
      border-bottom: 1px solid rgba(230, 57, 70, 0.12);
      display: flex;
      flex-wrap: wrap;
      gap: 1.5rem;
      align-items: flex-end;
    }

    .rider-profile__meta {
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
      flex: 1 1 220px;
    }

    .rider-profile__welcome {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      font-weight: 600;
      letter-spacing: .03em;
      color: var(--rider-accent);
    }

    .rider-profile__title {
      font-size: clamp(1.55rem, 4vw, 2.2rem);
      font-weight: 700;
      margin: 0;
    }

    .rider-profile__subtitle {
      margin: 0;
      color: var(--rider-muted);
      font-size: 0.95rem;
    }

    .rider-profile__badge {
      display: inline-flex;
      align-items: center;
      gap: 0.3rem;
      padding: 0.4rem 0.9rem;
      border-radius: 999px;
      background: var(--rider-accent-soft);
      color: var(--rider-accent);
      font-size: 0.72rem;
      letter-spacing: .06em;
      text-transform: uppercase;
      font-weight: 600;
    }

    .rider-profile__body {
      padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1rem, 4vw, 2.5rem) clamp(3.5rem, 6vw, 4.5rem);
      display: flex;
      flex-direction: column;
      gap: 2.5rem;
    }

    .rider-profile__section {
      display: grid;
      gap: 1.5rem;
    }

    .profile-card {
      border-radius: var(--rider-card-radius);
      border: 1px solid rgba(230, 57, 70, 0.14);
      box-shadow: 0 12px 32px rgba(230, 57, 70, 0.08);
      overflow: hidden;
      background: #fff;
    }

    .profile-card__header {
      padding: 1.5rem 1.7rem 1.2rem;
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
      align-items: center;
      border-bottom: 1px solid rgba(230, 57, 70, 0.14);
    }

    .profile-card__title {
      font-size: 1.1rem;
      font-weight: 600;
      margin: 0;
    }

    .profile-card__body {
      padding: 1.7rem;
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .profile-card__footer {
      padding: 1.25rem 1.7rem;
      border-top: 1px solid rgba(230, 57, 70, 0.12);
      background: rgba(230, 57, 70, 0.03);
      display: flex;
      justify-content: flex-end;
      gap: 0.75rem;
    }

    .profile-form .form-label {
      font-weight: 600;
      letter-spacing: .02em;
    }

    .profile-form .form-control {
      border-radius: 14px;
      border: 1px solid rgba(230, 57, 70, 0.14);
      padding: 0.7rem 0.85rem;
    }

    .profile-form .form-control:focus {
      border-color: rgba(230, 57, 70, 0.4);
      box-shadow: 0 0 0 0.15rem rgba(230, 57, 70, 0.12);
    }

    .profile-alert {
      margin-bottom: 0;
      border-radius: 14px;
      font-size: 0.9rem;
    }

    .profile-meta-list {
      display: grid;
      gap: 0.6rem;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .profile-meta-list li {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      color: var(--rider-muted);
      font-size: 0.9rem;
    }

    .rider-nav {
      position: sticky;
      bottom: 0;
      display: none;
      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
      gap: 0.35rem;
      padding: 0.55rem clamp(1rem, 6vw, 1.6rem);
      background: rgba(255, 255, 255, 0.96);
      backdrop-filter: blur(14px);
      border-top: 1px solid rgba(230, 57, 70, 0.16);
      box-shadow: 0 -6px 18px rgba(13, 25, 43, 0.08);
      z-index: 9;
    }

    .rider-nav__item {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.25rem;
      padding: 0.35rem 0.25rem;
      border-radius: 14px;
      font-size: 0.7rem;
      font-weight: 600;
      letter-spacing: .04em;
      text-transform: uppercase;
      color: var(--rider-muted);
      text-decoration: none;
      transition: color .2s ease, background-color .2s ease, transform .2s ease;
    }

    .rider-nav__item i {
      font-size: 1.35rem;
    }

    .rider-nav__item.is-active,
    .rider-nav__item:focus,
    .rider-nav__item:hover {
      color: var(--rider-accent);
      background: rgba(230, 57, 70, 0.12);
      transform: translateY(-2px);
    }

    .rider-nav__item:focus {
      outline: 2px solid rgba(230, 57, 70, 0.35);
      outline-offset: 2px;
    }

    @media (max-width: 992px) {
      .rider-profile__body {
        padding-inline: clamp(0.9rem, 6vw, 1.6rem);
      }
    }

    @media (max-width: 768px) {
      .rider-profile__body {
        padding-bottom: 5.5rem;
      }

      .profile-card__body {
        padding: 1.35rem;
      }

      .profile-card__footer {
        flex-direction: column;
        align-items: stretch;
      }

      .rider-nav {
        display: grid;
      }
    }
  </style>
@endsection

@section('page-script')
  <script>
    window.riderProfileStrings = {
      loadFailed: @json(__('rider.profile.messages.load_failed')),
      loadFallback: @json(__('rider.profile.messages.load_fallback')),
      updateFailed: @json(__('rider.profile.messages.update_failed')),
      updateSuccess: @json(__('rider.profile.messages.update_success')),
      unexpected: @json(__('rider.profile.messages.unexpected'))
    };
  </script>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const nameDisplay = document.getElementById('pf_name_display');
      const emailDisplay = document.getElementById('pf_email_display');
      const profileError = document.getElementById('pf_profile_err');
      const passwordForm = document.getElementById('pf_password_form');
      const passwordInput = document.getElementById('pf_password');
      const passwordConfirmInput = document.getElementById('pf_password_confirmation');
      const successAlert = document.getElementById('pf_password_ok');
      const errorAlert = document.getElementById('pf_password_err');
      const fieldErrors = document.getElementById('pf_password_field_errors');
      const submitButton = document.getElementById('pf_password_submit');
      const spinner = submitButton ? submitButton.querySelector('[data-spinner]') : null;
      const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

      const toggleBusy = (isBusy) => {
        if (!submitButton) return;
        submitButton.disabled = isBusy;
        if (spinner) spinner.hidden = !isBusy;
      };

      const resetAlerts = () => {
        if (successAlert) successAlert.classList.add('d-none');
        if (errorAlert) errorAlert.classList.add('d-none');
        if (fieldErrors) {
          fieldErrors.innerHTML = '';
          fieldErrors.classList.add('d-none');
        }
      };

      const renderFieldErrors = (errors) => {
        if (!fieldErrors) return;
        const entries = Object.values(errors || {}).flat();
        if (!entries.length) return;
        fieldErrors.innerHTML = entries.map(message => `<li>${message}</li>`).join('');
        fieldErrors.classList.remove('d-none');
      };

      const displayProfileData = (data) => {
        if (nameDisplay) nameDisplay.textContent = data.name ?? '—';
        if (emailDisplay) emailDisplay.textContent = data.email ?? '—';
      };

      const profileStrings = window.riderProfileStrings || {};

      const loadProfile = async () => {
        if (profileError) {
          profileError.classList.add('d-none');
          profileError.textContent = '';
        }

        try {
          const response = await fetch(`{{ url('/rider/api/profile') }}`);
          if (!response.ok) throw new Error(profileStrings.loadFailed || 'Unable to load profile.');
          const data = await response.json();
          displayProfileData(data);
        } catch (error) {
          if (profileError) {
            profileError.textContent = error.message || profileStrings.loadFallback || 'We could not load your details.';
            profileError.classList.remove('d-none');
          }
          displayProfileData({});
        }
      };

      if (passwordForm) {
        passwordForm.addEventListener('submit', async (event) => {
          event.preventDefault();
          resetAlerts();
          toggleBusy(true);

          try {
            const payload = {
              password: passwordInput ? passwordInput.value : '',
              password_confirmation: passwordConfirmInput ? passwordConfirmInput.value : '',
            };

            const response = await fetch(`{{ url('/rider/api/profile') }}`, {
              method: 'PUT',
              headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': csrfToken,
                Accept: 'application/json',
              },
              body: JSON.stringify(payload),
            });

            const body = await response.json().catch(() => ({}));
            if (!response.ok) {
              if (errorAlert) {
                errorAlert.textContent = body.message || profileStrings.updateFailed || 'We could not update your password.';
                errorAlert.classList.remove('d-none');
              }
              renderFieldErrors(body.errors);
              return;
            }

            if (successAlert) {
              successAlert.textContent = body.message || profileStrings.updateSuccess || 'Password updated successfully.';
              successAlert.classList.remove('d-none');
            }
            if (passwordInput) passwordInput.value = '';
            if (passwordConfirmInput) passwordConfirmInput.value = '';
          } catch (error) {
            if (errorAlert) {
              errorAlert.textContent = error.message || profileStrings.unexpected || 'Unexpected error.';
              errorAlert.classList.remove('d-none');
            }
          } finally {
            toggleBusy(false);
          }
        });
      }

      loadProfile();

      const nav = document.querySelector('.rider-nav');
      if (nav) {
        const navItems = Array.from(nav.querySelectorAll('[data-nav-link]'));
        const managedItems = navItems.filter(item => item.dataset.scrollTarget || item.dataset.localActive === 'true');

        const activateItem = (active) => {
          managedItems.forEach(item => {
            const isActive = item === active;
            item.classList.toggle('is-active', isActive);
            if (item.dataset.localActive === 'true') {
              if (isActive) {
                item.setAttribute('aria-current', 'page');
              } else {
                item.removeAttribute('aria-current');
              }
            }
          });
        };

        const currentItem = managedItems.find(item => item.hasAttribute('aria-current'));
        if (currentItem) {
          activateItem(currentItem);
        }

        managedItems.forEach(item => {
          item.addEventListener('click', (event) => {
            const targetId = item.dataset.scrollTarget;
            if (!targetId) {
              activateItem(item);
              return;
            }

            const target = document.getElementById(targetId);
            if (!target) return;

            event.preventDefault();
            target.scrollIntoView({ behavior: 'smooth', block: 'start' });
            activateItem(item);
          });
        });

        if ('IntersectionObserver' in window) {
          const observer = new IntersectionObserver((entries) => {
            const visible = entries
              .filter(entry => entry.isIntersecting)
              .sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top);

            if (!visible.length) return;

            const match = managedItems.find(item => item.dataset.scrollTarget === visible[0].target.id);
            if (match) activateItem(match);
          }, { rootMargin: '-55% 0px -35% 0px', threshold: [0.2, 0.4] });

          managedItems.forEach(item => {
            const targetId = item.dataset.scrollTarget;
            if (!targetId) return;
            const section = document.getElementById(targetId);
            if (section) observer.observe(section);
          });
        }
      }
    });
  </script>
@endsection

@section('content')
  @php
    $user = auth()->user();
    $firstName = 'Rider';
    if ($user) {
      $segments = preg_split('/\s+/', trim((string) $user->name));
      if (!empty($segments[0])) {
        $firstName = $segments[0];
      }
    }
    $supportEmail = $supportContact['email'] ?? config('support.default_email');
    $supportPhone = $supportContact['phone'] ?? config('support.default_phone');
    $supportPhoneDial = $supportPhone ? preg_replace('/[^0-9+]/', '', $supportPhone) : '';
    $zoneName = $zoneDetails['zone_name'] ?? null;
    $zoneCity = $zoneDetails['city_name'] ?? null;
    $zoneDirectorName = $zoneDetails['director_name'] ?? null;
    $zoneDirectorEmail = $zoneDetails['director_email'] ?? null;
    $languages = [
      ['code' => 'es', 'label' => __('rider.languages.es')],
      ['code' => 'en', 'label' => __('rider.languages.en')],
      ['code' => 'ar', 'label' => __('rider.languages.ar')],
      ['code' => 'bn', 'label' => __('rider.languages.bn')],
      ['code' => 'pa', 'label' => __('rider.languages.pa')],
    ];
    $currentLocale = app()->getLocale();
    $tipSummary = $tipSummary ?? ['accrued' => 0, 'paid' => 0, 'pending' => 0, 'currency' => 'EUR'];
    $tipEntries = $tipEntries ?? collect();
  @endphp
  <div class="rider-profile">
    <header class="rider-profile__header">
      <div class="rider-profile__meta">
        <span class="rider-profile__welcome">
          <i class="ti tabler-user"></i>
          {{ __('rider.profile.greeting', ['name' => $firstName]) }}
        </span>
        <h1 class="rider-profile__title">{{ __('rider.profile.headline') }}</h1>
        <p class="rider-profile__subtitle">{{ __('rider.profile.subtitle') }}</p>
      </div>
      <span class="rider-profile__badge">
        <i class="ti tabler-shield-check"></i>
        {{ __('rider.profile.badge') }}
      </span>
    </header>

    <main class="rider-profile__body">
      <div class="text-center">
        <form method="POST" action="{{ route('logout') }}">
          @csrf
          <button type="submit" class="btn btn-outline-danger">
            <i class="ti tabler-logout me-1"></i>
            {{ __('Cerrar sesión') }}
          </button>
        </form>
      </div>

      <section class="rider-profile__section" id="account-section">
        <article class="profile-card">
          <div class="profile-card__header">
            <div>
              <h2 class="profile-card__title mb-1">{{ __('rider.profile.sections.personal.title') }}</h2>
              <p class="text-body-secondary mb-0">{{ __('rider.profile.sections.personal.subtitle') }}</p>
            </div>
          </div>
          <div class="profile-card__body profile-form">
            <div class="alert alert-danger profile-alert d-none" id="pf_profile_err" role="alert"></div>
            <div class="d-flex flex-column gap-3">
              <div>
                <span class="text-body-secondary d-block fw-semibold text-uppercase small mb-1">{{ __('rider.profile.sections.personal.fields.name') }}</span>
                <span id="pf_name_display" class="fw-semibold">—</span>
              </div>
              <div>
                <span class="text-body-secondary d-block fw-semibold text-uppercase small mb-1">{{ __('rider.profile.sections.personal.fields.email') }}</span>
                <span id="pf_email_display" class="fw-semibold">—</span>
              </div>
              @if ($zoneName)
                <div>
                  <span class="text-body-secondary d-block fw-semibold text-uppercase small mb-1">{{ __('rider.profile.sections.personal.fields.zone') }}</span>
                  <span class="fw-semibold">
                    {{ $zoneName }}@if ($zoneCity) · {{ $zoneCity }} @endif
                  </span>
                </div>
              @endif
              <div>
                <span class="text-body-secondary d-block fw-semibold text-uppercase small mb-1">{{ __('rider.profile.sections.personal.fields.zone_lead') }}</span>
                @if ($zoneDirectorName)
                  <span class="fw-semibold d-block">{{ $zoneDirectorName }}</span>
                  @if ($zoneDirectorEmail)
                    <span class="text-body-secondary small d-block">{{ $zoneDirectorEmail }}</span>
                  @endif
                @else
                  <span class="text-body-secondary">{{ __('rider.profile.sections.personal.no_lead') }}</span>
                @endif
              </div>
            </div>
            <small class="text-body-secondary d-block mt-3">{{ __('rider.profile.sections.personal.note') }}</small>
          </div>
        </article>
      </section>

      <section class="rider-profile__section" id="security-section">
        <article class="profile-card">
          <div class="profile-card__header">
            <div>
              <h2 class="profile-card__title mb-1">{{ __('rider.profile.sections.security.title') }}</h2>
              <p class="text-body-secondary mb-0">{{ __('rider.profile.sections.security.subtitle') }}</p>
            </div>
          </div>
          <form id="pf_password_form" class="profile-card__body profile-form" novalidate>
            <div class="alert alert-success profile-alert d-none" id="pf_password_ok" role="status" aria-live="polite"></div>
            <div class="alert alert-danger profile-alert d-none" id="pf_password_err" role="alert"></div>
            <ul class="profile-meta-list d-none" id="pf_password_field_errors" aria-live="assertive"></ul>

            <div class="row g-4">
              <div class="col-12 col-md-6">
                <label class="form-label" for="pf_password">{{ __('rider.profile.sections.security.fields.password') }}</label>
                <input type="password" class="form-control" id="pf_password" name="password" minlength="6" autocomplete="new-password" required>
              </div>
              <div class="col-12 col-md-6">
                <label class="form-label" for="pf_password_confirmation">{{ __('rider.profile.sections.security.fields.password_confirm') }}</label>
                <input type="password" class="form-control" id="pf_password_confirmation" name="password_confirmation" minlength="6" autocomplete="new-password" required>
              </div>
            </div>
            <small class="text-body-secondary d-block mt-2">{{ __('rider.profile.sections.security.hint') }}</small>
          </form>
          <div class="profile-card__footer">
            <button class="btn btn-primary w-100 w-sm-auto" type="submit" form="pf_password_form" id="pf_password_submit">
              <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true" hidden data-spinner></span>
              {{ __('rider.profile.sections.security.submit') }}
            </button>
          </div>
        </article>

        <article class="profile-card">
          <div class="profile-card__header">
            <div>
              <h2 class="profile-card__title mb-1">{{ __('rider.profile.sections.tips.title') }}</h2>
              <p class="text-body-secondary mb-0">{{ __('rider.profile.sections.tips.subtitle') }}</p>
            </div>
          </div>
          <div class="profile-card__body">
            <ul class="profile-meta-list">
              <li><i class="ti tabler-lock"></i> {{ __('rider.profile.sections.tips.items.unique_passwords') }}</li>
              <li><i class="ti tabler-mail"></i> {{ __('rider.profile.sections.tips.items.check_email') }}</li>
              <li><i class="ti tabler-bell"></i> {{ __('rider.profile.sections.tips.items.enable_notifications') }}</li>
            </ul>
          </div>
        </article>
      </section>

      <section class="rider-profile__section" id="language-section">
        <article class="profile-card">
          <div class="profile-card__header">
            <div>
              <h2 class="profile-card__title mb-1">{{ __('rider.profile.sections.language.title') }}</h2>
              <p class="text-body-secondary mb-0">{{ __('rider.profile.sections.language.subtitle') }}</p>
            </div>
          </div>
          <div class="profile-card__body">
            <div class="d-flex flex-wrap gap-2">
              @foreach ($languages as $language)
                <a href="{{ url('/lang/'.$language['code']) }}"
                  class="btn btn-sm {{ $currentLocale === $language['code'] ? 'btn-primary' : 'btn-outline-primary' }}">
                  {{ $language['label'] }}
                </a>
              @endforeach
            </div>
            <small class="text-body-secondary d-block mt-3">{{ __('rider.profile.sections.language.note') }}</small>
          </div>
        </article>
      </section>

      <section class="rider-profile__section" id="support-section">
        <article class="profile-card">
          <div class="profile-card__header">
            <div>
              <h2 class="profile-card__title mb-1">{{ __('rider.profile.sections.support.title') }}</h2>
              <p class="text-body-secondary mb-0">{{ __('rider.profile.sections.support.subtitle') }}</p>
            </div>
          </div>
          <div class="profile-card__body">
            <div class="d-flex flex-column flex-lg-row gap-3 align-items-start align-items-lg-center">
              <div class="flex-grow-1">
                <p class="text-body-secondary mb-2">{{ __('rider.profile.sections.support.body') }}</p>
                <div class="d-flex gap-2 flex-wrap">
                  <a class="btn btn-outline-primary" href="mailto:{{ $supportEmail }}">
                    <i class="ti tabler-mail"></i>
                    {{ $supportEmail }}
                  </a>
                  <a class="btn btn-outline-secondary" href="{{ $supportPhoneDial ? 'tel:'.$supportPhoneDial : '#' }}">
                    <i class="ti tabler-phone"></i>
                    {{ $supportPhone }}
                  </a>
                  <a class="btn btn-primary" href="{{ route('rider.chat') }}">
                    <i class="ti tabler-message-circle"></i>
                    {{ __('rider.profile.sections.support.open_chat') }}
                  </a>
                </div>
              </div>
              <div class="text-body-secondary small">
                <strong>{{ __('rider.profile.sections.support.hours_label') }}</strong>
                <div>{{ __('rider.profile.sections.support.hours_value') }}</div>
              </div>
            </div>
          </div>
        </article>
      </section>
    </main>

    @include('rider.partials.nav', [
      'navActive' => 'profile',
      'navItems' => ['home', 'profile', 'support'],
    ])
  </div>
@endsection