@section('title', 'Trang Chủ')
@extends('layouts.app')
@section('content')
@php 
$a=json_decode(getSettings()['slider_images'] ?? '[]', true);
$slider=is_array($a) ? array_values(array_filter($a, fn ($value) => !empty($value))) : [];
@endphp
@if(count($slider) > 0)
<div class="mb-6">
    <div class="relative rounded-xl border border-neutral-200 bg-white shadow-soft overflow-hidden">
        <div class="swiper heybank-hero-swiper" id="heybank-home-slider">
            <div class="swiper-wrapper">
                @foreach($slider as $i)
                    @php
                        $url=\Illuminate\Support\Str::startsWith($i, ['http://', 'https://', '//'])
                            ? $i
                            : \Illuminate\Support\Facades\Storage::url($i);
                    @endphp
                    <div class="swiper-slide">
                        <img src="{{ $url }}" alt="HeyBank slider {{ $loop->iteration }}" class="block w-full h-[220px] sm:h-[280px] lg:h-[320px] object-cover select-none" draggable="false">
                    </div>
                @endforeach
            </div>
            @if(count($slider) > 1)
            <div class="swiper-button-prev !text-white !w-9 !h-9 !rounded-full !bg-black/30 hover:!bg-black/50 transition" id="heybank-home-slider-prev"></div>
            <div class="swiper-button-next !text-white !w-9 !h-9 !rounded-full !bg-black/30 hover:!bg-black/50 transition" id="heybank-home-slider-next"></div>
            <div class="swiper-pagination !bottom-4" id="heybank-home-slider-pagination"></div>
            @endif
        </div>
    </div>
</div>
@endif
<div class="w-full">
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-4 items-center">
        <div class="rounded-2xlx border border-neutral-200 bg-white p-6 shadow-soft">
            <div class="flex items-center gap-3">
                <div
                    class="w-11 h-11 rounded-lg bg-gradient-to-br from-blue-400 to-blue-600 flex items-center justify-center shadow-lg shadow-blue-500/30">
                    <i class="ri-wallet-3-line text-white text-lg drop-shadow-sm"></i>
                </div>
                <div class="flex-1 font-bold">
                    <div class="mt-1 text-2xl">{{ FormatNumber((getUserbyId()['balance'] ?? 0), ',') }}đ</div>
                    <div class="mt-1 text-xs text-blue-600 uppercase">Số Dư Hiện Tại</div>
                </div>
            </div>
        </div>
        <div class="rounded-2xlx border border-neutral-200 bg-white p-6 shadow-soft">
            <div class="flex items-center gap-3">
                <div
                    class="w-11 h-11 rounded-lg bg-gradient-to-br from-green-400 to-green-600 flex items-center justify-center shadow-lg shadow-green-500/30">
                    <i class="ri-bank-line text-white text-lg drop-shadow-sm"></i>
                </div>
                <div class="flex-1 font-bold">
                    <div class="mt-1 text-2xl">{{ getTotalBankAccount(getUserbyId()['user_id'] ?? null) }}</div>
                    <div class="mt-1 text-xs text-green-600 uppercase">Tổng APP Đã Thuê</div>
                </div>
            </div>
        </div>
        <div class="rounded-2xlx border border-neutral-200 bg-white p-6 shadow-soft">
            <div class="flex items-center gap-3">
                <div
                    class="w-11 h-11 rounded-lg bg-gradient-to-br from-red-400 to-red-600 flex items-center justify-center shadow-lg shadow-red-500/30">
                    <i class="ri-line-chart-line text-white text-lg drop-shadow-sm"></i>
                </div>
                <div class="flex-1 font-bold">
                    <div class="mt-1 text-2xl">{{ (getSettings()['fee'] ?? 0) == 0 ? 'Miễn Phí' : FormatNumber(getSettings()['fee'], ',').'đ' }}</div>
                    <div class="mt-1 text-xs text-red-600 uppercase">Phí Chuyển Trong App</div>
                </div>
            </div>
        </div>
        <div class="rounded-2xlx border border-neutral-200 bg-white p-6 shadow-soft">
            <div class="flex items-center gap-3">
                <div
                    class="w-11 h-11 rounded-lg bg-gradient-to-br from-purple-400 to-purple-600 flex items-center justify-center shadow-lg shadow-purple-500/30">
                    <i class="ri-shield-user-line text-white text-lg drop-shadow-sm"></i>
                </div>
                <div class="flex-1 font-bold">
                    <div class="mt-1 text-2xl">{{ (is_array(getUserbyId()) ? (getUserbyId()['role'] == 0 ? 'Quản Trị Viên' : 'Thành Viên') : 'Chưa Đăng Nhập') }}</div>
                    <div class="mt-1 text-xs text-purple-600 uppercase">Cấp Bậc</div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="grid grid-cols-1 xl:grid-cols-3 gap-4">
        <div class="xl:col-span-2 rounded-2xlx border border-neutral-200 bg-white shadow-soft overflow-hidden relative min-h-[220px]">
        <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/15 to-transparent pointer-events-none"></div>
        <div class="absolute inset-x-0 bottom-0 p-5 text-white space-y-2">
            <!-- <div class="inline-flex items-center gap-2 rounded-full bg-white/15 px-3 py-1 text-[11px] font-semibold uppercase tracking-wide">
                <i class="ri-bank-line text-sm"></i> Chúc Mừng Năm Mới
            </div> -->
            <div class="text-sm sm:text-base font-semibold leading-snug">🌺 Chúc Mừng Năm Mới</div>
            <p class="text-xs sm:text-sm text-white/80 leading-relaxed">Chúc mọi người hay ăn chóng béo - Tiền nhiều như kẹo - Tình chặt như keo - Dẻo dai như mèo - Mịn màng trắng trẻo - Sức khỏe như voi.</p>
        </div>
        </div>
    <div class="rounded-2xlx border border-neutral-200 bg-white shadow-soft overflow-hidden relative min-h-[220px]">
        <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/15 to-transparent pointer-events-none"></div>
        <div class="absolute inset-x-0 bottom-0 p-5 text-white space-y-2">
            <!-- <div class="inline-flex items-center gap-2 rounded-full bg-white/15 px-3 py-1 text-[11px] font-semibold uppercase tracking-wide">
                <i class="ri-bank-line text-sm"></i> Chúc Mừng Năm Mới
            </div> -->
            <div class="text-sm sm:text-base font-semibold leading-snug">🌼 Tết Đến Xuân Về</div>
            <p class="text-xs sm:text-sm text-white/80 leading-relaxed">Xuân đến mọi nhà phát tài phát lộc - Tiền vô xồng xộc - tiền ra từ từ - Sức khỏe có dư - Công danh tấn tới - Tình duyên phơi phới - Hạnh phúc thăng hoa - Xin chúc mọi nhà một năm đại thắng.</p>
        </div>
    </div>
</div>
</div>
@endsection