@extends('frontend.layouts.partials.app')

@section('title', 'Show KYC Form')

@section('meta', 'Welcome to Goodwill Finance Pvt. Ltd.')

@section('content')
    <section>
        <div class="py-10 lg:px-10 flex space-x-1">

            {{-- @include('frontend.layouts.kyc.partials.formsidebar') --}}

            <div class="w-full lg:w-[75%] p-5 bg-white border-2 rounded-lg shadow-xl">
                <ol
                    class="py-10 w-full  flex flex-col space-y-3 lg:space-y-0 lg:flex-row lg:space-x-2 lg:space-x-10 justify-center lg:items-center ">
                    <li class="flex items-center space-x-5 ">
                        <span class="flex items-center justify-center w-8 h-8 border border-gray-500 rounded-full shrink-0 ">
                            <svg viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg"
                                xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000">
                                <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                                <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
                                <g id="SVGRepo_iconCarrier">
                                    <title>Success</title>
                                    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                        <g id="add-copy" fill="#005aab" transform="translate(42.666667, 42.666667)">
                                            <path
                                                d="M213.333333,3.55271368e-14 C95.51296,3.55271368e-14 3.55271368e-14,95.51296 3.55271368e-14,213.333333 C3.55271368e-14,331.153707 95.51296,426.666667 213.333333,426.666667 C331.153707,426.666667 426.666667,331.153707 426.666667,213.333333 C426.666667,95.51296 331.153707,3.55271368e-14 213.333333,3.55271368e-14 Z M213.333333,384 C119.227947,384 42.6666667,307.43872 42.6666667,213.333333 C42.6666667,119.227947 119.227947,42.6666667 213.333333,42.6666667 C307.43872,42.6666667 384,119.227947 384,213.333333 C384,307.43872 307.438933,384 213.333333,384 Z M293.669333,137.114453 L323.835947,167.281067 L192,299.66912 L112.916693,220.585813 L143.083307,190.4192 L192,239.335893 L293.669333,137.114453 Z"
                                                id="Shape"> </path>
                                        </g>
                                    </g>
                                </g>
                            </svg>
                        </span>
                        <span>
                            <h3 class="font-medium leading-tight text-xs">Account Opening</h3>
                            <p class="text-sm">Step-1</p>
                        </span>
                    </li>

                    <li class="flex items-center space-x-5 ">
                        <span
                            class="flex items-center justify-center w-8 h-8 border border-gray-500 rounded-full shrink-0 ">
                            <svg viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg"
                                xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000">
                                <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                                <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
                                <g id="SVGRepo_iconCarrier">
                                    <title>Success</title>
                                    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                        <g id="add-copy" fill="#005aab" transform="translate(42.666667, 42.666667)">
                                            <path
                                                d="M213.333333,3.55271368e-14 C95.51296,3.55271368e-14 3.55271368e-14,95.51296 3.55271368e-14,213.333333 C3.55271368e-14,331.153707 95.51296,426.666667 213.333333,426.666667 C331.153707,426.666667 426.666667,331.153707 426.666667,213.333333 C426.666667,95.51296 331.153707,3.55271368e-14 213.333333,3.55271368e-14 Z M213.333333,384 C119.227947,384 42.6666667,307.43872 42.6666667,213.333333 C42.6666667,119.227947 119.227947,42.6666667 213.333333,42.6666667 C307.43872,42.6666667 384,119.227947 384,213.333333 C384,307.43872 307.438933,384 213.333333,384 Z M293.669333,137.114453 L323.835947,167.281067 L192,299.66912 L112.916693,220.585813 L143.083307,190.4192 L192,239.335893 L293.669333,137.114453 Z"
                                                id="Shape"> </path>
                                        </g>
                                    </g>
                                </g>
                            </svg>
                        </span>
                        <span>
                            <h3 class="font-medium leading-tight text-xs">KYC Form</h3>
                            <p class="text-sm">Step-2</p>
                        </span>
                    </li>

                    <li class="flex items-center space-x-5 ">
                        <span
                            class="flex items-center justify-center w-8 h-8 border border-brandBlue bg-brandBlue text-white font-extrabold rounded-full shrink-0">
                            3
                        </span>
                        <span>
                            <h3 class="font-medium leading-tight text-xs text-brandBlue font-extrabold">Confirmation</h3>
                            <p class="text-sm">Step-3</p>
                        </span>
                    </li>
                </ol>

                @include('frontend.layouts.kyc.partials.kycform', ['preview' => true])

                <div class="flex mt-2 m-5 space-x-5 items-center">
                    <a href="{{ route('editKYCForm', $kyc->uuid) }}"
                        class="btn py-2 px-5 flex justify-center items-center bg-[#005aab] text-white font-semibold rounded-lg w-32 hover:cursor-pointer hover:scale-95 transition ease-in-out duration-200">Edit
                        KYC</a>
                    <a href="{{ route('submitKYCForm', $kyc->uuid) }}"
                        class="btn py-2 px-5 flex justify-center items-center bg-[#00a7c9] text-white font-semibold rounded-lg w-32 hover:cursor-pointer hover:scale-95 transition ease-in-out duration-200">Submit
                        KYC</a>
                    <!-- <a href="{{ route('printKYCForm', $kyc->uuid) }}" target='__blank' class="btn bg-[#00c7c2] primary py-2 px-5 flex justify-center items-center text-white font-semibold rounded-lg w-32 hover:cursor-pointer hover:scale-95 transition ease-in-out duration-200" title='Print'>Print</a> -->
                </div>
            </div>
        </div>
    </section>
@endsection

@section('scripts')
    <script>
        $('#kycVerificationForm :input').prop('disabled', true);
        $('#kycVerificationForm :input').prop('readonly', true);
    </script>
    @include('frontend.layouts.kyc.partials.scripts')
@endsection