@extends('layouts.app')

@php
    $authUser = auth()->user();
    $avatar = trim((string) ($authUser?->avatar ?? ''));
    $displayBalance = number_format((float) ($authUser?->balance ?? 0), 2);
    $displayCurrency = strtoupper((string) (optional($authUser?->wallet)->currency ?? 'USD'));
    $currencySymbol = match ($displayCurrency) {
        'EUR' => '€',
        'GBP' => '£',
        default => '$',
    };
    $userNavSection = 'profile';
    $userInitial = strtoupper(substr(trim((string) ($authUser?->name ?? 'U')), 0, 1)) ?: 'U';
@endphp

@section('content')
    <style>
        .profile-mobile-shell {
            max-width: 560px;
            margin: 0 auto;
            padding-bottom: 1.5rem;
        }

        .profile-mobile-header {
            display: flex;
            align-items: center;
            gap: 0.95rem;
            padding: 0.2rem 0 1rem;
        }

        .profile-mobile-avatar,
        .profile-mobile-avatar-fallback {
            width: 52px;
            height: 52px;
            border-radius: 999px;
            flex-shrink: 0;
        }

        .profile-mobile-avatar {
            object-fit: cover;
            border: 2px solid rgba(201, 142, 74, 0.14);
        }

        .profile-mobile-avatar-fallback {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(180deg, #1791dc 0%, #0f6fb4 100%);
            color: #fff;
            font-size: 1.35rem;
            font-weight: 800;
            box-shadow: 0 10px 20px rgba(15, 111, 180, 0.18);
        }

        .profile-mobile-name {
            flex: 1 1 auto;
            color: #191512;
            font-size: 1.65rem;
            font-weight: 800;
            line-height: 1.15;
            text-align: center;
            padding-right: 52px;
        }

        .profile-mobile-balance {
            margin-bottom: 1rem;
            padding: 1rem 1.05rem;
            border: 1px solid rgba(201, 142, 74, 0.1);
            border-radius: 1.35rem;
            background: #fff;
            box-shadow: 0 10px 28px rgba(31, 27, 23, 0.06);
        }

        .profile-mobile-balance-label {
            color: #211d19;
            font-size: 1rem;
            font-weight: 700;
        }

        .profile-mobile-balance-value {
            margin-top: 0.35rem;
            color: #f5a22b;
            font-size: clamp(2rem, 6vw, 2.45rem);
            font-weight: 800;
            line-height: 1;
            text-align: right;
            letter-spacing: -0.04em;
        }

        .profile-mobile-menu {
            overflow: hidden;
            border-radius: 1.2rem;
            background: #fff;
            box-shadow: 0 10px 26px rgba(31, 27, 23, 0.05);
        }

        .profile-mobile-row,
        .profile-mobile-summary {
            width: 100%;
            min-height: 58px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.9rem;
            padding: 0.95rem 1rem;
            color: #211d19;
            font-size: 1rem;
            font-weight: 700;
            text-decoration: none;
            background: #fff;
            border: 0;
        }

        .profile-mobile-row:hover,
        .profile-mobile-row:focus,
        .profile-mobile-summary:hover,
        .profile-mobile-summary:focus {
            color: #211d19;
        }

        .profile-mobile-row + .profile-mobile-row,
        .profile-mobile-group + .profile-mobile-group,
        .profile-mobile-row + .profile-mobile-group,
        .profile-mobile-group + .profile-mobile-row {
            border-top: 1px solid #f0ece7;
        }

        .profile-mobile-summary {
            list-style: none;
            cursor: pointer;
        }

        .profile-mobile-summary::-webkit-details-marker {
            display: none;
        }

        .profile-mobile-label {
            flex: 1 1 auto;
        }

        .profile-mobile-caret {
            color: #161311;
            font-size: 1rem;
            line-height: 1;
            transition: transform 0.2s ease;
        }

        details[open] > .profile-mobile-summary .profile-mobile-caret {
            transform: rotate(90deg);
        }

        .profile-mobile-submenu {
            padding: 0 1rem 0.95rem;
            border-top: 1px solid #f5f1ec;
        }

        .profile-mobile-form-grid {
            display: grid;
            gap: 0.85rem;
            padding-top: 0.9rem;
        }

        .profile-mobile-field label {
            display: block;
            margin-bottom: 0.35rem;
            color: #81776d;
            font-size: 0.86rem;
            font-weight: 700;
        }

        .profile-mobile-field input {
            width: 100%;
            min-height: 46px;
            padding: 0.7rem 0.9rem;
            border: 1px solid rgba(201, 142, 74, 0.16);
            border-radius: 0.95rem;
            background: #fff;
            color: #241f1b;
            font-size: 0.95rem;
        }

        .profile-mobile-field input:focus {
            outline: none;
            border-color: rgba(201, 142, 74, 0.4);
            box-shadow: 0 0 0 0.16rem rgba(201, 142, 74, 0.12);
        }

        .profile-mobile-actions {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            flex-wrap: wrap;
            padding-top: 0.2rem;
        }

        .profile-mobile-save {
            min-height: 46px;
            padding: 0 1.15rem;
            border: 0;
            border-radius: 999px;
            background: linear-gradient(180deg, rgba(201, 142, 74, 0.94) 0%, var(--user-accent, #c98e4a) 100%);
            color: #fff;
            font-size: 0.95rem;
            font-weight: 700;
            box-shadow: 0 10px 22px rgba(201, 142, 74, 0.18);
        }

        .profile-mobile-status {
            color: #8d8378;
            font-size: 0.87rem;
            font-weight: 600;
        }

        .profile-mobile-subitem {
            display: block;
            padding: 0.7rem 0;
            color: #7d746b;
            font-size: 0.94rem;
            font-weight: 600;
            text-decoration: none;
        }

        .profile-mobile-subitem:hover,
        .profile-mobile-subitem:focus {
            color: var(--user-accent, #c98e4a);
        }

        .profile-mobile-subitem + .profile-mobile-subitem {
            border-top: 1px solid #f5f1ec;
        }

        .profile-mobile-signout {
            display: block;
            margin-top: 0.85rem;
            padding: 0.95rem 0;
            color: #98918a;
            font-size: 1rem;
            font-weight: 700;
            text-decoration: none;
        }

        .profile-mobile-error {
            margin-top: 0.35rem;
            color: #d86052;
            font-size: 0.8rem;
            font-weight: 600;
        }

        @media (max-width: 575.98px) {
            .profile-mobile-shell {
                max-width: none;
            }

            .profile-mobile-name {
                font-size: 1.45rem;
                padding-right: 44px;
            }

            .profile-mobile-avatar,
            .profile-mobile-avatar-fallback {
                width: 44px;
                height: 44px;
            }

            .profile-mobile-balance {
                border-radius: 1.1rem;
            }
        }
    </style>

    <div class="container-xxl flex-grow-1 container-p-y">
        <div class="profile-mobile-shell">
            <div class="profile-mobile-header">
                @if($avatar !== '')
                    <img src="{{ asset($avatar) }}" alt="{{ $authUser?->name }}" class="profile-mobile-avatar">
                @else
                    <span class="profile-mobile-avatar-fallback">{{ $userInitial }}</span>
                @endif

                <div class="profile-mobile-name">{{ $authUser?->name }}</div>
            </div>

            <div class="profile-mobile-balance">
                <div class="profile-mobile-balance-label">Balance</div>
                <div class="profile-mobile-balance-value">{!! $displayBalance . $currencySymbol !!}</div>
            </div>

            <div class="profile-mobile-menu">
                <details class="profile-mobile-group">
                    <summary class="profile-mobile-summary">
                        <span class="profile-mobile-label">Edit Account</span>
                        <span class="profile-mobile-caret">
                            <i class="fa-solid fa-chevron-right"></i>
                        </span>
                    </summary>

                    <div class="profile-mobile-submenu">
                        <form method="POST" action="{{ route('profile.update') }}" class="profile-mobile-form-grid">
                            @csrf
                            @method('PATCH')

                            <div class="profile-mobile-field">
                                <label for="profile_name">Name</label>
                                <input id="profile_name" name="name" type="text" value="{{ old('name', $authUser?->name) }}" required>
                                @error('name')
                                    <div class="profile-mobile-error">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="profile-mobile-field">
                                <label for="profile_email">Email</label>
                                <input id="profile_email" name="email" type="email" value="{{ old('email', $authUser?->email) }}" required>
                                @error('email')
                                    <div class="profile-mobile-error">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="profile-mobile-actions">
                                <button type="submit" class="profile-mobile-save">Save changes</button>
                                @if (session('status') === 'profile-updated')
                                    <span class="profile-mobile-status">Saved.</span>
                                @endif
                            </div>
                        </form>
                    </div>
                </details>

                <details class="profile-mobile-group">
                    <summary class="profile-mobile-summary">
                        <span class="profile-mobile-label">Refund</span>
                        <span class="profile-mobile-caret">
                            <i class="fa-solid fa-chevron-right"></i>
                        </span>
                    </summary>

                    <div class="profile-mobile-submenu">
                        <a href="{{ route('refunds.owner') }}" class="profile-mobile-subitem">Owner refund</a>
                        <a href="{{ route('refunds.co-subscribers') }}" class="profile-mobile-subitem">Co-subscribers refund</a>
                    </div>
                </details>

                <a href="{{ route('referrals.index') }}" class="profile-mobile-row">
                    <span class="profile-mobile-label">Referral and earn</span>
                    <span class="profile-mobile-caret">
                        <i class="fa-solid fa-chevron-right"></i>
                    </span>
                </a>

                <a href="{{ route('change_password') }}" class="profile-mobile-row">
                    <span class="profile-mobile-label">Change Password</span>
                    <span class="profile-mobile-caret">
                        <i class="fa-solid fa-chevron-right"></i>
                    </span>
                </a>
            </div>

            <a href="{{ route('logout') }}" class="profile-mobile-signout">Log Out</a>
        </div>
    </div>
@endsection