@extends('layouts.marketing')

@section('title', __('app.my_profile') . ' - ' . __('app.company_name'))

@section('content')
@php
    $nameParts = preg_split('/\s+/', trim((string) $user->name), 2, PREG_SPLIT_NO_EMPTY);
    $profileFirstName = $nameParts[0] ?? '';
    $profileLastName = $nameParts[1] ?? '';
    $pkgUsed = $activePayment !== null ? (int) $activePayment->classes_used : null;
    $pkgRemaining = $activePayment !== null ? (int) $activePayment->classes_remaining : null;
    $pkgTotal = ($pkgUsed !== null && $pkgRemaining !== null) ? max(0, $pkgUsed + $pkgRemaining) : null;
    $expLabel = match ($user->fitness_level ?? '') {
        'beginner' => __('app.beginner'),
        'intermediate' => __('app.intermediate'),
        'advanced' => __('app.advanced'),
        '' => '—',
        default => $user->fitness_level,
    };
    $aptTotal = $profileAppointments->count();
    $aptCompleted = $user->isUser()
        ? $profileAppointments->filter(fn ($b) => $b->pilatesClass->date->lt(\Carbon\Carbon::today()))->count()
        : 0;
@endphp

<div class="customer-profile-page" x-data="{ appointmentsOpen: false }">
    <section class="py-16 sm:py-20 md:py-24">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="bg-secondary/30 border border-primary/20 rounded-lg p-6 sm:p-8 md:p-10 mb-8">
                <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-8">
                    <h1 class="text-3xl sm:text-4xl md:text-5xl font-semibold text-primary">
                        @if($staffAccountReadOnly ?? false)
                            {{ __('app.my_profile') }}
                        @elseif($user->isTrener())
                            {{ __('app.customer_profile_staff_title') }}
                        @else
                            {{ __('app.my_profile') }}
                        @endif
                    </h1>
                    <div class="flex flex-wrap gap-3 w-full sm:w-auto">
                        @unless($staffAccountReadOnly ?? false)
                        @if($user->isUser())
                            @unless($beautyOnly ?? false)
                            <button type="button"
                                    @click="appointmentsOpen = true"
                                    class="inline-flex flex-1 sm:flex-none items-center justify-center gap-2 rounded-md border border-primary/30 bg-primary/10 px-4 py-2.5 text-sm font-medium text-foreground transition-colors hover:bg-primary/20 hover:border-primary/50">
                                <i class="far fa-calendar-alt text-primary" aria-hidden="true"></i>
                                {{ __('app.members_all_appointments') }}
                            </button>
                            @endunless
                        @elseif($user->isTrener())
                            <a href="{{ route('pilates.schedule.calendar') }}"
                               class="inline-flex flex-1 sm:flex-none items-center justify-center gap-2 rounded-md border border-primary/30 bg-primary/10 px-4 py-2.5 text-sm font-medium text-foreground transition-colors hover:bg-primary/20 hover:border-primary/50">
                                <i class="far fa-calendar-alt text-primary" aria-hidden="true"></i>
                                {{ __('app.calendar') }}
                            </a>
                        @endif
                        @endunless
                        <form method="POST" action="{{ route('logout') }}" class="inline-flex flex-1 sm:flex-none">
                            @csrf
                            <button type="submit"
                                    class="w-full sm:w-auto rounded-md border border-primary px-4 py-2.5 text-sm font-medium text-primary transition-colors hover:bg-primary/10">
                                {{ __('app.logout') }}
                            </button>
                        </form>
                    </div>
                </div>

                @if($staffAccountReadOnly ?? false)
                    <p class="text-sm text-muted-foreground mb-6">{{ __('app.customer_profile_admin_readonly_hint') }}</p>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
                        <div class="sm:col-span-2">
                            <span class="block text-sm font-medium text-muted-foreground mb-1">{{ __('app.full_name') }}</span>
                            <p class="text-base sm:text-lg text-foreground">{{ $user->name }}</p>
                        </div>
                        <div class="sm:col-span-2">
                            <span class="block text-sm font-medium text-muted-foreground mb-1">{{ __('app.email_address') }}</span>
                            <p class="text-base sm:text-lg text-foreground">{{ $user->email }}</p>
                        </div>
                        <div>
                            <span class="block text-sm font-medium text-muted-foreground mb-1">{{ __('app.phone_number') }}</span>
                            <p class="text-base sm:text-lg text-foreground">{{ $user->phone ?: '—' }}</p>
                        </div>
                        <div>
                            <span class="block text-sm font-medium text-muted-foreground mb-1">{{ __('app.date_of_birth') }}</span>
                            <p class="text-base sm:text-lg text-foreground">{{ $user->date_of_birth?->format('d.m.Y') ?? '—' }}</p>
                        </div>
                        <div>
                            <span class="block text-sm font-medium text-muted-foreground mb-1">{{ __('app.role') }}</span>
                            <p class="text-base sm:text-lg text-foreground">{{ ucfirst($user->role) }}</p>
                        </div>
                    </div>
                @elseif($user->isTrener())
                    <p class="text-sm text-muted-foreground mb-6">{{ __('app.customer_profile_staff_hint') }}</p>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
                        <div>
                            <span class="block text-sm font-medium text-muted-foreground mb-1">{{ __('app.first_name') }}</span>
                            <p class="text-base sm:text-lg text-foreground">{{ $profileFirstName ?: '—' }}</p>
                        </div>
                        <div>
                            <span class="block text-sm font-medium text-muted-foreground mb-1">{{ __('app.last_name') }}</span>
                            <p class="text-base sm:text-lg text-foreground">{{ $profileLastName ?: '—' }}</p>
                        </div>
                        <div class="sm:col-span-2">
                            <span class="block text-sm font-medium text-muted-foreground mb-1">{{ __('app.email_address') }}</span>
                            <p class="text-base sm:text-lg text-foreground">{{ $user->email }}</p>
                        </div>
                    </div>
                @elseif($user->isUser())
                    <div class="space-y-6">
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
                            <div>
                                <span class="block text-sm font-medium text-muted-foreground mb-1">{{ __('app.first_name') }}</span>
                                <p class="text-base sm:text-lg text-foreground">{{ $profileFirstName ?: '—' }}</p>
                            </div>
                            <div>
                                <span class="block text-sm font-medium text-muted-foreground mb-1">{{ __('app.last_name') }}</span>
                                <p class="text-base sm:text-lg text-foreground">{{ $profileLastName ?: '—' }}</p>
                            </div>
                            <div class="sm:col-span-2">
                                <span class="block text-sm font-medium text-muted-foreground mb-1">{{ __('app.email_address') }}</span>
                                <p class="text-base sm:text-lg text-foreground">{{ $user->email }}</p>
                            </div>
                            @unless($beautyOnly ?? false)
                            <div class="sm:col-span-2">
                                <span class="block text-sm font-medium text-muted-foreground mb-1">{{ __('app.members_active_package') }}</span>
                                <p class="text-base sm:text-lg text-foreground">{{ $activePayment ? $activePayment->getPaymentTypeLabel() : '—' }}</p>
                            </div>
                            <div>
                                <span class="block text-sm font-medium text-muted-foreground mb-1">{{ __('app.members_col_used_total') }}</span>
                                <p class="text-base sm:text-lg text-foreground">
                                    @if($pkgTotal !== null && $pkgTotal > 0)
                                        {{ $pkgUsed }} / {{ $pkgTotal }}
                                    @else
                                        —
                                    @endif
                                </p>
                            </div>
                            <div>
                                <span class="block text-sm font-medium text-muted-foreground mb-1">{{ __('app.members_activation_date') }}</span>
                                <p class="text-base sm:text-lg text-foreground">{{ $activePayment && $activePayment->valid_from ? $activePayment->valid_from->format('d.m.Y') : '—' }}</p>
                            </div>
                            <div></div>
                            @endunless
                            <div>
                                <span class="block text-sm font-medium text-muted-foreground mb-1">{{ __('app.phone_number') }}</span>
                                <p class="text-base sm:text-lg text-foreground">{{ $user->phone ?: '—' }}</p>
                            </div>
                            <div>
                                <span class="block text-sm font-medium text-muted-foreground mb-1">{{ __('app.date_of_birth') }}</span>
                                <p class="text-base sm:text-lg text-foreground">{{ $user->date_of_birth?->format('d.m.Y') ?? '—' }}</p>
                            </div>
                            @unless($beautyOnly ?? false)
                            @if($firstTrainingDate)
                                <div>
                                    <span class="block text-sm font-medium text-muted-foreground mb-1">{{ __('app.members_training_since') }}</span>
                                    <p class="text-base sm:text-lg text-foreground font-medium">{{ $firstTrainingDate->format('d.m.Y') }}</p>
                                </div>
                            @endif
                            <div>
                                <span class="block text-sm font-medium text-muted-foreground mb-1">{{ __('app.members_experience_level') }}</span>
                                <p class="text-base sm:text-lg text-foreground">{{ $expLabel }}</p>
                            </div>
                            @endunless
                            @if($user->prefersPilates() || $user->prefersBoth())
                                <div>
                                    <span class="block text-sm font-medium text-muted-foreground mb-1">{{ __('app.gender') }}</span>
                                    <p class="text-base sm:text-lg text-foreground">{{ $user->gender === 'female' ? __('app.gender_female') : ($user->gender === 'male' ? __('app.gender_male') : '—') }}</p>
                                </div>
                                <div class="sm:col-span-2">
                                    <span class="block text-sm font-medium text-muted-foreground mb-1">{{ __('app.city') }} / {{ __('app.address') }}</span>
                                    <p class="text-base sm:text-lg text-foreground">{{ trim(implode(', ', array_filter([$user->city, $user->address]))) ?: '—' }}</p>
                                </div>
                                @if($user->emergency_contact_name || $user->emergency_contact_phone)
                                    <div>
                                        <span class="block text-sm font-medium text-muted-foreground mb-1">{{ __('app.emergency_contact_name') }}</span>
                                        <p class="text-base sm:text-lg text-foreground">{{ $user->emergency_contact_name ?: '—' }}</p>
                                    </div>
                                    <div>
                                        <span class="block text-sm font-medium text-muted-foreground mb-1">{{ __('app.emergency_contact_phone') }}</span>
                                        <p class="text-base sm:text-lg text-foreground">{{ $user->emergency_contact_phone ?: '—' }}</p>
                                    </div>
                                @elseif($user->emergency_contact)
                                    <div class="sm:col-span-2">
                                        <span class="block text-sm font-medium text-muted-foreground mb-1">{{ __('app.emergency_contact') }}</span>
                                        <p class="text-base sm:text-lg text-foreground">{{ $user->emergency_contact }}</p>
                                    </div>
                                @else
                                    <div>
                                        <span class="block text-sm font-medium text-muted-foreground mb-1">{{ __('app.emergency_contact_name') }}</span>
                                        <p class="text-base sm:text-lg text-foreground">—</p>
                                    </div>
                                    <div>
                                        <span class="block text-sm font-medium text-muted-foreground mb-1">{{ __('app.emergency_contact_phone') }}</span>
                                        <p class="text-base sm:text-lg text-foreground">—</p>
                                    </div>
                                @endif
                            @endif
                        </div>

                        @unless($beautyOnly ?? false)
                        @include('users.partials.pilates-registration-summary', [
                            'cardOuterClass' => 'rounded-xl border border-border bg-card text-card-foreground mb-6 overflow-hidden',
                            'titleLangKey' => 'customer_profile_questionnaire',
                            'omitGoals' => false,
                            'omitMedical' => false,
                        ])
                        @endunless
                    </div>
                @else
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
                        <div class="sm:col-span-2">
                            <span class="block text-sm font-medium text-muted-foreground mb-1">{{ __('app.full_name') }}</span>
                            <p class="text-base sm:text-lg text-foreground">{{ $user->name }}</p>
                        </div>
                        <div class="sm:col-span-2">
                            <span class="block text-sm font-medium text-muted-foreground mb-1">{{ __('app.email_address') }}</span>
                            <p class="text-base sm:text-lg text-foreground">{{ $user->email }}</p>
                        </div>
                    </div>
                @endif
            </div>

            @unless($staffAccountReadOnly ?? false)
            <p class="text-sm text-muted-foreground mb-4">
                @if($beautyOnly ?? false)
                    {{ __('app.manage_your_beauty_profile_hint') }}
                @else
                    {{ __('app.manage_your_profile_payments_and_bookings') }}
                @endif
            </p>

            <div class="rounded-xl border border-border bg-card/50 overflow-hidden mb-6">
                <div class="flex border-b border-border overflow-x-auto">
                    <button type="button" onclick="showTab('profile')" id="tab-profile"
                            class="customer-profile-tab flex-1 min-w-[140px] px-4 py-4 text-center text-sm font-semibold transition-colors whitespace-nowrap border-b-2 {{ $tab === 'profile' ? 'text-primary border-primary bg-primary/5' : 'text-muted-foreground border-transparent hover:text-foreground' }}">
                        <i class="fas fa-user mr-2" aria-hidden="true"></i>{{ __('app.profile') }}
                    </button>
                    @unless($beautyOnly ?? false)
                    <button type="button" onclick="showTab('payments')" id="tab-payments"
                            class="customer-profile-tab flex-1 min-w-[140px] px-4 py-4 text-center text-sm font-semibold transition-colors whitespace-nowrap border-b-2 {{ $tab === 'payments' ? 'text-primary border-primary bg-primary/5' : 'text-muted-foreground border-transparent hover:text-foreground' }}">
                        <i class="fas fa-credit-card mr-2" aria-hidden="true"></i>{{ __('app.payments') }}
                        @if($totalPayments > 0)
                            <span class="ml-2 inline-flex min-w-[1.25rem] items-center justify-center rounded-full bg-primary px-2 py-0.5 text-xs text-primary-foreground">{{ $totalPayments }}</span>
                        @endif
                    </button>
                    <button type="button" onclick="showTab('pilates')" id="tab-pilates"
                            class="customer-profile-tab flex-1 min-w-[140px] px-4 py-4 text-center text-sm font-semibold transition-colors whitespace-nowrap border-b-2 {{ $tab === 'pilates' ? 'text-primary border-primary bg-primary/5' : 'text-muted-foreground border-transparent hover:text-foreground' }}">
                        <i class="fas fa-dumbbell mr-2" aria-hidden="true"></i>{{ __('app.pilates') }}
                        @if($totalPilatesBookings > 0)
                            <span class="ml-2 inline-flex min-w-[1.25rem] items-center justify-center rounded-full bg-primary px-2 py-0.5 text-xs text-primary-foreground">{{ $totalPilatesBookings }}</span>
                        @endif
                    </button>
                    @endunless
                    <button type="button" onclick="showTab('salon')" id="tab-salon"
                            class="customer-profile-tab flex-1 min-w-[140px] px-4 py-4 text-center text-sm font-semibold transition-colors whitespace-nowrap border-b-2 {{ $tab === 'salon' ? 'text-primary border-primary bg-primary/5' : 'text-muted-foreground border-transparent hover:text-foreground' }}">
                        <i class="fas fa-spa mr-2" aria-hidden="true"></i>{{ __('app.salon') }}
                        @if($totalSalonAppointments > 0)
                            <span class="ml-2 inline-flex min-w-[1.25rem] items-center justify-center rounded-full bg-primary px-2 py-0.5 text-xs text-primary-foreground">{{ $totalSalonAppointments }}</span>
                        @endif
                    </button>
                </div>
            </div>

            <div id="tab-content-profile" class="tab-content {{ $tab === 'profile' ? '' : 'hidden' }}">
                <div class="rounded-xl border border-border bg-card p-6 sm:p-8">
                    <form method="POST" action="{{ route('customer.profile.update') }}">
                        @csrf
                        @method('PUT')

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div class="space-y-4">
                                <h3 class="text-lg font-semibold text-foreground mb-2">{{ __('app.basic_information') }}</h3>

                                <div>
                                    <label for="name" class="block text-sm font-medium text-muted-foreground mb-2">{{ __('app.full_name') }}</label>
                                    <input type="text" name="name" id="name" required
                                           class="w-full rounded-md border border-border bg-background px-3 py-2.5 text-sm text-foreground shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                                           value="{{ old('name', $user->name) }}">
                                    @error('name')
                                        <p class="mt-1 text-sm text-destructive">{{ $message }}</p>
                                    @enderror
                                </div>

                                <div>
                                    <label for="email" class="block text-sm font-medium text-muted-foreground mb-2">{{ __('app.email_address') }}</label>
                                    <input type="email" name="email" id="email" required
                                           class="w-full rounded-md border border-border bg-background px-3 py-2.5 text-sm text-foreground shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                                           value="{{ old('email', $user->email) }}">
                                    @error('email')
                                        <p class="mt-1 text-sm text-destructive">{{ $message }}</p>
                                    @enderror
                                </div>

                                <div>
                                    <label for="phone" class="block text-sm font-medium text-muted-foreground mb-2">{{ __('app.phone_number') }}</label>
                                    <input type="text" name="phone" id="phone"
                                           class="w-full rounded-md border border-border bg-background px-3 py-2.5 text-sm text-foreground shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                                           value="{{ old('phone', $user->phone) }}">
                                    @error('phone')
                                        <p class="mt-1 text-sm text-destructive">{{ $message }}</p>
                                    @enderror
                                </div>

                                <div>
                                    <label for="date_of_birth" class="block text-sm font-medium text-muted-foreground mb-2">{{ __('app.date_of_birth') }}</label>
                                    <input type="date" name="date_of_birth" id="date_of_birth"
                                           class="w-full rounded-md border border-border bg-background px-3 py-2.5 text-sm text-foreground shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                                           value="{{ old('date_of_birth', $user->date_of_birth?->format('Y-m-d')) }}">
                                    @error('date_of_birth')
                                        <p class="mt-1 text-sm text-destructive">{{ $message }}</p>
                                    @enderror
                                </div>

                                @if($user->prefersPilates() || $user->prefersBoth())
                                    <div>
                                        <label for="gender" class="block text-sm font-medium text-muted-foreground mb-2">{{ __('app.gender') }}</label>
                                        <select name="gender" id="gender"
                                                class="w-full rounded-md border border-border bg-background px-3 py-2.5 text-sm text-foreground shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
                                            <option value="">{{ __('app.select_placeholder') }}</option>
                                            <option value="female" {{ old('gender', $user->gender) === 'female' ? 'selected' : '' }}>{{ __('app.gender_female') }}</option>
                                            <option value="male" {{ old('gender', $user->gender) === 'male' ? 'selected' : '' }}>{{ __('app.gender_male') }}</option>
                                        </select>
                                        @error('gender')
                                            <p class="mt-1 text-sm text-destructive">{{ $message }}</p>
                                        @enderror
                                    </div>
                                    <div class="md:col-span-2">
                                        <label for="address" class="block text-sm font-medium text-muted-foreground mb-2">{{ __('app.address') }}</label>
                                        <input type="text" name="address" id="address" autocomplete="street-address"
                                               class="w-full rounded-md border border-border bg-background px-3 py-2.5 text-sm text-foreground shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                                               value="{{ old('address', $user->address) }}">
                                        @error('address')
                                            <p class="mt-1 text-sm text-destructive">{{ $message }}</p>
                                        @enderror
                                    </div>
                                    <div>
                                        <label for="city" class="block text-sm font-medium text-muted-foreground mb-2">{{ __('app.city') }}</label>
                                        <input type="text" name="city" id="city" autocomplete="address-level2"
                                               class="w-full rounded-md border border-border bg-background px-3 py-2.5 text-sm text-foreground shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                                               value="{{ old('city', $user->city) }}">
                                        @error('city')
                                            <p class="mt-1 text-sm text-destructive">{{ $message }}</p>
                                        @enderror
                                    </div>
                                    <div class="md:col-span-2">
                                        <label for="registration_message" class="block text-sm font-medium text-muted-foreground mb-2">{{ __('app.registration_message_label') }}</label>
                                        <textarea name="registration_message" id="registration_message" rows="2"
                                                  class="w-full rounded-md border border-border bg-background px-3 py-2.5 text-sm text-foreground shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">{{ old('registration_message', $user->registration_message) }}</textarea>
                                        @error('registration_message')
                                            <p class="mt-1 text-sm text-destructive">{{ $message }}</p>
                                        @enderror
                                    </div>
                                @endif

                                <div>
                                    <label for="emergency_contact_name" class="block text-sm font-medium text-muted-foreground mb-2">{{ __('app.emergency_contact_name') }}</label>
                                    <input type="text" name="emergency_contact_name" id="emergency_contact_name"
                                           class="w-full rounded-md border border-border bg-background px-3 py-2.5 text-sm text-foreground shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                                           value="{{ old('emergency_contact_name', $user->emergency_contact_name) }}">
                                    @error('emergency_contact_name')
                                        <p class="mt-1 text-sm text-destructive">{{ $message }}</p>
                                    @enderror
                                </div>
                                <div>
                                    <label for="emergency_contact_phone" class="block text-sm font-medium text-muted-foreground mb-2">{{ __('app.emergency_contact_phone') }}</label>
                                    <input type="tel" name="emergency_contact_phone" id="emergency_contact_phone"
                                           class="w-full rounded-md border border-border bg-background px-3 py-2.5 text-sm text-foreground shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                                           value="{{ old('emergency_contact_phone', $user->emergency_contact_phone) }}">
                                    @error('emergency_contact_phone')
                                        <p class="mt-1 text-sm text-destructive">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>

                            <div class="space-y-4">
                                <h3 class="text-lg font-semibold text-foreground mb-2">{{ __('app.password_and_security') }}</h3>

                                <div>
                                    <label for="password" class="block text-sm font-medium text-muted-foreground mb-2">{{ __('app.new_password') }}</label>
                                    <input type="password" name="password" id="password"
                                           class="w-full rounded-md border border-border bg-background px-3 py-2.5 text-sm text-foreground shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                                           placeholder="{{ __('app.leave_blank_to_keep_current') }}">
                                    @error('password')
                                        <p class="mt-1 text-sm text-destructive">{{ $message }}</p>
                                    @enderror
                                </div>

                                <div>
                                    <label for="password_confirmation" class="block text-sm font-medium text-muted-foreground mb-2">{{ __('app.confirm_password') }}</label>
                                    <input type="password" name="password_confirmation" id="password_confirmation"
                                           class="w-full rounded-md border border-border bg-background px-3 py-2.5 text-sm text-foreground shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                                           placeholder="{{ __('app.confirm_new_password') }}">
                                </div>

                                @if($user->prefersPilates() || $user->prefersBoth())
                                    <h3 class="text-lg font-semibold text-foreground mb-2 mt-6">{{ __('app.pilates_information') }}</h3>

                                    <div>
                                        <label for="fitness_level" class="block text-sm font-medium text-muted-foreground mb-2">{{ __('app.fitness_level') }}</label>
                                        <select name="fitness_level" id="fitness_level"
                                                class="w-full rounded-md border border-border bg-background px-3 py-2.5 text-sm text-foreground shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
                                            <option value="">{{ __('app.select_level') }}</option>
                                            <option value="beginner" {{ old('fitness_level', $user->fitness_level) === 'beginner' ? 'selected' : '' }}>{{ __('app.beginner') }}</option>
                                            <option value="intermediate" {{ old('fitness_level', $user->fitness_level) === 'intermediate' ? 'selected' : '' }}>{{ __('app.intermediate') }}</option>
                                            <option value="advanced" {{ old('fitness_level', $user->fitness_level) === 'advanced' ? 'selected' : '' }}>{{ __('app.advanced') }}</option>
                                        </select>
                                        @error('fitness_level')
                                            <p class="mt-1 text-sm text-destructive">{{ $message }}</p>
                                        @enderror
                                    </div>

                                    <div>
                                        <label for="goals" class="block text-sm font-medium text-muted-foreground mb-2">{{ __('app.fitness_goals') }}</label>
                                        <textarea name="goals" id="goals" rows="4"
                                                  class="w-full rounded-md border border-border bg-background px-3 py-2.5 text-sm text-foreground shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">{{ old('goals', $user->goals) }}</textarea>
                                        @error('goals')
                                            <p class="mt-1 text-sm text-destructive">{{ $message }}</p>
                                        @enderror
                                    </div>

                                    <div>
                                        <label for="medications" class="block text-sm font-medium text-muted-foreground mb-2">{{ __('app.medications_question') }}</label>
                                        <textarea name="medications" id="medications" rows="2"
                                                  class="w-full rounded-md border border-border bg-background px-3 py-2.5 text-sm text-foreground shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">{{ old('medications', $user->medications) }}</textarea>
                                        @error('medications')
                                            <p class="mt-1 text-sm text-destructive">{{ $message }}</p>
                                        @enderror
                                    </div>

                                    <div>
                                        <label for="instructor_note" class="block text-sm font-medium text-muted-foreground mb-2">{{ __('app.instructor_note_label') }}</label>
                                        <textarea name="instructor_note" id="instructor_note" rows="3"
                                                  class="w-full rounded-md border border-border bg-background px-3 py-2.5 text-sm text-foreground shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">{{ old('instructor_note', $user->instructor_note) }}</textarea>
                                        @error('instructor_note')
                                            <p class="mt-1 text-sm text-destructive">{{ $message }}</p>
                                        @enderror
                                    </div>

                                    <div>
                                        <label for="medical_conditions" class="block text-sm font-medium text-muted-foreground mb-2">{{ __('app.medical_conditions') }}</label>
                                        <textarea name="medical_conditions" id="medical_conditions" rows="3"
                                                  class="w-full rounded-md border border-border bg-background px-3 py-2.5 text-sm text-foreground shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">{{ old('medical_conditions', $user->medical_conditions) }}</textarea>
                                        @error('medical_conditions')
                                            <p class="mt-1 text-sm text-destructive">{{ $message }}</p>
                                        @enderror
                                    </div>

                                    <p class="text-xs text-muted-foreground mt-4">{{ __('app.customer_profile_questionnaire_edit_hint') }}</p>
                                @else
                                    <h3 class="text-lg font-semibold text-foreground mb-2 mt-6">{{ __('app.profile_misc') }}</h3>
                                    <div>
                                        <label for="medical_conditions" class="block text-sm font-medium text-muted-foreground mb-2">{{ __('app.medical_conditions') }}</label>
                                        <textarea name="medical_conditions" id="medical_conditions" rows="3"
                                                  class="w-full rounded-md border border-border bg-background px-3 py-2.5 text-sm text-foreground shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">{{ old('medical_conditions', $user->medical_conditions) }}</textarea>
                                        @error('medical_conditions')
                                            <p class="mt-1 text-sm text-destructive">{{ $message }}</p>
                                        @enderror
                                    </div>
                                @endif
                            </div>
                        </div>

                        <div class="mt-8 flex justify-end gap-4 pt-6 border-t border-border">
                            <button type="submit"
                                    class="inline-flex items-center justify-center rounded-md bg-primary px-8 py-3 text-sm font-medium text-primary-foreground shadow transition-colors hover:bg-primary/90">
                                <i class="fas fa-save mr-2" aria-hidden="true"></i>{{ __('app.save_changes') }}
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            @unless($beautyOnly ?? false)
            <div id="tab-content-payments" class="tab-content {{ $tab === 'payments' ? '' : 'hidden' }}">
                <div class="rounded-xl border border-border bg-card overflow-hidden">
                    @if($activePayment)
                        <div class="border-b border-border bg-primary/5 px-6 py-5">
                            <h3 class="text-base font-semibold text-foreground mb-3">{{ __('app.current_active_packages') }}</h3>
                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm text-muted-foreground">
                                <p><strong class="text-foreground">{{ __('app.packages') }}:</strong> {{ $user->getActivePilatesPayments()->count() }}</p>
                                <p><strong class="text-foreground">{{ __('app.monthly_limit') }}:</strong> {{ $totalMonthlyLimit }} {{ __('app.classes') }}</p>
                                <p><strong class="text-foreground">{{ __('app.weekly_limit') }}:</strong> {{ $totalWeeklyLimit }} {{ __('app.classes') }}</p>
                            </div>
                        </div>
                    @endif

                    <div class="px-6 py-4 border-b border-border">
                        <h3 class="text-lg font-semibold text-foreground">{{ __('app.payment_history') }}</h3>
                    </div>

                    @if($payments->count() > 0)
                        <div class="overflow-x-auto">
                            <table class="min-w-full divide-y divide-border text-sm">
                                <thead class="bg-muted/40">
                                    <tr>
                                        <th class="px-6 py-3 text-left font-medium text-muted-foreground">{{ __('app.date') }}</th>
                                        <th class="px-6 py-3 text-left font-medium text-muted-foreground">{{ __('app.type') }}</th>
                                        <th class="px-6 py-3 text-left font-medium text-muted-foreground">{{ __('app.amount') }}</th>
                                        <th class="px-6 py-3 text-left font-medium text-muted-foreground">{{ __('app.status') }}</th>
                                        <th class="px-6 py-3 text-left font-medium text-muted-foreground">{{ __('app.valid_until') }}</th>
                                        <th class="px-6 py-3 text-left font-medium text-muted-foreground">{{ __('app.classes_remaining') }}</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-border bg-card">
                                    @foreach($payments as $payment)
                                        <tr class="hover:bg-muted/20">
                                            <td class="px-6 py-4 whitespace-nowrap text-foreground">{{ $payment->created_at->format('M j, Y') }}</td>
                                            <td class="px-6 py-4 whitespace-nowrap text-foreground">{{ $payment->getPaymentTypeLabel() }}</td>
                                            <td class="px-6 py-4 whitespace-nowrap text-foreground">{{ number_format($payment->amount, 0) }} {{ __('app.currency') }}</td>
                                            <td class="px-6 py-4 whitespace-nowrap">
                                                <span class="inline-flex rounded-full px-2 py-1 text-xs font-medium
                                                    @if($payment->status === 'paid') bg-green-500/15 text-green-700 dark:text-green-400
                                                    @elseif($payment->status === 'pending') bg-amber-500/15 text-amber-800 dark:text-amber-300
                                                    @else bg-destructive/15 text-destructive @endif">
                                                    {{ __('app.' . $payment->status) }}
                                                </span>
                                            </td>
                                            <td class="px-6 py-4 whitespace-nowrap text-foreground">{{ $payment->valid_until ? $payment->valid_until->format('M j, Y') : '-' }}</td>
                                            <td class="px-6 py-4 whitespace-nowrap text-foreground">{{ $payment->classes_remaining ?? '-' }}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        <div class="px-6 py-4 border-t border-border">
                            {{ $payments->links() }}
                        </div>
                    @else
                        <div class="text-center py-12 px-4">
                            <i class="fas fa-credit-card text-4xl text-muted-foreground/50 mb-4" aria-hidden="true"></i>
                            <h3 class="text-lg font-medium text-foreground mb-2">{{ __('app.no_payments_found') }}</h3>
                            <p class="text-muted-foreground">{{ __('app.no_payments_description') }}</p>
                        </div>
                    @endif
                </div>
            </div>

            <div id="tab-content-pilates" class="tab-content {{ $tab === 'pilates' ? '' : 'hidden' }}">
                <div class="rounded-xl border border-border bg-card overflow-hidden">
                    <div class="px-6 py-4 border-b border-border">
                        <h3 class="text-lg font-semibold text-foreground">{{ __('app.pilates_bookings') }}</h3>
                    </div>

                    @if($pilatesBookings->count() > 0)
                        <div class="overflow-x-auto">
                            <table class="min-w-full divide-y divide-border text-sm">
                                <thead class="bg-muted/40">
                                    <tr>
                                        <th class="px-6 py-3 text-left font-medium text-muted-foreground">{{ __('app.class') }}</th>
                                        <th class="px-6 py-3 text-left font-medium text-muted-foreground">{{ __('app.date') }} & {{ __('app.time') }}</th>
                                        <th class="px-6 py-3 text-left font-medium text-muted-foreground">{{ __('app.instructor') }}</th>
                                        <th class="px-6 py-3 text-left font-medium text-muted-foreground">{{ __('app.status') }}</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-border bg-card">
                                    @foreach($pilatesBookings as $booking)
                                        <tr class="hover:bg-muted/20">
                                            <td class="px-6 py-4 whitespace-nowrap font-medium text-foreground">{{ $booking->pilatesClass->name }}</td>
                                            <td class="px-6 py-4 whitespace-nowrap text-foreground">
                                                <div>{{ $booking->pilatesClass->date ? $booking->pilatesClass->date->format('M j, Y') : '-' }}</div>
                                                <div class="text-muted-foreground">{{ $booking->pilatesClass->start_time->format('H:i') }} - {{ $booking->pilatesClass->end_time->format('H:i') }}</div>
                                            </td>
                                            <td class="px-6 py-4 whitespace-nowrap text-foreground">{{ $booking->pilatesClass->instructor?->name ?? __('app.no_instructor') }}</td>
                                            <td class="px-6 py-4 whitespace-nowrap">
                                                <span class="inline-flex rounded-full px-2 py-1 text-xs font-medium
                                                    @if($booking->status === 'confirmed') bg-green-500/15 text-green-700 dark:text-green-400
                                                    @elseif($booking->status === 'pending') bg-amber-500/15 text-amber-800 dark:text-amber-300
                                                    @else bg-destructive/15 text-destructive @endif">
                                                    {{ __('app.' . $booking->status) }}
                                                </span>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        <div class="px-6 py-4 border-t border-border">
                            {{ $pilatesBookings->links() }}
                        </div>
                    @else
                        <div class="text-center py-12 px-4">
                            <i class="fas fa-dumbbell text-4xl text-muted-foreground/50 mb-4" aria-hidden="true"></i>
                            <h3 class="text-lg font-medium text-foreground mb-2">{{ __('app.no_pilates_bookings_found') }}</h3>
                            <p class="text-muted-foreground">{{ __('app.no_pilates_bookings_description') }}</p>
                        </div>
                    @endif
                </div>
            </div>
            @endunless

            <div id="tab-content-salon" class="tab-content {{ $tab === 'salon' ? '' : 'hidden' }}">
                <div class="rounded-xl border border-border bg-card overflow-hidden">
                    <div class="px-6 py-4 border-b border-border">
                        <h3 class="text-lg font-semibold text-foreground">{{ __('app.salon_appointments') }}</h3>
                    </div>

                    @if($salonAppointments->count() > 0)
                        <div class="overflow-x-auto">
                            <table class="min-w-full divide-y divide-border text-sm">
                                <thead class="bg-muted/40">
                                    <tr>
                                        <th class="px-6 py-3 text-left font-medium text-muted-foreground">{{ __('app.service') }}</th>
                                        <th class="px-6 py-3 text-left font-medium text-muted-foreground">{{ __('app.date') }} & {{ __('app.time') }}</th>
                                        <th class="px-6 py-3 text-left font-medium text-muted-foreground">{{ __('app.price') }}</th>
                                        <th class="px-6 py-3 text-left font-medium text-muted-foreground">{{ __('app.status') }}</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-border bg-card">
                                    @foreach($salonAppointments as $appointment)
                                        <tr class="hover:bg-muted/20">
                                            <td class="px-6 py-4 whitespace-nowrap font-medium text-foreground">{{ $appointment->service?->name ?? __('app.deleted_service') }}</td>
                                            <td class="px-6 py-4 whitespace-nowrap text-foreground">
                                                <div>{{ $appointment->appointment_date ? $appointment->appointment_date->format('M j, Y') : '-' }}</div>
                                                <div class="text-muted-foreground">{{ $appointment->appointment_time }}</div>
                                            </td>
                                            <td class="px-6 py-4 whitespace-nowrap text-foreground">{{ number_format($appointment->service?->price ?? 0, 0) }} {{ __('app.currency') }}</td>
                                            <td class="px-6 py-4 whitespace-nowrap">
                                                <span class="inline-flex rounded-full px-2 py-1 text-xs font-medium
                                                    @if($appointment->status === 'completed') bg-green-500/15 text-green-700 dark:text-green-400
                                                    @elseif($appointment->status === 'scheduled' || $appointment->status === 'confirmed') bg-primary/15 text-primary
                                                    @elseif($appointment->status === 'cancelled') bg-destructive/15 text-destructive
                                                    @else bg-muted text-muted-foreground @endif">
                                                    {{ __('app.' . $appointment->status) }}
                                                </span>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        <div class="px-6 py-4 border-t border-border">
                            {{ $salonAppointments->links() }}
                        </div>
                    @else
                        <div class="text-center py-12 px-4">
                            <i class="fas fa-spa text-4xl text-muted-foreground/50 mb-4" aria-hidden="true"></i>
                            <h3 class="text-lg font-medium text-foreground mb-2">{{ __('app.no_salon_appointments_found') }}</h3>
                            <p class="text-muted-foreground">{{ __('app.no_salon_appointments_description') }}</p>
                        </div>
                    @endif
                </div>
            </div>
            @endunless

        </div>
    </section>

    @if($user->isUser() && !($beautyOnly ?? false))
        <div x-show="appointmentsOpen"
             x-cloak
             class="fixed inset-0 z-[60] flex items-center justify-center bg-black/50 p-4"
             @keydown.escape.window="appointmentsOpen = false">
            <div class="relative max-h-[90vh] w-full max-w-3xl overflow-y-auto rounded-lg border border-border bg-background shadow-lg"
                 @click.outside="appointmentsOpen = false">
                <div class="sticky top-0 z-[70] flex items-start justify-between gap-4 border-b border-border bg-background/95 p-6 pr-14 backdrop-blur-sm">
                    <div>
                        <h3 class="text-2xl font-medium text-foreground">{{ __('app.members_all_appointments') }}</h3>
                        <p class="mt-1 text-sm text-muted-foreground">{{ $profileFirstName }} {{ $profileLastName }}</p>
                    </div>
                    <button type="button"
                            class="absolute right-4 top-4 rounded-full border border-border bg-background/80 p-2 shadow-lg transition-colors hover:bg-primary/10"
                            @click="appointmentsOpen = false"
                            aria-label="{{ __('app.members_close') }}">
                        <i class="fas fa-times w-5 h-5 text-foreground" aria-hidden="true"></i>
                    </button>
                </div>

                <div class="p-6">
                    @if($aptTotal === 0)
                        <div class="py-12 text-center text-muted-foreground">
                            <i class="far fa-calendar-alt mx-auto mb-4 block text-5xl opacity-40" aria-hidden="true"></i>
                            <p>{{ __('app.members_no_appointments') }}</p>
                        </div>
                    @else
                        <div class="space-y-3">
                            @foreach($profileAppointments as $idx => $booking)
                                @php
                                    $pc = $booking->pilatesClass;
                                    $isPast = $pc->date->lt(\Carbon\Carbon::today());
                                    $aptNum = $aptTotal - $idx;
                                @endphp
                                <div class="rounded-lg border p-4 transition-colors {{ $isPast ? 'border-border/50 bg-muted/30' : 'border-primary/20 bg-primary/5' }}">
                                    <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                                        <div class="flex flex-1 items-start gap-3">
                                            <div class="rounded-md p-2 {{ $isPast ? 'bg-muted' : 'bg-primary/10' }}">
                                                <i class="far fa-calendar-alt {{ $isPast ? 'text-muted-foreground' : 'text-primary' }} text-lg" aria-hidden="true"></i>
                                            </div>
                                            <div class="min-w-0 flex-1">
                                                <p class="font-medium text-foreground">
                                                    {{ $pc->date->format('d.m.Y') }}
                                                    — {{ $pc->start_time->format('H:i') }}
                                                </p>
                                                <p class="mt-0.5 text-sm text-muted-foreground">{{ $pc->name }}</p>
                                                <div class="mt-1 flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
                                                    <span>{{ __('app.appointment') }} #{{ $aptNum }}</span>
                                                    @if($booking->payment)
                                                        <span class="text-muted-foreground/50">•</span>
                                                        <span>{{ $booking->payment->getPaymentTypeLabel() }}</span>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                        <div class="shrink-0 sm:ml-2">
                                            @if($isPast)
                                                <span class="inline-flex whitespace-nowrap rounded-full bg-muted px-3 py-1 text-xs text-muted-foreground">{{ __('app.members_apt_completed') }}</span>
                                            @else
                                                <span class="inline-flex whitespace-nowrap rounded-full bg-green-500/15 px-3 py-1 text-xs text-green-700 dark:text-green-400">{{ __('app.members_apt_upcoming') }}</span>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>

                        <div class="mt-6 border-t border-border pt-6">
                            <div class="grid grid-cols-2 gap-4 rounded-lg bg-muted/20 p-4">
                                <div>
                                    <p class="text-2xl font-semibold text-primary">{{ $aptTotal }}</p>
                                    <p class="text-sm text-muted-foreground">{{ __('app.total_appointments') }}</p>
                                </div>
                                <div>
                                    <p class="text-2xl font-semibold text-green-600 dark:text-green-400">{{ $aptCompleted }}</p>
                                    <p class="text-sm text-muted-foreground">{{ __('app.members_apt_completed') }}</p>
                                </div>
                            </div>
                        </div>
                    @endif
                </div>

                <div class="sticky bottom-0 border-t border-border bg-background p-6">
                    <div class="flex flex-col gap-3 sm:flex-row">
                        <button type="button"
                                class="inline-flex flex-1 items-center justify-center gap-2 rounded-md border border-border px-4 py-2.5 text-sm font-medium transition-colors hover:bg-muted sm:flex-none"
                                onclick="window.print()">
                            <i class="fas fa-print" aria-hidden="true"></i>
                            {{ __('app.members_print') }}
                        </button>
                        <button type="button"
                                class="flex-1 rounded-md border border-border px-4 py-2.5 text-sm font-medium transition-colors hover:bg-muted"
                                @click="appointmentsOpen = false">
                            {{ __('app.members_close') }}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    @endif
</div>

@push('scripts')
<script>
function showTab(tabName) {
    document.querySelectorAll('.tab-content').forEach(function (content) {
        content.classList.add('hidden');
    });
    document.querySelectorAll('.customer-profile-tab').forEach(function (tab) {
        tab.classList.remove('border-primary', 'bg-primary/5', 'text-primary');
        tab.classList.add('border-transparent', 'text-muted-foreground');
    });
    var pane = document.getElementById('tab-content-' + tabName);
    if (pane) {
        pane.classList.remove('hidden');
    }
    var activeTab = document.getElementById('tab-' + tabName);
    if (activeTab) {
        activeTab.classList.remove('border-transparent', 'text-muted-foreground');
        activeTab.classList.add('border-primary', 'bg-primary/5', 'text-primary');
    }
    var url = new URL(window.location.href);
    url.searchParams.set('tab', tabName);
    window.history.pushState({}, '', url);
}

document.addEventListener('DOMContentLoaded', function () {
    var urlParams = new URLSearchParams(window.location.search);
    var currentTab = urlParams.get('tab') || @json($tab);
    if (currentTab !== @json($tab)) {
        showTab(currentTab);
    }
});
</script>
@endpush
@endsection