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

@section('contents')
    <!--my profile-->
    <div class="transition-all duration-300 ease-in-out" id="refresh"
        :class="{
            'lg:ml-64': !isCollapsed,
            'lg:ml-20': isCollapsed
        }">

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


            <div class="p-6">
                <!-- main content -->
                <div class="flex flex-col lg:mt-12">


                    <!-- Main Layout -->
                    <div class="flex flex-col lg:flex-row">
                        <!-- Sidebar -->
                        <div
                            class="md:w-full lg:w-1/5 bg-gray-800/50 p-6 flex flex-col rounded-xl items-center md:h-96 md:mr-10 mb-8 lg:mb-0">
                            <div class="w-24 h-24 rounded-full overflow-hidden bg-gray-700 mb-4">
                                <img src="{{ asset('storage/profile/' . user()->photo) }}"
                                    alt="{{ user()->username ?? 'Profile Photo' }}" class="w-24 h-24" />
                            </div>
                            <nav class="text-start w-full space-y-4">
                                <a href="{{ route('user.profile.index') }}"
                                    class="py-2 px-4 md:px-2 hover:bg-gray-700 border-b border-b-gray-600 flex gap-2"><img
                                        src="{{ asset('/assets/templates/pandel/images/profile-icon.svg') }}"
                                        alt="" />
                                    My Profile</a>
                                <a href="{{ route('user.profile.edit') }}"
                                    class="flex gap-2 py-2 px-4 md:px-2 text-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-white bg-gray-950 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 -->
                        @if ($kyc_records->count() > 0)
                            <div class="lg:w-4/5 rounded-lg bg-gray-800/50 mt-4 lg:mt-0">
                                <div class="p-8 rounded-lg shadow-lg">
                                    <div class="border-b border-gray-700 pb-4 mb-6 flex justify-between">
                                        <p
                                            class="text-gray-300 w-fit text-lg font-semibold border-b-2 border-sky-400 px-2 md:px-4 text-start rounded-xl">
                                            My KYC Record
                                        </p>
                                    </div>

                                    <div class="block">
                                        @foreach ($kyc_records as $record)
                                            <img src="{{ asset('storage/kyc/' . json_decode($record->photos)->front) }}"
                                                alt="" />

                                            <div class="mt-8">
                                                <!-- <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">
                                                    <div>
                                                        <p style="text-transform: capitalize;">{{ $record->document_type }}
                                                        </p>
                                                        <p class="text-gray-400">
                                                            {{ date('M d, Y', strtotime($record->created_at)) }}
                                                        </p>
                                                    </div>


                                                    @if ($record->status == 'approved')
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="24"
                                                            height="25" viewBox="0 0 24 25" fill="none">
                                                            <path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd"
                                                                d="M10.586 2.6C10.94 2.24648 11.4136 2.03846 11.9134 2.01698C12.4132 1.99551 12.903 2.16214 13.286 2.484L13.414 2.601L15.314 4.5H18C18.5044 4.50009 18.9901 4.69077 19.3599 5.03384C19.7297 5.3769 19.9561 5.84702 19.994 6.35L20 6.5V9.186L21.9 11.086C22.2538 11.44 22.462 11.9139 22.4834 12.4139C22.5049 12.914 22.3381 13.4039 22.016 13.787L21.899 13.914L19.999 15.814V18.5C19.9991 19.0046 19.8086 19.4906 19.4655 19.8605C19.1224 20.2305 18.6521 20.4572 18.149 20.495L18 20.5H15.315L13.415 22.4C13.0609 22.7538 12.5871 22.962 12.087 22.9835C11.587 23.005 11.097 22.8382 10.714 22.516L10.587 22.4L8.68697 20.5H5.99997C5.49539 20.5002 5.0094 20.3096 4.63942 19.9665C4.26944 19.6234 4.04281 19.1532 4.00497 18.65L3.99997 18.5V15.814L2.09997 13.914C1.74616 13.56 1.53797 13.0861 1.51649 12.5861C1.49502 12.086 1.66182 11.5961 1.98397 11.213L2.09997 11.086L3.99997 9.186V6.5C4.00006 5.9956 4.19074 5.50986 4.53381 5.14009C4.87687 4.77032 5.34699 4.54383 5.84997 4.506L5.99997 4.5H8.68597L10.586 2.6Z"
                                                                fill="#00AA39" />
                                                            <path fill-rule="evenodd" clip-rule="evenodd"
                                                                d="M15.0791 9.4831L10.8351 13.7271L9.06707 11.9591C8.87943 11.7716 8.62498 11.6663 8.35971 11.6664C8.09444 11.6665 7.84007 11.772 7.65257 11.9596C7.46506 12.1472 7.35977 12.4017 7.35986 12.667C7.35996 12.9322 7.46543 13.1866 7.65307 13.3741L10.0571 15.7781C10.1592 15.8803 10.2805 15.9614 10.414 16.0167C10.5475 16.072 10.6906 16.1005 10.8351 16.1005C10.9796 16.1005 11.1226 16.072 11.2561 16.0167C11.3896 15.9614 11.5109 15.8803 11.6131 15.7781L16.4931 10.8971C16.6752 10.7085 16.776 10.4559 16.7737 10.1937C16.7715 9.93151 16.6663 9.68069 16.4809 9.49529C16.2955 9.30988 16.0447 9.20471 15.7825 9.20243C15.5203 9.20015 15.2677 9.30095 15.0791 9.4831Z"
                                                                fill="#F0FCFF" />
                                                        </svg>
                                                    @elseif ($record->status == 'pending')
                                                        <svg width="24" height="24" viewBox="0 0 19 19"
                                                            fill="none" xmlns="http://www.w3.org/2000/svg">
                                                            <rect x="0.0820312" y="0.322632" width="18" height="18"
                                                                rx="9" fill="#D8D8D8" fill-opacity="0.11"></rect>
                                                            <circle cx="5" cy="5" r="5"
                                                                transform="matrix(-1 0 0 1 14.082 4.32263)" fill="#D8D8D8">
                                                            </circle>
                                                        </svg>
                                                    @else
                                                        <svg width="24" height="24" viewBox="0 0 19 19"
                                                            fill="none" xmlns="http://www.w3.org/2000/svg">
                                                            <path fill-rule="evenodd" clip-rule="evenodd"
                                                                d="M8.65505 1.80913C8.92055 1.54399 9.27577 1.38797 9.65064 1.37187C10.0255 1.35576 10.3928 1.48074 10.6801 1.72213L10.7761 1.80988L12.2011 3.23413H14.2156C14.5939 3.2342 14.9582 3.37721 15.2355 3.63451C15.5128 3.89181 15.6827 4.24439 15.7111 4.62163L15.7156 4.73413V6.74863L17.1406 8.17363C17.4059 8.43916 17.5621 8.79454 17.5782 9.16958C17.5943 9.54463 17.4692 9.91208 17.2276 10.1994L17.1398 10.2946L15.7148 11.7196V13.7341C15.7149 14.1126 15.572 14.4771 15.3147 14.7545C15.0574 15.032 14.7047 15.202 14.3273 15.2304L14.2156 15.2341H12.2018L10.7768 16.6591C10.5113 16.9245 10.1559 17.0806 9.78085 17.0967C9.40581 17.1128 9.03836 16.9877 8.75105 16.7461L8.6558 16.6591L7.2308 15.2341H5.21555C4.83712 15.2343 4.47263 15.0913 4.19514 14.834C3.91766 14.5767 3.74769 14.224 3.7193 13.8466L3.71555 13.7341V11.7196L2.29055 10.2946C2.0252 10.0291 1.86905 9.67373 1.85295 9.29868C1.83684 8.92364 1.96194 8.55618 2.20355 8.26888L2.29055 8.17363L3.71555 6.74863V4.73413C3.71562 4.35583 3.85863 3.99152 4.11593 3.7142C4.37323 3.43687 4.72582 3.267 5.10305 3.23863L5.21555 3.23413H7.23005L8.65505 1.80913Z"
                                                                fill="#EA0A0E" />
                                                            <path fill-rule="evenodd" clip-rule="evenodd"
                                                                d="M12.0238 6.9714L8.84078 10.1544L7.51478 8.8284C7.37405 8.68777 7.18321 8.6088 6.98426 8.60887C6.78531 8.60894 6.59453 8.68804 6.4539 8.82877C6.31327 8.9695 6.2343 9.16034 6.23438 9.35929C6.23445 9.55824 6.31355 9.74902 6.45428 9.88965L8.25728 11.6926C8.33389 11.7693 8.42485 11.8301 8.52497 11.8716C8.62509 11.9131 8.7324 11.9344 8.84078 11.9344C8.94915 11.9344 9.05646 11.9131 9.15658 11.8716C9.2567 11.8301 9.34766 11.7693 9.42428 11.6926L13.0843 8.0319C13.2209 7.89045 13.2965 7.70099 13.2948 7.50435C13.2931 7.3077 13.2142 7.11959 13.0751 6.98053C12.9361 6.84148 12.748 6.7626 12.5513 6.76089C12.3547 6.75918 12.1652 6.83478 12.0238 6.9714Z"
                                                                fill="#F0FCFF" />
                                                        </svg>
                                                    @endif

                                                </div>
                                            </div>
                                        @endforeach


                                        <div
                                            class="w-full text-white rounded-xl px-3 py-3 text-sm flex items-center justify-between mt-8">
                                            <span class="w-fit border-b border-sky-400 px-3 py-2 rounded-xl">Account
                                                Updated</span>
                                            @if ($kyc_records->count() > 0)
                                                <img src="{{ asset('/assets/templates/pandel/images/double-tick.svg') }}"
                                                    alt="" />
                                            @else
                                                <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor"
                                                    class="w-4 h-4 text-red-500" viewBox="0 0 16 16">
                                                    <path
                                                        d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z">
                                                    </path>
                                                </svg>
                                            @endif

                                        </div>
                                        <div
                                            class="w-full text-white rounded-xl px-3 py-3 text-sm flex items-center justify-between">
                                            <span class="w-fit border-b border-sky-400 px-3 py-2 rounded-xl">KYC
                                                Documents
                                                Uploaded</span>

                                            @if ($kyc_records->count() > 0)
                                                <img src="{{ asset('/assets/templates/pandel/images/double-tick.svg') }}"
                                                    alt="" />
                                            @else
                                                <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor"
                                                    class="w-4 h-4 text-red-500" viewBox="0 0 16 16">
                                                    <path
                                                        d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z">
                                                    </path>
                                                </svg>
                                            @endif

                                        </div>
                                        <div
                                            class="w-full text-white rounded-xl px-3 py-3 text-sm flex items-center justify-between">
                                            <span class="w-fit border-b border-sky-400 px-3 py-2 rounded-xl">KYC
                                                Documents
                                                Verified</span>
                                            @if (user()->kyc_verified_at)
                                                <img src="{{ asset('/assets/templates/pandel/images/double-tick.svg') }}"
                                                    alt="" />
                                            @else
                                                <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor"
                                                    class="w-4 h-4 text-red-500" viewBox="0 0 16 16">
                                                    <path
                                                        d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z">
                                                    </path>
                                                </svg>
                                            @endif
                                        </div>
                                    </div>

                                </div>
                            </div>
                        @endif

                        @if (!user()->kyc_verified_at && $kyc_records->where('status', '!=', 'rejected')->count() < 1)
                            <div class="lg:w-4/5 rounded-lg bg-gray-800/50 mt-4 lg:mt-0">
                                <div class="p-8 rounded-lg shadow-lg">
                                    <div class="border-b border-gray-700 pb-4 mb-6 flex justify-between">
                                        <p
                                            class="text-gray-300 w-fit text-lg font-semibold border-b-2 border-sky-400 px-2 md:px-4 text-start rounded-xl">
                                            Start KYC Verification
                                        </p>
                                    </div>


                                    <div
                                        class="w-full text-white rounded-xl px-3 py-3 mb-14 text-sm font-mono text-justify h-64 overflow-y-auto">
                                        <p class="mb-6">
                                            {{ site('name') }} fully complies with {{ site('country') }}'s and
                                            International
                                            Anti-Money Laundering and Anti-Terrorism Financing Laws . Such legislation is
                                            the
                                            applicable institutional framework on preventing and combating money laundering
                                            and
                                            terrorist financing and incorporates the provisions of Directive (EU) 2015/849,
                                            2018/843 of the European Parliament and of the Council, the Financial Action
                                            Task
                                            Force (FATF) 2012 and US BSA/AML Act.
                                        </p>

                                        <p class="mb-6">
                                            It is the policy of {{ site('name') }} to prohibit and actively prevent money
                                            laundering and any activity that facilitates money laundering or the funding of
                                            terrorist or criminal activities by complying with all applicable requirements
                                            under
                                            the Bank Secrecy Act (BSA) and its implementing regulations.
                                        </p>

                                        <p class="mb-6">
                                            Our AML policies, procedures and internal controls are designed to ensure
                                            compliance
                                            with all applicable BSA regulations and FINRA rules and will be reviewed and
                                            updated
                                            on a regular basis to ensure appropriate policies, procedures and internal
                                            controls
                                            are in place to account for both changes in regulations and changes in our
                                            business.
                                            <br>
                                            <b class="font-bold">Rules: 31 C.F.R. § 1023.210; FINRA Rule 3310.</b>
                                        </p>

                                        <p class="mb-6">
                                            Pursuant to the BSA and its implementing regulations, financial institutions are
                                            required to make certain searches of their records upon receiving an information
                                            request from FinCEN.
                                        </p>

                                        <p class="mb-6">
                                            We will respond to a Financial Crimes Enforcement Network (FinCEN) request
                                            concerning accounts and transactions (a 314(a) Request) by immediately searching
                                            our
                                            records to determine whether we maintain or have maintained any account for, or
                                            have
                                            engaged in any transaction with, each individual, entity or organization named
                                            in
                                            the 314(a)
                                        </p>
                                    </div>

                                    <div class="w-full text-white rounded-xl px-3 py-3 text-sm mb-14">

                                        <div class="flex gap-2 items-center mb-10">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="22"
                                                viewBox="0 0 20 22" fill="none">
                                                <path
                                                    d="M6 11H7M14 11H10M14 7H13M10 7H6M6 15H11M1 13V9C1 5.229 1 3.343 2.172 2.172C3.344 1.001 5.229 1 9 1H11C14.771 1 16.657 1 17.828 2.172C18.482 2.825 18.771 3.7 18.898 5M19 9V13C19 16.771 19 18.657 17.828 19.828C16.656 20.999 14.771 21 11 21H9C5.229 21 3.343 21 2.172 19.828C1.518 19.175 1.229 18.3 1.102 17"
                                                    stroke="white" stroke-width="1.5" stroke-linecap="round" />
                                            </svg>
                                            <p class="text-sm">Select your KYC Document type to proceed</p>
                                        </div>

                                        {{--  --}}
                                        <div class="p-2">
                                            <form action="{{ route('user.kyc.upload') }}" class="mt-5 gen-form"
                                                enctype="multipart/form-data" data-action="reload">
                                                @csrf
                                                <input type="hidden" name="document_type" id="document_type">

                                                {{-- <div
                                                    class="w-full grid lg:grid-cols-4 grid-cols-2 lg:gap-10 gap-2 mb-5 mt-5"> --}}
                                                <div class="w-full md:flex items-center gap-4 mb-5 mt-5">

                                                    <div data-target="national_id" data-value="national id card"
                                                        class="mb-2 w-48 text-white px-6 py-2 rounded-xl text-sm cursor-pointer type bg-gray-950 border border-gray-700 hover:bg-gray-700">
                                                        <div class="relative type_select hidden" id="national_id"></div>
                                                        <div class=" px-2 flex item-center justify-center">
                                                            National ID Card
                                                        </div>
                                                    </div>

                                                    <div data-target="passport" data-value="passport"
                                                        class="mb-2 w-48 text-white px-6 py-2 rounded-xl text-sm cursor-pointer type bg-gray-950 border border-gray-700 hover:bg-gray-700">
                                                        <div class="relative type_select hidden" id="passport"></div>
                                                        <div class=" px-2 flex item-center justify-center">
                                                            Int'l Passport
                                                        </div>
                                                    </div>

                                                    <div data-target="voters_card" data-value="voters card"
                                                        class="mb-2 w-48 text-white px-6 py-2 rounded-xl text-sm cursor-pointer type bg-gray-950 border border-gray-700 hover:bg-gray-700">
                                                        <div class="relative type_select hidden" id="voters_card"></div>
                                                        <div class=" px-2 flex item-center justify-center">
                                                            Voters Card
                                                        </div>
                                                    </div>

                                                    <div data-target="drivers_license" data-value="drivers license"
                                                        class="mb-2 w-48 text-white px-6 py-2 rounded-xl text-sm cursor-pointer type bg-gray-950 border border-gray-700 hover:bg-gray-700">
                                                        <div class="relative type_select hidden" id="drivers_license">
                                                        </div>
                                                        <div class=" px-2 flex item-center justify-center">
                                                            Drivers License
                                                        </div>
                                                    </div>


                                                </div>

                                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">

                                                    <div class="w-full grid grid-cols-1  gap-5 mb-3 kyc-field hidden">
                                                        <label for=""
                                                            class="flex font-medium font-mono items-center space-x-1">
                                                            <svg xmlns="http://www.w3.org/2000/svg"
                                                                class="w-4 h-4 text-purple-500" fill="currentColor"
                                                                class="bi bi-1-circle-fill" viewBox="0 0 16 16">
                                                                <path
                                                                    d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0ZM9.283 4.002H7.971L6.072 5.385v1.271l1.834-1.318h.065V12h1.312V4.002Z" />
                                                            </svg>
                                                            <span>Front ID</span>

                                                        </label>
                                                        <label
                                                            class="h-52 w-2/3 rounded font-medium flex flex-grow justify-center items-center border border-slate-800 hover:border-slate-600 cursor-pointer"
                                                            for="front">
                                                            <span id="front-preview"
                                                                class="uploadIcon rounded w-full h-full  flex justify-center items-center border border-slate-800 hover:border-slate-600"
                                                                style="background-image: url({{ asset('assets/images/front-id.png') }}); background-size: cover; background-repeat: no-repeat;">
                                                                <span
                                                                    class="bg-gray-500 hover:bg-blue-600 border p-2 text-white rounded-full">
                                                                    <svg class="w-6 h-6" fill="none"
                                                                        stroke="currentColor" viewBox="0 0 24 24"
                                                                        xmlns="http://www.w3.org/2000/svg">
                                                                        <path stroke-linecap="round"
                                                                            stroke-linejoin="round" stroke-width="2"
                                                                            d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12">
                                                                        </path>
                                                                    </svg>
                                                                </span>
                                                            </span>
                                                        </label>
                                                        <input class="hidden" type="file" accept="image/*"
                                                            name="front" id="front" data-preview="front-preview">
                                                    </div>

                                                    <div class="w-full grid grid-cols-1  gap-5 mb-3 kyc-field hidden"
                                                        id="kyc-field-back">
                                                        <label for=""
                                                            class="flex font-medium font-mono items-center space-x-1">

                                                            <svg xmlns="http://www.w3.org/2000/svg"
                                                                class="w-4 h-4 text-purple-500" fill="currentColor"
                                                                class="bi bi-2-circle-fill" viewBox="0 0 16 16">
                                                                <path
                                                                    d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0ZM6.646 6.24c0-.691.493-1.306 1.336-1.306.756 0 1.313.492 1.313 1.236 0 .697-.469 1.23-.902 1.705l-2.971 3.293V12h5.344v-1.107H7.268v-.077l1.974-2.22.096-.107c.688-.763 1.287-1.428 1.287-2.43 0-1.266-1.031-2.215-2.613-2.215-1.758 0-2.637 1.19-2.637 2.402v.065h1.271v-.07Z" />
                                                            </svg>
                                                            <span>Back ID</span>

                                                        </label>
                                                        <label
                                                            class="h-52 w-2/3 rounded font-medium flex flex-grow justify-center items-center border border-slate-800 hover:border-slate-600 cursor-pointer"
                                                            for="back">
                                                            <span id="back-preview"
                                                                class="uploadIcon rounded w-full h-full  flex justify-center items-center border border-slate-800 hover:border-slate-600"
                                                                style="background-image: url({{ asset('assets/images/back-id.png') }}); background-size: cover; background-repeat: no-repeat;">
                                                                <span
                                                                    class="bg-gray-500 hover:bg-blue-600 border p-2 text-white rounded-full">
                                                                    <svg class="w-6 h-6" fill="none"
                                                                        stroke="currentColor" viewBox="0 0 24 24"
                                                                        xmlns="http://www.w3.org/2000/svg">
                                                                        <path stroke-linecap="round"
                                                                            stroke-linejoin="round" stroke-width="2"
                                                                            d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12">
                                                                        </path>
                                                                    </svg>
                                                                </span>
                                                            </span>
                                                        </label>
                                                        <input class="hidden" type="file" accept="image/*"
                                                            name="back" id="back" data-preview="back-preview">
                                                    </div>

                                                    <div class="w-full grid grid-cols-1  gap-5 mb-3 kyc-field hidden">
                                                        <label for=""
                                                            class="flex font-medium font-mono items-center space-x-1">
                                                            <svg xmlns="http://www.w3.org/2000/svg"
                                                                class="w-4 h-4 text-purple-500" fill="currentColor"
                                                                class="bi bi-3-circle-fill" viewBox="0 0 16 16">
                                                                <path
                                                                    d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-8.082.414c.92 0 1.535.54 1.541 1.318.012.791-.615 1.36-1.588 1.354-.861-.006-1.482-.469-1.54-1.066H5.104c.047 1.177 1.05 2.144 2.754 2.144 1.653 0 2.954-.937 2.93-2.396-.023-1.278-1.031-1.846-1.734-1.916v-.07c.597-.1 1.505-.739 1.482-1.876-.03-1.177-1.043-2.074-2.637-2.062-1.675.006-2.59.984-2.625 2.12h1.248c.036-.556.557-1.054 1.348-1.054.785 0 1.348.486 1.348 1.195.006.715-.563 1.237-1.342 1.237h-.838v1.072h.879Z" />
                                                            </svg>
                                                            <span>Selfie</span>

                                                        </label>

                                                        <label
                                                            class="w-2/3 h-52 rounded font-medium flex flex-grow justify-center items-center border border-slate-800 hover:border-slate-600 cursor-pointer"
                                                            for="selfie">
                                                            <span id="selfie-preview"
                                                                class="uploadIcon rounded w-full h-full  flex justify-center items-center border border-slate-800 hover:border-slate-600"
                                                                style="background-image: url({{ asset('assets/images/selfie.jpg') }}); background-size: cover; background-repeat: no-repeat;">
                                                                <span
                                                                    class="bg-gray-500 hover:bg-blue-600 border p-2 text-white rounded-full">
                                                                    <svg class="w-6 h-6" fill="none"
                                                                        stroke="currentColor" viewBox="0 0 24 24"
                                                                        xmlns="http://www.w3.org/2000/svg">
                                                                        <path stroke-linecap="round"
                                                                            stroke-linejoin="round" stroke-width="2"
                                                                            d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12">
                                                                        </path>
                                                                    </svg>
                                                                </span>
                                                            </span>
                                                        </label>
                                                        <input class="hidden" type="file" accept="image/*"
                                                            name="selfie" id="selfie" data-preview="selfie-preview">


                                                    </div>
                                                </div>


                                                <div class="py-6 kyc-field hidden">
                                                    <button
                                                        type="submit"class="bg-blue-800 hover:bg-blue-700 text-white rounded-3xl p-3 font-medium mt-8">
                                                        Upload Documents </button>
                                                </div>
                                            </form>
                                        </div>

                                    </div>



                                </div>
                            </div>
                        @endif

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




        </div>


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


    </div>

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

