@extends('layouts.website')

@section('title', 'Home')

@section('content')
@if(!$branchId)
<div class="page-card">
    <h1>Select Your Branch</h1>
    <p class="muted" style="margin-bottom:1.2rem;">Choose a location to view menu and place an order.</p>
    <div class="grid" style="grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));">
        @foreach($branches as $branch)
        <a href="{{ route('website.branch.select', $branch->id) }}" style="display:block;background:#fff;text-decoration:none;color:inherit;border:1px solid #e5e7eb;border-radius:12px;padding:1rem 1rem 1.1rem;transition:.2s;">
            <div style="font-weight:800;color:#ff753a;">{{ $branch->name }}</div>
            <div class="muted" style="font-size:.92rem;margin-top:.35rem;">{{ $branch->address ?: 'No address available' }}</div>
        </a>
        @endforeach
    </div>
</div>
@else
<div class="page-card" style="margin-bottom:1rem;">
    <h1 style="margin-bottom:0.4rem;">Welcome to {{ $branch->name ?? config('app.name') }}</h1>
    <p class="muted" style="margin-bottom:1rem;">Freshly prepared meals. Place your order in seconds.</p>
    <a href="{{ route('website.menu') }}" class="btn">Browse Menu</a>
</div>

@if($sliders->isNotEmpty())
<div class="grid" style="grid-template-columns:repeat(auto-fill,minmax(220px,1fr));">
    @foreach($sliders as $s)
    <div style="background:#fff;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;box-shadow:0 10px 18px rgba(2,6,23,.05);">
        <img src="{{ asset('storage/' . $s->image) }}" alt="{{ $s->title }}" style="width:100%;height:150px;object-fit:cover;display:block;">
        @if($s->title)
        <div style="padding:0.65rem 0.8rem;font-weight:700;">{{ $s->title }}</div>
        @endif
    </div>
    @endforeach
</div>
@endif
@endif
@endsection