@extends('crm.master')

@section('title', isset($notification) ? 'Edit Notification' : 'New Email Notification')

@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>
        {{ isset($notification) ? 'Edit Email Notification' : 'New Email Notification' }}
      </h4>
      <p class="text-muted small">
        {{ isset($notification) ? 'Update the notification configuration and content' : 'Create a new email notification template for events' }}
      </p>
    </div>
  </div>

  <div class="row g-4">

    {{-- Sidebar: Available Email Variables --}}
    <div class="col-lg-3 order-lg-2">
      <div class="card border-info" style="position: sticky; top: 1rem;">
        <div class="card-header bg-light-info py-2">
          <h6 class="mb-0"><i class="ti tabler-code me-1"></i> Email Variables</h6>
        </div>
        <div class="card-body p-2" style="max-height: calc(100vh - 120px); overflow-y: auto;">
          <p class="small text-muted mb-2">Click a variable to copy it.</p>

          <p class="fw-semibold small mb-1 text-uppercase text-muted" style="font-size:0.7rem">General</p>
          <code class="d-block small mb-1 var-pill">{$COMPANY_NAME}</code>
          <code class="d-block small mb-1 var-pill">{$CHECKFRONT_URL}</code>
          <code class="d-block small mb-1 var-pill">{$ACCOUNT_ID}</code>
          <code class="d-block small mb-1 var-pill">{$CREATED_BY}</code>

          <p class="fw-semibold small mb-1 mt-2 text-uppercase text-muted" style="font-size:0.7rem">Customer</p>
          <code class="d-block small mb-1 var-pill">{$CUSTOMER_NAME}</code>
          <code class="d-block small mb-1 var-pill">{$CUSTOMER_FIRST_NAME}</code>
          <code class="d-block small mb-1 var-pill">{$CUSTOMER_LAST_NAME}</code>
          <code class="d-block small mb-1 var-pill">{$CUSTOMER_EMAIL}</code>

          <p class="fw-semibold small mb-1 mt-2 text-uppercase text-muted" style="font-size:0.7rem">Booking</p>
          <code class="d-block small mb-1 var-pill">{$BOOKING_ID}</code>
          <code class="d-block small mb-1 var-pill">{$BOOKING_TOTAL}</code>
          <code class="d-block small mb-1 var-pill">{$BOOKING_STATUS}</code>
          <code class="d-block small mb-1 var-pill">{$BOOKING_QTY}</code>
          <code class="d-block small mb-1 var-pill">{$BOOKING_ITEMS}</code>
          <code class="d-block small mb-1 var-pill">{$BOOKING_DATE}</code>
          <code class="d-block small mb-1 var-pill">{$BOOKING_START_DATE}</code>
          <code class="d-block small mb-1 var-pill">{$BOOKING_END_DATE}</code>
          <code class="d-block small mb-1 var-pill">{$BOOKING_TIME}</code>
          <code class="d-block small mb-1 var-pill">{$BOOKING_START_TIME}</code>
          <code class="d-block small mb-1 var-pill">{$BOOKING_END_TIME}</code>

          <p class="fw-semibold small mb-1 mt-2 text-uppercase text-muted" style="font-size:0.7rem">URLs & Details</p>
          <code class="d-block small mb-1 var-pill">{$BOOKING_DETAILS}</code>
          <code class="d-block small mb-1 var-pill">{$BOOKING_EXTRA_DETAILS}</code>
          <code class="d-block small mb-1 var-pill">{$BOOKING_ITEMS_URL}</code>
          <code class="d-block small mb-1 var-pill">{$BOOKING_RATES}</code>
          <code class="d-block small mb-1 var-pill">{$BOOKING_DISCOUNT_CODES}</code>
          <code class="d-block small mb-1 var-pill">{$BOOKING_ADMIN_URL}</code>
          <code class="d-block small mb-1 var-pill">{$BOOKING_PAYMENT_URL}</code>
          <code class="d-block small mb-1 var-pill">{$BOOKING_PAY_FULL_URL}</code>
          <code class="d-block small mb-1 var-pill">{$BOOKING_CANCEL_URL}</code>
          <code class="d-block small mb-1 var-pill">{$BOOKING_PDF_URL}</code>
          <code class="d-block small mb-1 var-pill">{$BOOKING_GUESTS_URL}</code>
          <code class="d-block small mb-1 var-pill">{$BOOKING_URL}</code>
          <code class="d-block small mb-1 var-pill">{$BOOKING_QR_CODE}</code>
          <code class="d-block small mb-1 var-pill">{%EMBED_INVOICE}</code>
          <code class="d-block small mb-1 var-pill">{$INVENTORY_LEVEL_ITEMS}</code>
        </div>
      </div>
    </div>

    {{-- Main Form --}}
    <div class="col-lg-9 order-lg-1">
      <div class="card">
        <div class="card-header">
          <h5 class="mb-0">
            <i class="ti tabler-mail"></i>
            {{ isset($notification) ? 'Edit Notification' : 'New Email Notification' }}
          </h5>
        </div>
        <div class="card-body p-3">
          @if ($errors->any())
            <div class="alert alert-danger alert-dismissible fade show mb-2" role="alert">
              <strong>Please fix the errors below:</strong>
              <ul class="mb-0">
                @foreach ($errors->all() as $error)
                  <li>{{ $error }}</li>
                @endforeach
              </ul>
              <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
          @endif

          <form method="POST"
                id="crud-form"
                action="{{ isset($notification) ? route('crm.notifications.update', $notification->hash_id) : route('crm.notifications.store') }}"
                class="row g-2">
            @csrf
            @if (isset($notification))
              @method('PUT')
            @endif

            <!-- Name & Subject Row -->
            <div class="col-md-6">
              <label class="form-label" for="name">Name <span class="text-danger">*</span></label>
              <input type="text" id="name" name="name" class="form-control @error('name') is-invalid @enderror"
                     placeholder="For internal identification"
                     value="{{ old('name', $notification->name ?? '') }}" required maxlength="100">
              @error('name')
                <div class="invalid-feedback">{{ $message }}</div>
              @enderror
            </div>

            <div class="col-md-6">
              <label class="form-label" for="subject">Subject <span class="text-danger">*</span></label>
              <input type="text" id="subject" name="subject" class="form-control @error('subject') is-invalid @enderror"
                     value="{{ old('subject', $notification->subject ?? '') }}" required maxlength="255">
              @error('subject')
                <div class="invalid-feedback">{{ $message }}</div>
              @enderror
            </div>

            <!-- Notification Type -->
            <div class="col-md-6">
              <label class="form-label" for="notification_type">Notification Type <span class="text-danger">*</span></label>
              <select id="notification_type" name="notification_type" class="form-select @error('notification_type') is-invalid @enderror" required>
                <option value="">-- Select Type --</option>
                <option value="booking" {{ old('notification_type', $notification->notification_type ?? '') === 'booking' ? 'selected' : '' }}>
                  Booking Status
                </option>
                <option value="inventory" {{ old('notification_type', $notification->notification_type ?? '') === 'inventory' ? 'selected' : '' }}>
                  Inventory Level
                </option>
              </select>
              @error('notification_type')
                <div class="invalid-feedback d-block">{{ $message }}</div>
              @enderror
            </div>

            <!-- Event -->
            <div class="col-md-6">
              <label class="form-label" for="event">Booking Status Event <span class="text-danger">*</span></label>
              <select id="event" name="event" class="form-select @error('event') is-invalid @enderror" required>
                <option value="">-- Select Event --</option>
                <option value="PEND" {{ old('event', $notification->event ?? '') === 'PEND' ? 'selected' : '' }}>Pending</option>
                <option value="HOLD" {{ old('event', $notification->event ?? '') === 'HOLD' ? 'selected' : '' }}>Reserved</option>
                <option value="PART" {{ old('event', $notification->event ?? '') === 'PART' ? 'selected' : '' }}>Deposit</option>
                <option value="PAID" {{ old('event', $notification->event ?? '') === 'PAID' ? 'selected' : '' }}>Paid</option>
                <option value="WAIT" {{ old('event', $notification->event ?? '') === 'WAIT' ? 'selected' : '' }}>Waiting</option>
                <option value="STOP" {{ old('event', $notification->event ?? '') === 'STOP' ? 'selected' : '' }}>Cancelled</option>
                <option value="VOID" {{ old('event', $notification->event ?? '') === 'VOID' ? 'selected' : '' }}>Void</option>
                <option value="PRE" {{ old('event', $notification->event ?? '') === 'PRE' ? 'selected' : '' }}>Pre-booking</option>
              </select>
              @error('event')
                <div class="invalid-feedback d-block">{{ $message }}</div>
              @enderror
            </div>

            <!-- Recipients -->
            <div class="col-12">
              <label class="form-label">Recipients <span class="text-danger">*</span></label>
              <div class="border rounded p-2">
                <div class="form-check">
                  <input type="checkbox" id="recipient_customer" name="recipients[]" value="customer" 
                         class="form-check-input" 
                         {{ in_array('customer', old('recipients', $notification->recipients ?? [])) ? 'checked' : '' }}>
                  <label class="form-check-label" for="recipient_customer">
                    Customer
                  </label>
                </div>
                <div class="form-check">
                  <input type="checkbox" id="recipient_staff" name="recipients[]" value="staff" 
                         class="form-check-input"
                         {{ in_array('staff', old('recipients', $notification->recipients ?? [])) ? 'checked' : '' }}>
                  <label class="form-check-label" for="recipient_staff">
                    All Staff
                  </label>
                </div>
              </div>
              @error('recipients')
                <div class="invalid-feedback d-block">{{ $message }}</div>
              @enderror
            </div>

            <!-- From Email -->
            <div class="col-12">
              <label class="form-label" for="from_email">From Email <span class="text-danger">*</span></label>
              <input type="email" id="from_email" name="from_email" class="form-control @error('from_email') is-invalid @enderror"
                     placeholder="Sender email address"
                     value="{{ old('from_email', $notification->from_email ?? $defaultEmail ?? '') }}" maxlength="100" required>
              @error('from_email')
                <div class="invalid-feedback">{{ $message }}</div>
              @enderror
              <small class="form-text text-muted d-block mt-2">
                <i class="ti tabler-info-circle"></i> Default: {{ $defaultEmail ?? 'No business email configured' }}
              </small>
            </div>

            <!-- Reply To -->
            <div class="col-12">
              <label class="form-label" for="reply_to">Reply To Email</label>
              <input type="email" id="reply_to" name="reply_to" class="form-control @error('reply_to') is-invalid @enderror"
                     placeholder="Leave blank to use default"
                     value="{{ old('reply_to', $notification->reply_to ?? '') }}" maxlength="100">
              @error('reply_to')
                <div class="invalid-feedback">{{ $message }}</div>
              @enderror
            </div>

            <!-- Delivery -->
            <div class="col-12">
              <label class="form-label">Delivery <span class="text-danger">*</span></label>
              <div class="row">
                <div class="col-md-6">
                  <div class="form-check">
                    <input type="radio" id="deliver_immediate" name="scheduled" value="0" 
                           class="form-check-input deliver-option" onchange="toggleSchedule()"
                           {{ (old('scheduled', $notification->scheduled ?? 0) == 0 || old('scheduled', $notification->scheduled ?? 0) === false) ? 'checked' : '' }}>
                    <label class="form-check-label" for="deliver_immediate">
                      <i class="ti tabler-bolt"></i> Immediately
                    </label>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-check">
                    <input type="radio" id="deliver_scheduled" name="scheduled" value="1" 
                           class="form-check-input deliver-option" onchange="toggleSchedule()"
                           {{ old('scheduled', $notification->scheduled ?? 0) == 1 ? 'checked' : '' }}>
                    <label class="form-check-label" for="deliver_scheduled">
                      <i class="ti tabler-clock"></i> Scheduled
                    </label>
                  </div>
                </div>
              </div>
            </div>

            <!-- Schedule Section -->
            <div class="col-12" id="schedule_section" style="{{ old('scheduled', $notification->scheduled ?? 0) == 1 ? '' : 'display:none;' }}">
              <div class="row g-2">
                <div class="col-md-3">
                  <label class="form-label" for="schedule_value">Schedule Value <span class="text-danger">*</span></label>
                  <input type="number" id="schedule_value" name="schedule_value" class="form-control" 
                         value="{{ old('schedule_value', $notification->schedule_value ?? 1) }}" min="1" max="999" required>
                </div>
                <div class="col-md-3">
                  <label class="form-label" for="schedule_unit">Unit <span class="text-danger">*</span></label>
                  <select id="schedule_unit" name="schedule_unit" class="form-select" required>
                    <option value="">-- Select --</option>
                    <option value="H" {{ old('schedule_unit', $notification->schedule_unit ?? '') === 'H' ? 'selected' : '' }}>Hour</option>
                    <option value="D" {{ old('schedule_unit', $notification->schedule_unit ?? '') === 'D' ? 'selected' : '' }}>Day</option>
                    <option value="W" {{ old('schedule_unit', $notification->schedule_unit ?? '') === 'W' ? 'selected' : '' }}>Week</option>
                    <option value="M" {{ old('schedule_unit', $notification->schedule_unit ?? '') === 'M' ? 'selected' : '' }}>Month</option>
                  </select>
                </div>
                <div class="col-md-3">
                  <label class="form-label" for="schedule_base">Base <span class="text-danger">*</span></label>
                  <select id="schedule_base" name="schedule_base" class="form-select" required>
                    <option value="">-- Select --</option>
                    <option value="START" {{ old('schedule_base', $notification->schedule_base ?? '') === 'START' ? 'selected' : '' }}>Start Date</option>
                    <option value="END" {{ old('schedule_base', $notification->schedule_base ?? '') === 'END' ? 'selected' : '' }}>End Date</option>
                    <option value="CREATE" {{ old('schedule_base', $notification->schedule_base ?? '') === 'CREATE' ? 'selected' : '' }}>Creation Date</option>
                  </select>
                </div>
              </div>
            </div>

            <!-- Email Editors -->
            <div class="col-12">
              <label class="form-label">Content Type <span class="text-danger">*</span></label>
              <div class="row mb-2">
                <div class="col-md-6">
                  <div class="form-check">
                    <input type="radio" id="content_html" name="content_type" value="html" 
                           class="form-check-input content-option" onchange="toggleContentType()"
                           {{ old('content_type', $notification->content_type ?? 'html') === 'html' ? 'checked' : '' }} required>
                    <label class="form-check-label" for="content_html">
                      <i class="ti tabler-code"></i> HTML Content
                    </label>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-check">
                    <input type="radio" id="content_text" name="content_type" value="text" 
                           class="form-check-input content-option" onchange="toggleContentType()"
                           {{ old('content_type', $notification->content_type ?? 'html') === 'text' ? 'checked' : '' }} required>
                    <label class="form-check-label" for="content_text">
                      <i class="ti tabler-text"></i> Text Content
                    </label>
                  </div>
                </div>
              </div>

              <!-- HTML Editor -->
              <div id="html_editor_section" class="editor-section" style="{{ old('content_type', $notification->content_type ?? 'html') === 'text' ? 'display:none;' : '' }}">
                <label class="form-label" for="html_msg">HTML Email</label>
                @include('crm.components.editor', ['item_details' => old('html_msg', $notification->html_msg ?? ''), 'resource' => 'html_msg'])
              </div>

              <!-- Text Editor -->
              <div id="text_editor_section" class="editor-section" style="{{ old('content_type', $notification->content_type ?? 'html') === 'text' ? '' : 'display:none;' }}">
                <label class="form-label" for="text_msg">Text Email</label>
                <textarea id="text_msg" name="text_msg" class="form-control" rows="10">{{ old('text_msg', $notification->text_msg ?? '') }}</textarea>
              </div>
            </div>

            <!-- Apply To Products -->
            <div class="col-12">
              <div class="card border mb-0">
                <div class="card-header py-2">
                  <h6 class="mb-0"><i class="ti tabler-car me-1"></i> Apply To</h6>
                </div>
                <div class="card-body p-3">
                  @php
                    $selectedIds = old('product_ids', isset($notification) ? $notification->products->pluck('id')->toArray() : []);
                  @endphp
                  <div class="border rounded p-3" style="max-height: 320px; overflow-y: auto;">
                    @include('crm.components.product-selector')
                  </div>
                </div>
              </div>
            </div>

            <!-- Internal Notes -->
            <div class="col-12">
              <label class="form-label" for="internal_notes">Internal Notes</label>
              <textarea id="internal_notes" name="internal_notes" class="form-control" rows="3"
                        placeholder="Add a short description of how this notification should be used">{{ old('internal_notes', $notification->internal_notes ?? '') }}</textarea>
            </div>

            <!-- Enabled Status -->
            <div class="col-12">
              <div class="form-check">
                <input type="hidden" name="enabled" value="0">
                <input type="checkbox" id="enabled" name="enabled" value="1" class="form-check-input"
                       {{ old('enabled', $notification->enabled ?? true) ? 'checked' : '' }}>
                <label class="form-check-label" for="enabled">
                  This notification is enabled
                </label>
              </div>
            </div>

            <!-- Submit -->
            <div class="col-12">
              <div class="d-flex gap-2">
                <button type="button" id="add-edit-page-sbt-btn" class="btn btn-primary">
                  <i class="ti tabler-check"></i> 
                  {{ isset($notification) ? 'Update' : 'Create' }} Notification
                </button>
                <a href="{{ route('crm.notifications.index') }}" class="btn btn-outline-secondary">
                  <i class="ti tabler-x"></i> Cancel
                </a>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>{{-- /col-lg-9 --}}

  </div>{{-- /row --}}
