@php
/**
* Component : WhatsAppService
* Controller : WhatsAppServiceController
* File : templates.list.blade.php
----------------------------------------------------------------------------- */
@endphp
@extends('layouts.app', ['title' => __tr('Templates List')])
@section('content')
@include('users.partials.header', [
'title' => __tr('WhatsApp Templates'),
'description' => '',
'class' => 'col-lg-7'
])
<div class="container-fluid mt-lg--6">
    <div class="row">
        <!-- button -->
        <div class="col-xl-12 mb-3">
           <div class="float-right">
            <a class="lw-btn btn btn-primary" href="{{ route('vendor.whatsapp_service.templates.read.new_view') }}" > {{ __tr('Create New Template') }}</a>
            <a class="lw-btn btn btn-dark lw-ajax-link-action" data-callback="reloadDtOnSuccess" data-method="post" href="{{ route('vendor.whatsapp_service.templates.write.sync') }}" > {{ __tr('Sync WhatsApp Templates') }}</a>
            <a class="lw-btn btn btn-default" target="_blank" href="https://business.facebook.com/wa/manage/message-templates/?waba_id={{ getVendorSettings('whatsapp_business_account_id') }}" > {{ __tr('Manage Templates on Meta') }} <i class="fas fa-external-link-alt"></i></a>
            
             <x-lw.help-modal :subject="__tr('How To Create Template?')">
                    
         <!-- FAQ Section: How to Create Template on WhatsApp API -->
<section id="faqs-whatsapp-template" aria-labelledby="faqs-heading" style="font-family:system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial; padding:48px 16px; background:#f8fafc;">
  <div style="max-width:900px; margin:0 auto;">
    <h2 id="faqs-heading" style="font-size:28px; margin-bottom:12px;">FAQs — How to Create Template on WhatsApp API</h2>
    <p style="color:#475569; margin-bottom:24px;">Step-by-step guide to creating and sending WhatsApp template messages using the API.</p>

    <div style="display:grid; gap:12px;">
      <details open style="background:#fff; border:1px solid #e6e9ef; border-radius:8px; padding:16px;">
        <summary style="font-weight:600; cursor:pointer; list-style:none;">1. Understand Template Messages</summary>
        <div style="margin-top:12px; color:#334155;">
          <p>Template messages are pre-approved messages you can send to users for alerts, OTPs, order updates, or promotions. They must follow WhatsApp’s structured format.</p>
          <p>Types: Text-only, Media (image/video/document), Interactive (buttons, quick replies).</p>
        </div>
      </details>

      <details style="background:#fff; border:1px solid #e6e9ef; border-radius:8px; padding:16px;">
        <summary style="font-weight:600; cursor:pointer; list-style:none;">2. Access Your WhatsApp Business Account</summary>
        <div style="margin-top:12px; color:#334155;">
          <p>Ensure your phone number is verified and your WhatsApp Business Account (WABA) is approved in Meta Business Manager or WapsChat dashboard.<a href="/vendor-console/settings/whatsapp-cloud-api-setup">Click Here, then click WhatsApp Manager</a></p>
        </div>
      </details>

      <details style="background:#fff; border:1px solid #e6e9ef; border-radius:8px; padding:16px;">
        <summary style="font-weight:600; cursor:pointer; list-style:none;">3. Create a Template</summary>
        <div style="margin-top:12px; color:#334155;">
          <p>Click  Template in Side menu list<strong>Create New Template</strong>. Fill in:</p>
          <ul style="margin-left:20px; list-style:disc;">
            <li><strong>Template Name:</strong> Unique identifier within your dashboard.</li>
            <li><strong>Language:</strong> Template language. e,g en, en_US</li>
            
          <div style="background-color:#fff3cd; color:#856404; border:1px solid #ffeeba; padding:12px 16px; border-radius:6px; margin-bottom:12px;">
  <strong>Note:</strong> Clicking the <em>Manage Template on Meta</em> button will take you directly to Meta. Here, you can edit your pre-designed templates without using the <em>Create New Template</em> button again. Everything will be managed on Meta.
</div>
<li><strong>Category:</strong> Marketing and Utility.</li>


