@extends('frontend.layouts.partials.app')
@section('title', 'Online Services')
@section('meta', 'Welcome to Goodwill Finance Pvt. Ltd.')
@section('content')

    <section class="h-[250px] p-10 text-white bg-gradient-to-r from-[#004d6e] to-[#00accc]">
        <div class="h-full flex flex-col space-y-5 justify-center">
            <p class="text-3xl font-semibold">Goodwill Online Services</p>
            <p class="text-xl">Faster Smarter Easier</p>
        </div>
    </section>

    <section class="-mt-16 mb-10 w-full flex justify-center">
        <div class="p-10 flex flex-col space-y-8 bg-white shadow-xl rounded-md w-[1116px] ">
            <div class="flex justify-between items-center">
                <h2 class="text-xl text-[#2c79bd] font-semibold uppercase">Account Opening / Account Services</h2>
                @include('components.reference-number-modal')
            </div>

            <!-- component -->
            <!-- Include Alpine.js -->
            <div class="grid gap-6 grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
                @foreach ($accountTypes as $accountType)
                    <div
                        class="relative h-[260px] overflow-hidden group flex justify-center items-center bg-white shadow-[0_0px_10px_rgba(0,0,0,0.25)] p-4 rounded-md">
                        <div class="flex flex-col space-y-3 items-center">
                            @if ($accountType->image)
                                <img src="{{ asset('storage/' . $accountType->image) }}" alt="" class="h-1/2 w-1/2">
                            @else
                                <img src="assets/img/GoodwillLogo.jpg" alt="" class="h-1/2 w-1/2">
                            @endif
                            <p class="text-md font-semibold text-center text-[#2c79bd] uppercase">{{ $accountType->name }}
                            </p>
                        </div>
                        <div
                            class="absolute top-full w-full h-full group-hover:top-0 transition-all duration-700 bg-brandBlue p-3 text-white flex flex-col items-center justify-center space-y-5 rounded-md">
                            <h4 class="font-bold text-lg text-center">{{ $accountType->name }}</h4>
                            <div class="text-sm">
                                @isset($accountType->interest_rate)
                                    <p>
                                        Interest Rate:
                                        <span class="font-bold">{{ $accountType->interest_rate ?? '-' }}</span>
                                    </p>
                                @endisset
                                @isset($accountType->minimum_balance)
                                    <p>
                                        Minimum Balance:
                                        <span class="font-bold">{{ $accountType->minimum_balance ?? '-' }}</span>
                                    </p>
                                @endisset
                                 @isset($accountType->interest_term)
                                <p>
                                    Interest Payment:
                                    <span class="font-bold">{{ $accountType->interest_term ?? '-' }}</span>
                                </p>
                                 @endisset
                            </div>
                            <div class="flex space-x-2 justify-center items-center text-sm">
                                <a href="{{ route('createAccountForm', $accountType) }}"
                                    class="px-3 py-2 bg-white text-[#005aab] rounded-md">Apply Now</a>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            <h2 class="text-xl text-[#2c79bd] font-semibold uppercase">Loans</h2>
            <div class="grid gap-6 grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
                <a href="{{ route('createLoanForm') }}">
                    <div
                        class="group flex justify-center items-center bg-white shadow-[0_0px_10px_rgba(0,0,0,0.25)] p-4 rounded-md  h-[260px] hover:bg-brandBlue transition ease-in-out duration-200 hover:cursor-pointer hover:text-white">
                        <div class="flex flex-col space-y-3 items-center">
                            <svg class="group-hover:fill-white group-hover:stroke-white" fill="#005aab" width="34px"
                                height="34px" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" stroke="#005aab"
                                stroke-width="1.8559999999999999">
                                <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                                <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
                                <g id="SVGRepo_iconCarrier">
                                    <g id="Outline">
                                        <g data-name="Outline" id="Outline-2">
                                            <path
                                                d="M41.131,41.418a3.371,3.371,0,0,1-3.368-3.368,1,1,0,0,0-2,0,5.369,5.369,0,1,0,5.368-5.369h-.24a2.556,2.556,0,1,1,2.555-2.556,1,1,0,0,0,2,0,4.556,4.556,0,1,0-4.555,4.556h.24a3.369,3.369,0,1,1,0,6.737Z">
                                            </path>
                                            <path
                                                d="M22.293,42.248v-8.31s4.807-.012,4.917-.017l4.845,8.808a1,1,0,1,0,1.752-.963l-4.553-8.279a6.6,6.6,0,0,0,4.128-5.136h.945a1,1,0,0,0,0-2h-.945a6.592,6.592,0,0,0-6.5-5.586H21.293a1,1,0,0,0-1,1v4.586H18.5a1,1,0,0,0,0,2h1.793v13.9a1,1,0,0,0,2,0Zm0-19.483h4.586a4.59,4.59,0,0,1,4.47,3.586H22.293Zm9.056,5.586a4.591,4.591,0,0,1-4.47,3.587H22.293V28.351Z">
                                            </path>
                                            <path
                                                d="M32,62A30,30,0,1,0,2,32,30.034,30.034,0,0,0,32,62ZM32,4A28,28,0,1,1,4,32,28.032,28.032,0,0,1,32,4Z">
                                            </path>
                                            <path
                                                d="M46.482,19.965a3.138,3.138,0,0,0,1.264-.266A19.994,19.994,0,0,1,22.691,49.707a1,1,0,1,0-.931,1.769A21.986,21.986,0,0,0,49.229,18.351a3.127,3.127,0,0,0,.426-1.558,3.172,3.172,0,1,0-3.173,3.172Zm0-4.344a1.172,1.172,0,1,1-1.171,1.172A1.173,1.173,0,0,1,46.482,15.621Z">
                                            </path>
                                            <path
                                                d="M13.621,47.207a3.2,3.2,0,1,0,2.48-3.091A19.779,19.779,0,0,1,12,32,20.023,20.023,0,0,1,32,12a19.811,19.811,0,0,1,8.463,1.874,1,1,0,0,0,.848-1.812A21.989,21.989,0,0,0,14.39,45.16,3.141,3.141,0,0,0,13.621,47.207Zm4.345,0a1.173,1.173,0,1,1-1.173-1.172A1.174,1.174,0,0,1,17.966,47.207Z">
                                            </path>
                                        </g>
                                    </g>
                                </g>
                            </svg>
                            <p class="text-md font-semibold text-center text-[#2c79bd] group-hover:text-white">Apply
                                Loan</p>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </section>

@endsection