@extends('crm.master')

@section('title', 'Manage Email Notifications')

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
  <!-- Page Title -->
  <div class="row mb-4">
    <div class="col-12">
      <h4 class="fw-bold d-flex align-items-center gap-2">
        <i class="ti tabler-mail"></i>
        Email Notifications
      </h4>
      <p class="text-muted small">Manage and create email notifications for booking and inventory events</p>
    </div>
  </div>

  <div class="row">
    <div class="col-12">
      <div class="card crm-grid-card">
        <div class="card-header d-flex justify-content-between align-items-center">
          <h5 class="mb-0">Email Notifications</h5>
          <a href="{{ route('crm.notifications.create') }}" class="btn btn-primary btn-sm">
            <i class="ti tabler-plus"></i> New Notification
          </a>
        </div>
        <div class="card-body">
          @if (session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
              {{ session('success') }}
              <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
          @endif

          @if ($notifications->isEmpty())
            <div class="alert alert-info">
              <i class="ti tabler-info-circle"></i> No notifications found. 
              <a href="{{ route('crm.notifications.create') }}">Create one now</a>
            </div>
          @else
            <div class="table-responsive crm-grid-wrap">
              <table class="table table-hover crm-grid-table">
                <thead class="table-light">
                  <tr>
                    <th style="width: 5%">#</th>
                    <th style="width: 25%">Name</th>
                    <th style="width: 30%">Subject</th>
                    <th>Type</th>
                    <th>Event</th>
                    <th>Recipients</th>
                    <th>Status</th>
                    <th>Actions</th>
                  </tr>
                </thead>
                <tbody>
                  @foreach ($notifications as $notification)
                    <tr>
                      <td>
                        <strong>{{ $loop->iteration }}</strong>
                      </td>
                      <td>
                        <strong>{{ $notification->name }}</strong>
                      </td>
                      <td>
                        <small class="text-muted">{{ Str::limit($notification->subject, 80) }}</small>
                      </td>
                      <td>
                        <span class="badge bg-info">{{ ucfirst($notification->notification_type) }}</span>
                      </td>
                      <td>
                        @if ($notification->event)
                          <div class="d-flex align-items-center">
                            <span class="badge" style="background-color: #f0f0f0; color: #333;">
                              {{ $notification->getEventLabel() }}
                            </span>
                          </div>
                        @else
                          <span class="text-muted">-</span>
                        @endif
                      </td>
                      <td>
                        <small>{{ $notification->getRecipientsLabel() }}</small>
                      </td>
                      <td>
                        @if ($notification->enabled)
                          <span class="badge bg-success">
                            <i class="ti tabler-check"></i> Enabled
                          </span>
                        @else
                          <span class="badge bg-danger">
                            <i class="ti tabler-x"></i> Disabled
                          </span>
                        @endif
                      </td>
                      <td>
                        <div class="btn-group btn-group-sm" role="group">
                          <a href="{{ route('crm.notifications.edit', $notification->hash_id) }}" 
                             class="btn btn-outline-primary" title="Edit">
                            <i class="ti tabler-edit"></i>
                          </a>
                        </div>
                      </td>
                    </tr>
                  @endforeach
                </tbody>
              </table>
            </div>
          @endif
        </div>
      </div>
    </div>
  </div>
</div>
@endsection