@php
    $useAdminLayout = Auth::check() && Auth::user()->role === 'admin';
@endphp
@if($useAdminLayout)
<x-admin-layout>
    <div class="profile-tabs-wrapper">
        <ul class="nav nav-tabs mb-4" role="tablist">
            <li class="nav-item">
                <a class="nav-link {{ !request()->has('tab') || request('tab') === 'profile' ? 'active' : '' }}" data-bs-toggle="tab" href="#profile" role="tab">Profile</a>
            </li>
            <li class="nav-item">
                <a class="nav-link {{ request('tab') === 'account' ? 'active' : '' }}" data-bs-toggle="tab" href="#account" role="tab">Account</a>
            </li>
            <li class="nav-item">
                <a class="nav-link {{ request('tab') === 'notifications' ? 'active' : '' }}" data-bs-toggle="tab" href="#notifications" role="tab">Notifications</a>
            </li>
        </ul>

        <div class="tab-content">
            <div class="tab-pane fade {{ !request()->has('tab') || request('tab') === 'profile' ? 'show active' : '' }}" id="profile">
                <div class="card border-0 shadow-sm">
                    <div class="card-body p-4">
                        <h4 class="mb-4 fw-bold">Personal Information</h4>
                        <form method="POST" action="{{ route('profile.update') }}">
                            @csrf @method('PATCH')
                            <div class="row g-3 mb-3">
                                <div class="col-md-6">
                                    <label class="form-label fw-medium">First Name</label>
                                    <input type="text" name="name" class="form-control" value="{{ old('name', Auth::user()->name) }}">
                                    @error('name')<small class="text-danger">{{ $message }}</small>@enderror
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label fw-medium">Last Name</label>
                                    <input type="text" name="last_name" class="form-control" value="{{ old('last_name', Auth::user()->last_name) }}">
                                    @error('last_name')<small class="text-danger">{{ $message }}</small>@enderror
                                </div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label fw-medium">Email Address</label>
                                <input type="email" name="email" class="form-control" value="{{ old('email', Auth::user()->email) }}">
                                @error('email')<small class="text-danger">{{ $message }}</small>@enderror
                            </div>
                            <button type="submit" class="btn btn-primary">Save Changes</button>
                        </form>
                    </div>
                </div>
            </div>

            <div class="tab-pane fade {{ request('tab') === 'account' ? 'show active' : '' }}" id="account">
                <div class="card border-0 shadow-sm">
                    <div class="card-body p-4">
                        <h4 class="mb-4 fw-bold">Account Security</h4>
                        <form method="POST" action="{{ route('user.password.update') }}">
                            @csrf @method('PATCH')
                            <div class="mb-3">
                                <label class="form-label fw-medium">Current Password</label>
                                <input type="password" name="current_password" class="form-control">
                                @error('current_password')<small class="text-danger">{{ $message }}</small>@enderror
                            </div>
                            <div class="mb-3">
                                <label class="form-label fw-medium">New Password</label>
                                <input type="password" name="password" class="form-control">
                                @error('password')<small class="text-danger">{{ $message }}</small>@enderror
                            </div>
                            <div class="mb-3">
                                <label class="form-label fw-medium">Confirm Password</label>
                                <input type="password" name="password_confirmation" class="form-control">
                            </div>
                            <button type="submit" class="btn btn-primary">Change Password</button>
                        </form>
                        <hr class="my-4">
                        @if (!Auth::user()->hasVerifiedEmail())
                            <div class="alert alert-warning d-flex justify-content-between align-items-center">
                                <span>Your email is not verified.</span>
                                <form method="POST" action="{{ route('verification.send') }}">
                                    @csrf
                                    <button type="submit" class="btn btn-sm btn-outline-dark">Resend Verification</button>
                                </form>
                            </div>
                        @else
                            <div class="alert alert-success">Email verified ✓</div>
                        @endif
                    </div>
                </div>
            </div>

            <div class="tab-pane fade {{ request('tab') === 'notifications' ? 'show active' : '' }}" id="notifications">
                <div class="card border-0 shadow-sm">
                    <div class="card-body p-4">
                        <h4 class="mb-4 fw-bold">Notification Preferences</h4>
                        <div class="d-flex justify-content-between align-items-center mb-3 border-bottom pb-2">
                            <div>
                                <h6 class="mb-1">Email Notifications</h6>
                                <small class="text-muted">Receive notifications via email</small>
                            </div>
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" checked>
                            </div>
                        </div>
                        <div class="d-flex justify-content-between align-items-center mb-3 border-bottom pb-2">
                            <div>
                                <h6 class="mb-1">Match Reminders</h6>
                                <small class="text-muted">Get notified before matches start</small>
                            </div>
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" checked>
                            </div>
                        </div>
                        <div class="d-flex justify-content-between align-items-center mb-3 border-bottom pb-2">
                            <div>
                                <h6 class="mb-1">News Updates</h6>
                                <small class="text-muted">Latest club news and announcements</small>
                            </div>
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" checked>
                            </div>
                        </div>
                        <button class="btn btn-primary mt-3">Save Preferences</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-admin-layout>
