@extends('layouts.app')

@section('title', 'Send Notification')
@section('page', 'marketing')

@section('content')
  @if (session('success'))
    <x-alert class="mb-3" variant="success" icon="bi-check-circle">{{ session('success') }}</x-alert>
  @endif

  @if ($errors->any())
    <x-alert class="mb-3" variant="danger" icon="bi-exclamation-triangle">{{ $errors->first() }}</x-alert>
  @endif

  @if (($canManage ?? false) && ! ($pushReady ?? false))
    <x-alert class="mb-3" variant="warning" icon="bi-exclamation-triangle">
      Web Push is not configured yet. Notifications cannot be sent until VAPID keys are available.
    </x-alert>
  @endif

  <x-data-table
    id="push-blasts-table"
    class="catalog-table"
    title="Send Notification"
    subtitle="Push messages to the customer app. Audience options match SMS campaigns."
    search-placeholder="Search notifications..."
    :selectable="false"
    :page-size="10"
  >
    <x-slot:toolbarActions>
      @if ($canManage ?? false)
        <button
          type="button"
          class="btn btn-primary"
          data-bs-toggle="modal"
          data-bs-target="#pushNotifyModal"
          @disabled(! ($pushReady ?? false))
        >
          <i class="bi bi-bell" aria-hidden="true"></i> Send Notification
        </button>
      @endif
    </x-slot:toolbarActions>
    <x-slot:filters>
      <select class="form-select form-select-sm" data-edt-col-filter="status" aria-label="Status">
        <option value="">All Statuses</option>
        <option>Sent</option>
      </select>
      <select class="form-select form-select-sm" data-edt-col-filter="audience" aria-label="Audience">
        <option value="">All Audiences</option>
        <option>All customers</option>
        <option>Active customers</option>
        @foreach ($customerGroups as $group)
          <option>Group: {{ $group->name }}</option>
        @endforeach
      </select>
    </x-slot:filters>
    <x-slot:head>
      <x-data-table-th label="Title" col="title" />
      <x-data-table-th label="Message" col="body" />
      <x-data-table-th label="Audience" col="audience" />
      <x-data-table-th label="Targets" col="recipients" sort-type="number" />
      <x-data-table-th label="Delivered" col="sent" sort-type="number" />
      <x-data-table-th label="Status" col="status" />
      <x-data-table-th label="Sent at" col="sent_at" />
    </x-slot:head>
    <x-slot:body>
      @forelse ($blasts as $row)
        <tr data-id="{{ $row->id }}">
          <td data-col="title" class="cell-primary">{{ $row->title }}</td>
          <td data-col="body">{{ \Illuminate\Support\Str::limit($row->body, 60) }}</td>
          <td data-col="audience">{{ $row->audienceLabel() }}</td>
          <td data-col="recipients">{{ $row->recipients_count }}</td>
          <td data-col="sent">{{ $row->sent_count }}</td>
          <td data-col="status"><x-badge variant="success">{{ $row->status }}</x-badge></td>
          <td data-col="sent_at">{{ $row->sent_at?->format('Y-m-d H:i') ?? '—' }}</td>
          <td data-edt-actions>
            <div class="edt-row-actions product-actions">
              <a
                href="{{ route('marketing.push-notifications.show', $row) }}"
                class="btn btn-sm btn-icon product-action product-action--transfer"
                title="Performance"
                aria-label="Notification performance"
              >
                <i class="bi bi-bar-chart" aria-hidden="true"></i>
              </a>
              @if ($canManage ?? false)
              <button
                type="button"
                class="btn btn-sm btn-icon product-action product-action--delete"
                title="Delete"
                aria-label="Delete"
                data-delete-open
                data-delete-type="notification"
                data-delete-label="{{ $row->title }}"
                data-delete-url="{{ route('marketing.push-notifications.destroy', $row) }}"
              >
                <i class="bi bi-trash" aria-hidden="true"></i>
              </button>
              @endif
            </div>
          </td>
        </tr>
      @empty
        <tr data-edt-empty-row>
          <td colspan="9" class="text-center text-muted py-4">
            No notifications sent yet.
            @if ($canManage ?? false)
              Use <strong>Send Notification</strong> to push your first message.
            @endif
          </td>
        </tr>
      @endforelse
    </x-slot:body>
  </x-data-table>

  @if ($canManage ?? false)
  <div class="modal fade" id="pushNotifyModal" tabindex="-1" aria-labelledby="pushNotifyModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
      <div class="modal-content edt-modal">
        <form id="push-notify-form" method="post" action="{{ route('marketing.push-notifications.store') }}">
          @csrf
          <div class="modal-header">
            <h2 class="modal-title fs-5" id="pushNotifyModalLabel">Send Notification</h2>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <div class="push-notify-modal">
              <div class="push-notify-modal__fields">
                <div class="mb-3">
                  <label class="form-label" for="push_title">Title</label>
                  <input
                    type="text"
                    class="form-control"
                    id="push_title"
                    name="title"
                    maxlength="120"
                    required
                    value="{{ old('title') }}"
                    placeholder="e.g. Weekend special"
                    @disabled(! ($pushReady ?? false))
                  >
                </div>
                <div class="mb-3">
                  <label class="form-label" for="push_body">Message</label>
                  <textarea
                    class="form-control"
                    id="push_body"
                    name="body"
                    rows="4"
                    maxlength="500"
                    required
                    placeholder="Write the notification body customers will see…"
                    @disabled(! ($pushReady ?? false))
                  >{{ old('body') }}</textarea>
                  <div class="form-text"><span id="push_body_count">0</span>/500 · {{ number_format($subscriberCount ?? 0) }} app subscribers online</div>
                </div>
                <div class="mb-0">
                  <label class="form-label" for="push_audience">Audience</label>
                  <select class="form-select" id="push_audience" name="audience" required @disabled(! ($pushReady ?? false))>
                    <option value="all_customers" @selected(old('audience') === 'all_customers')>All customers</option>
                    <option value="active_customers" @selected(old('audience', 'active_customers') === 'active_customers')>Active customers</option>
                    @if ($customerGroups->isNotEmpty())
                      <optgroup label="Customer Groups">
                        @foreach ($customerGroups as $group)
                          <option value="group:{{ $group->id }}" @selected(old('audience') === 'group:'.$group->id)>
                            {{ $group->name }}
                          </option>
                        @endforeach
                      </optgroup>
                    @endif
                  </select>
                  <div class="form-text mb-0">Same targeting as SMS Campaign. Only subscribers in the audience receive the push.</div>
                </div>
              </div>
              <aside class="push-notify-preview" aria-label="Preview">
                <p class="push-notify-preview__label">Phone preview</p>
                <div class="push-notify-preview__phone">
                  <div class="push-notify-preview__toast">
                    <div class="push-notify-preview__app">
                      <span class="push-notify-preview__icon" aria-hidden="true"><i class="bi bi-bell-fill"></i></span>
                      <span>Food Hub</span>
                      <em>now</em>
                    </div>
                    <strong id="push_preview_title">Notification title</strong>
                    <p id="push_preview_body">Your message will appear here.</p>
                  </div>
                </div>
              </aside>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
            <button type="submit" class="btn btn-primary" @disabled(! ($pushReady ?? false))>
              <i class="bi bi-send" aria-hidden="true"></i> Send now
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
  @endif
@endsection

@push('styles')
  <link href="{{ asset('assets/css/pages/products.css') }}" rel="stylesheet">
  <link rel="stylesheet" href="{{ asset('assets/css/pages/push-notifications.css') }}?v=3">
@endpush

@push('scripts')
  <script src="{{ asset('assets/js/pages/push-notifications.js') }}?v=2"></script>
  @if ($errors->any() && old('title') !== null)
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const modal = document.getElementById('pushNotifyModal');
      if (modal && window.bootstrap?.Modal) {
        window.bootstrap.Modal.getOrCreateInstance(modal).show();
      }
    });
  </script>
  @endif
@endpush