@extends('frontend.master')

@section('content')

<link rel="stylesheet" href="https://unpkg.com/swiper@9/swiper-bundle.min.css">

<style>
    .swiper {
        width: 100%;
        max-width: 100%;
    }

    .swiper-slide img {
        width: 100%;
        height: auto;
        display: block;
    }
</style>

{{-- Top Message + CTA --}}
<section class="text-center my-10" data-aos="fade-down" data-aos-delay="200">
    <p class="text-xl text-gray-800 font-semibold">
        আপনার অর্থিক প্রয়োজনের জন্য আমরা রয়েছি
    </p>

    {{-- Fixed: direct loan.apply, middleware will check personal information --}}
    <a href="{{ route('loan.apply') }}"
       class="mt-6 bg-green-600 text-white font-bold text-xl px-8 py-2 rounded-full shadow-2xl
              inline-flex items-center gap-2 mx-auto
              hover:bg-green-700 transition duration-300 transform hover:scale-105 float-animation">
        <i class="ri-hand-coin-line text-3xl"></i>
        লোন আবেদন করুন
    </a>
</section>

{{-- Quick Actions Grid --}}
<section class="grid grid-cols-4 gap-7 text-center mb-10">

    {{-- Loan Apply --}}
    <a href="{{ route('loan.apply') }}">
        <div class="flex flex-col items-center" data-aos="zoom-in" data-aos-delay="0">
            <div class="bg-red-50 w-16 h-16 rounded-2xl flex items-center justify-center shadow-lg transition transform hover:scale-125 hover:shadow-2xl hover:bg-red-100">
                <i class="ri-shield-check-line text-red-600 text-4xl"></i>
            </div>
            <p class="mt-3 text-xs font-medium">লোন আবেদন</p>
        </div>
    </a>

    {{-- Withdraw --}}
    <a href="{{ route('withdraw.create') }}">
        <div class="flex flex-col items-center" data-aos="zoom-in" data-aos-delay="100">
            <div class="bg-red-50 w-16 h-16 rounded-2xl flex items-center justify-center shadow-lg transition transform hover:scale-125 hover:shadow-2xl hover:bg-red-100">
                <i class="ri-money-dollar-circle-line text-red-600 text-4xl"></i>
            </div>
            <p class="mt-3 text-xs font-medium">ক্যাশ আউট</p>
        </div>
    </a>

    {{-- Installment Pay --}}
    <a href="{{ route('loan.installments.index') }}">
        <div class="flex flex-col items-center" data-aos="zoom-in" data-aos-delay="200">
            <div class="bg-red-50 w-16 h-16 rounded-2xl flex items-center justify-center shadow-lg transition transform hover:scale-125 hover:shadow-2xl hover:bg-red-100">
                <i class="ri-calendar-check-line text-red-600 text-4xl"></i>
            </div>
            <p class="mt-3 text-xs font-medium">জমা দিন</p>
        </div>
    </a>

    {{-- Profile --}}
    <a href="{{ route('profile') }}">
        <div class="flex flex-col items-center" data-aos="zoom-in" data-aos-delay="300">
            <div class="bg-red-50 w-16 h-16 rounded-2xl flex items-center justify-center shadow-lg transition transform hover:scale-125 hover:shadow-2xl hover:bg-red-100">
                <i class="ri-user-3-line text-red-600 text-4xl"></i>
            </div>
            <p class="mt-3 text-xs font-medium">প্রোফাইল</p>
        </div>
    </a>

    {{-- My Loans --}}
    <a href="{{ route('loan.my') }}">
        <div class="flex flex-col items-center" data-aos="zoom-in" data-aos-delay="400">
            <div class="bg-red-50 w-16 h-16 rounded-2xl flex items-center justify-center shadow-lg transition transform hover:scale-125 hover:shadow-2xl hover:bg-red-100">
                <i class="ri-money-cny-circle-line text-red-600 text-4xl"></i>
            </div>
            <p class="mt-3 text-xs font-medium">আমার লোন</p>
        </div>
    </a>

    {{-- Transactions --}}
    <a href="{{ route('transactions') }}">
        <div class="flex flex-col items-center" data-aos="zoom-in" data-aos-delay="500">
            <div class="bg-red-50 w-16 h-16 rounded-2xl flex items-center justify-center shadow-lg transition transform hover:scale-125 hover:shadow-2xl hover:bg-red-100">
                <i class="ri-file-list-3-line text-red-600 text-4xl"></i>
            </div>
            <p class="mt-3 text-xs font-medium">লেনদেনসমূহ</p>
        </div>
    </a>

    {{-- Contact --}}
    <a href="{{ route('contact') }}">
        <div class="flex flex-col items-center" data-aos="zoom-in" data-aos-delay="600">
            <div class="bg-red-50 w-16 h-16 rounded-2xl flex items-center justify-center shadow-lg transition transform hover:scale-125 hover:shadow-2xl hover:bg-red-100">
                <i class="ri-headphone-line text-red-600 text-4xl"></i>
            </div>
            <p class="mt-3 text-xs font-medium">যোগাযোগ</p>
        </div>
    </a>

    {{-- About --}}
    <a href="{{ route('about') }}">
        <div class="flex flex-col items-center" data-aos="zoom-in" data-aos-delay="700">
            <div class="bg-red-50 w-16 h-16 rounded-2xl flex items-center justify-center shadow-lg transition transform hover:scale-125 hover:shadow-2xl hover:bg-red-100">
                <i class="ri-information-line text-red-600 text-4xl"></i>
            </div>
            <p class="mt-3 text-xs font-medium">সম্পর্কে</p>
        </div>
    </a>

