@extends('admin.layout')
@section('content')

{{-- ── Greeting Banner ── --}}
<div style="background: linear-gradient(135deg,#0170B9 0%,#0d47a1 100%); border-radius:14px; padding:30px 35px; margin-bottom:30px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:15px;">
    <div>
        <h2 style="margin:0 0 6px; color:#fff; font-size:24px; font-weight:700;">Welcome back, {{ Auth::user()->name ?? 'Admin' }}! 👋</h2>
        <p style="margin:0; color:rgba(255,255,255,0.85); font-size:14px;">{{ now()->format('l, d F Y') }} — Manage your website from here.</p>
    </div>
    <a href="{{ url('/') }}" target="_blank" style="background:rgba(255,255,255,0.15); color:#fff; padding:10px 20px; border-radius:8px; text-decoration:none; font-weight:600; font-size:14px; backdrop-filter:blur(4px);">
        <i class="fas fa-external-link-alt"></i> View Website
    </a>
</div>

{{-- ── Stats Cards ── --}}
<div style="display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:30px;" class="dash-stats">
    @php
        $cards = [
            ['icon'=>'fa-box',       'color'=>'#0170B9', 'light'=>'#e8f4fd', 'value'=>$stats['products'],        'label'=>'Total Products',      'link'=>route('admin.products.index')],
            ['icon'=>'fa-users',     'color'=>'#2e7d32', 'light'=>'#e8f5e9', 'value'=>$stats['team'],             'label'=>'Team Members',         'link'=>route('admin.team.index')],
            ['icon'=>'fa-images',    'color'=>'#e65100', 'light'=>'#fff3e0', 'value'=>$stats['photos'],           'label'=>'Photo Gallery',        'link'=>route('admin.photo-gallery.index')],
            ['icon'=>'fa-film',      'color'=>'#c62828', 'light'=>'#ffebee', 'value'=>$stats['videos'],           'label'=>'Video Gallery',        'link'=>route('admin.video-gallery.index')],
            ['icon'=>'fa-images',    'color'=>'#6a1b9a', 'light'=>'#f3e5f5', 'value'=>$stats['sliders'],          'label'=>'Sliders',              'link'=>route('admin.sliders.index')],
            ['icon'=>'fa-building',  'color'=>'#00695c', 'light'=>'#e0f2f1', 'value'=>$stats['sister_concerns'],  'label'=>'Sister Concerns',      'link'=>route('admin.sister-concerns.index')],
        ];
    @endphp

    @foreach($cards as $card)
    <a href="{{ $card['link'] }}" style="text-decoration:none;">
        <div style="background:#fff; border-radius:12px; padding:20px 24px; box-shadow:0 4px 15px rgba(0,0,0,0.05); display:flex; align-items:center; gap:18px; border-left:4px solid {{ $card['color'] }}; transition:transform .3s,box-shadow .3s;" onmouseover="this.style.transform='translateY(-4px)';this.style.boxShadow='0 10px 25px rgba(0,0,0,0.1)'" onmouseout="this.style.transform='';this.style.boxShadow='0 4px 15px rgba(0,0,0,0.05)'">
            <div style="width:54px; height:54px; background:{{ $card['light'] }}; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0;">
                <i class="fas {{ $card['icon'] }}" style="font-size:22px; color:{{ $card['color'] }};"></i>
            </div>
            <div>
                <h3 style="margin:0; font-size:28px; font-weight:800; color:#222; line-height:1;">{{ $card['value'] }}</h3>
                <p style="margin:4px 0 0; font-size:13px; color:#666; font-weight:500;">{{ $card['label'] }}</p>
            </div>
        </div>
    </a>
    @endforeach
</div>

{{-- ── Two Column Section ── --}}
<div style="display:grid; grid-template-columns:1fr 1fr; gap:25px;" class="dash-bottom">

    {{-- Recent Products --}}
    <div class="content-card" style="margin:0;">
        <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:20px;">
            <h3 style="margin:0; border:none; padding:0; font-size:17px;">Recent Products</h3>
            <a href="{{ route('admin.products.index') }}" style="font-size:13px; color:#0170B9; font-weight:600; text-decoration:none;">View All →</a>
        </div>
        @forelse($recentProducts as $p)
        <div style="display:flex; align-items:center; gap:14px; padding:12px 0; border-bottom:1px solid #f0f0f0;">
            @if($p->photo)
                <img src="{{ asset('storage/'.$p->photo) }}" style="width:48px; height:48px; border-radius:8px; object-fit:cover; flex-shrink:0;">
            @else
                <div style="width:48px; height:48px; background:#eee; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0;"><i class="far fa-image" style="color:#bbb;"></i></div>
            @endif
            <div style="flex:1; min-width:0;">
                <p style="margin:0; font-weight:600; font-size:14px; color:#222; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">{{ $p->name }}</p>
                <p style="margin:2px 0 0; font-size:12px; color:#888;">{{ $p->created_at->diffForHumans() }}</p>
            </div>
        </div>
        @empty
        <p style="color:#888; text-align:center; padding:20px 0;">No products yet.</p>
        @endforelse
    </div>

    {{-- Quick Actions --}}
    <div class="content-card" style="margin:0;">
        <h3 style="margin:0 0 20px; border:none; padding:0; font-size:17px;">Quick Actions</h3>
        @php
            $actions = [
                ['href'=>route('admin.products.create'),         'icon'=>'fa-plus-circle',   'color'=>'#0170B9', 'label'=>'Add New Product'],
                ['href'=>route('admin.sliders.create'),          'icon'=>'fa-image',          'color'=>'#6a1b9a', 'label'=>'Add New Slider'],
                ['href'=>route('admin.photo-gallery.create'),    'icon'=>'fa-camera',         'color'=>'#e65100', 'label'=>'Upload Photo'],
                ['href'=>route('admin.video-gallery.create'),    'icon'=>'fa-video',          'color'=>'#c62828', 'label'=>'Add Video'],
                ['href'=>route('admin.sister-concerns.create'),  'icon'=>'fa-building',       'color'=>'#00695c', 'label'=>'Add Sister Concern'],
                ['href'=>route('admin.settings.edit'),           'icon'=>'fa-gear',           'color'=>'#555',    'label'=>'Site Settings'],
            ];
        @endphp
        <div style="display:grid; grid-template-columns:1fr 1fr; gap:12px;">
            @foreach($actions as $a)
            <a href="{{ $a['href'] }}" style="display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:10px; background:#f8f9fa; text-decoration:none; border:1px solid #eee; transition:background .2s;" onmouseover="this.style.background='#e8f4fd'" onmouseout="this.style.background='#f8f9fa'">
                <i class="fas {{ $a['icon'] }}" style="font-size:18px; color:{{ $a['color'] }}; width:22px; text-align:center;"></i>
                <span style="font-size:13px; font-weight:600; color:#333;">{{ $a['label'] }}</span>
            </a>
            @endforeach
        </div>
    </div>
</div>

<style>
    @media(max-width:991px) {
        .dash-stats { grid-template-columns: repeat(2,1fr) !important; }
        .dash-bottom { grid-template-columns: 1fr !important; }
    }
    @media(max-width:576px) {
        .dash-stats { grid-template-columns: 1fr 1fr !important; }
    }
</style>

@endsection