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

@section('title', 'Edit KYC 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-4">
            <p class="text-3xl md:text-3xl font-semibold">Know Your Customer (KYC) Form</p>
            <p class="text-base md:text-xl">Submit your details for identity verification.</p>
        </div>
    </section>

    {{-- Form Container --}}
    <section class="-mt-10 md:-mt-16 mb-10 flex justify-center px-4 md:px-6">
        <div class="w-full max-w-7xl bg-white shadow-xl rounded-md p-5 md:p-10 space-y-8">
            {{-- Step Indicator --}}
            <ol class="space-y-6 sm:space-y-0 sm:flex sm:space-x-8 items-center justify-center">
                <li class="flex items-center space-x-3">
                    <span class="flex items-center justify-center w-8 h-8 border border-gray-500 rounded-full shrink-0">
                        {{-- Success SVG --}}
                        <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 fill-[#005aab]">
                            <path
                                d="M213.33 0C95.51 0 0 95.51 0 213.33S95.51 426.67 213.33 426.67 426.67 331.15 426.67 213.33 331.15 0 213.33 0Zm0 384c-94.11 0-170.67-76.56-170.67-170.67S119.22 42.67 213.33 42.67 384 119.23 384 213.33 307.44 384 213.33 384Zm80.34-246.89 30.17 30.17-131.84 132.39-79.08-79.08 30.17-30.17 48.92 48.92 101.66-101.23Z" />
                        </svg>
                    </span>
                    <span>
                        <h3 class="text-sm font-medium">Account Opening</h3>
                        <p class="text-xs">Step-1 - Completed</p>
                    </span>
                </li>

                <li class="flex items-center text-brandBlue space-x-3">
                    <span
                        class="flex items-center justify-center w-8 h-8 border border-brandBlue bg-brandBlue text-white font-extrabold rounded-full">
                        2
                    </span>
                    <span>
                        <h3 class="text-sm font-bold text-brandBlue">KYC Form</h3>
                        <p class="text-xs">Step-2</p>
                    </span>
                </li>

                <li class="flex items-center space-x-3">
                    <span class="flex items-center justify-center w-8 h-8 border border-gray-500 rounded-full">
                        3
                    </span>
                    <span>
                        <h3 class="text-sm font-medium text-brandBlue">Confirmation</h3>
                        <p class="text-xs">Step-3</p>
                    </span>
                </li>
            </ol>

            {{-- KYC Form --}}
            <form id="kycForm" action="{{ route('updateKYCForm', $kyc->uuid) }}" method="POST"
                enctype="multipart/form-data">
                @csrf
                @method('PUT')

                {{-- Include your KYC fields --}}
                @include('frontend.layouts.kyc.partials.kycform')

                {{-- Submit Button --}}
                <div class="mt-6">
                    <button type="submit"
                        class="w-full sm:w-auto px-6 py-3 bg-brandBlue text-white font-semibold rounded-md hover:bg-gradient-to-r hover:from-[#004d6e] hover:to-[#00accc] transition duration-200">
                        Preview Form
                    </button>
                </div>
            </form>
        </div>
    </section>
@endsection



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