</section>

{{-- Banner Slider --}}
<div class="swiper mySwiper" style="display: inline-block; margin-bottom: 10px !important;">
    <div class="swiper-wrapper">
        @php
            $banners = \App\Models\Banner::query()
                ->where('status', 1)
                ->latest()
                ->get();
        @endphp

        @forelse ($banners as $banner)
            <div class="swiper-slide">
                <img style=" object-fit: cover;"
                     src="{{ asset('storage/' . $banner->image) }}"
                     alt="banner">
            </div>
        @empty
            <div class="swiper-slide">
                <img style=" object-fit: cover;"
                     src="{{ asset('img/banner.png') }}"
                     alt="banner">
            </div>
        @endforelse
    </div>

    <div class="swiper-pagination"></div>
</div>

{{-- Partners --}}
<section class="text-center my-12" data-aos="fade-up" data-aos-delay="200">
    <p class="text-red-600 font-bold text-xl">আপনার পার্টনার</p>
    <p class="text-gray-700 mt-2 text-lg">বিভিন্ন অর্থিক প্রতিষ্ঠান থেকে লোন নিন</p>

    <div class="flex justify-center items-center gap-12 mt-8">
        <img src="{{ asset('img/partners/city-bank.png') }}"
             class="h-12 drop-shadow"
             alt="City Bank">

        <img src="{{ asset('img/partners/brack1.jpg') }}"
             class="h-12 drop-shadow"
             alt="BRAC Bank">

        <img src="{{ asset('img/partners/sonaly.png') }}"
             class="h-12 drop-shadow"
             alt="Sonali Bank">
    </div>

    <p class="text-gray-600 mt-6 text-sm">
        সিটি ব্যাংকসহ বাংলাদেশের শীর্ষ ব্যাংকসমূহের ব্যক্তিগত লোন
    </p>
</section>

<script src="https://unpkg.com/swiper@9/swiper-bundle.min.js"></script>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        new Swiper('.mySwiper', {
            slidesPerView: 1,
            spaceBetween: 12,
            loop: true,
            autoplay: {
                delay: 4000,
                disableOnInteraction: false
            },
            pagination: {
                el: '.swiper-pagination',
                clickable: true
            }
        });
    });
</script>

@endsection