</div>

@endsection

<style>
#crud-form .form-label {
  margin-bottom: 0.25rem !important;
}
#crud-form .form-control,
#crud-form .form-select {
  font-size: 0.95rem;
}
#crud-form .form-check {
  margin-bottom: 0.5rem;
}
.var-pill {
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(105,108,255,.06);
  border: 1px solid rgba(105,108,255,.2);
  transition: background .15s;
  user-select: none;
}
.var-pill:hover {
  background: rgba(105,108,255,.15);
}
.var-pill.copied {
  background: rgba(40,167,69,.15);
  border-color: rgba(40,167,69,.4);
}
</style>

@section('page-script')
<script>
function toggleContentType() {
  const contentType = document.querySelector('input[name="content_type"]:checked').value;
  const htmlSection = document.getElementById('html_editor_section');
  const textSection = document.getElementById('text_editor_section');
  
  if (contentType === 'html') {
    htmlSection.style.display = 'block';
    textSection.style.display = 'none';
  } else if (contentType === 'text') {
    htmlSection.style.display = 'none';
    textSection.style.display = 'block';
  }
}

function toggleSchedule() {
  const scheduled = document.querySelector('input[name="scheduled"]:checked').value;
  const scheduleSection = document.getElementById('schedule_section');
  const scheduleValue = document.getElementById('schedule_value');
  const scheduleUnit = document.getElementById('schedule_unit');
  const scheduleBase = document.getElementById('schedule_base');
  
  if (scheduled == 1) {
    scheduleSection.style.display = 'block';
    scheduleValue.required = true;
    scheduleUnit.required = true;
    scheduleBase.required = true;
  } else {
    scheduleSection.style.display = 'none';
    scheduleValue.required = false;
    scheduleUnit.required = false;
    scheduleBase.required = false;
  }
}

// Call toggleSchedule on page load for edit mode
document.addEventListener('DOMContentLoaded', function() {
  toggleSchedule();
  toggleContentType();
  document.querySelectorAll('.var-pill').forEach(function(el) {
    el.addEventListener('click', function() {
      var text = el.textContent.trim();
      navigator.clipboard.writeText(text).then(function() {
        el.classList.add('copied');
        setTimeout(function() { el.classList.remove('copied'); }, 1200);
      });
    });
  });
});
</script>

<script>
$(document).ready(function(){
  $('#add-edit-page-sbt-btn').click(function(){
    // Sync CKEditor data to textarea before validation
    if (typeof CKEDITOR !== 'undefined' && CKEDITOR.instances['html_msg']) {
      CKEDITOR.instances['html_msg'].updateElement();
    }
    
    var validator = $('#crud-form').validate();

    if(validator.form() != false){
      $('#crud-form')[0].submit();
    }
  });
});
</script>

@endsection