<div style="background-color:#d1ecf1; color:#0c5460; border:1px solid #bee5eb; padding:16px; border-radius:6px; margin-bottom:16px;">
  <strong>Note:</strong> In Nigeria, Meta WhatsApp API templates are charged differently depending on type:<br><br>
  <ul style="margin-left:20px;">
    <li><strong>Marketing Templates:</strong> For promotional messages like offers or product announcements. Cost: <strong>$0.05 – $0.14 per message</strong>. Best for campaigns and special promotions.</li>
    <li><strong>Utility Templates:</strong> For transactional or service messages like order updates or reminders. Cost: <strong>$0.021 – $0.048 per message</strong>. Ideal for routine customer interactions.</li>
    <p><strong>Tip:</strong> Use utility templates for daily notifications to save cost and marketing templates for special campaigns to boost engagement.</p>
    <li>Session Messages (24-hour session window):Messages sent within 24 hours after a user’s message are charged differently (often cheaper or free).</li>
  </ul>
  <div style="background-color:#e2f0d9; color:#27632a; border:1px solid #a3d09c; padding:16px; border-radius:6px; margin-bottom:16px;">
  <strong>Note:</strong> Understanding Free 1,000 Messages on WhatsApp Business API:<br><br>
  <ul style="margin-left:20px;">
    <li><strong>Free 1,000 Messages / Month:</strong> Meta provides 1,000 free messages per month for all message types.</li>
    <li><strong>Session Messages (24-hour window):</strong> 
      <ul style="margin-left:20px;">
        <li>When a user messages your bot, a 24-hour session opens.</li>
        <li>Any bot replies within 24 hours are <strong>session messages</strong> and count toward the free 1,000 messages.</li>
        <li>These messages are typically free or cheaper than template messages.</li>
      </ul>
    </li>
    <li><strong>Template Messages:</strong>
      <ul style="margin-left:20px;">
        <li>Used when replying after 24 hours or sending pre-approved content.</li>
        <li>Also counts toward the free 1,000 messages.</li>
      </ul>
    </li>
  </ul>
  <p><strong>Tip:</strong> Use session messages as much as possible to maximize the free quota and reduce costs. After 1,000 messages, you pay per message based on type (Marketing or Utility).</p>
</div>
</div>

            <li><strong>Components:</strong> Header (optional), Body (required), Footer (optional), Buttons (optional).</li>
          </ul>
          <p>Example of a personalized message using variables: You can include details like a customer’s name, order number, or date. For instance: <em>"Dear {1}, your order {2} is ready for pickup!"</em></p>
        </div>
      </details>

      <details style="background:#fff; border:1px solid #e6e9ef; border-radius:8px; padding:16px;">
        <summary style="font-weight:600; cursor:pointer; list-style:none;">4. Submit for Approval</summary>
        <div style="margin-top:12px; color:#334155;">
         <p>After clicking <strong>Submit</strong>, wait for WhatsApp to review and approve your template (typically under view minutes). Once approved, it will appear in your WapsChat Template list. If you don’t see it, click the <strong>Sync WhatsApp Template</strong> button to refresh the list. Your template will then be ready to send messages.</p>

        </div>
      </details>

      <details style="background:#ebdaf0; border:1px solid #e6e9ef; border-radius:8px; padding:16px;">
        <summary style="font-weight:600; cursor:pointer; list-style:none;">5. Tips</summary>
        <div style="margin-top:12px; color:#334155;">
          <ul style="margin-left:20px; list-style:disc;">
            <li>Use meaningful template names.</li>
            <li>Keep body text clear and concise.</li>
            <li>Use variables to personalize messages.</li>
            <li>Test buttons and media in interactive templates before sending.</li>
          </ul>
        </div>
        <button data-popup="chat" data-popup-url="https://wapschat.ng/template-failed" class="btn btn-primary">
    Why Template Message Failed?
</button>

      </details>

    </div>
 
</section>
</div>
<div style="flex: 1 1 30%; min-width: 300px; display: flex; justify-content: center; align-items: center;">
  <iframe 
    width="560" 
    height="315" 
    src="https://www.youtube.com/embed/TTIxUky9q0o" 
    title="YouTube video player" 
    frameborder="0" 
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
    allowfullscreen>
  </iframe>
