@extends('merchant.layout.app', ['page' => 'notifications'])

@section('title', 'Push Notifications')

@section('content')
<div x-data="{ addModal: false }">

  {{-- ── Breadcrumb ─────────────────────────────────────────────────────── --}}
  <div class="mb-6 flex flex-wrap items-center justify-between gap-3">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-white/90">
      Push Notifications
    </h2>
    <nav>
      <ol class="flex items-center gap-1.5">
        <li>
          <a class="inline-flex items-center gap-1.5 text-sm text-gray-500 dark:text-gray-400"
             href="{{ route('merchant.dashboard') }}">
            Home
            <svg class="stroke-current" width="17" height="16" viewBox="0 0 17 16" fill="none">
              <path d="M6.0765 12.667L10.2432 8.50033L6.0765 4.33366"
                    stroke="" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </a>
        </li>
        <li class="text-sm text-gray-800 dark:text-white/90">Push Notifications</li>
      </ol>
    </nav>
  </div>

  {{-- ── Flash messages ──────────────────────────────────────────────────── --}}
  @if (session('success'))
    <div class="mb-6 rounded-xl border border-success-200 bg-success-50 px-4 py-3 text-sm text-success-700 dark:border-success-500/20 dark:bg-success-500/10 dark:text-success-400">
      {{ session('success') }}
    </div>
  @endif

  @if (session('error'))
    <div class="mb-6 rounded-xl border border-error-200 bg-error-50 px-4 py-3 text-sm text-error-700 dark:border-error-500/20 dark:bg-error-500/10 dark:text-error-400">
      {{ session('error') }}
    </div>
  @endif

  {{-- ── Table card ───────────────────────────────────────────────────────── --}}
  <div class="space-y-5 sm:space-y-6">
    <div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">

      {{-- Card header --}}
      <div class="flex items-center justify-between px-5 py-4 sm:px-6 sm:py-5">
        <h3 class="text-base font-medium text-gray-800 dark:text-white/90">
          All Notifications
          <span class="ml-2 rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-600 dark:bg-gray-800 dark:text-gray-400">
            {{ $notifications->count() }}
          </span>
        </h3>

        <button
          @click="addModal = true"
          class="inline-flex items-center gap-2 rounded-lg bg-brand-500 px-4 py-2.5 text-sm font-medium text-white hover:bg-brand-600"
        >
          <svg class="fill-current" width="16" height="16" viewBox="0 0 16 16" fill="none">
            <path fill-rule="evenodd" clip-rule="evenodd"
              d="M8 1.5C8.41421 1.5 8.75 1.83579 8.75 2.25V7.25H13.75C14.1642 7.25 14.5 7.58579 14.5 8C14.5 8.41421 14.1642 8.75 13.75 8.75H8.75V13.75C8.75 14.1642 8.41421 14.5 8 14.5C7.58579 14.5 7.25 14.1642 7.25 13.75V8.75H2.25C1.83579 8.75 1.5 8.41421 1.5 8C1.5 7.58579 1.83579 7.25 2.25 7.25H7.25V2.25C7.25 1.83579 7.58579 1.5 8 1.5Z"
              fill=""/>
          </svg>
          Send Notification
        </button>
      </div>

      {{-- Table --}}
      <div class="border-t border-gray-100 p-5 dark:border-gray-800 sm:p-6">
        <div class="overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
          <div class="max-w-full overflow-x-auto">
            <table class="min-w-full">
              <thead>
                <tr class="border-b border-gray-100 dark:border-gray-800">
                  <th class="px-5 py-3 sm:px-6">
                    <p class="text-left font-medium text-gray-500 text-theme-xs dark:text-gray-400">Title</p>
                  </th>
                  <th class="px-5 py-3 sm:px-6">
                    <p class="text-left font-medium text-gray-500 text-theme-xs dark:text-gray-400">Description</p>
                  </th>
                  <th class="px-5 py-3 sm:px-6">
                    <p class="text-left font-medium text-gray-500 text-theme-xs dark:text-gray-400">Image</p>
                  </th>
                  <th class="px-5 py-3 sm:px-6">
                    <p class="text-left font-medium text-gray-500 text-theme-xs dark:text-gray-400">Status</p>
                  </th>
                  <th class="px-5 py-3 sm:px-6">
                    <p class="text-left font-medium text-gray-500 text-theme-xs dark:text-gray-400">Sent At</p>
                  </th>
                  <th class="px-5 py-3 sm:px-6">
                    <p class="text-left font-medium text-gray-500 text-theme-xs dark:text-gray-400">Action</p>
                  </th>
                </tr>
              </thead>
              <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
                @forelse ($notifications as $notification)
                  <tr>
                    {{-- Title + notes --}}
                    <td class="px-5 py-4 sm:px-6">
                      <div>
                        <span class="block font-medium text-gray-800 text-theme-sm dark:text-white/90">
                          {{ $notification->title }}
                        </span>
                        @if ($notification->notes)
                          <span class="block text-gray-500 text-theme-xs dark:text-gray-400">
                            {{ Str::limit($notification->notes, 40) }}
                          </span>
                        @endif
                      </div>
                    </td>

                    {{-- Description --}}
                    <td class="px-5 py-4 sm:px-6">
                      <p class="max-w-xs text-gray-500 text-theme-sm dark:text-gray-400">
                        {{ $notification->description ? Str::limit($notification->description, 80) : '—' }}
                      </p>
                    </td>

                    {{-- Image --}}
                    <td class="px-5 py-4 sm:px-6">
                      @if ($notification->image)
                        <div class="h-10 w-10 overflow-hidden rounded-lg border border-gray-100 dark:border-gray-800">
                          <img
                            src="{{ $notification_image_url . $notification->image }}"
                            alt="Notification image"
                            class="h-full w-full object-cover"
                          />
                        </div>
                      @else
                        <span class="text-gray-400 text-theme-xs dark:text-gray-600">No image</span>
                      @endif
                    </td>

                    {{-- Status --}}
                    <td class="px-5 py-4 sm:px-6">
                      @if ($notification->status === 'active')
                        <span class="rounded-full bg-success-50 px-2 py-0.5 text-theme-xs font-medium text-success-700 dark:bg-success-500/15 dark:text-success-500">
                          Active
                        </span>
                      @else
                        <span class="rounded-full bg-gray-100 px-2 py-0.5 text-theme-xs font-medium text-gray-600 dark:bg-gray-800 dark:text-gray-400">
                          {{ ucfirst($notification->status) }}
                        </span>
                      @endif
                    </td>

                    {{-- Sent at --}}
                    <td class="px-5 py-4 sm:px-6">
                      <p class="text-gray-500 text-theme-sm dark:text-gray-400">
                        {{ $notification->created_at->format('M d, Y') }}
                      </p>
                      <p class="text-gray-400 text-theme-xs dark:text-gray-600">
                        {{ $notification->created_at->format('h:i A') }}
                      </p>
                    </td>

                    {{-- Delete --}}
                    <td class="px-5 py-4 sm:px-6">
                      <div
                        x-data="{ confirmDelete: false }"
                        class="flex items-center gap-2"
                      >
                        {{-- Delete button --}}
                        <button
                          @click="confirmDelete = true"
                          class="inline-flex items-center gap-1.5 rounded-lg border border-error-200 bg-error-50 px-3 py-1.5 text-theme-xs font-medium text-error-600 hover:bg-error-100 dark:border-error-500/20 dark:bg-error-500/10 dark:text-error-400 dark:hover:bg-error-500/20"
                        >
                          <svg class="fill-current" width="14" height="14" viewBox="0 0 14 14" fill="none">
                            <path fill-rule="evenodd" clip-rule="evenodd"
                              d="M5.25 1.75C5.25 1.33579 5.58579 1 6 1H8C8.41421 1 8.75 1.33579 8.75 1.75V2.5H11.25C11.6642 2.5 12 2.83579 12 3.25C12 3.66421 11.6642 4 11.25 4H2.75C2.33579 4 2 3.66421 2 3.25C2 2.83579 2.33579 2.5 2.75 2.5H5.25V1.75ZM3.5 5C3.5 4.58579 3.83579 4.25 4.25 4.25H9.75C10.1642 4.25 10.5 4.58579 10.5 5V11.25C10.5 11.9404 9.94036 12.5 9.25 12.5H4.75C4.05964 12.5 3.5 11.9404 3.5 11.25V5ZM5.75 6.5C5.75 6.08579 5.41421 5.75 5 5.75C4.58579 5.75 4.25 6.08579 4.25 6.5V10C4.25 10.4142 4.58579 10.75 5 10.75C5.41421 10.75 5.75 10.4142 5.75 10V6.5ZM9 5.75C8.58579 5.75 8.25 6.08579 8.25 6.5V10C8.25 10.4142 8.58579 10.75 9 10.75C9.41421 10.75 9.75 10.4142 9.75 10V6.5C9.75 6.08579 9.41421 5.75 9 5.75Z"
                              fill=""/>
                          </svg>
                          Delete
                        </button>

                        {{-- Inline confirm --}}
                        <div
                          x-show="confirmDelete"
                          x-cloak
                          class="flex items-center gap-2"
                        >
                          <span class="text-theme-xs text-gray-500 dark:text-gray-400">Sure?</span>
                          <form
                            action="{{ route('merchant.notifications.delete', $notification->id) }}"
                            method="POST"
                          >
                            @csrf
                            @method('DELETE')
                            <button
                              type="submit"
                              class="rounded-lg bg-error-500 px-2.5 py-1.5 text-theme-xs font-medium text-white hover:bg-error-600"
                            >
                              Yes, delete
                            </button>
                          </form>
                          <button
                            @click="confirmDelete = false"
                            class="rounded-lg border border-gray-200 bg-white px-2.5 py-1.5 text-theme-xs font-medium text-gray-600 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400"
                          >
                            Cancel
                          </button>
                        </div>
                      </div>
                    </td>
                  </tr>
                @empty
                  <tr>
                    <td colspan="6" class="px-5 py-10 text-center text-sm text-gray-400 dark:text-gray-600">
                      No push notifications sent yet.
                      <button @click="addModal = true" class="ml-1 text-brand-500 hover:underline">
                        Send your first one.
                      </button>
                    </td>
                  </tr>
                @endforelse
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>

  {{-- ── Add Notification Modal ───────────────────────────────────────────── --}}
  <div
    x-show="addModal"
    x-cloak
    class="fixed inset-0 z-99999 flex items-center justify-center p-5 overflow-y-auto"
  >
    {{-- backdrop --}}
    <div class="fixed inset-0 h-full w-full bg-gray-400/50 backdrop-blur-[32px]"></div>

    <div
      @click.outside="addModal = false"
      class="no-scrollbar relative w-full max-w-[600px] overflow-y-auto rounded-3xl bg-white p-6 dark:bg-gray-900 lg:p-10"
    >
      {{-- Close --}}
      <button
        @click="addModal = false"
        class="absolute right-5 top-5 flex h-11 w-11 items-center justify-center rounded-full bg-gray-100 text-gray-400 hover:bg-gray-200 hover:text-gray-600 dark:bg-white/[0.05] dark:text-gray-400 dark:hover:bg-white/[0.07] dark:hover:text-gray-300"
      >
        <svg class="fill-current" width="24" height="24" viewBox="0 0 24 24" fill="none">
          <path fill-rule="evenodd" clip-rule="evenodd"
            d="M6.04289 16.5418C5.65237 16.9323 5.65237 17.5655 6.04289 17.956C6.43342 18.3465 7.06658 18.3465 7.45711 17.956L11.9987 13.4144L16.5408 17.9565C16.9313 18.347 17.5645 18.347 17.955 17.9565C18.3455 17.566 18.3455 16.9328 17.955 16.5423L13.4129 12.0002L17.955 7.45808C18.3455 7.06756 18.3455 6.43439 17.955 6.04387C17.5645 5.65335 16.9313 5.65335 16.5408 6.04387L11.9987 10.586L7.45711 6.04439C7.06658 5.65386 6.43342 5.65386 6.04289 6.04439C5.65237 6.43491 5.65237 7.06808 6.04289 7.4586L10.5845 12.0002L6.04289 16.5418Z"
            fill=""/>
        </svg>
      </button>

      <div class="pr-10 mb-6">
        <h4 class="mb-1 text-2xl font-semibold text-gray-800 dark:text-white/90">
          Send Push Notification
        </h4>
        <p class="text-sm text-gray-500 dark:text-gray-400">
          This will be sent to all customers within 1000 km of your shop.
        </p>
      </div>

      <form
        action="{{ route('merchant.notifications.store') }}"
        method="POST"
        enctype="multipart/form-data"
        class="flex flex-col gap-5"
      >
        @csrf

        {{-- Title --}}
        <div>
          <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
            Title <span class="text-error-500">*</span>
          </label>
          <input
            type="text"
            name="title"
            value="{{ old('title') }}"
            placeholder="e.g. Weekend Special Offer"
            class="dark:bg-dark-900 h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 shadow-theme-xs placeholder:text-gray-400 focus:border-brand-300 focus:outline-hidden focus:ring-3 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:focus:border-brand-800"
          />
          @error('title')
            <p class="mt-1 text-theme-xs text-error-500">{{ $message }}</p>
          @enderror
        </div>

        {{-- Description --}}
        <div>
          <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
            Description
          </label>
          <textarea
            name="description"
            rows="3"
            placeholder="Short message your customers will see..."
            class="dark:bg-dark-900 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 shadow-theme-xs placeholder:text-gray-400 focus:border-brand-300 focus:outline-hidden focus:ring-3 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:focus:border-brand-800"
          >{{ old('description') }}</textarea>
          @error('description')
            <p class="mt-1 text-theme-xs text-error-500">{{ $message }}</p>
          @enderror
        </div>

        {{-- Notes --}}
        <div>
          <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
            Notes <span class="text-theme-xs font-normal text-gray-400">(internal, not shown to customers)</span>
          </label>
          <input
            type="text"
            name="notes"
            value="{{ old('notes') }}"
            placeholder="e.g. Campaign for Ramadan"
            class="dark:bg-dark-900 h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 shadow-theme-xs placeholder:text-gray-400 focus:border-brand-300 focus:outline-hidden focus:ring-3 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:focus:border-brand-800"
          />
          @error('notes')
            <p class="mt-1 text-theme-xs text-error-500">{{ $message }}</p>
          @enderror
        </div>

        {{-- Image --}}
        <div>
          <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
            Image <span class="text-theme-xs font-normal text-gray-400">(jpg, jpeg, png, webp — max 1 MB)</span>
          </label>
          <input
            type="file"
            name="image"
            accept="image/jpg,image/jpeg,image/png,image/webp"
            class="h-11 w-full overflow-hidden rounded-lg border border-gray-300 bg-transparent text-sm text-gray-500 shadow-theme-xs transition-colors file:mr-5 file:h-full file:cursor-pointer file:border-0 file:border-r file:border-gray-200 file:bg-gray-50 file:px-3.5 file:text-sm file:text-gray-700 hover:file:bg-gray-100 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-gray-400 dark:file:border-gray-800 dark:file:bg-white/[0.03] dark:file:text-gray-400"
          />
          @error('image')
            <p class="mt-1 text-theme-xs text-error-500">{{ $message }}</p>
          @enderror
        </div>

        {{-- Actions --}}
        <div class="flex items-center justify-end gap-3 pt-2">
          <button
            type="button"
            @click="addModal = false"
            class="flex justify-center rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03]"
          >
            Cancel
          </button>
          <button
            type="submit"
            class="flex items-center gap-2 justify-center rounded-lg bg-brand-500 px-4 py-2.5 text-sm font-medium text-white hover:bg-brand-600"
          >
            <svg class="fill-current" width="16" height="16" viewBox="0 0 16 16" fill="none">
              <path d="M14.2222 1.33301L7.33333 8.22189M14.2222 1.33301H10.2222M14.2222 1.33301V5.33301" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M7.33333 2.66699H3.33333C2.59695 2.66699 2 3.26394 2 4.00033V12.667C2 13.4034 2.59695 14.0003 3.33333 14.0003H12C12.7364 14.0003 13.3333 13.4034 13.3333 12.667V8.66699" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            Send Notification
          </button>
        </div>
      </form>
    </div>
  </div>

</div>
@endsection

@push('scripts')
{{-- Re-open the modal with old input if validation failed --}}
@if ($errors->any())
<script>
  document.addEventListener('DOMContentLoaded', function () {
    // Let Alpine boot, then open the modal so the user sees the errors
    setTimeout(() => {
      const el = document.querySelector('[x-data]');
      if (el && el._x_dataStack) {
        el._x_dataStack[0].addModal = true;
      }
    }, 100);
  });
</script>
@endif
@endpush