@extends('backend.layouts.app')

@section('title', 'Dashboard')

@push('styles')
    <style>
        .dashboard-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1.25rem;
        }
        .dashboard-grid > .widget-card { grid-column: span 1; }
        .dashboard-grid > .widget-card.col-span-2 { grid-column: span 2; }
        .dashboard-grid > .widget-card.col-span-3 { grid-column: span 3; }
        .dashboard-grid > .widget-card.col-span-4 { grid-column: span 4; }

        @media (max-width: 1024px) {
            .dashboard-grid { grid-template-columns: repeat(2, 1fr); }
            .dashboard-grid > .widget-card.col-span-3,
            .dashboard-grid > .widget-card.col-span-4 { grid-column: span 2; }
        }
        .widget-card { overflow-x: auto; }
        @media (max-width: 768px) {
            .dashboard-grid { grid-template-columns: 1fr; }
            .dashboard-grid > .widget-card { grid-column: span 1 !important; }
        }
    </style>
@endpush

@section('content')
    <div class="col-span-12">

        @if ($dashboardItems->isNotEmpty())
            <div class="dashboard-grid mt-6">
                @foreach ($dashboardItems as $item)
                    <div class="widget-card col-span-{{ $item->col_span ?? 1 }} rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03]">
                        <!-- @if ($item->title)
                            <h3 class="mb-4 text-lg font-semibold text-gray-800 dark:text-white/90">{{ $item->title }}</h3>
                        @endif -->
                        <div class="dashboard-content">
                            {!! \App\Helpers\DashboardHelper::render($item->content) !!}
                        </div>
                    </div>
                @endforeach
            </div>
        @else
            <!-- <div class="mt-6 rounded-2xl border border-gray-200 bg-white p-12 text-center dark:border-gray-800 dark:bg-white/[0.03]">
                <h4 class="text-base font-medium text-gray-700 dark:text-gray-300">No dashboard widgets yet</h4>
                <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                    <a href="{{ route('data-dashboard.create') }}" class="text-brand-500 hover:underline">Create your first widget</a>
                </p>
            </div> -->
        @endif
    </div>
@endsection