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

@section('css')
@endsection

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


    <div class="min-h-screen" id="refresh">
        <!-- Top Navigation Spacer for Desktop -->
        <div class="hidden lg:block h-16"></div>
        <!-- Content Area -->
        <div class="p-6">
            <section class="mt-4 md:mt-12 lg:mt-20 lg:px-20" x-data="{ switchForm: true }">
                <div class="flex md:p-6 justify-between items-center w-full px-2 py-2">
                    <h3 class="text-sm md:text-lg">Edit Profile</h3>
                    <a role="button" class="gradient-btn-filled2a text-sm px-3 py-1.5 cursor-pointer"
                        x-on:click="switchForm = !switchForm">Security</a>
                </div>

                {{-- profile form --}}
                <div class="block" x-show="switchForm === true">
                    <div
                        class="shadow-lg border border-transparent bg-clip-border rounded-2xl p-6 md:p-12 mt-4 relative w-full">
                        <!-- Gradient border background -->
                        <div class="absolute inset-0 rounded-2xl"
                            style="z-index: -1; background: linear-gradient(to bottom, #ff3bff, #5c24ff); padding: 1px; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; ">
                        </div>
                        <h3 class="text-white text-base md:text-lg mb-4 md:mb-10">
                            Update Profile Information
                        </h3>
                        <!-- form div -->

                        <div class="grid md:grid-cols-3 gap-8">

                            <!-- Profile Image Column - Takes 1/3 width -->
                            <div class="flex flex-col items-center justify-center space-y-4">
                                <form action="{{ route('user.profile.photo') }}" method="POST"
                                    enctype="multipart/form-data" class="mt-5 gen-form">
                                    @csrf
                                    {{-- profile image --}}
                                    <div class="relative">
                                        <div class="w-48 h-48 rounded-full overflow-hidden border">
                                            <img id="profileImage" src="{{ asset('storage/profile/' . user()->photo) }}"
                                                alt="{{ user()->username ?? 'Profile Photo' }}"
                                                class="rounded-full w-full h-full object-cover" />
                                        </div>
                                    </div>

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

                                    <!-- Edit button -->
                                    <div class="flex gap-2 justify-center py-4">
                                        <button type="button" id="selectProfilePhoto"
                                            class="flex items-center justify-center gap-2 cursor-pointer text-gray-200 px-2 rounded-lg hover:bg-gray-700">
                                            <img src="{{ asset('/assets/templates/cavit/images/edit-icon.svg') }}"
                                                alt="" />
                                            <span>Edit</span>
                                        </button>

                                        <button type="submit"
                                            class="hidden flex items-center justify-center gap-2 cursor-pointer text-gray-200 px-2 rounded-lg bg-[#336fbd]">
                                            <span class="text-white">Save</span>
                                        </button>
                                    </div>
                                </form>
                            </div>

                            <!-- Form Fields Column - Takes 2/3 width -->
                            <div class="md:col-span-2 space-y-6">
                                <form action="{{ route('user.profile.edit-validate') }}"
                                    class="flex flex-col space-y-4 gen-form">
                                    @csrf

                                    <!-- Name -->
                                    <div class="relative w-full mx-auto">
                                        <!-- Gradient border background -->
                                        <div class="absolute inset-0 rounded-xl"
                                            style="z-index: -1; background: linear-gradient( to bottom, #ff3bff, #5c24ff ); padding: 1px; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; ">
                                        </div>
                                        <label for="name" class="text-white text-sm px-4">Name
                                            {!! is_required('name') !!}</label>
                                        <input type="text" id="name" name="name"
                                            value="{{ old('name') ?? user()->name }}" {!! is_required('name', false) !!}
                                            class="w-full bg-transparent border-none rounded-2xl p-4 focus:outline-none focus:ring-0 text-sm"
                                            placeholder="Enter your name" />

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

                                    <!-- Email -->
                                    <div class="relative w-full mx-auto">
                                        <div class="absolute inset-0 rounded-xl"
                                            style="
                                        z-index: -1;
                                        background: linear-gradient(
                                        to bottom,
                                        #ff3bff,
                                        #5c24ff
                                        );
                                        padding: 1px;
                                        mask: linear-gradient(#fff 0 0) content-box,
                                        linear-gradient(#fff 0 0);
                                        -webkit-mask-composite: xor;
                                        mask-composite: exclude;
                                    ">
                                        </div>
                                        <label for="email" class="text-white text-sm px-4">Email
                                            {!! is_required('email') !!}</label>
                                        <input type="email" id="email" name="email"
                                            value="{{ old('email') ?? user()->email }}" disabled {!! is_required('email', false) !!}
                                            class="w-full bg-transparent border-none rounded-2xl p-4 focus:outline-none focus:ring-0 text-sm"
                                            placeholder="Enter your email" />

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

                                    <!-- Phone -->
                                    <div class="relative w-full mx-auto">
                                        <div class="absolute inset-0 rounded-xl"
                                            style="
                                        z-index: -1;
                                        background: linear-gradient(
                                        to bottom,
                                        #ff3bff,
                                        #5c24ff
                                        );
                                        padding: 1px;
                                        mask: linear-gradient(#fff 0 0) content-box,
                                        linear-gradient(#fff 0 0);
                                        -webkit-mask-composite: xor;
                                        mask-composite: exclude;
                                    ">
                                        </div>
                                        <label for="phone" class="text-white text-sm px-4">Phone Number
                                            {!! is_required('phone') !!}</label>
                                        <input type="tel" id="phone" name="phone"
                                            value="{{ old('phone') ?? user()->phone }}" {!! is_required('phone', false) !!}
                                            class="w-full bg-transparent border-none rounded-2xl p-4 focus:outline-none focus:ring-0 text-sm"
                                            placeholder="Enter your phone number" />

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

                                    <!-- Username -->
                                    <div class="relative w-full mx-auto">
                                        <div class="absolute inset-0 rounded-xl"
                                            style="
                                        z-index: -1;
                                        background: linear-gradient(
                                        to bottom,
                                        #ff3bff,
                                        #5c24ff
                                        );
                                        padding: 1px;
                                        mask: linear-gradient(#fff 0 0) content-box,
                                        linear-gradient(#fff 0 0);
                                        -webkit-mask-composite: xor;
                                        mask-composite: exclude;
                                    ">
                                        </div>
                                        <label for="username" class="text-white text-sm px-4">Username
                                            {!! is_required('username') !!}</label>
                                        <input type="text" id="username" name="username"
                                            value="{{ old('username') ?? user()->username }}"
                                            @if (user()->username) disabled @endif {!! is_required('username', false) !!}
                                            class="w-full bg-transparent border-none rounded-2xl p-4 focus:outline-none focus:ring-0 text-sm"
                                            placeholder="Enter your username" />

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

                                    <!-- Address, City, Country Row -->
                                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                        <!-- Address -->
                                        <div class="relative w-full">
                                            <div class="absolute inset-0 rounded-xl"
                                                style="
                                            z-index: -1;
                                            background: linear-gradient(
                                                to bottom,
                                                #ff3bff,
                                                #5c24ff
                                            );
                                            padding: 1px;
                                            mask: linear-gradient(#fff 0 0) content-box,
                                                linear-gradient(#fff 0 0);
                                            -webkit-mask-composite: xor;
                                            mask-composite: exclude;
                                            ">
                                            </div>
                                            <label for="address" class="text-white text-sm px-4">Address
                                                {!! is_required('address') !!}</label>
                                            <input type="text" id="address" name="address"
                                                value="{{ old('address') ?? user()->address }}" {!! is_required('address', false) !!}
                                                class="w-full bg-transparent border-none rounded-2xl p-4 focus:outline-none focus:ring-0 text-sm"
                                                placeholder="Address" />

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

                                        <!-- City -->
                                        <div class="relative w-full">
                                            <div class="absolute inset-0 rounded-xl"
                                                style="
                                            z-index: -1;
                                            background: linear-gradient(
                                                to bottom,
                                                #ff3bff,
                                                #5c24ff
                                            );
                                            padding: 1px;
                                            mask: linear-gradient(#fff 0 0) content-box,
                                                linear-gradient(#fff 0 0);
                                            -webkit-mask-composite: xor;
                                            mask-composite: exclude;
                                            ">
                                            </div>
                                            <label for="city" class="text-white text-sm px-4">City
                                                {!! is_required('city') !!}</label>
                                            <input type="text" id="city" name="city"id="city"
                                                value="{{ old('city') ?? user()->city }}" {!! is_required('city', false) !!}
                                                class="w-full bg-transparent border-none rounded-2xl p-4 focus:outline-none focus:ring-0 text-sm"
                                                placeholder="City" />

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

                                        <!-- Country -->
                                        <div class="relative w-full">
                                            <div class="absolute inset-0 rounded-xl"
                                                style="
                                            z-index: -1;
                                            background: linear-gradient(
                                                to bottom,
                                                #ff3bff,
                                                #5c24ff
                                            );
                                            padding: 1px;
                                            mask: linear-gradient(#fff 0 0) content-box,
                                                linear-gradient(#fff 0 0);
                                            -webkit-mask-composite: xor;
                                            mask-composite: exclude;
                                            ">
                                            </div>
                                            <label for="country" class="text-white text-sm px-4">Country
                                                {!! is_required('country') !!}</label>
                                            <select type="text" name="country" id="country" {!! is_required('country', false) !!}
                                                class="w-full bg-transparent border-none rounded-2xl p-4 focus:outline-none focus:ring-0 text-sm"
                                                placeholder="Country">

                                                <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>

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

                                    <!-- State, DOB, Gender Row -->
                                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                        <!-- State -->
                                        <div class="relative w-full">
                                            <div class="absolute inset-0 rounded-xl"
                                                style="
                                                z-index: -1;
                                                background: linear-gradient(
                                                    to bottom,
                                                    #ff3bff,
                                                    #5c24ff
                                                );
                                                padding: 1px;
                                                mask: linear-gradient(#fff 0 0) content-box,
                                                    linear-gradient(#fff 0 0);
                                                -webkit-mask-composite: xor;
                                                mask-composite: exclude;
                                                ">
                                            </div>
                                            <label for="state" class="text-white text-sm px-4">State
                                                {!! is_required('state') !!}</label>
                                            <input type="text" id="state" name="state"
                                                value="{{ old('state') ?? user()->state }}" {!! is_required('state', false) !!}
                                                class="w-full bg-transparent border-none rounded-2xl p-4 focus:outline-none focus:ring-0 text-sm"
                                                placeholder="State" />

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

                                        <!-- Date of Birth -->
                                        <div class="relative w-full">
                                            <div class="absolute inset-0 rounded-xl"
                                                style="
                                            z-index: -1;
                                            background: linear-gradient(
                                                to bottom,
                                                #ff3bff,
                                                #5c24ff
                                            );
                                            padding: 1px;
                                            mask: linear-gradient(#fff 0 0) content-box,
                                                linear-gradient(#fff 0 0);
                                            -webkit-mask-composite: xor;
                                            mask-composite: exclude;
                                            ">
                                            </div>
                                            <label for="dob" class="text-white text-sm px-4">Date of Birth
                                                {!! is_required('dob') !!}</label>
                                            <input type="date" id="dob" name="dob"
                                                value="{{ old('dob') ?? user()->dob }}" {!! is_required('dob', false) !!}
                                                class="w-full bg-transparent border-none rounded-2xl p-4 focus:outline-none focus:ring-0 text-sm text-gray-300" />

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

                                        <!-- Gender -->
                                        <div class="relative w-full">
                                            <div class="absolute inset-0 rounded-xl"
                                                style="
                                                z-index: -1;
                                                background: linear-gradient(
                                                    to bottom,
                                                    #ff3bff,
                                                    #5c24ff
                                                );
                                                padding: 1px;
                                                mask: linear-gradient(#fff 0 0) content-box,
                                                    linear-gradient(#fff 0 0);
                                                -webkit-mask-composite: xor;
                                                mask-composite: exclude;
                                                ">
                                            </div>
                                            <label for="gender" class="text-white text-sm px-4">Gender
                                                {!! is_required('gender') !!}</label>
                                            <select id="gender" name="gender" {!! is_required('gender', false) !!}
                                                class="w-full bg-transparent border-none rounded-2xl p-4 focus:outline-none focus:ring-0 text-sm text-gray-300">
                                                <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>

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

                                    <!-- Submit Button - Moved inside the form column -->
                                    <div class="pt-2">
                                        <button type="submit" id="submitUpdateBtn"
                                            class="w-full py-4 px-6 text-white font-medium gradient-btn-filled-edit rounded-b-4xl flex items justify-center">
                                            Save Changes
                                        </button>
                                    </div>

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

                    </div>
                </div>

                {{-- security form --}}
                <div class="block" x-show="switchForm === false">
                    <div class="shadow-lg border border-transparent bg-clip-border rounded-2xl p-0.5 mt-4 relative w-full">
                        <!-- Gradient border background -->
                        <div class="absolute inset-0 rounded-2xl"
                            style="
                              z-index: -1;
                              background: linear-gradient(to bottom, #ff3bff, #5c24ff);
                              padding: 1px;
                              mask: linear-gradient(#fff 0 0) content-box,
                                linear-gradient(#fff 0 0);
                              -webkit-mask-composite: xor;
                              mask-composite: exclude;
                            ">
                        </div>

                        <!-- Security Section -->
                        <div class="flex flex-col md:flex-row bg-[#161719] rounded-2xl text-white p-4 gap-4 md:gap-8">
                            <!-- Left Panel -->
                            <div
                                class="md:w-1/2 flex flex-col items-start text-left md:py-8 md:px-8 md:border-r border-[#ff3bff] rounded-xl">
                                <h3 class="text-white text-sm md:text-lg text-start mb-6 md:mb-12">
                                    Update Password
                                </h3>

                                <form action="{{ route('user.profile.password') }}" class="w-full gen-form">
                                    @csrf
                                    <div class="">
                                        <!-- Form Fields Column - Takes 2/3 width -->
                                        <div class="md:col-span-2 space-y-6">
                                            <!--Current Password -->
                                            <div class="relative w-full mx-auto mb-14">
                                                <div class="relative h-12"> <!-- Explicitly set a fixed height -->
                                                    <div class="absolute inset-0 rounded-xl bg-gradient-to-r from-[#ff3bff] to-[#5c24ff]"
                                                        style="padding: 1px">
                                                        <div class="bg-[#161719] h-full rounded-xl">
                                                            <div class="relative flex items-center h-full">
                                                                <img src="{{ asset('/assets/templates/cavit/images/password-icon.svg') }}"
                                                                    alt="Password" class="absolute left-4 w-5 h-5" />
                                                                <input type="password" name="current_password"
                                                                    id="current_password"
                                                                    class="w-full h-full bg-transparent border-none rounded-xl pl-12 p-4 focus:outline-none focus:ring-0 text-sm text-white"
                                                                    placeholder="Current Password" />
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

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

                                            {{-- new password --}}
                                            <div class="relative w-full mx-auto mb-14">
                                                <div class="relative h-12"> <!-- Explicitly set a fixed height -->
                                                    <div class="absolute inset-0 rounded-xl bg-gradient-to-r from-[#ff3bff] to-[#5c24ff]"
                                                        style="padding: 1px">
                                                        <div class="bg-[#161719] h-full rounded-xl">
                                                            <div class="relative flex items-center h-full">
                                                                <img src="{{ asset('/assets/templates/cavit/images/password-icon.svg') }}"
                                                                    alt="Password" class="absolute left-4 w-5 h-5" />
                                                                <input type="password" name="password" id="password"
                                                                    class="w-full h-full bg-transparent border-none rounded-xl pl-12 p-4 focus:outline-none focus:ring-0 text-sm text-white"
                                                                    placeholder="New Password" />
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

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

                                            {{-- confirm password --}}
                                            <div class="relative w-full mx-auto mb-14">
                                                <div class="relative h-12"> <!-- Explicitly set a fixed height -->
                                                    <div class="absolute inset-0 rounded-xl bg-gradient-to-r from-[#ff3bff] to-[#5c24ff]"
                                                        style="padding: 1px">
                                                        <div class="bg-[#161719] h-full rounded-xl">
                                                            <div class="relative flex items-center h-full">
                                                                <img src="{{ asset('/assets/templates/cavit/images/password-icon.svg') }}"
                                                                    alt="Password" class="absolute left-4 w-5 h-5" />
                                                                <input type="password" id="password_confirmation"
                                                                    name="password_confirmation"
                                                                    placeholder="Confirm Password"
                                                                    class="w-full h-full bg-transparent border-none rounded-xl pl-12 p-4 focus:outline-none focus:ring-0 text-sm text-white"
                                                                    placeholder="Confirm Password" />
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

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

                                            <!-- Submit Button - Moved inside the form column -->
                                            <div class="">
                                                <button type="submit"
                                                    class="w-full py-4 px-6 text-white font-medium gradient-btn-filled-edit rounded-b-4xl">
                                                    Save Changes
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>

                            <!-- Right Panel -->
                            @if (user()->g2fa == 0)
                                <div id="enable_2fa_update"
                                    class="md:w-1/2 flex flex-col items-center justify-center md:text-left md:py-8 md:px-8 md:border-l border-[#ff3bff] rounded-xl mt-8 md:mt-0">

                                    <form action="{{ route('user.profile.g2fa') }}" class="gen-form w-full"
                                        data-action="reload">
                                        @csrf
                                        <div class="block  w-full">
                                            <p class="text-left w-full text-sm mb-14">Enable 2FA</p>

                                            <!-- QR Code Image -->
                                            <div class="flex w-full">
                                                <div class="mx-auto mb-6 bg-gray-800 p-2 rounded-2xl">
                                                    <div id="wallet_qrcode" class="clipboard" data-copy="">
                                                    </div>
                                                </div>
                                            </div>

                                            <!-- Instructions Text -->
                                            <p class="text-white text-sm mb-2">
                                                Scan The QRCode or Copy the 2FA Code below to set up your
                                                2fa
                                            </p>

                                            <!-- Copy Address Section -->
                                            <div class="flex items-center justify-center gap-4 p-3 rounded-lg w-full mb-6">
                                                <button class="focus:outline-none flex items-center gap-2 max-w-full">
                                                    <img src="{{ asset('/assets/templates/cavit/images/copyicon.svg') }}"
                                                        alt="Copy"
                                                        class="w-5 h-5 flex-shrink-0 clipboard cursor-pointer"
                                                        data-copy="{{ user()->g2fa_secret }}" />
                                                    <span
                                                        class="text-gray-300 text-sm overflow-hidden text-ellipsis whitespace-nowrap clipboard cursor-pointer"
                                                        data-copy="{{ user()->g2fa_secret }}">
                                                        {{ user()->g2fa_secret }}
                                                    </span>
                                                </button>
                                            </div>

                                            <!-- Confirm Password Input -->
                                            <div class="relative w-full mx-auto mb-6">
                                                <div class="relative h-12"> <!-- Explicitly set a fixed height -->
                                                    <div class="absolute inset-0 rounded-xl bg-gradient-to-r from-[#ff3bff] to-[#5c24ff]"
                                                        style="padding: 1px">
                                                        <div class="bg-[#161719] h-full rounded-xl">
                                                            <div class="relative flex items-center h-full">
                                                                <img src="{{ asset('/assets/templates/cavit/images/password-icon.svg') }}"
                                                                    alt="Password" class="absolute left-4 w-5 h-5" />
                                                                <input type="number" name="one_time_password"
                                                                    id="one_time_password"
                                                                    class="w-full h-full bg-transparent border-none rounded-xl pl-12 p-4 focus:outline-none focus:ring-0 text-sm text-white"
                                                                    placeholder="2FA Code" />
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

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

                                            <!-- Submit Button -->
                                            <button type="submit"
                                                class="w-full py-4 px-6 text-white font-medium gradient-btn-filled-edit rounded-b-4xl">
                                                Enable 2FA
                                            </button>

                                        </div>
                                    </form>

                                </div>
                            @else
                                <div id="disable_2fa_update"
                                    class="md:w-1/2 flex flex-col items-center justify-center md:text-left md:py-8 md:px-8 md:border-l border-[#ff3bff] rounded-xl mt-8 md:mt-0">

                                    <form action="{{ route('user.profile.g2fa') }}" class=" gen-form"
                                        data-action="reload">
                                        @csrf
                                        <div class="block">
                                            <p class="text-left w-full text-sm mb-14">Disable 2FA</p>
                                            <!-- Instructions Text -->
                                            <p class="text-white text-sm mb-2">
                                                Enter the One time passcode from your google authenticator app to disable
                                                your
                                                g2fa
                                            </p>


                                            <!-- Confirm Password Input -->
                                            <div class="relative w-full mx-auto mb-14">
                                                <div class="relative h-12"> <!-- Explicitly set a fixed height -->
                                                    <div class="absolute inset-0 rounded-xl bg-gradient-to-r from-[#ff3bff] to-[#5c24ff]"
                                                        style="padding: 1px">
                                                        <div class="bg-[#161719] h-full rounded-xl">
                                                            <div class="relative flex items-center h-full">
                                                                <img src="{{ asset('/assets/templates/cavit/images/password-icon.svg') }}"
                                                                    alt="Password" class="absolute left-4 w-5 h-5" />
                                                                <input type="number" name="one_time_password"
                                                                    id="one_time_password" placeholder="2Fa Code"
                                                                    class="w-full h-full bg-transparent border-none rounded-xl pl-12 p-4 focus:outline-none focus:ring-0 text-sm text-white"
                                                                    placeholder="2FA Code" />
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

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

                                            <!-- Submit Button -->
                                            <button type="submit"
                                                class="w-full md:py-8 px-6 text-white font-medium gradient-btn-filled-edit rounded-b-4xl">
                                                Disable 2FA
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>

            </section>
        </div>
    </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
