<div class="tab-pane fade" id="notifications" role="tabpanel">
    <div class="card">
        <div class="card-header">
            <h5 class="card-title mb-0">Notification Templates</h5>
        </div>
        <div class="card-body">
            <p class="text-muted mb-4">
                Configure email and SMS (WhatsApp API) templates for major events. Turn each channel off to stop sending for that event.
                SMS uses the WhatsApp API configured under the WhatsApp tab.
            </p>

            <div class="accordion" id="notification-events">
                @foreach ($notificationEvents as $eventKey => $eventConfig)
                    @php
                        $values = $notificationSettings[$eventKey] ?? [];
                    @endphp
                    <div class="accordion-item">
                        <h2 class="accordion-header" id="heading-{{ $eventKey }}">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#collapse-{{ $eventKey }}" aria-expanded="false"
                                    aria-controls="collapse-{{ $eventKey }}">
                                {{ $eventConfig['label'] ?? $eventKey }}
                            </button>
                        </h2>
                        <div id="collapse-{{ $eventKey }}" class="accordion-collapse collapse"
                             aria-labelledby="heading-{{ $eventKey }}" data-bs-parent="#notification-events">
                            <div class="accordion-body">
                                @if (! empty($eventConfig['description']))
                                    <p class="text-muted small">{{ $eventConfig['description'] }}</p>
                                @endif

                                @if (! empty($eventConfig['placeholders']))
                                    <p class="small mb-3">
                                        <strong>Placeholders:</strong>
                                        @foreach ($eventConfig['placeholders'] as $placeholder)
                                            <code class="me-1">{{ $placeholder }}</code>
                                        @endforeach
                                    </p>
                                @endif

                                <div class="row g-3">
                                    <div class="col-12">
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox"
                                                   name="notifications[{{ $eventKey }}][email_enabled]" value="1"
                                                   id="notifications_{{ $eventKey }}_email_enabled"
                                                   @checked(old("notifications.{$eventKey}.email_enabled", $values['email_enabled'] ?? false))>
                                            <label class="form-check-label" for="notifications_{{ $eventKey }}_email_enabled">
                                                Send email for this event
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <label class="form-label" for="notifications_{{ $eventKey }}_email_subject">Email subject</label>
                                        <input type="text" class="form-control"
                                               name="notifications[{{ $eventKey }}][email_subject]"
                                               id="notifications_{{ $eventKey }}_email_subject"
                                               value="{{ old("notifications.{$eventKey}.email_subject", $values['email_subject'] ?? '') }}">
                                    </div>
                                    <div class="col-12">
                                        <label class="form-label" for="notifications_{{ $eventKey }}_email_body">Email body</label>
                                        <textarea class="form-control" rows="5"
                                                  name="notifications[{{ $eventKey }}][email_body]"
                                                  id="notifications_{{ $eventKey }}_email_body">{{ old("notifications.{$eventKey}.email_body", $values['email_body'] ?? '') }}</textarea>
                                    </div>

                                    <div class="col-12"><hr class="my-1"></div>

                                    <div class="col-12">
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox"
                                                   name="notifications[{{ $eventKey }}][sms_enabled]" value="1"
                                                   id="notifications_{{ $eventKey }}_sms_enabled"
                                                   @checked(old("notifications.{$eventKey}.sms_enabled", $values['sms_enabled'] ?? false))>
                                            <label class="form-check-label" for="notifications_{{ $eventKey }}_sms_enabled">
                                                Send SMS for this event
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <label class="form-label" for="notifications_{{ $eventKey }}_sms_body">SMS message</label>
                                        <textarea class="form-control" rows="3"
                                                  name="notifications[{{ $eventKey }}][sms_body]"
                                                  id="notifications_{{ $eventKey }}_sms_body">{{ old("notifications.{$eventKey}.sms_body", $values['sms_body'] ?? '') }}</textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</div>
