@extends('layouts.app')

@section('title', 'Dashboard - Top it Up Merchant Portal')

@section('content')

    <!-- Top Alert Notification (OTP Risk Warning) -->
    @if (!empty($otpDisabled))
        <div class="mb-5 bg-gradient-to-r from-amber-50 to-red-50 border border-amber-200/90 rounded-2xl p-3.5 sm:p-4 shadow-sm flex items-center justify-between gap-3">
            <div class="flex items-center gap-3">
                <div class="w-9 h-9 rounded-xl bg-amber-500/10 text-amber-700 flex items-center justify-center flex-shrink-0">
                    <i class="ph-bold ph-warning text-xl text-amber-600"></i>
                </div>
                <div>
                    <h4 class="text-xs sm:text-sm font-bold text-slate-900">OTP Disabled: Account Security Risk</h4>
                    <p class="text-[11px] text-slate-500 hidden sm:block">Two-factor passcode authentication is recommended for high-volume transactions.</p>
                </div>
            </div>
            <button type="button" onclick="showToast('OTP Security settings can be updated under Security & OTP', 'shield-check')" class="px-3 py-1.5 bg-amber-600 hover:bg-amber-700 text-white font-semibold text-xs rounded-xl shadow-sm touch-btn flex-shrink-0 cursor-pointer">
                Enable OTP
            </button>
        </div>
    @endif

    <!-- Section Title & Badge Header -->
    <div class="mb-4 flex items-center justify-between">
        <div>
            <h2 class="font-display font-bold text-lg text-slate-900">Banking & Store Operations</h2>
            <p class="text-xs text-slate-500">All Top it Up management tools mapped to your account</p>
        </div>
        <span class="text-xs font-semibold px-2.5 py-1 bg-slate-200/70 text-slate-700 rounded-lg">
            {{ count($menus) }} Services Active
        </span>
    </div>

    <!-- GRID OF ALL 18 SERVICE TILES (Matches index.html design) -->
    <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-3 sm:gap-4">
        @foreach ($menus as $menu)
            @php
                $isBanking = ($menu['icon'] === 'ph-bank' && str_contains($menu['title'], 'Banking'));
            @endphp

            @if ($isBanking)
                <!-- 18. Top it Up Banking Details Tile -->
                <div onclick="toggleModal('bankingDetailsModal')" 
                     class="bg-gradient-to-br from-slate-900 to-slate-800 p-4 rounded-2xl shadow-card-hover text-white transition group cursor-pointer flex flex-col items-center text-center touch-btn">
                    <div class="w-12 h-12 rounded-2xl bg-white/10 group-hover:bg-white/20 text-amber-300 flex items-center justify-center text-2xl mb-2.5 transition">
                        <i class="ph-duotone {{ $menu['icon'] }}"></i>
                    </div>
                    <h3 class="text-xs font-bold text-white leading-snug">{{ $menu['title'] }}</h3>
                    <span class="text-[10px] text-amber-300 mt-1 font-medium">{{ $menu['subtitle'] }}</span>
                </div>
            @else
                <!-- Standard Service Tile -->
                @php
                    $isComingSoon = ($menu['url'] === '#comingsoon');
                @endphp
                <div @if($isComingSoon) 
                        onclick="showToast('{{ addslashes($menu['title']) }} service is coming soon for your merchant account', 'clock')"
                     @else
                        onclick="showServiceModal('{{ addslashes($menu['title']) }}', '{{ addslashes($menu['desc']) }}')" 
                     @endif
                     class="relative bg-white p-4 rounded-2xl border border-slate-200/90 shadow-card-soft hover:shadow-card-hover hover:border-topitup-red/40 transition group cursor-pointer flex flex-col items-center text-center touch-btn {{ $isComingSoon ? 'opacity-75' : '' }}">
                    
                    @if (!empty($menu['badge']))
                        <span class="absolute top-2 right-2 px-1.5 py-0.5 bg-topitup-red text-white text-[9px] font-black rounded-full badge-pulse">
                            {{ $menu['badge'] }}
                        </span>
                    @elseif ($isComingSoon)
                        <span class="absolute top-2 right-2 px-1.5 py-0.5 bg-slate-100 text-slate-500 text-[8px] font-bold rounded-md">
                            SOON
                        </span>
                    @endif

                    <div class="w-12 h-12 rounded-2xl {{ $menu['bg'] }} flex items-center justify-center text-2xl mb-2.5 transition">
                        <i class="ph-duotone {{ $menu['icon'] }}"></i>
                    </div>
                    <h3 class="text-xs font-bold text-slate-800 leading-snug group-hover:text-topitup-red transition">
                        {{ $menu['title'] }}
                    </h3>
                    <span class="text-[10px] text-slate-400 mt-1 font-medium">{{ $menu['subtitle'] }}</span>
                </div>
            @endif
        @endforeach
    </div>

@endsection