@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="{ activeTab: 'security', }">
                <div class="flex md:p-6 justify-between items-center w-full px-2 py-2">
                    <h3 class="text-sm md:text-xl text-black font-semibold">
                        <span x-show="activeTab === 'edit_profile'">Edit Profile</span>
                        <span x-show="activeTab === 'security'">Security</span>
                    </h3>
                    <a x-show="activeTab === 'security'" x-on:click="activeTab = 'edit_profile'" role="button"
                        class="gradient-bg text-black rounded-2xl text-base px-6 py-3 font-semibold">Edit
                        Profile</a>
                    <a x-show="activeTab === 'edit_profile'" x-on:click="activeTab = 'security'" role="button"
                        class="gradient-bg text-black rounded-2xl text-base px-6 py-3 font-semibold">Security</a>
                </div>


                <!-- Personal Information Section -->
                <div x-show="activeTab === 'edit_profile'" id="edit_profile">
                    <div class="border border-transparent bg-clip-border rounded-2xl p-4 md:p-10 mt-4 relative w-full"
                        style="background: linear-gradient(to right,#14f19510,#e39dff10,#80ecff10);">
                        <!-- Gradient border background -->
                        <div class="absolute inset-0 rounded-2xl pointer-events-none"
                            style="background: linear-gradient(to right,#14f195,#80ecff,#e39dff);padding: 1px;mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite: xor;mask-composite: exclude;">
                        </div>

                        <!-- Profile Header -->
                        <div class="flex flex-col items-start mb-6 text-black px-4">

                            <form action="{{ route('user.profile.photo') }}" method="POST" enctype="multipart/form-data"
                                class="mt-5 gen-form">
                                @csrf
                                {{-- profile photo --}}
                                <div class="rounded-full w-40 h-40 overflow-hidden flex items-center justify-center">
                                    <img id="profileImage" src="{{ asset('storage/profile/' . user()->photo) }}"
                                        alt="{{ user()->username ?? 'Profile Photo' }}" class="object-cover mb-4" />
                                </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 text-xs border hover:bg-[#556f3e]">
                                        <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 px-2 rounded-lg text-xs primaryBtn">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                            viewBox="0 0 24 24" style="fill: rgba(0, 0, 0, 1);transform: ;msFilter:;">
                                            <path
                                                d="M12.781 2.375c-.381-.475-1.181-.475-1.562 0l-8 10A1.001 1.001 0 0 0 4 14h4v7a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-7h4a1.001 1.001 0 0 0 .781-1.625l-8-10zM15 12h-1v8h-4v-8H6.081L12 4.601 17.919 12H15z">
                                            </path>
                                        </svg>
                                        <span class="">Save</span>
                                    </button>
                                </div>
                            </form>


                            <div class="flex gap-1 items-center">
                                <p class="text-sm">Date joined</p>
                                <p class="text-[#838486] text-xs">{{ date('M d, Y', strtotime(user()->created_at)) }}</p>
                            </div>
                        </div>

                        <!-- Profile Section -->
                        <div class="flex flex-col md:flex-row text-black rounded-2xl p-4 gap-4 md:gap-8">
                            <form action="{{ route('user.profile.edit-validate') }}" class="gen-form w-full">
                                @csrf
                                <div class="w-full space-y-8">
                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                        <div class="relative border border-gray-400 rounded-lg p-4">
                                            <label class="absolute top-1 left-3 text-black text-sm">Name
                                                {!! is_required('name') !!}</label>
                                            <input type="text" id="name" name="name"
                                                value="{{ old('name') ?? user()->name }}" {!! is_required('name', false) !!}
                                                class="w-full pt-5 text-gray-500 focus:outline-none bg-transparent" />

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

                                        <div class="relative border border-gray-400 rounded-lg p-4">
                                            <label class="absolute top-1 left-3 text-black text-sm">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 pt-5 text-gray-500 focus:outline-none bg-transparent" />

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

                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                        <div class="relative border border-gray-400 rounded-lg p-4">
                                            <label class="absolute top-1 left-3 text-black text-sm">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 pt-5 text-gray-500 focus:outline-none bg-transparent" />

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

                                        <div class="relative border border-gray-400 rounded-lg p-4">
                                            <label class="absolute top-1 left-3 text-black text-sm">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 pt-5 text-gray-500 focus:outline-none bg-transparent" />

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

                                    </div>
                                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                        <div class="relative border border-gray-400 rounded-lg p-4">
                                            <label class="absolute top-1 left-3 text-black text-sm">Address
                                                {!! is_required('address') !!}</label>
                                            <input type="text" id="address" name="address"
                                                value="{{ old('address') ?? user()->address }}" {!! is_required('address', false) !!}
                                                class="w-full pt-5 text-gray-500 focus:outline-none bg-transparent" />

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


                                        <div class="relative border border-gray-400 rounded-lg p-4">
                                            <label class="absolute top-1 left-3 text-black text-sm">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 pt-5 text-gray-500 focus:outline-none bg-transparent" />

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


                                        <div class="relative border border-gray-400 rounded-lg p-4">
                                            <label class="absolute top-1 left-3 text-black text-sm">Country
                                                {!! is_required('country') !!}</label>
                                            <select type="text" name="country" id="country" {!! is_required('country', false) !!}
                                                class="w-full pt-5 text-gray-500 focus:outline-none bg-transparent"
                                                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>


                                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                        <div class="relative border border-gray-400 rounded-lg p-4">
                                            <label class="absolute top-1 left-3 text-black text-sm">State
                                                {!! is_required('state') !!}</label>
                                            <input type="text" id="state" name="state"
                                                value="{{ old('state') ?? user()->state }}" {!! is_required('state', false) !!}
                                                class="w-full pt-5 text-gray-500 focus:outline-none bg-transparent" />

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


                                        <div class="relative border border-gray-400 rounded-lg p-4">
                                            <label class="absolute top-1 left-3 text-black text-sm">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 pt-5 text-gray-500 focus:outline-none bg-transparent" />

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


                                        <div class="relative border border-gray-400 rounded-lg p-4">
                                            <label class="absolute top-1 left-3 text-black text-sm">Gender</label>
                                            <select class="w-full pt-5 text-gray-500 focus:outline-none bg-transparent"
                                                id="gender" name="gender" {!! 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>

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


                                    <button class="w-full p-4 primaryBtn text-black font-bold rounded-b-4xl text-lg">
                                        Save Changes
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>


                {{-- security section --}}
                <div x-show="activeTab === 'security'" id="security">
                    <div class="border border-transparent bg-clip-border rounded-2xl p-4 md:p-6 mt-4 relative w-full"
                        style="background: linear-gradient(to right,#14f19510,#e39dff10,#80ecff10);">
                        <!-- Gradient border background -->
                        <div class="absolute inset-0 rounded-2xl pointer-events-none"
                            style="background: linear-gradient(to right,#14f195,#80ecff,#e39dff);padding: 1px;mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite: xor;mask-composite: exclude;">
                        </div>

                        <!-- Profile Header -->
                        <div class="flex flex-col items-start mb-2 text-black font-semibold text-lg">
                            Update Password
                        </div>

                        <!-- Profile Section -->
                        <div class="flex flex-col md:flex-row text-black rounded-2xl py-2 gap-4 md:gap-8">
                            <!-- Left Panel -->
                            <div
                                class="md:w-1/2 flex flex-col items-center text-center md:text-left lg:py-8 lg:px-8 md:border-r border-[#14f195] rounded-xl">
                                <div class="text-gray-300 w-full p-6">
                                    <div class="">

                                        <!-- Profile Grid -->
                                        <div class="space-y-4 w-full max-w-2xl mx-auto">
                                            <form action="{{ route('user.profile.password') }}" class="w-full gen-form">
                                                @csrf
                                                <div class="w-full space-y-8">
                                                    <div class="relative w-full">
                                                        <img src="{{ asset('/assets/templates/lunex/images/password-icon.svg') }}"
                                                            class="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5" />
                                                        <input type="password" name="current_password"
                                                            id="current_password"
                                                            class="w-full pl-12 pt-5 text-gray-500 focus:outline-none bg-transparent border border-gray-400 rounded-lg p-4"
                                                            placeholder="Current Password" />

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

                                                    <div class="relative w-full">
                                                        <img src="{{ asset('/assets/templates/lunex/images/password-icon.svg') }}"
                                                            class="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5" />
                                                        <input type="password" name="password" id="password"
                                                            class="w-full pl-12 pt-5 text-gray-500 focus:outline-none bg-transparent border border-gray-400 rounded-lg p-4"
                                                            placeholder="New Password" />

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

                                                    <div class="relative w-full">
                                                        <img src="{{ asset('/assets/templates/lunex/images/password-icon.svg') }}"
                                                            class="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5" />
                                                        <input type="password" id="password_confirmation"
                                                            name="password_confirmation"
                                                            class="w-full pl-12 pt-5 text-gray-500 focus:outline-none bg-transparent border border-gray-400 rounded-lg p-4"
                                                            placeholder="Confirm Password" />

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

                                                    <button type="submit"
                                                        class="w-full p-4 primaryBtn text-black font-bold rounded-b-4xl text-lg">
                                                        Save Changes
                                                    </button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </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 lg:py-8 lg:px-8 md:border-l border-[#14f195] rounded-xl">

                                    <form action="{{ route('user.profile.g2fa') }}" class="gen-form w-full"
                                        data-action="reload">
                                        @csrf
                                        <div class="flex flex-col items-center justify-center w-full">
                                            <p class="font-semibold text-lg mb-6 text-black">Enable 2FA</p>

                                            <div class="bg-black p-2 rounded-2xl mb-4 md:mb-8 w-fit">
                                                <div id="wallet_qrcode" class="clipboard" data-copy="">
                                                </div>
                                            </div>


                                            <p class="text-black">
                                                Scan the QRCode above or copy the 2FA Code below to set up
                                                your 2fa
                                            </p>
                                            <p class="flex gap-1 items-center">
                                                <img src="{{ asset('/assets/templates/lunex/images/copy-icon.svg') }}"
                                                    alt="" class="cursor-pointer clipboard"
                                                    data-copy="{{ user()->g2fa_secret }}" />
                                                <span class="text-gray-600 text-sm truncate cursor-pointer clipboard"
                                                    data-copy="{{ user()->g2fa_secret }}">{{ user()->g2fa_secret }}</span>
                                            </p>

                                            <div class="relative w-full mt-4 md:mt-8">
                                                <img src="{{ asset('/assets/templates/lunex/images/password-icon.svg') }}"
                                                    class="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5" />
                                                <input type="number" name="one_time_password" id="one_time_password"
                                                    class="w-full pl-12 pt-5 text-gray-500 focus:outline-none bg-transparent border border-gray-400 rounded-lg p-4"
                                                    placeholder="2FA Code" />

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

                                            <button type="submit"
                                                class="w-full p-4 primaryBtn font-bold rounded-b-4xl text-lg mt-4 md:mt-8">
                                                Save Changes
                                            </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 lg:py-8 lg:px-8 md:border-l border-[#14f195] rounded-xl">

                                    <form action="{{ route('user.profile.g2fa') }}" class="gen-form w-full"
                                        data-action="reload">
                                        @csrf
                                        <div class="flex flex-col items-center justify-center w-full">
                                            <p class="font-semibold text-lg mb-6 text-black">Disable 2FA</p>


                                            <p class="text-black">
                                                Enter the One time passcode from your google authenticator app
                                                to disable
                                                your
                                                g2fa
                                            </p>


                                            <div class="relative w-full mt-4 md:mt-8">
                                                <img src="{{ asset('/assets/templates/lunex/images/password-icon.svg') }}"
                                                    class="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5" />
                                                <input type="number" name="one_time_password" id="one_time_password"
                                                    class="w-full pl-12 pt-5 text-gray-500 focus:outline-none bg-transparent border border-gray-400 rounded-lg p-4"
                                                    placeholder="2FA Code" />

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

                                            <button type="submit"
                                                class="w-full p-4 primaryBtn font-bold rounded-b-4xl text-lg mt-4 md:mt-8">
                                                Save Changes
                                            </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
