@extends('emails.layout')

@section('title', 'Reservation Confirmation')
@section('header-subtitle', 'Your Table is Reserved!')

@section('content')
<h2>Reservation Confirmed</h2>

<p>Dear {{ $reservation->customer_name }},</p>

<p>Great news! Your reservation at <strong>{{ $restaurantName }}</strong> has been confirmed. We look forward to seeing you!</p>

<div class="alert-box alert-success">
    <strong>Reservation #{{ $reservation->id }}</strong> -
    <span class="status-badge status-confirmed">Confirmed</span>
</div>

<table class="info-table">
    <tr>
        <th>Guest Name</th>
        <td>{{ $reservation->customer_name }}</td>
    </tr>
    <tr>
        <th>Date</th>
        <td>{{ \Carbon\Carbon::parse($reservation->reservation_date)->format('l, F j, Y') }}</td>
    </tr>
    <tr>
        <th>Time</th>
        <td>{{ \Carbon\Carbon::parse($reservation->reservation_time)->format('g:i A') }}</td>
    </tr>
    <tr>
        <th>Party Size</th>
        <td>{{ $reservation->party_size }} {{ $reservation->party_size > 1 ? 'guests' : 'guest' }}</td>
    </tr>
    @if($reservation->table)
    <tr>
        <th>Table</th>
        <td>{{ $reservation->table->name ?? 'Table ' . $reservation->table->number }}</td>
    </tr>
    @endif
    @if($reservation->special_requests)
    <tr>
        <th>Special Requests</th>
        <td>{{ $reservation->special_requests }}</td>
    </tr>
    @endif
</table>

<div class="alert-box alert-info" style="margin-top: 20px;">
    <strong>Important:</strong>
    <ul style="margin: 10px 0; padding-left: 20px;">
        <li>Please arrive 10 minutes before your reservation time</li>
        <li>Your table will be held for 15 minutes after the reservation time</li>
        <li>If you need to cancel or modify, please contact us at least 2 hours in advance</li>
    </ul>
</div>

@if($restaurantAddress)
<h3 style="margin-top: 30px; color: #1f2937;">Restaurant Location</h3>
<p style="color: #4b5563;">
    {{ $restaurantAddress }}<br>
    @if($restaurantPhone)
    Phone: {{ $restaurantPhone }}
    @endif
</p>
@endif

<p style="margin-top: 30px; text-align: center;">
    We can't wait to serve you!
</p>
@endsection