@extends('templates.' . site('template') . '.layouts.user')

@section('css')
@endsection

@section('contents')
    <!--my profile-->




    <div class="transition-all duration-300 ease-in-out" id="refresh"
        :class="{
            'lg:ml-64': !isCollapsed,
            'lg:ml-20': isCollapsed
        }">

        <div class="min-h-screen">
            <!-- Top Navigation Spacer for Desktop -->
            <div class="hidden lg:block h-20"></div>
            <!-- Content Area -->


            <div class="p-6">
                <!-- main content -->
                <div class="flex flex-col lg:mt-12">
                    <!-- Top Section: My Profile Text -->
                    <div class="w-full text-center mb-4">
                        <p
                            class="text-gray-300 w-32 mx-auto text-lg font-semibold border-b-2 border-sky-400 px-2 md:px-4 text-center rounded-xl">
                            My Profile
                        </p>
                    </div>

                    <!-- Main Layout -->
                    <div class="flex flex-col lg:flex-row">
                        <!-- Sidebar -->
                        <div
                            class="md:w-full lg:w-1/5 bg-gray-800/50 p-6 flex flex-col rounded-xl items-center md:h-96 md:mr-10 mb-8 lg:mb-0">
                            <div class="w-24 h-24 rounded-full overflow-hidden bg-gray-700 mb-4">
                                <img src="{{ asset('storage/profile/' . user()->photo) }}"
                                    alt="{{ user()->username ?? 'Profile Photo' }}" class="w-24 h-24" />
                            </div>
                            <nav class="text-start w-full space-y-4">
                                <a href="{{ route('user.profile.index') }}"
                                    class="py-2 px-4 md:px-2 hover:bg-gray-700 border-b border-b-gray-600 flex gap-2"><img
                                        src="{{ asset('/assets/templates/pandel/images/profile-icon.svg') }}"
                                        alt="" />
                                    My Profile</a>
                                <a href="{{ route('user.profile.edit') }}"
                                    class="flex gap-2 py-2 px-4 md:px-2 text-white bg-gray-950 text-gray-400 hover:bg-gray-700 border-b border-b-gray-600"><img
                                        src="{{ asset('/assets/templates/pandel/images/edit-profile-icon.svg') }}"
                                        alt="" />
                                    Edit Profile</a>
                                <a href="{{ route('user.kyc.index') }}"
                                    class="flex gap-2 py-2 px-4 md:px-2 text-gray-400 hover:bg-gray-700 border-b border-b-gray-600"><img
                                        src="{{ asset('/assets/templates/pandel/images/kyc-icon.svg') }}" alt="" />
                                    KYC</a>
                                <button
                                    class="logout w-full md:w-1/2 md:mx-auto py-2 bg-red-600 hover:bg-red-700 rounded-3xl text-white font-semibold">
                                    Log out
                                </button>
                            </nav>
                        </div>

                        <!-- Main Content -->
                        <div class="lg:w-4/5 rounded-lg bg-gray-800/50 mt-4 lg:mt-0">
                            <div x-data="{ activeForm: 'profile' }" class="p-8 rounded-lg shadow-lg">
                                <div class="border-b border-gray-700 pb-4 mb-6 flex justify-between">
                                    <div class="flex space-x-4">
                                        <!-- Profile Tab -->
                                        <a @click="activeForm = 'profile'"
                                            :class="activeForm === 'profile' ? 'text-sky-400 border-sky-400' :
                                                'text-gray-400 hover:text-white border-transparent'"
                                            class="border-b-2 px-2 md:px-4 text-center rounded-xl cursor-pointer transition-all duration-300">
                                            Profile
                                        </a>

                                        <!-- Security Tab -->
                                        <a @click="activeForm = 'security'"
                                            :class="activeForm === 'security' ? 'text-sky-400 border-sky-400' :
                                                'text-gray-400 hover:text-white border-transparent'"
                                            class="border-b-2 px-2 md:px-4 text-center rounded-xl cursor-pointer transition-all duration-300">
                                            Security
                                        </a>

                                        <!-- photo Tab -->
                                        <a @click="activeForm = 'photo'"
                                            :class="activeForm === 'photo' ? 'text-sky-400 border-sky-400' :
                                                'text-gray-400 hover:text-white border-transparent'"
                                            class="border-b-2 px-2 md:px-4 text-center rounded-xl cursor-pointer transition-all duration-300">
                                            Photo
                                        </a>
                                    </div>
                                </div>

                                <!-- profile Form -->
                                <div x-show="activeForm === 'profile'" class="space-y-4" x-transition>
                                    <div class="flex flex-col space-y-4">
                                        <!-- Form Fields -->
                                        <form action="{{ route('user.profile.edit-validate') }}"
                                            class="flex flex-col space-y-4 gen-form">
                                            @csrf

                                            <div>
                                                <label for="name" class="block text-sm text-gray-300 mb-1">
                                                    Name {!! is_required('name') !!}
                                                </label>
                                                <div class="relative">
                                                    <!-- Icon -->
                                                    <div
                                                        class="absolute inset-y-0 left-3 flex items-center pointer-events-none">
                                                        <img src="{{ asset('/assets/templates/pandel/images/profile-icon.svg') }}"
                                                            alt="" />
                                                    </div>
                                                    <!-- Input -->
                                                    <input type="text" id="name" name="name"
                                                        placeholder="Enter Fullname"
                                                        value="{{ old('name') ?? user()->name }}" {!! is_required('name', false) !!}
                                                        class="w-full bg-gray-800/50 text-white border border-gray-700 rounded-xl pl-10 py-3 text-sm focus:ring focus:ring-sky-400 focus:outline-none" />
                                                </div>

                                                <span class="text-sm text-red-600">
                                                    @error('name')
                                                        {{ $message }}
                                                    @enderror
                                                </span>
                                            </div>

                                            <div>
                                                <label for="email" class="block text-sm text-gray-300 mb-1">Email
                                                    {!! is_required('email') !!}</label>
                                                <div class="relative">
                                                    <!-- Icon -->
                                                    <div
                                                        class="absolute inset-y-0 left-3 flex items-center pointer-events-none">
                                                        <img src="{{ asset('/assets/templates/pandel/images/envelope-icon.svg') }}"
                                                            alt="" />
                                                    </div>
                                                    <!-- Input -->
                                                    <input type="email" id="email" name="email"
                                                        placeholder="user@user.com"
                                                        value="{{ old('email') ?? user()->email }}" disabled
                                                        {!! is_required('email', false) !!}
                                                        class="w-full bg-gray-800/50 text-white border border-gray-700 rounded-xl pl-10 py-3 text-sm focus:ring focus:ring-sky-400 focus:outline-none" />
                                                </div>

                                                <span class="text-sm text-red-600">
                                                    @error('email')
                                                        {{ $message }}
                                                    @enderror
                                                </span>
                                            </div>

                                            <div>
                                                <label for="username" class="block text-sm text-gray-300 mb-1">Username
                                                    {!! is_required('username') !!}</label>
                                                <div class="relative">
                                                    <!-- Icon -->
                                                    <div
                                                        class="absolute inset-y-0 left-3 flex items-center pointer-events-none">
                                                        <img src="{{ asset('/assets/templates/pandel/images/profile-icon.svg') }}"
                                                            alt="" />
                                                    </div>
                                                    <!-- Input -->
                                                    <input type="text" id="username" name="username"
                                                        placeholder="username"
                                                        value="{{ old('username') ?? user()->username }}"
                                                        @if (user()->username) disabled @endif
                                                        {!! is_required('username', false) !!}
                                                        class="w-full bg-gray-800/50 text-white border border-gray-700 rounded-xl pl-10 py-3 text-sm focus:ring focus:ring-sky-400 focus:outline-none" />
                                                </div>

                                                <span class="text-sm text-red-600">
                                                    @error('username')
                                                        {{ $message }}
                                                    @enderror
                                                </span>
                                            </div>

                                            <div>
                                                <label for="phone" class="block text-sm text-gray-300 mb-1">Phone
                                                    {!! is_required('phone') !!}</label>
                                                <div class="relative">
                                                    <!-- Icon -->
                                                    <div
                                                        class="absolute inset-y-0 left-3 flex items-center pointer-events-none">
                                                        <img src="{{ asset('/assets/templates/pandel/images/phone-icon.svg') }}"
                                                            alt="" />
                                                    </div>
                                                    <!-- Input -->
                                                    <input type="tel" id="phone" name="phone"
                                                        placeholder="+4494895984"
                                                        value="{{ old('phone') ?? user()->phone }}" {!! is_required('phone', false) !!}
                                                        class="w-full bg-gray-800/50 text-white border border-gray-700 rounded-xl pl-10 py-3 text-sm focus:ring focus:ring-sky-400 focus:outline-none" />
                                                </div>

                                                <span class="text-sm text-red-600">
                                                    @error('phone')
                                                        {{ $message }}
                                                    @enderror
                                                </span>
                                            </div>

                                            <div>
                                                <label for="address" class="block text-sm text-gray-300 mb-1">Address
                                                    {!! is_required('address') !!}</label>
                                                <div class="relative">
                                                    <!-- Icon -->
                                                    <div
                                                        class="absolute inset-y-0 left-3 flex items-center pointer-events-none">
                                                        <img src="{{ asset('/assets/templates/pandel/images/location-icon.svg') }}"
                                                            alt="" />
                                                    </div>
                                                    <!-- Input -->
                                                    <input type="text" id="address" name="address"
                                                        placeholder="City Address"
                                                        value="{{ old('address') ?? user()->address }}"
                                                        {!! is_required('address', false) !!}
                                                        class="w-full bg-gray-800/50 text-white border border-gray-700 rounded-xl pl-10 py-3 text-sm focus:ring focus:ring-sky-400 focus:outline-none" />
                                                </div>

                                                <span class="text-sm text-red-600">
                                                    @error('address')
                                                        {{ $message }}
                                                    @enderror
                                                </span>
                                            </div>

                                            <div>
                                                <label for="city" class="block text-sm text-gray-300 mb-1">City
                                                    {!! is_required('city') !!}</label>
                                                <div class="relative">
                                                    <!-- Icon -->
                                                    <div
                                                        class="absolute inset-y-0 left-3 flex items-center pointer-events-none">
                                                        <img src="{{ asset('/assets/templates/pandel/images/location-icon.svg') }}"
                                                            alt="" />
                                                    </div>
                                                    <!-- Input -->
                                                    <input type="text" id="city" name="city"
                                                        placeholder="City" value="{{ old('city') ?? user()->city }}"
                                                        {!! is_required('city', false) !!}
                                                        class="w-full bg-gray-800/50 text-white border border-gray-700 rounded-xl pl-10 py-3 text-sm focus:ring focus:ring-sky-400 focus:outline-none" />
                                                </div>

                                                <span class="text-sm text-red-600">
                                                    @error('city')
                                                        {{ $message }}
                                                    @enderror
                                                </span>
                                            </div>

                                            <div>
                                                <label for="state" class="block text-sm text-gray-300 mb-1">State
                                                    {!! is_required('state') !!}</label>
                                                <div class="relative">
                                                    <!-- Icon -->
                                                    <div
                                                        class="absolute inset-y-0 left-3 flex items-center pointer-events-none">
                                                        <img src="{{ asset('/assets/templates/pandel/images/location-icon.svg') }}"
                                                            alt="" />
                                                    </div>
                                                    <!-- Input -->
                                                    <input type="text" id="state" name="state"
                                                        placeholder="State" value="{{ old('state') ?? user()->state }}"
                                                        {!! is_required('state', false) !!}
                                                        class="w-full bg-gray-800/50 text-white border border-gray-700 rounded-xl pl-10 py-3 text-sm focus:ring focus:ring-sky-400 focus:outline-none" />
                                                </div>

                                                <span class="text-sm text-red-600">
                                                    @error('state')
                                                        {{ $message }}
                                                    @enderror
                                                </span>
                                            </div>

                                            <div>
                                                <label for="country" class="block text-sm text-gray-300 mb-1">Country
                                                    {!! is_required('country') !!}</label>
                                                <div class="relative">
                                                    <!-- Icon -->
                                                    <div
                                                        class="absolute inset-y-0 left-3 flex items-center pointer-events-none">
                                                        <img src="{{ asset('/assets/templates/pandel/images/location-icon.svg') }}"
                                                            alt="" />
                                                    </div>
                                                    <!-- Input -->

                                                    <select name="country" id="country"
                                                        class="w-full bg-gray-800/50 text-white border border-gray-700 rounded-xl pl-10 py-3 text-sm focus:ring focus:ring-sky-400 focus:outline-none custom-select"
                                                        {!! is_required('country', false) !!}>

                                                        <option disabled @if (!old('country') || !user()->country) selected @endif>
                                                            Select Country
                                                        </option>
                                                        @foreach (countries() as $country)
                                                            <option value="{{ $country->english_name }}"
                                                                @if (old('country') ?? user()->country == $country->english_name) selected @endif>
                                                                {{ $country->english_name }}</option>
                                                        @endforeach

                                                    </select>
                                                </div>

                                                <span class="text-sm text-red-600">
                                                    @error('country')
                                                        {{ $message }}
                                                    @enderror
                                                </span>
                                            </div>

                                            <div>
                                                <label for="dob" class="block text-sm text-gray-300 mb-1">Date of
                                                    Birth
                                                    {!! is_required('dob') !!}</label>
                                                <div class="relative">
                                                    <!-- Icon -->
                                                    <div
                                                        class="absolute inset-y-0 left-3 flex items-center pointer-events-none">
                                                        <img src="{{ asset('/assets/templates/pandel/images/date-icon.svg') }}"
                                                            alt="" />
                                                    </div>
                                                    <!-- Input -->
                                                    <input type="date" id="dob" name="dob"
                                                        placeholder="12/17/2001" value="{{ old('dob') ?? user()->dob }}"
                                                        {!! is_required('dob', false) !!}
                                                        class="w-full bg-gray-800/50 text-white border border-gray-700 rounded-xl pl-10 py-3 text-sm focus:ring focus:ring-sky-400 focus:outline-none" />
                                                </div>

                                                <span class="text-sm text-red-600">
                                                    @error('dob')
                                                        {{ $message }}
                                                    @enderror
                                                </span>
                                            </div>
                                            <div>
                                                <label for="gender" class="block text-sm text-gray-300 mb-1">Gender
                                                    {!! is_required('gender') !!}</label>
                                                <div class="relative">
                                                    <!-- Icon -->
                                                    <div
                                                        class="absolute inset-y-0 left-3 flex items-center pointer-events-none">
                                                        <img src="{{ asset('/assets/templates/pandel/images/male-icon.svg') }}"
                                                            alt="" />
                                                    </div>
                                                    <!-- Input -->
                                                    <select name="gender" placeholder="Gender" id="gender"
                                                        class="w-full bg-gray-800/50 text-white border border-gray-700 rounded-xl pl-10 py-3 text-sm focus:ring focus:ring-sky-400 focus:outline-none custom-select"
                                                        {!! is_required('gender', false) !!}>
                                                        <option disabled @if (!old('gender') || !user()->gender) selected @endif>
                                                            Select Gender
                                                        </option>
                                                        <option value="male"
                                                            @if (old('gender') ?? user()->gender == 'male') selected @endif>Male
                                                        </option>
                                                        <option value="female"
                                                            @if (old('gender') ?? user()->gender == 'female') selected @endif>Female
                                                        </option>
                                                        <option value="neutral"
                                                            @if (old('gender') ?? user()->gender == 'neutral') selected @endif>Neutral
                                                        </option>
                                                    </select>
                                                </div>

                                                <span class="text-sm text-red-600">
                                                    @error('gender')
                                                        {{ $message }}
                                                    @enderror
                                                </span>
                                            </div>

                                            <button type="submit" id="submitUpdateBtn"
                                                class="w-full bg-blue-800 hover:bg-blue-700 text-white rounded-3xl p-3 font-medium">
                                                Save Changes
                                            </button>
                                        </form>
                                    </div>
                                </div>

                                <!-- security Form -->
                                <div x-show="activeForm === 'security'" class="space-y-4" x-transition>

                                    <form action="{{ route('user.profile.password') }}"
                                        class="flex flex-col space-y-4 gen-form">
                                        @csrf
                                        <div>
                                            <div class="relative">
                                                <!-- Icon -->
                                                <div
                                                    class="absolute inset-y-0 left-3 flex items-center pointer-events-none">
                                                    <img src="{{ asset('/assets/templates/pandel/images/password-icon.svg') }}"
                                                        alt="" />
                                                </div>
                                                <!-- Input -->
                                                <input type="password" name="current_password" id="current_password"
                                                    placeholder="Current Password"
                                                    class="w-full bg-gray-800/50 text-white border border-gray-700 rounded-xl pl-10 py-3 text-sm focus:ring focus:ring-sky-400 focus:outline-none"
                                                    required />
                                            </div>

                                            <span class="text-sm text-red-600">
                                                @error('current_password')
                                                    {{ $message }}
                                                @enderror
                                            </span>
                                        </div>

                                        <div>
                                            <div class="relative">
                                                <!-- Icon -->
                                                <div
                                                    class="absolute inset-y-0 left-3 flex items-center pointer-events-none">
                                                    <img src="{{ asset('/assets/templates/pandel/images/password-icon.svg') }}"
                                                        alt="" />
                                                </div>
                                                <!-- Input -->
                                                <input type="password" name="password" id="password"
                                                    placeholder="New Password"
                                                    class="w-full bg-gray-800/50 text-white border border-gray-700 rounded-xl pl-10 py-3 text-sm focus:ring focus:ring-sky-400 focus:outline-none"
                                                    required />
                                            </div>

                                            <span class="text-sm text-red-600">
                                                @error('password')
                                                    {{ $message }}
                                                @enderror
                                            </span>
                                        </div>

                                        <div>
                                            <div class="relative">
                                                <!-- Icon -->
                                                <div
                                                    class="absolute inset-y-0 left-3 flex items-center pointer-events-none">
                                                    <img src="{{ asset('/assets/templates/pandel/images/password-icon.svg') }}"
                                                        alt="" />
                                                </div>
                                                <!-- Input -->
                                                <input type="password" name="password_confirmation"
                                                    id="password_confirmation" placeholder="Confirm Password"
                                                    class="w-full bg-gray-800/50 text-white border border-gray-700 rounded-xl pl-10 py-3 text-sm focus:ring focus:ring-sky-400 focus:outline-none"
                                                    required />
                                            </div>

                                            <span class="text-sm text-red-600">
                                                @error('password_confirmation')
                                                    {{ $message }}
                                                @enderror
                                            </span>
                                        </div>

                                        <button type="submit"
                                            class="w-full bg-blue-800 hover:bg-blue-700 text-white rounded-3xl p-3 font-medium">
                                            Save Changes
                                        </button>
                                    </form>

                                    @if (user()->g2fa == 0)
                                        <div id="enable_2fa_update" class="py-4">
                                            <div class="py-4">
                                                <h3
                                                    class="pt-8 text-gray-300 w-fit font-semibold border-b-2 border-sky-400 px-2 md:px-4 text-center rounded-xl">
                                                    Enable 2FA
                                                </h3>
                                            </div>

                                            <form action="{{ route('user.profile.g2fa') }}" class="gen-form"
                                                data-action="reload">
                                                @csrf
                                                <div class="bg-gray-950 p-4 md:p-8 w-full lg:w-2/5 rounded-xl">

                                                    <div class="flex justify-center">
                                                        <div class="mx-auto p-2 bg-gray-400/30 rounded-xl">
                                                            <div id="wallet_qrcode" class="clipboard" data-copy="">
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <p class="text-gray-400 text-sm py-8 text-center">
                                                        Scan the QRCode above or copy the 2FA Code below to
                                                        set up your 2fa

                                                    <p class="flex gap-2 justify-center p-6 clipboard cursor-pointer"
                                                        data-copy="{{ user()->g2fa_secret }}">
                                                        <span
                                                            class="font-semibold text-white">{{ user()->g2fa_secret }}</span>
                                                        <img src="{{ asset('/assets/templates/pandel/images/copy-icon.svg') }}"
                                                            alt="" class="inline cursor-pointer" />
                                                    </p>
                                                    </p>

                                                    <div>
                                                        <div class="relative">
                                                            <!-- Icon -->
                                                            <div
                                                                class="absolute inset-y-0 left-3 flex items-center pointer-events-none">
                                                                <img src="{{ asset('/assets/templates/pandel/images/password-icon.svg') }}"
                                                                    alt="" />
                                                            </div>
                                                            <!-- Input -->
                                                            <input type="text" name="one_time_password"
                                                                id="one_time_password" placeholder="2Fa Code"
                                                                class="w-full bg-gray-800/50 text-white border border-gray-700 rounded-xl pl-10 py-3 text-sm focus:ring focus:ring-sky-400 focus:outline-none" />
                                                        </div>

                                                        <span class="text-sm text-red-600">
                                                            @error('one_time_password')
                                                                {{ $message }}
                                                            @enderror
                                                        </span>
                                                    </div>

                                                    <button type="submit"
                                                        class="w-full bg-blue-800 hover:bg-blue-700 text-white rounded-3xl p-3 font-medium mt-8">
                                                        Save Changes
                                                    </button>
                                                </div>
                                            </form>

                                        </div>
                                    @else
                                        <div id="disable_2fa_update" class="py-4">
                                            <div class="py-4">
                                                <h3
                                                    class="pt-8 text-gray-300 w-fit font-semibold border-b-2 border-sky-400 px-2 md:px-4 text-center rounded-xl">
                                                    Disable 2FA
                                                </h3>
                                            </div>

                                            <div class="bg-gray-950 p-4 md:p-8 w-full lg:w-2/5 rounded-xl">
                                                <form action="{{ route('user.profile.g2fa') }}"
                                                    class="relative h-full gen-form" data-action="reload">
                                                    @csrf
                                                    <div class="block">
                                                        <p class="text-gray-400 text-sm py-8 text-center">
                                                            Enter the One time passcode from your google authenticator app
                                                            to
                                                            disable your g2fa
                                                        </p>

                                                        <div>
                                                            <div class="relative">
                                                                <!-- Icon -->
                                                                <div
                                                                    class="absolute inset-y-0 left-3 flex items-center pointer-events-none">
                                                                    <img src="{{ asset('/assets/templates/pandel/images/password-icon.svg') }}"
                                                                        alt="" />
                                                                </div>
                                                                <!-- Input -->
                                                                <input type="text" name="one_time_password"
                                                                    id="one_time_password" placeholder="2Fa Code"
                                                                    class="w-full bg-gray-800/50 text-white border border-gray-700 rounded-xl pl-10 py-3 text-sm focus:ring focus:ring-sky-400 focus:outline-none" />
                                                            </div>

                                                            <span class="text-sm text-red-600">
                                                                @error('one_time_password')
                                                                    {{ $message }}
                                                                @enderror
                                                            </span>
                                                        </div>

                                                        <button type="submit"
                                                            class="w-full bg-blue-800 hover:bg-blue-700 text-white rounded-3xl p-3 font-medium mt-8">
                                                            Save Changes
                                                        </button>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    @endif
                                </div>

                                {{-- photo --}}
                                <div x-show="activeForm === 'photo'" class="space-y-4" x-transition>

                                    <h3
                                        class="pt-8 text-gray-300 w-fit font-semibold border-b-2 border-sky-400 px-2 md:px-4 text-center rounded-xl">
                                        Upload Photo
                                    </h3>

                                    <div class="bg-gray-950 p-4 md:p-8 w-full lg:w-2/5 rounded-xl">
                                        <form action="{{ route('user.profile.photo') }}" method="POST"
                                            enctype="multipart/form-data" class="mt-5 gen-form">
                                            @csrf

                                            <!-- Profile Image -->
                                            <img id="profileImage" src="{{ asset('storage/profile/' . user()->photo) }}"
                                                alt="Profile Photo" class="p-2 bg-gray-400/30 rounded-xl"
                                                style="width: 200px; height:250px;">

                                            <!-- Hidden File Input -->
                                            <input type="file" name="photo" id="profile_photo" accept="image/*"
                                                hidden>

                                            <div class="flex gap-2 justify-center">
                                                <!-- Edit Button (Triggers File Input) -->
                                                <button type="button" id="selectProfilePhoto"
                                                    class="w-full bg-gray-800 text-white rounded-3xl p-3 font-medium mt-8">
                                                    <label
                                                        class="flex gap-2 justify-center items-center px-6 text-sm cursor-pointer ">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="25"
                                                            height="25" viewBox="0 0 25 25" fill="none">
                                                            <path
                                                                d="M15.5667 6.73308L18.5667 9.73308M13.5667 20.7331H21.5667M5.56665 16.7331L4.56665 20.7331L8.56665 19.7331L20.1527 8.14708C20.5276 7.77203 20.7382 7.26341 20.7382 6.73308C20.7382 6.20276 20.5276 5.69414 20.1527 5.31908L19.9806 5.14708C19.6056 4.77214 19.097 4.56151 18.5667 4.56151C18.0363 4.56151 17.5277 4.77214 17.1527 5.14708L5.56665 16.7331Z"
                                                                stroke="white" stroke-linecap="round"
                                                                stroke-linejoin="round" />
                                                        </svg>
                                                        <span class="text-white">Edit</span>
                                                    </label>
                                                </button>

                                                <!-- Save Button (Initially Hidden) -->
                                                <button type="submit"
                                                    class="hidden mx-auto text-sm w-full bg-blue-800 hover:bg-blue-700 text-white rounded-3xl p-3 font-medium mt-8">
                                                    <span class="text-white">Save</span>
                                                </button>
                                            </div>
                                        </form>
                                    </div>


                                </div>


                            </div>
                        </div>



                    </div>
                </div>
            </div>




        </div>


        <footer>
            <div class="mt-8 text-center text-sm text-sky-400 mb-4">
                All Rights Operational
            </div>
        </footer>


    </div>




    <!--end my profile-->