</div>
</div>
</section>
                    </x-lw.help-modal>
           </div>
        </div>
        <!--/ button -->
        <x-lw.modal id="lwTemplatePreview" :header="__tr('Template Preview')" :modalSize="'modal-sm'" :hasForm="true" x-data="{selectedTemplate:''}">
            <!--  Edit Contact Form -->
            <div id="lwTemplatePreviewForm">
                <!-- form body -->
                <div id="lwTemplateStructureContainer" class="lw-form-modal-body"></div>
                <!-- form footer -->
                <div class="modal-footer" id="lwTemplateStructureContainerActions"></div>
                <script type="text/template" id="lwTemplateStructureContainerActions-template">
                    <% if(__tData.template_status == 'APPROVED') { %>
                    <a title="{{  __tr('Create Campaign using this template') }}" class="lw-btn btn btn-primary"  href="{{ route('vendor.campaign.new.view') }}?use_template=<%- __tData._uid %>"><i class="fa fa-bullhorn"></i> {{  __tr('Create Campaign') }}</a>
                    <% } %>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ __tr('Close') }}</button>
                </script>
            </div>
            <!--/  Edit Contact Form -->
        </x-lw.modal>
        <div class="col-xl-12">
            <x-lw.datatable id="lwTemplatesList"  data-page-length="100" :url="route('vendor.whatsapp_service.templates.read.list')">
                <th data-orderable="true" data-name="template_name">{{ __tr('Name') }}</th>
                <th data-orderable="true" data-name="language">{{ __tr('Language') }}</th>
                <th data-orderable="true" data-name="category">{{ __tr('Category') }}</th>
                <th data-template="#templatesStatusColumnTemplate" name="null">{{ __tr('Status') }}</th>
                <th data-orderable="true" data-order-by="true" data-order-type="desc" data-name="updated_at">{{ __tr('Updated On') }}</th>
                <th data-template="#templatesActionColumnTemplate" name="null">{{ __tr('Action') }}</th>
            </x-lw.datatable>
        </div>
        <script type="text/template" id="templatesStatusColumnTemplate">
            <% if(__tData.status == 'APPROVED') { %>
                <span class="text-success"><i class="fa fa-check-circle text-success"></i> {{  __tr('APPROVED') }}</span>
            <% } else if(__tData.status == 'REJECTED') { %>
                <span class="text-danger"><i class="fa fa-times-circle text-danger"></i> {{  __tr('REJECTED') }}</span>
            <% } else if(__tData.status == 'PENDING') { %>
                <span class="text-warning"><i class="fa fa-clock text-warning"></i> {{  __tr('PENDING') }}</span>
            <% } else { %>
                <%- __tData.status  %>
            <% } %>
        </script>
        <!-- action template -->
        <script type="text/template" id="templatesActionColumnTemplate">
            <% if(__tData.status == 'APPROVED') { %>
            <a title="{{  __tr('Create Campaign using this template') }}" class="lw-btn btn btn-sm btn-primary"  href="{{ route('vendor.campaign.new.view') }}?use_template=<%- __tData._uid %>"><i class="fa fa-bullhorn"></i> {{  __tr('Create Campaign') }}</a>
            <% } %>
            {{-- preview template --}}
            <a data-pre-callback="appFuncs.clearContainer" title="{{  __tr('Template Preview') }}" class="lw-btn btn btn-sm btn-light lw-ajax-link-action" data-method="post" data-post-data="<%- toJsonString({'template_selection': __tData._uid,'template_status': __tData.status}) %>" data-response-template="#lwTemplateStructureContainerActions" href="{{ route('vendor.request.template.view') }}?only-preview=1"  data-toggle="modal" data-target="#lwTemplatePreview"><i class="fa fa-eye"></i> {{  __tr('Preview') }}</a>
            {{-- edit template --}}
            <div class="btn-group">
                <a title="{{  __tr('Edit Template') }}" class="lw-btn btn btn-sm btn-default" href="<%= __Utils.apiURL("{{ route('vendor.whatsapp_service.templates.read.update_view',['whatsappTemplateUid']) }}", {'whatsappTemplateUid': __tData._uid}) %>">{{  __tr('Edit') }}</a>
                <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
                  <span class="sr-only">{{  __tr('Toggle Dropdown') }}</span>
                </button>
                <div class="dropdown-menu dropdown-menu-right">
                    <a target="_blank" title="{{  __tr('Edit Template on Meta') }}" class="dropdown-item" href="https://business.facebook.com/wa/manage/message-templates/?&waba_id={{ getVendorSettings('whatsapp_business_account_id') }}&id=<%- __tData.template_id %>">{{  __tr('Edit Template on Meta') }} <i class="fas fa-external-link-alt"></i></a>
                </div>
              </div>
            <a title="{{  __tr('Delete Template') }}" data-callback="reloadDtOnSuccess" data-method="post" data-confirm="#lwConfirmTemplateDelete" data-confirm-params="<%- toJsonString({'templateName': __tData.template_name}) %>" class="lw-btn btn btn-sm btn-danger lw-ajax-link-action" href="<%= __Utils.apiURL(" {{ route('vendor.whatsapp_service.templates.write.delete',['whatsappTemplateUid']) }}", {'whatsappTemplateUid': __tData._uid}) %>">{{  __tr('Delete') }}</a>
        </script>
        <!-- /action template -->
        <script type="text/template" id="lwConfirmTemplateDelete">
            <h3>{!! __tr('Are you sure you want to delete __templateName__ template', [
                '__templateName__' => '<strong><%- __tData.templateName %></strong>'
                ]) !!}</h3>
        </script>
    </div>
</div>
@endsection()