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

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

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

@section('content')
    <section>
        <div class="py-10 p-2 lg:p-6 xl:px-10 flex space-x-5">

            @include('frontend.layouts.kyc.partials.formsidebar')

            <div class="w-full xl:w-[75%] lg:p-6 bg-white border-2 rounded-lg shadow-xl overflow-y-auto">
                <div class="flex justify-between">
                    <h2 class="text-[#005aab] text-2xl mb-8 font-bold">KYC Form</h2>
                </div>
                @if ($errors)
                    <ol>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ol>
                @endif
                <ol
                    class="space-y-8 justify-center items-center w-full space-y-4 sm:flex sm:space-x-8 sm:space-y-0 rtl:space-x-reverse">

                    <li class="flex items-center space-x-2.5 rtl:space-x-reverse">
                        <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"
                                 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">Account Opening</h3>
                            <p class="text-sm">Step-1 - Completed</p>
                        </span>
                    </li>
                    <li class="flex items-center text-brandBlue  space-x-2.5 rtl:space-x-reverse">
                        <span
                            class="flex items-center justify-center w-8 h-8 border border-brandBlue bg-brandBlue text-white font-extrabold rounded-full shrink-0">
                            2
                        </span>
                        <span>
                            <h3 class="font-medium leading-tight text-brandBlue font-extrabold">KYC Form</h3>
                            <p class="text-sm">Step-2</p>
                        </span>
                    </li>
                    <li class="flex items-center space-x-2.5 rtl:space-x-reverse">
                        <span
                            class="flex items-center justify-center w-8 h-8 border border-gray-500 rounded-full shrink-0 ">
                            3
                        </span>
                        <span>
                            <h3 class="font-medium leading-tight text-brandBlue font-extrabold">Confirmation</h3>
                            <p class="text-sm">Step-3</p>
                        </span>
                    </li>
                </ol>
                <form action="{{ route('updateKYCForm') }}" method="POST">
                    @csrf
                    @include('frontend.layouts.kyc.partials.kycform')
                    <div class="mt-8 m-2">
                        <button type="submit"
                                class="w-44 py-3 px-5 bg-[#005aab] text-white font-semibold rounded-lg">Preview
                            Form
                        </button>
                    </div>
                </form>
            </div>
    </section>
@endsection

@section('scripts')

    @include('frontend.layouts.kyc.partials.scripts')
@endsection