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

@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">
                    <!-- 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">
                                KYC
                            </h2>
                            <div class="flex gap-2 md:gap-4">
                                <span class="p-2 rounded-2xl text-center border-t-2 border-t-[#13b7b6]">My KYC Record</span>
                            </div>
                        </div>
                    </div>

                    <!-- security content -->
                    @if ($kyc_records->count() > 0)
                        <div
                            class="bg-[#f3f3f3] rounded-2xl p-4 gap-4 md:p-8 shadow-[5px_5px_15px_0px_rgba(0,0,0,0.15),-5px_-5px_15px_0px_rgba(255,255,255,0.9)] max-w-5xl">


                            <div
                                class="flex flex-col md:flex-row gap-2 md:gap-8 p-4 md:p-8 shadow-[inset_0px_5px_15px_-3px_rgba(0,_0,_0,_0.2)] rounded-2xl">

                                @foreach ($kyc_records as $record)
                                    <div class="space-y-4 capitalize w-full">
                                        <img src="{{ asset('storage/kyc/' . json_decode($record->photos)->front) }}"
                                            alt="" class="w-full" />
                                        <p class="text-black font-medium text-sm flex gap-2">
                                            {{ $record->document_type }}

                                            @if ($record->status == 'approved')
                                                <img src="{{ asset('/assets/templates/gopie/images/approved-icon.svg') }}"
                                                    alt="" class="w-4 h-4" title="Approved" />
                                            @elseif ($record->status == 'pending')
                                                <img src="{{ asset('/assets/templates/gopie/images/pending-icon.svg') }}"
                                                    alt="" class="w-4 h-4" title="Pending" />
                                            @endif
                                        </p>
                                        <p class="text-[#12b7b6] text-xs">
                                            {{ date('M d, Y', strtotime($record->created_at)) }}
                                        </p>
                                    </div>
                                    @if (json_decode($record->photos)->back)
                                        <div class="space-y-4 capitalize w-full">
                                            <img src="{{ asset('storage/kyc/' . json_decode($record->photos)->back) }}"
                                                alt="" class="w-full" />
                                            <p class="text-black font-medium text-sm">
                                                {{ $record->document_type }}

                                                @if ($record->status == 'approved')
                                                    <img src="{{ asset('/assets/templates/gopie/images/approved-icon.svg') }}"
                                                        alt="" class="w-4 h-4" title="Approved" />
                                                @elseif ($record->status == 'pending')
                                                    <img src="{{ asset('/assets/templates/gopie/images/pending-icon.svg') }}"
                                                        alt="" class="w-4 h-4" title="Pending" />
                                                @endif
                                            </p>
                                            <p class="text-[#12b7b6] text-xs">
                                                {{ date('M d, Y', strtotime($record->created_at)) }}</p>
                                        </div>
                                    @endif
                                @endforeach
                            </div>

                            <div class="mt-8">
                                <h3 class="text-black font-medium text-sm">
                                    All KYC to be completed
                                </h3>

                                <div class="mt-8 flex flex-col md:flex-row gap-4 max-w-5xl justify-between">
                                    <div class="flex flex-col gap-2 text-sm">
                                        @if ($kyc_records->count() > 0)
                                            <img src="{{ asset('/assets/templates/gopie/images/approved-icon.svg') }}"
                                                alt="" class="w-4 h-4" title="Approved" />
                                        @else
                                            <img src="{{ asset('/assets/templates/gopie/images/red-info-icon.svg') }}"
                                                alt="" class="w-4 h-4" title="Pending" />
                                        @endif
                                        Account Updated
                                    </div>
                                    <div class="flex flex-col gap-2 text-sm">
                                        @if ($kyc_records->count() > 0)
                                            <img src="{{ asset('/assets/templates/gopie/images/approved-icon.svg') }}"
                                                alt="" class="w-4 h-4" title="Approved" />
                                        @else
                                            <img src="{{ asset('/assets/templates/gopie/images/red-info-icon.svg') }}"
                                                alt="" class="w-4 h-4" title="Pending" />
                                        @endif
                                        KYC Documents Uploaded
                                    </div>
                                    <div class="flex flex-col gap-2 text-sm">
                                        @if (user()->kyc_verified_at)
                                            <img src="{{ asset('/assets/templates/gopie/images/approved-icon.svg') }}"
                                                alt="" class="w-4 h-4" title="Approved" />
                                        @else
                                            <img src="{{ asset('/assets/templates/gopie/images/red-info-icon.svg') }}"
                                                alt="" class="w-4 h-4" title="Pending" />
                                        @endif
                                        KYC Documents Verified
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif

                    @if (!user()->kyc_verified_at && $kyc_records->where('status', '!=', 'rejected')->count() < 1)
                        <div
                            class="bg-[#f3f3f3] rounded-2xl p-4 gap-4 md:p-8 shadow-[5px_5px_15px_0px_rgba(0,0,0,0.15),-5px_-5px_15px_0px_rgba(255,255,255,0.9)] w-full">


                            <div class="mb-14 p-4 md:p-8 shadow-[inset_0px_5px_15px_-3px_rgba(0,_0,_0,_0.2)] rounded-2xl">

                                <h3 class="text-black text-base md:text-lg mb-4 md:mb-8">
                                    Start KYC Verification
                                </h3>

                                {{--  --}}
                                <div class="block w-full">
                                    <div
                                        class="w-full text-black 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>
                            </div>

                            <div class=" p-4 md:p-8 shadow-[inset_0px_5px_15px_-3px_rgba(0,_0,_0,_0.2)] rounded-2xl">

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

                                {{-- upload kyc --}}
                                <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 lg: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-500">
                                                <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-500">
                                                <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-500">
                                                <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-500">
                                                <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="primaryBtn text-white rounded-xl p-3 font-medium mt-8">
                                                Upload Documents </button>
                                        </div>
                                    </form>
                                </div>


                            </div>

                        </div>
                    @endif


                </div>
            </section>
        </div>
    </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('primaryBtn').addClass('bg-gray-500');

                $(this).addClass('primaryBtn').removeClass('bg-gray-500');
            });

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