@endsection

@section('scripts')
    @if (user()->g2fa == 0)
        <script>
            $(document).ready(function() {
                // create qrcode
                var qrCodeElement = document.getElementById('wallet_qrcode');
                var text = "{{ $qr_code_url }}";
                var qrCode = new QRCode(qrCodeElement, {
                    text: text,
                    width: 200,
                    height: 200
                });

                var walletQrCodeDiv = document.getElementById('wallet_qrcode');
                walletQrCodeDiv.classList.add('disabled');
                var imageElement = walletQrCodeDiv.querySelector('img');
                imageElement.classList.add('rounded-lg', 'border', 'border-slate-800',
                    'hover:border-slate-600', 'cursor-pointer', 'p-1');
            });
        </script>
    @endif


    <script>
        $(document).ready(function() {
            // Open file input when clicking on the "Edit" button
            $("#selectProfilePhoto").on("click", function() {
                $("#profile_photo").trigger("click");
            });

            // When a new file is selected, update the profile image preview
            $("#profile_photo").on("change", function(event) {
                var input = event.target;

                if (input.files && input.files[0]) {
                    var reader = new FileReader();

                    reader.onload = function(e) {
                        $("#profileImage").attr("src", e.target.result); // Update image preview
                        $("button[type='submit']").removeClass("hidden").fadeIn(); // Show Save button
                    };

                    reader.readAsDataURL(input.files[0]); // Read the selected image
                }
            });
        });
    </script>
@endsection
