@extends('emails.layout')

@section('pre-header')
    New Appointment Request
@endsection

@section('header-title')
    📅 Appointment Request
@endsection

@section('header-subtitle')
    A client has requested an appointment with you
@endsection

@section('content')
    <h2>Hi {{ $officerName }},</h2>
    
    <p>You have a new appointment request. Please review the details below and confirm or decline from your dashboard.</p>

    <div class="info-card">
        <table class="details-table">
            <tr>
                <td class="label-cell"><strong>Client Name</strong></td>
                <td class="value-cell">{{ $clientName }}</td>
            </tr>
            <tr>
                <td class="label-cell"><strong>Client Email</strong></td>
                <td class="value-cell">{{ $clientEmail }}</td>
            </tr>
            <tr>
                <td class="label-cell"><strong>Requested Date</strong></td>
                <td class="value-cell"><span class="gold-text">{{ $appointmentDate }}</span></td>
            </tr>
            <tr>
                <td class="label-cell"><strong>Time</strong></td>
                <td class="value-cell"><span class="gold-text">{{ $appointmentTime }}</span></td>
            </tr>
        </table>
    </div>

    @if($userNotes)
    <div class="warning-box">
        <p><strong>Client Note:</strong> {{ $userNotes }}</p>
    </div>
    @endif

    <p>Please log in to your dashboard to confirm the appointment. A Google Meet link will be automatically generated for the session.</p>

    <div class="button-container">
        <a href="{{ config('app.immigopro_url', config('app.url')) }}/marketing-officer/appointments" class="button button-secondary">
            View in Dashboard
        </a>
    </div>
@endsection

@section('footer-greeting')
    Thank you for using ImmigoPro
@endsection