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

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

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

@section('content')
    {{-- Hero Section --}}
    <section class="lg:h-[350px] h-[250px] p-6 md:p-10 text-white bg-gradient-to-r from-[#004d6e] to-[#00accc]">
        <div class="h-full flex flex-col justify-center space-y-3 md:space-y-4">
            <h1 class="text-2xl md:text-4xl font-bold">Loan Form</h1>
            <p class="text-sm md:text-lg font-medium">Enter your information to apply for a loan.</p>
        </div>
    </section>

    {{-- Form Section --}}
    <section class="-mt-12 md:-mt-16 mb-12 px-4 md:px-6 flex justify-center">
        <div class="w-full max-w-7xl bg-white shadow-2xl rounded-xl p-5 md:p-10 space-y-8">

            <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">Loan Application
                        </h3>
                        <p class="text-sm">Step-3</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 ">
                        4
                    </span>
                    <span>
                        <h3 class="font-medium leading-tight text-xs">Confirmation</h3>
                        <p class="text-sm">Step-4</p>
                    </span>
                </li>
            </ol>
            <form action="{{ route('storeLoanForm') }}" method="POST" enctype='multipart/form-data'
                id="loanApplicationForm">
                @csrf
                @include('frontend.layouts.loanForm.partials.loanForm')

                <div class="mt-8 m-2">
                    <button type="button" class="w-50 py-3 px-5 bg-[#005aab] text-white font-semibold rounded-lg"
                        id="submitLoanApplication">Submit Application
                    </button>
                </div>
            </form>
        </div>
    </section>
@endsection

@section('scripts')
    @include('frontend.layouts.loanForm.partials.scripts')
@endsection