@extends('layouts.app')

@section('title', 'Settings')
@section('heading', 'Settings')

@section('content')
    <div class="mb-6">
        <h2 class="text-2xl font-semibold text-slate-900">Settings</h2>
        <p class="mt-1 text-sm text-slate-500">Manage company setup and configuration.</p>
    </div>

    @if(empty($tiles))
        <x-card>
            <p class="text-sm text-slate-600">No settings are available for your account.</p>
        </x-card>
    @else
        <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
            @foreach($tiles as $tile)
                @php
                    $iconThemes = [
                        'bg-indigo-100 text-indigo-700',
                        'bg-fuchsia-100 text-fuchsia-700',
                        'bg-pink-100 text-pink-700',
                        'bg-red-100 text-red-700',
                        'bg-yellow-100 text-yellow-700',
                        'bg-green-100 text-green-700',
                        'bg-blue-100 text-blue-700',
                        'bg-teal-100 text-teal-700',
                        'bg-gray-100 text-gray-700',
                        'bg-neutral-100 text-neutral-700',
                        'bg-stone-100 text-stone-700',
                        'bg-zinc-100 text-zinc-700',
                        'bg-slate-100 text-slate-700',
                    ];
                    $themeClass = $iconThemes[$loop->index % count($iconThemes)];
                @endphp
                <a href="{{ route($tile['route'], array_merge($tile['params'] ?? [], ['from' => 'settings'])) }}" class="group rounded-2xl border border-slate-200 bg-white p-5 shadow-sm transition hover:-translate-y-0.5 hover:border-slate-300 hover:shadow-md">
                    <div class="flex items-start justify-between gap-3">
                        <div class="flex items-center gap-3">
                            <div class="inline-flex h-11 w-11 items-center justify-center rounded-xl {{ $themeClass }}">
                                <i class="bi {{ $tile['icon'] }} text-lg"></i>
                            </div>
                            <div>
                                <p class="text-sm font-semibold text-slate-900 group-hover:text-primary">{{ $tile['title'] }}</p>
                                <p class="mt-0.5 text-xs text-slate-500">{{ $tile['desc'] }}</p>
                            </div>
                        </div>
                        <svg class="mt-1 h-4 w-4 text-slate-300 transition group-hover:text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                        </svg>
                    </div>
                </a>
            @endforeach
        </div>
    @endif
@endsection