@section('scripts')
    <script>
        $(document).ready(function() {
            $(document).on('click', ".type", function(e) {
                // Hide all type_select elements
                $('.type_select').addClass('hidden');

                // Show the selected type
                var target = '#' + $(this).data('target');
                $(target).toggleClass('hidden');

                // Update the document type value
                var type = $(this).data('value');
                $('#document_type').val(type);

                // Hide all KYC fields and conditionally show them
                $('.kyc-field').addClass('hidden');
                if (type === 'passport') {
                    $('.kyc-field').not('#kyc-field-back')
                        .removeClass('hidden')
                        .hide()
                        .fadeIn(2000);
                } else {
                    $('.kyc-field').removeClass('hidden').hide().fadeIn(2000);
                }

                // Remove bg-blue-800 from all .type elements and add to clicked one
                $('.type').removeClass('bg-blue-800');
                $(this).addClass('bg-blue-800').removeClass('bg-gray-950');
            });

            // Image preview update
            $(document).on("change", "input[type='file']", function(e) {
                var input = e.target;
                var previewId = $(this).data("preview");

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

                    reader.onload = function(e) {
                        $("#" + previewId).css({
                            "background-image": "url(" + e.target.result + ")",
                            "background-size": "cover",
                            "background-repeat": "no-repeat",
                            "background-position": "center",
                        });
                    };

                    reader.readAsDataURL(input.files[0]); // Read the image file as a data URL.
                }
            });
        });
    </script>
@endsection
