@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">
            <!-- content   -->
            <section class="mt-3 md:mt-6 lg:mt-10 lg:px-10">
                <div class="grid grid-cols-1 gap-4 mb-4" x-data="{ activeTab: 'edit_profile', }">
                    <!-- Header and Controls Section -->
                    <div class="flex flex-col md:flex-row justify-between w-full">
                        <div class="mb-2 md:mb-0 order-first">
                            <h2 class="text-black text-xl font-semibold mb-2 md:mb-4">
                                Edit Profile
                            </h2>
                            <div class="flex gap-2 md:gap-4">
                                <span x-on:click="activeTab = 'edit_profile' "
                                    x-bind:class="activeTab === 'edit_profile' ? 'border-t-2 border-t-[#13b7b6]' : ''"
                                    class="p-2 rounded-2xl hover:border-t-2 hover:border-t-[#13b7b6] text-center">Edit
                                    Profile</span>
                                <span x-on:click="activeTab = 'security' "
                                    x-bind:class="activeTab === 'security' ? 'border-t-2 border-t-[#13b7b6]' : ''"
                                    class="p-2 rounded-2xl hover:border-t-2 hover:border-t-[#13b7b6] text-center">Security</span>
                            </div>
                        </div>
                    </div>

                    <!-- my profile content -->
                    <div class="flex items-center justify-center">
                        <div class="rounded-xl p-6 w-full shadow-[0px_10px_20px_0px_rgba(0,_0,_0,_0.15)]">


                            <!-- Personal Information Section -->
                            <div x-show="activeTab === 'edit_profile'" id="edit_profile"
                                class="flex flex-col md:flex-row gap-6 pb-6 items-center rounded-2xl p-4 shadow-[inset_0px_5px_15px_-3px_rgba(0,_0,_0,_0.2)]">
                                <div class="flex flex-col items-center space-y-2">

                                    <form action="{{ route('user.profile.photo') }}" method="POST"
                                        enctype="multipart/form-data" class="mt-5 gen-form">
                                        @csrf
                                        {{-- profile photo --}}
                                        <div
                                            class="w-24 h-24 md:w-40 md:h-40 rounded-full overflow-hidden flex items-center justify-center">
                                            <img id="profileImage" src="{{ asset('storage/profile/' . user()->photo) }}"
                                                alt="{{ user()->username ?? 'Profile Photo' }}"
                                                class="w-32 h-32 rounded-full" />
                                        </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-black px-2 rounded-lg bg-gray-500 hover:bg-gray-600 text-xs">
                                                <img src="{{ asset('/assets/templates/gopie/images/profile-edit-profile-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-[#13b7b6] text-xs">
                                                <span class="text-white">Save</span>
                                            </button>
                                        </div>
                                    </form>

                                </div>

                                <div class="flex-1">
                                    <div class="flex flex-col md:flex-row justify-between items-center mb-4">
                                        <h2 class="text-lg font-semibold">
                                            Update profle information
                                        </h2>
                                    </div>

                                    <form action="{{ route('user.profile.edit-validate') }}" class="gen-form">
                                        @csrf
                                        <div class="md:col-span-2 space-y-6">
                                            <!-- Name -->
                                            <div class="relative w-full mx-auto">
                                                <label for="name" class="block text-xs text-black mb-1">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-[#f3f3f3] rounded-xl p-3 text-black focus:outline-none shadow-[inset_2px_2px_5px_0px_rgba(0,0,0,0.15),inset_-2px_-2px_5px_0px_rgba(255,255,255,0.9)] text-sm"
                                                    placeholder="Enter your name" />

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

                                            <!-- Email -->
                                            <div class="relative w-full mx-auto">
                                                <label for="email" class="block text-xs text-black mb-1">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-[#f3f3f3] rounded-xl p-3 text-black focus:outline-none shadow-[inset_2px_2px_5px_0px_rgba(0,0,0,0.15),inset_-2px_-2px_5px_0px_rgba(255,255,255,0.9)] text-sm"
                                                    placeholder="Enter your email" />

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

                                            <!-- Phone -->
                                            <div class="relative w-full mx-auto">
                                                <label for="phone" class="block text-xs text-black mb-1">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-[#f3f3f3] rounded-xl p-3 text-black focus:outline-none shadow-[inset_2px_2px_5px_0px_rgba(0,0,0,0.15),inset_-2px_-2px_5px_0px_rgba(255,255,255,0.9)] text-sm"
                                                    placeholder="Enter your phone number" />

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

                                            <!-- Username -->
                                            <div class="relative w-full mx-auto">
                                                <label for="username" class="block text-xs text-black mb-1">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-[#f3f3f3] rounded-xl p-3 text-black focus:outline-none shadow-[inset_2px_2px_5px_0px_rgba(0,0,0,0.15),inset_-2px_-2px_5px_0px_rgba(255,255,255,0.9)] text-sm"
                                                    placeholder="Enter your username" />

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

                                            <!-- Address, City, Country Row -->
                                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
                                                <!-- Address -->
                                                <div class="relative w-full">
                                                    <label for="address" class="block text-xs text-black mb-1">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-[#f3f3f3] rounded-xl p-3 text-black focus:outline-none shadow-[inset_2px_2px_5px_0px_rgba(0,0,0,0.15),inset_-2px_-2px_5px_0px_rgba(255,255,255,0.9)]"
                                                        placeholder="Address" />

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

                                                <!-- City -->
                                                <div class="relative w-full">
                                                    <label for="city" class="block text-xs text-black mb-1">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-[#f3f3f3] rounded-xl p-3 text-black focus:outline-none shadow-[inset_2px_2px_5px_0px_rgba(0,0,0,0.15),inset_-2px_-2px_5px_0px_rgba(255,255,255,0.9)]"
                                                        placeholder="City" />

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

                                                <!-- Country -->
                                                <div class="relative w-full">
                                                    <label for="country" class="block text-xs text-black mb-1">Country
                                                        {!! is_required('country') !!}</label>

                                                    <select type="text" name="country" id="country"
                                                        {!! is_required('country', false) !!}
                                                        class="w-full bg-[#f3f3f3] rounded-xl p-3 text-black focus:outline-none shadow-[inset_2px_2px_5px_0px_rgba(0,0,0,0.15),inset_-2px_-2px_5px_0px_rgba(255,255,255,0.9)]"
                                                        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-500">
                                                        @error('country')
                                                            {{ $message }}
                                                        @enderror
                                                    </span>

                                                </div>
                                            </div>

                                            <!-- State, DOB, Gender Row -->
                                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
                                                <!-- State -->
                                                <div class="relative w-full">
                                                    <label for="state" class="block text-xs text-black mb-1">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-[#f3f3f3] rounded-xl p-3 text-black focus:outline-none shadow-[inset_2px_2px_5px_0px_rgba(0,0,0,0.15),inset_-2px_-2px_5px_0px_rgba(255,255,255,0.9)]"
                                                        placeholder="State" />

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

                                                <!-- Date of Birth -->
                                                <div class="relative w-full">
                                                    <label for="dob" class="block text-xs text-black mb-1">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-[#f3f3f3] rounded-xl p-3 text-black focus:outline-none shadow-[inset_2px_2px_5px_0px_rgba(0,0,0,0.15),inset_-2px_-2px_5px_0px_rgba(255,255,255,0.9)]" />

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

                                                <!-- Gender -->
                                                <div class="relative w-full">
                                                    <label for="gender"
                                                        class="block text-xs text-black mb-1">Gender</label>
                                                    <select id="gender" name="gender" {!! is_required('gender', false) !!}
                                                        class="w-full bg-[#f3f3f3] rounded-xl p-3 text-black focus:outline-none shadow-[inset_2px_2px_5px_0px_rgba(0,0,0,0.15),inset_-2px_-2px_5px_0px_rgba(255,255,255,0.9)]">
                                                        <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-500">
                                                    @error('gender')
                                                        {{ $message }}
                                                    @enderror
                                                </span>
                                            </div>

                                            <!-- Submit Button -->
                                            <div class="pt-2">
                                                <button type="submit"
                                                    class="w-full bg-[#12b7b6] text-white py-3 font-semibold rounded-b-4xl shadow-[2px_2px_5px_0px_rgba(0,0,0,0.15),-2px_-2px_5px_0px_rgba(255,255,255,0.9)] hover:shadow-[inset_2px_2px_5px_0px_rgba(0,0,0,0.15),inset_-2px_-2px_5px_0px_rgba(255,255,255,0.9)]">
                                                    Save Changes
                                                </button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>

                            {{-- security section --}}
                            <div x-show="activeTab === 'security'" id="security"
                                class="flex flex-col md:flex-row gap-6 pb-6 items-center rounded-2xl p-4 shadow-[inset_0px_5px_15px_-3px_rgba(0,_0,_0,_0.2)]">

                                <div class="flex-1">


                                    <div class="flex flex-col md:flex-row bg-[#f3f3f3] rounded-2xl 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-[#12b7b6] rounded-xl">
                                            <h3 class="text-black 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="">
                                                    <div class="md:col-span-2 space-y-6">
                                                        <!-- Password inputs with neumorphic styling -->
                                                        <div class="relative w-full mx-auto mb-6 md:mb-12">
                                                            <div class="relative rounded-xl">
                                                                <div class="relative flex items-center">
                                                                    <img src="{{ asset('/assets/templates/gopie/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 bg-[#f3f3f3] rounded-xl pl-12 p-4 focus:outline-none shadow-[inset_0px_5px_15px_-3px_rgba(0,_0,_0,_0.2)] text-sm"
                                                                        placeholder="Current Password" />
                                                                </div>

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

                                                        <div class="relative w-full mx-auto mb-6 md:mb-12">
                                                            <div class="relative rounded-xl">
                                                                <div class="relative flex items-center">
                                                                    <img src="{{ asset('/assets/templates/gopie/images/password-icon.svg') }}"
                                                                        alt="Password" class="absolute left-4 w-5 h-5" />
                                                                    <input type="password" name="password" id="password"
                                                                        class="w-full bg-[#f3f3f3] rounded-xl pl-12 p-4 focus:outline-none shadow-[inset_0px_5px_15px_-3px_rgba(0,_0,_0,_0.2)] text-sm"
                                                                        placeholder="New Password" />
                                                                </div>

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

                                                        <div class="relative w-full mx-auto mb-6 md:mb-12">
                                                            <div class="relative rounded-xl">
                                                                <div class="relative flex items-center">
                                                                    <img src="{{ asset('/assets/templates/gopie/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 bg-[#f3f3f3] rounded-xl pl-12 p-4 focus:outline-none shadow-[inset_0px_5px_15px_-3px_rgba(0,_0,_0,_0.2)] text-sm"
                                                                        placeholder="Confirm Password" />
                                                                </div>

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

                                                        <!-- Submit Button -->
                                                        <div class="">
                                                            <button type="submit"
                                                                class="w-full py-4 px-6 bg-[#12b7b6] text-white font-medium rounded-b-4xl transition-all duration-300 shadow-[5px_5px_15px_0px_rgba(0,0,0,0.15)] hover:shadow-[inset_5px_5px_15px_0px_rgba(0,0,0,0.15)]">
                                                                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-[#12b7b6] 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">
                                                        <p class="text-lg mb-14">Enable 2FA</p>
                                                    </div>


                                                    <!-- QR Code Image -->
                                                    <div class="flex justify-center">
                                                        <div
                                                            class="p-4 rounded-2xl bg- shadow-[inset_0px_5px_15px_-3px_rgba(0,_0,_0,_0.2)]">
                                                            <div id="wallet_qrcode" class="clipboard" data-copy="">
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <!-- Confirm Password Input -->
                                                    <div class="relative w-full mx-auto mb-6 mt-6">
                                                        <div class="relative rounded-xl">
                                                            <div class="relative flex items-center">
                                                                <img src="{{ asset('/assets/templates/gopie/images/password-icon.svg') }}"
                                                                    alt="Password" class="absolute left-4 w-5 h-5" />
                                                                <input type="text" name="one_time_password"
                                                                    id="one_time_password"
                                                                    class="w-full bg-[#f3f3f3] rounded-xl pl-12 p-4 focus:outline-none text-sm shadow-[inset_0px_5px_15px_-3px_rgba(0,_0,_0,_0.2)]"
                                                                    placeholder="2FA Code" />
                                                            </div>

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

                                                    <p class="text-black text-sm mb-2 mt-4">
                                                        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 w-full mb-6">
                                                        <p type="button"
                                                            class="focus:outline-none flex items-center gap-2 max-w-full">
                                                            <img src="{{ asset('/assets/templates/gopie/images/copy-icon.svg') }}"
                                                                alt="Copy"
                                                                class="w-5 h-5 flex-shrink-0 cursor-pointer clipboard"
                                                                data-copy="{{ user()->g2fa_secret }}" />
                                                            <span
                                                                class="text-black text-sm overflow-hidden text-ellipsis whitespace-nowrap clipboard cursor-pointer"
                                                                data-copy="{{ user()->g2fa_secret }}">
                                                                {{ user()->g2fa_secret }}
                                                            </span>
                                                        </p>
                                                    </div>

                                                    <!-- Enable 2FA Button -->
                                                    <button type="submit"
                                                        class="w-full py-4 px-6 bg-[#12b7b6] text-white font-medium rounded-b-4xl transition-all duration-300 shadow-[5px_5px_15px_0px_rgba(0,0,0,0.15)] hover:shadow-[inset_5px_5px_15px_0px_rgba(0,0,0,0.15)]">
                                                        Enable 2FA
                                                    </button>

                                                </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-[#12b7b6] 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">
                                                        <p class="text-lg mb-14">Disable 2FA</p>
                                                        <!-- Instructions Text -->
                                                        <p class="text-black text-center">
                                                            Enter the One time passcode from your google authenticator app
                                                            to disable
                                                            your
                                                            g2fa
                                                        </p>
                                                    </div>

                                                    <!-- Confirm Password Input -->
                                                    <div class="relative w-full mx-auto mb-6 mt-6">
                                                        <div class="relative rounded-xl">
                                                            <div class="relative flex items-center">
                                                                <img src="{{ asset('/assets/templates/gopie/images/password-icon.svg') }}"
                                                                    alt="Password" class="absolute left-4 w-5 h-5" />
                                                                <input type="text" name="one_time_password"
                                                                    id="one_time_password"
                                                                    class="w-full bg-[#f3f3f3] rounded-xl pl-12 p-4 focus:outline-none text-sm shadow-[inset_0px_5px_15px_-3px_rgba(0,_0,_0,_0.2)]"
                                                                    placeholder="2FA Code" />
                                                            </div>

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


                                                    <!-- Enable 2FA Button -->
                                                    <button type="submit"
                                                        class="w-full py-4 px-6 bg-[#12b7b6] text-white font-medium rounded-b-4xl transition-all duration-300 shadow-[5px_5px_15px_0px_rgba(0,0,0,0.15)] hover:shadow-[inset_5px_5px_15px_0px_rgba(0,0,0,0.15)]">
                                                        Disable 2FA
                                                    </button>

                                                </form>
                                            </div>
                                        @endif
                                    </div>


                                </div>
                            </div>


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