@extends('layouts.app')
@section('content')
<div class="pt-24">
<div class="relative py-20 px-4 bg-gradient-to-br from-dark-brown to-deep-green bengali-pattern text-center">
    <h1 class="font-playfair text-5xl text-cream font-bold mb-3" data-aos="fade-up">Our Branches</h1>
    <div class="section-divider mt-4"></div>
</div>
<div class="max-w-7xl mx-auto px-4 py-16">
    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
        @forelse($branches as $branch)
        <div class="glass-card overflow-hidden group hover:-translate-y-2 transition-all duration-300" data-aos="fade-up" data-aos-delay="{{ $loop->index*120 }}">
            <div class="h-52 overflow-hidden bg-gradient-to-br from-deep-green to-dark-brown relative">
                @if($branch->image)
                <img src="{{ $branch->image_url }}" alt="{{ $branch->name }}" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                @else
                <div class="flex items-center justify-center h-full"><i class="fas fa-store text-gold/20 text-6xl"></i></div>
                @endif
                @if($branch->is_main)
                <span class="absolute top-3 right-3 bg-gold text-dark-brown text-xs font-bold px-3 py-1 rounded-full">Main Branch</span>
                @endif
                <div class="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-dark-brown to-transparent"></div>
            </div>
            <div class="p-6">
                <div class="flex items-center justify-between mb-3">
                    <h3 class="font-playfair text-cream text-xl font-bold">{{ $branch->name }}</h3>
                    <span class="text-xs px-2 py-1 rounded-full {{ $branch->isOpenNow() ? 'bg-green-500/20 text-green-400' : 'bg-red-500/20 text-red-400' }}">
                        <i class="fas fa-circle text-xs mr-1"></i>{{ $branch->isOpenNow() ? 'Open' : 'Closed' }}
                    </span>
                </div>
                <div class="space-y-2 text-sm text-cream/60 mb-5">
                    <p><i class="fas fa-map-marker-alt text-gold/50 mr-2 w-4"></i>{{ $branch->address }}, {{ $branch->city }}</p>
                    <p><i class="fas fa-phone text-gold/50 mr-2 w-4"></i>{{ $branch->phone }}</p>
                    @if($branch->email)<p><i class="fas fa-envelope text-gold/50 mr-2 w-4"></i>{{ $branch->email }}</p>@endif
                    <p><i class="fas fa-clock text-gold/50 mr-2 w-4"></i>{{ $branch->opening_time }} – {{ $branch->closing_time }}</p>
                    <p><i class="fas fa-users text-gold/50 mr-2 w-4"></i>Capacity: {{ $branch->seating_capacity }} seats</p>
                </div>
                <div class="flex gap-3">
                    <a href="{{ route('reservation.index') }}?branch_id={{ $branch->id }}" class="btn-gold flex-1 text-center text-sm py-3">
                        <i class="fas fa-calendar-alt mr-1"></i>Book Table
                    </a>
                    @if($branch->google_map_url)
                    <a href="{{ $branch->google_map_url }}" target="_blank" class="btn-outline-gold text-sm px-4 py-3">
                        <i class="fas fa-map"></i>
                    </a>
                    @endif
                </div>
            </div>
        </div>
        @empty
        <div class="col-span-3 text-center py-20">
            <p class="text-cream/50">No branches found.</p>
        </div>
        @endforelse
    </div>
</div>
</div>
@endsection