@extends('layouts.app')

@section('title', 'SMS Templates')
@section('page', 'marketing')

@php
  $statusVariant = fn ($s) => $s === 'Active' ? 'success' : 'danger';
@endphp

@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

  <x-data-table
    id="sms-templates-table"
    class="catalog-table"
    title="SMS Templates"
    subtitle="Reusable SMS message templates for marketing campaigns."
    search-placeholder="Search templates..."
    :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="#smsTemplateModal" data-sms-template-add>
          <i class="bi bi-plus-lg"></i> Add Template
        </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>Active</option>
        <option>Inactive</option>
      </select>
    </x-slot:filters>
    <x-slot:head>
      <x-data-table-th label="Name" col="name" />
      <x-data-table-th label="Code" col="code" />
      <x-data-table-th label="Message Preview" col="body" />
      <x-data-table-th label="Campaigns" col="campaigns_count" sort-type="number" />
      <x-data-table-th label="Status" col="status" />
    </x-slot:head>
    <x-slot:body>
      @forelse ($templates as $row)
        <tr data-id="{{ $row->id }}">
          <td data-col="name" class="cell-primary">{{ $row->name }}</td>
          <td data-col="code">{{ $row->code }}</td>
          <td data-col="body">{{ \Illuminate\Support\Str::limit($row->body, 80) }}</td>
          <td data-col="campaigns_count">{{ $row->campaigns_count }}</td>
          <td data-col="status"><x-badge :variant="$statusVariant($row->status)">{{ $row->status }}</x-badge></td>
          <td data-edt-actions>
            <div class="edt-row-actions product-actions">
              @if ($canManage ?? false)
              <button
                type="button"
                class="btn btn-sm btn-icon product-action product-action--edit"
                title="Edit"
                aria-label="Edit"
                data-sms-template-edit
                data-name="{{ $row->name }}"
                data-code="{{ $row->code }}"
                data-body="{{ e($row->body) }}"
                data-status="{{ $row->status }}"
                data-sort-order="{{ $row->sort_order }}"
                data-notes="{{ $row->notes }}"
                data-update-url="{{ route('marketing.sms-templates.update', $row) }}"
              >
                <i class="bi bi-pencil" aria-hidden="true"></i>
              </button>
              <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="SMS template"
                data-delete-label="{{ $row->name }}"
                data-delete-url="{{ route('marketing.sms-templates.destroy', $row) }}"
              >
                <i class="bi bi-trash" aria-hidden="true"></i>
              </button>
              @endif
            </div>
          </td>
        </tr>
      @empty
        <tr data-edt-empty-row>
          <td colspan="6" class="text-center text-muted py-4">No SMS templates yet. Add your first template.</td>
        </tr>
      @endforelse
    </x-slot:body>
  </x-data-table>

  @if ($canManage ?? false)
  <div class="modal fade" id="smsTemplateModal" tabindex="-1" aria-labelledby="smsTemplateModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl">
      <div class="modal-content edt-modal">
        <form id="sms-template-form" method="post" action="{{ route('marketing.sms-templates.store') }}" data-store-url="{{ route('marketing.sms-templates.store') }}">
          @csrf
          <input type="hidden" name="_method" id="sms_template_form_method" value="POST">
          <div class="modal-header">
            <h2 class="modal-title fs-5" id="smsTemplateModalLabel">Add SMS template</h2>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <div class="sms-template-editor">
              <div class="sms-template-editor__fields">
                <div class="mb-3">
                  <label class="form-label" for="sms_template_name">Name</label>
                  <input type="text" class="form-control" id="sms_template_name" name="name" required>
                </div>
                <div class="mb-3">
                  <label class="form-label" for="sms_template_code">Code</label>
                  <input type="text" class="form-control" id="sms_template_code" name="code" required placeholder="WELCOME_SMS">
                </div>
                <div class="mb-3">
                  <label class="form-label" for="sms_template_body">Message</label>
                  <textarea class="form-control" id="sms_template_body" name="body" rows="5" required placeholder="Hi {customer_name}, welcome to {company_name}!"></textarea>
                  <p class="form-text mb-0">Placeholders: {customer_name}, {company_name}, {offer}</p>
                </div>
                <div class="mb-3">
                  <label class="form-label" for="sms_template_status">Status</label>
                  <select class="form-select" id="sms_template_status" name="status">
                    <option value="Active">Active</option>
                    <option value="Inactive">Inactive</option>
                  </select>
                </div>
                <div class="mb-3">
                  <label class="form-label" for="sms_template_sort_order">Sort order</label>
                  <input type="number" class="form-control" id="sms_template_sort_order" name="sort_order" min="0" value="0">
                </div>
                <div class="mb-0">
                  <label class="form-label" for="sms_template_notes">Notes</label>
                  <input type="text" class="form-control" id="sms_template_notes" name="notes">
                </div>
              </div>

              <div class="sms-template-editor__preview" id="sms-template-preview" aria-live="polite">
                <div class="sms-phone">
                  <div class="sms-phone__bezel">
                    <div class="sms-phone__notch" aria-hidden="true"></div>
                    <div class="sms-phone__screen">
                      <div class="sms-phone__status">
                        <span>9:41</span>
                        <span class="sms-phone__status-icons" aria-hidden="true">
                          <i class="bi bi-reception-4"></i>
                          <i class="bi bi-wifi"></i>
                          <i class="bi bi-battery-full"></i>
                        </span>
                      </div>
                      <div class="sms-phone__app-bar">
                        <div class="sms-phone__app-title">Messages</div>
                        <div class="sms-phone__app-meta" id="sms-template-preview-chars">0 chars · 1 SMS</div>
                      </div>
                      <div class="sms-phone__chat">
                        <div class="sms-phone__bubble is-empty" id="sms-template-preview-text">Message preview will appear here…</div>
                      </div>
                    </div>
                    <div class="sms-phone__home" aria-hidden="true"></div>
                  </div>
                </div>
              </div>
            </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">Save</button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <div class="modal fade" id="deleteConfirmModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content edt-modal">
        <form id="delete-confirm-form" method="post" action="#">
          @csrf
          @method('DELETE')
          <div class="modal-header">
            <h2 class="modal-title fs-5" id="deleteConfirmModalLabel">Delete SMS template</h2>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <p class="mb-0">Are you sure you want to delete <strong id="delete-confirm-name">this template</strong>?</p>
          </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-danger"><i class="bi bi-trash"></i> Delete</button>
          </div>
        </form>
      </div>
    </div>
  </div>
  @endif