@else
<x-app-layout>
    <main class="flex-grow-1">
        <div class="min-vh-100 bg-light">
            {{-- Hero Header --}}
            <section class="position-relative py-5 overflow-hidden user-profile-hero">
                <div class="position-absolute w-100 h-100 top-0 start-0 user-profile-hero-bg"></div>
                <div class="position-absolute rounded-circle user-profile-hero-circle user-profile-hero-circle-1"></div>
                <div class="position-absolute rounded-circle user-profile-hero-circle user-profile-hero-circle-2"></div>
                <div class="container position-relative" style="z-index: 2;">
                    <div class="d-flex justify-content-between align-items-center flex-wrap gap-4">
                        <div class="flex-grow-1"></div>
                        <div class="d-flex flex-column align-items-center text-center">
                            <div class="user-profile-avatar d-flex align-items-center justify-content-center mb-2">
                                <i class="bi bi-person-fill fs-3 text-white"></i>
                            </div>
                            <h2 class="mb-1 fw-bold user-profile-name">{{ Auth::user()->name }} {{ Auth::user()->last_name ?? '' }}</h2>
                            <p class="mb-0 text-muted user-profile-email">{{ Auth::user()->email }}</p>
                        </div>
                        <div class="flex-grow-1 d-flex justify-content-end">
                            <form method="POST" action="{{ route('logout') }}">
                                @csrf
                                <button type="submit" class="btn user-profile-logout d-flex align-items-center gap-2">
                                    <i class="bi bi-box-arrow-right"></i> Logout
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </section>

            {{-- Profile Cards --}}
            <section class="py-5">
                <div class="container">
                    <div class="row justify-content-center user-profile-cards">
                        <div class="col-lg-8">
                            {{-- Personal Information --}}
                            <div class="card border-0 shadow-sm user-profile-card mb-4">
                                <div class="card-body p-4 p-md-5">
                                    <div class="d-flex align-items-center mb-3">
                                        <div class="section-accent me-3"></div>
                                        <h2 class="mb-0 fw-bold user-profile-section-title">Personal Information</h2>
                                    </div>
                                    <form method="POST" action="{{ route('profile.update') }}">
                                        @csrf @method('PATCH')
                                        <div class="row g-3 mb-3">
                                            <div class="col-md-6">
                                                <label class="form-label fw-medium">First Name</label>
                                                <input type="text" name="name" class="form-control" value="{{ old('name', Auth::user()->name) }}">
                                                @error('name')<small class="text-danger">{{ $message }}</small>@enderror
                                            </div>
                                            <div class="col-md-6">
                                                <label class="form-label fw-medium">Last Name</label>
                                                <input type="text" name="last_name" class="form-control" value="{{ old('last_name', Auth::user()->last_name) }}">
                                                @error('last_name')<small class="text-danger">{{ $message }}</small>@enderror
                                            </div>
                                        </div>
                                        <div class="mb-4">
                                            <label class="form-label fw-medium">Email Address</label>
                                            <input type="email" name="email" class="form-control" value="{{ old('email', Auth::user()->email) }}">
                                            @error('email')<small class="text-danger">{{ $message }}</small>@enderror
                                        </div>
                                        <button class="btn user-profile-save" type="submit">
                                            <i class="bi bi-check2 me-2"></i>Save Changes
                                        </button>
                                    </form>
                                </div>
                            </div>

                            {{-- Update Password --}}
                            <div class="card border-0 shadow-sm user-profile-card mb-4">
                                <div class="card-body p-4 p-md-5">
                                    <div class="d-flex align-items-center mb-3">
                                        <div class="section-accent me-3"></div>
                                        <h2 class="mb-0 fw-bold user-profile-section-title">Update Password</h2>
                                    </div>
                                    <form method="POST" action="{{ route('user.password.update') }}">
                                        @csrf @method('PATCH')
                                        <div class="mb-3">
                                            <label class="form-label fw-medium">Current Password</label>
                                            <input type="password" name="current_password" class="form-control">
                                            @error('current_password')<small class="text-danger">{{ $message }}</small>@enderror
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label fw-medium">New Password</label>
                                            <input type="password" name="password" class="form-control">
                                            @error('password')<small class="text-danger">{{ $message }}</small>@enderror
                                        </div>
                                        <div class="mb-4">
                                            <label class="form-label fw-medium">Confirm New Password</label>
                                            <input type="password" name="password_confirmation" class="form-control">
                                        </div>
                                        <button class="btn user-profile-save" type="submit">
                                            <i class="bi bi-key me-2"></i>Change Password
                                        </button>
                                    </form>
                                </div>
                            </div>

                            {{-- Delete Account --}}
                            <div class="card shadow-sm user-profile-card" style="border-left: 4px solid #dc2626;">
                                <div class="card-body p-4 p-md-5">
                                    <div class="d-flex align-items-center mb-3">
                                        <div class="section-accent section-accent-danger me-3"></div>
                                        <h2 class="mb-0 fw-bold text-danger user-profile-section-title">Delete Account</h2>
                                    </div>
                                    <p class="text-muted mb-4">Once your account is deleted, all of its resources and data will be permanently deleted. Please enter your password to confirm.</p>
                                    <form method="POST" action="{{ route('profile.destroy') }}" onsubmit="return confirm('Are you sure you want to delete your account? This action cannot be undone.');">
                                        @csrf @method('DELETE')
                                        <div class="mb-3">
                                            <label class="form-label fw-medium">Password</label>
                                            <input type="password" name="password" class="form-control" placeholder="Enter your password to confirm" required>
                                            @error('password', 'userDeletion')<small class="text-danger">{{ $message }}</small>@enderror
                                        </div>
                                        <button class="btn btn-outline-danger" type="submit">
                                            <i class="bi bi-trash me-2"></i>Delete Account
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </main>
    <style>
        .user-profile-hero { min-height: 200px; }
        .user-profile-hero-bg { background: linear-gradient(135deg, #e0f7ff 0%, #bae6fd 40%, #7dd3fc 100%); }
        .user-profile-hero-circle { width: 260px; height: 260px; filter: blur(65px); pointer-events: none; }
        .user-profile-hero-circle-1 { top: -50px; right: -30px; background: rgba(116, 199, 254, 0.25); }
        .user-profile-hero-circle-2 { bottom: -70px; left: -50px; background: rgba(2, 132, 199, 0.12); }
        .user-profile-avatar {
            width: 56px; height: 56px;
            background: linear-gradient(135deg, #74c7fe, #0284c7);
            border-radius: 50%;
            box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35);
        }
        .user-profile-name { font-size: 1.1rem; color: #0284c7; }
        .user-profile-email { font-size: 0.9rem; }
        .user-profile-logout {
            background: rgba(255,255,255,0.9);
            color: #0284c7;
            border: 1px solid rgba(2, 132, 199, 0.4);
            font-weight: 600;
            border-radius: 0.5rem;
        }
        .user-profile-logout:hover { background: white; color: #0284c7; }
        .user-profile-card { border-radius: 1rem; overflow: hidden; }
        .user-profile-save {
            background: linear-gradient(135deg, #74c7fe, #0284c7);
            color: white;
            border: none;
            padding: 0.6rem 1.5rem;
            font-weight: 600;
            border-radius: 0.5rem;
        }
        .user-profile-save:hover { color: white; opacity: 0.95; }
        .section-accent { width: 4px; height: 22px; background: linear-gradient(180deg, #74c7fe, #0284c7); border-radius: 2px; }
        .section-accent-danger { background: linear-gradient(180deg, #ef4444, #dc2626) !important; }
        .user-profile-cards .user-profile-section-title { font-size: 1rem; }
        .user-profile-cards .form-label { font-size: 0.85rem; }
        .user-profile-cards .form-control { font-size: 0.9rem; }
        .user-profile-cards .user-profile-save,
        .user-profile-cards .btn-outline-danger { font-size: 0.875rem; padding: 0.45rem 1rem; }
        .user-profile-cards .text-muted { font-size: 0.875rem; }
    </style>
</x-app-layout>
@endif
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>