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

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


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

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


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

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

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

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

                                <!-- Basic Information Form -->
                                <div x-show="activeForm === 'basic'" class="space-y-4" x-transition>
                                    <div class="flex flex-col space-y-4">
                                        <!-- Form Fields -->
                                        <div class="flex flex-col space-y-4">
                                            <div>
                                                <label class="block text-sm mb-1">Name</label>
                                                <div
                                                    class="w-full bg-gray-800/50 text-white border border-gray-700 rounded-xl px-3 py-3 text-sm">
                                                    {{ user()->name ?? 'Not Set' }}
                                                </div>
                                            </div>

                                            <div>
                                                <label class="block text-sm mb-1">Email</label>
                                                <div
                                                    class="w-full bg-gray-800/50 text-white border border-gray-700 rounded-xl px-3 py-3 text-sm">
                                                    {{ user()->email ?? 'Not Set' }}
                                                </div>
                                            </div>

                                            <div>
                                                <label class="block text-sm mb-1">Username</label>
                                                <div
                                                    class="w-full bg-gray-800/50 text-white border border-gray-700 rounded-xl px-3 py-3 text-sm">
                                                    {{ user()->username ?? 'Not Set' }}
                                                </div>
                                            </div>

                                            <div>
                                                <label class="block text-sm mb-1">Phone</label>
                                                <div
                                                    class="w-full bg-gray-800/50 text-white border border-gray-700 rounded-xl px-3 py-3 text-sm">
                                                    {{ user()->phone ?? 'Not Set' }}
                                                </div>
                                            </div>

                                            <div>
                                                <label class="block text-sm mb-1">Date of Birth</label>
                                                <div
                                                    class="w-full bg-gray-800/50 text-white border border-gray-700 rounded-xl px-3 py-3 text-sm">
                                                    {{ user()->dob ?? 'Not Set' }}
                                                </div>
                                            </div>

                                            <div>
                                                <label class="block text-sm mb-1">Address</label>
                                                <div
                                                    class="w-full bg-gray-800/50 text-white border border-gray-700 rounded-xl px-3 py-3 text-sm">
                                                    {{ user()->address ?? 'Not Set' }}
                                                </div>
                                            </div>

                                            <div>
                                                <label class="block text-sm mb-1">City</label>
                                                <div
                                                    class="w-full bg-gray-800/50 text-white border border-gray-700 rounded-xl px-3 py-3 text-sm">
                                                    {{ user()->city ?? 'Not Set' }}
                                                </div>
                                            </div>

                                            <div>
                                                <label class="block text-sm mb-1">State</label>
                                                <div
                                                    class="w-full bg-gray-800/50 text-white border border-gray-700 rounded-xl px-3 py-3 text-sm">
                                                    {{ user()->state ?? 'Not Set' }}
                                                </div>
                                            </div>

                                            <div>
                                                <label class="block text-sm mb-1">Country</label>
                                                <div
                                                    class="w-full bg-gray-800/50 text-white border border-gray-700 rounded-xl px-3 py-3 text-sm">
                                                    {{ user()->country ?? 'Not Set' }}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Additional Information Form -->
                                <div x-show="activeForm === 'additional'" class="space-y-4" x-transition>
                                    <div class="flex flex-col space-y-10">
                                        <!-- Form Fields -->
                                        <div>
                                            <!-- <label class="block text-sm mb-1">Email</label> -->
                                            <div
                                                class="w-full bg-gray-800/50 text-white border border-gray-700 rounded-xl px-3 py-3 text-sm flex items-center justify-between">
                                                Email
                                                @if (user()->email_verified_at)
                                                    <img src="{{ asset('/assets/templates/pandel/images/approved-icon.svg') }}"
                                                        alt="" />
                                                @else
                                                    <img src="{{ asset('/assets/templates/pandel/images/error-badge.svg') }}"
                                                        alt="" />
                                                @endif

                                            </div>
                                        </div>
                                        <div>
                                            <!-- <label class="block text-sm mb-1">KYC</label> -->
                                            <div
                                                class="w-full bg-gray-800/50 text-white border border-gray-700 rounded-xl px-3 py-3 text-sm flex items-center justify-between">
                                                KYC
                                                @if (user()->kyc_verified_at)
                                                    <img src="{{ asset('/assets/templates/pandel/images/approved-icon.svg') }}"
                                                        alt="" />
                                                @else
                                                    <img src="{{ asset('/assets/templates/pandel/images/error-badge.svg') }}"
                                                        alt="" />
                                                @endif

                                            </div>
                                        </div>

                                        <div>
                                            <!-- <label class="block text-sm mb-1">1st Deposit</label> -->
                                            <div
                                                class="w-full bg-gray-800/50 text-white border border-gray-700 rounded-xl px-3 py-3 text-sm flex items-center justify-between">
                                                1st Deposit
                                                @if (user()->deposits()->where('status', 'finished')->first())
                                                    <img src="{{ asset('/assets/templates/pandel/images/approved-icon.svg') }}"
                                                        alt="" />
                                                @else
                                                    <img src="{{ asset('/assets/templates/pandel/images/error-badge.svg') }}"
                                                        alt="" />
                                                @endif
                                            </div>
                                        </div>

                                        <div>
                                            <!-- <label class="block text-sm mb-1">1st Withdrawal</label> -->
                                            <div
                                                class="w-full bg-gray-800/50 text-white border border-gray-700 rounded-xl px-3 py-3 text-sm flex items-center justify-between">
                                                1st Withdrawal
                                                @if (user()->withdrawals()->where('status', 'approved')->first())
                                                    <img src="{{ asset('/assets/templates/pandel/images/approved-icon.svg') }}"
                                                        alt="" />
                                                @else
                                                    <img src="{{ asset('/assets/templates/pandel/images/error-badge.svg') }}"
                                                        alt="" />
                                                @endif
                                            </div>
                                        </div>

                                        <div>
                                            <!-- <label class="block text-sm mb-1">AI Bot</label> -->
                                            <div
                                                class="w-full bg-gray-800/50 text-white border border-gray-700 rounded-xl px-3 py-3 text-sm flex items-center justify-between">
                                                1st AI Bot
                                                @if (user()->botActivations()->first())
                                                    <img src="{{ asset('/assets/templates/pandel/images/approved-icon.svg') }}"
                                                        alt="" />
                                                @else
                                                    <img src="{{ asset('/assets/templates/pandel/images/error-badge.svg') }}"
                                                        alt="" />
                                                @endif
                                            </div>
                                        </div>

                                        <div class="bg-gray-950 p-4 rounded-xl">
                                            <div class="mb-4">
                                                <label class="block text-sm text-gray-300 mb-1">Referral Link</label>
                                                <div
                                                    class="w-full bg-gray-950 text-sky-400 border border-gray-700 rounded-xl px-3 py-3 text-sm flex items-center justify-between break-words">
                                                    <span class="truncate clipboard"
                                                        data-copy="{{ route('user.register', ['ref' => user()->username ?? 'notset']) }}">
                                                        {{ route('user.register', ['ref' => user()->username ?? 'notset']) }}
                                                    </span>
                                                    <img src="{{ asset('/assets/templates/pandel/images/copy-icon.svg') }}"
                                                        alt="Copy Icon" class="w-5 h-5 cursor-pointer clipboard"
                                                        data-copy="{{ route('user.register', ['ref' => user()->username ?? 'notset']) }}" />
                                                </div>
                                            </div>

                                            <div>
                                                <label class="block text-sm text-gray-300 mb-1">Date Joined</label>
                                                <div
                                                    class="w-full bg-gray-950 text-sky-400 border border-gray-700 rounded-xl px-3 py-3 text-sm flex items-center justify-between">
                                                    <span class="clipboard"
                                                        data-copy="{{ date('M d, Y', strtotime(user()->created_at)) }}">{{ date('M d, Y', strtotime(user()->created_at)) }}</span>
                                                    <img src="{{ asset('/assets/templates/pandel/images/copy-icon.svg') }}"
                                                        alt="Copy Icon" class="w-5 h-5 cursor-pointer clipboard"
                                                        data-copy="{{ date('M d, Y', strtotime(user()->created_at)) }}" />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>




        </div>


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


    </div>

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