@endsection

@push('styles')
  <link href="{{ asset('assets/css/pages/products.css') }}" rel="stylesheet">
  <style>
    .sms-template-editor {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 1.5rem;
      align-items: start;
    }
    .sms-template-editor__preview {
      display: flex;
      justify-content: center;
      padding-top: 0.25rem;
    }
    .sms-phone {
      width: 260px;
    }
    .sms-phone__bezel {
      background: #1a1d23;
      border-radius: 28px;
      padding: 10px 10px 14px;
      box-shadow: 0 12px 28px rgba(15, 23, 42, 0.22);
    }
    .sms-phone__notch {
      width: 88px;
      height: 8px;
      margin: 2px auto 8px;
      border-radius: 999px;
      background: #0b0d10;
    }
    .sms-phone__screen {
      background: #eef1f5;
      border-radius: 18px;
      overflow: hidden;
      min-height: 420px;
      display: flex;
      flex-direction: column;
    }
    .sms-phone__status {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.45rem 0.7rem 0.2rem;
      font-size: 0.68rem;
      font-weight: 600;
      color: #111827;
    }
    .sms-phone__status-icons {
      display: inline-flex;
      gap: 0.25rem;
      font-size: 0.72rem;
    }
    .sms-phone__app-bar {
      padding: 0.35rem 0.75rem 0.65rem;
      border-bottom: 1px solid #dde3ea;
      background: #f7f9fb;
    }
    .sms-phone__app-title {
      font-size: 0.82rem;
      font-weight: 700;
      color: #111827;
    }
    .sms-phone__app-meta {
      margin-top: 0.1rem;
      font-size: 0.68rem;
      color: #6b7280;
    }
    .sms-phone__chat {
      flex: 1;
      padding: 0.85rem 0.7rem;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
    }
    .sms-phone__bubble {
      align-self: flex-start;
      max-width: 92%;
      background: #fff;
      border: 1px solid #dbe2ea;
      border-radius: 16px 16px 16px 4px;
      padding: 0.7rem 0.8rem;
      font-size: 0.82rem;
      line-height: 1.45;
      color: #111827;
      white-space: pre-wrap;
      word-break: break-word;
      box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
    }
    .sms-phone__bubble.is-empty {
      color: #9ca3af;
      font-style: italic;
    }
    .sms-phone__home {
      width: 86px;
      height: 4px;
      margin: 10px auto 0;
      border-radius: 999px;
      background: #4b5563;
    }
    @media (max-width: 991.98px) {
      .sms-template-editor {
        grid-template-columns: 1fr;
      }
      .sms-template-editor__preview {
        order: -1;
      }
    }
  </style>
@endpush

@push('scripts')
  <script>
    window.SMS_TEMPLATE_PREVIEW = {
      customer_name: 'Kamal Perera',
      company_name: @json(\App\Models\Setting::companyName()),
      offer: '10% OFF today',
    };
  </script>
  <script src="{{ asset('assets/js/pages/sms-templates.js') }}"></script>
@endpush