templates/base.html.twig line 1

Open in your IDE?
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <base href=""/>
  5.     <title>Paynetics - Admin</title>
  6.     <meta charset="utf-8"/>
  7.     
  8.     <!-- Theme initialization (must be early to prevent flash) -->
  9.     <script>
  10.         (function() {
  11.             // Cookie helper functions
  12.             function getCookie(name) {
  13.                 var match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
  14.                 return match ? match[2] : null;
  15.             }
  16.             
  17.             function setCookie(name, value, days) {
  18.                 var expires = '';
  19.                 if (days) {
  20.                     var date = new Date();
  21.                     date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
  22.                     expires = '; expires=' + date.toUTCString();
  23.                 }
  24.                 document.cookie = name + '=' + value + expires + '; path=/; SameSite=Lax';
  25.             }
  26.             
  27.             // Get theme from cookie, default to 'light'
  28.             var savedTheme = getCookie('theme') || 'light';
  29.             
  30.             // Apply theme immediately to prevent flash
  31.             document.documentElement.setAttribute('data-bs-theme', savedTheme);
  32.             
  33.             // Expose functions globally for theme toggle
  34.             window.getThemeCookie = getCookie;
  35.             window.setThemeCookie = setCookie;
  36.             window.currentTheme = savedTheme;
  37.         })();
  38.     </script>
  39.     <meta name="viewport" content="width=device-width, initial-scale=1"/>
  40.     <meta property="og:locale" content="en_US"/>
  41.     <meta property="og:type" content="article"/>
  42.     <link rel="shortcut icon" href="/assets/media/logos/favicon.ico"/>
  44.     <!-- Google Fonts - IBM Plex Sans -->
  45.     <link rel="preconnect" href="https://fonts.googleapis.com">
  46.     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  47.     <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
  49.     <!-- Velok Theme CSS -->
  50.     <link href="{{ asset('assets/velok/css/vendor.min.css') }}" rel="stylesheet" type="text/css"/>
  51.     <link href="{{ asset('assets/velok/css/app.min.css') }}" rel="stylesheet" type="text/css"/>
  53.     <!-- Dark/Light mode toggle styles -->
  54.     <style>
  55.         /* Theme toggle button icons */
  56.         /* In light mode: show moon icon (to switch to dark) */
  57.         html[data-bs-theme="light"] #light-dark-mode .light-mode,
  58.         html:not([data-bs-theme]) #light-dark-mode .light-mode {
  59.             display: inline-block;
  60.         }
  61.         html[data-bs-theme="light"] #light-dark-mode .dark-mode,
  62.         html:not([data-bs-theme]) #light-dark-mode .dark-mode {
  63.             display: none;
  64.         }
  65.         /* In dark mode: show sun icon (to switch to light) */
  66.         html[data-bs-theme="dark"] #light-dark-mode .light-mode {
  67.             display: none;
  68.         }
  69.         html[data-bs-theme="dark"] #light-dark-mode .dark-mode {
  70.             display: inline-block;
  71.         }
  73.         /* Logo visibility based on theme */
  74.         html[data-bs-theme="light"] .logo-light,
  75.         html:not([data-bs-theme]) .logo-light {
  76.             display: none !important;
  77.         }
  78.         html[data-bs-theme="light"] .logo-dark,
  79.         html:not([data-bs-theme]) .logo-dark {
  80.             display: block !important;
  81.         }
  82.         html[data-bs-theme="dark"] .logo-dark {
  83.             display: none !important;
  84.         }
  85.         html[data-bs-theme="dark"] .logo-light {
  86.             display: block !important;
  87.         }
  89.         /* Pagination styling */
  90.         .pagination .page-link {
  91.             display: flex;
  92.             align-items: center;
  93.             justify-content: center;
  94.             min-width: 32px;
  95.             width: auto;
  96.             height: 32px;
  97.             padding: 0.25rem 0.5rem;
  98.             white-space: nowrap;
  99.         }
  100.         .pagination-sm .page-link {
  101.             min-width: 28px;
  102.             width: auto;
  103.             height: 28px;
  104.             font-size: 0.8125rem;
  105.         }
  106.         .pagination-lg .page-link {
  107.             min-width: calc(1.5rem + 1.5em + 2px);
  108.             width: auto;
  109.         }
  110.         .pagination .page-link svg {
  111.             width: 14px;
  112.             height: 14px;
  113.         }
  114.         .pagination .page-item.active .page-link {
  115.             background-color: var(--bs-primary);
  116.             border-color: var(--bs-primary);
  117.         }
  118.     </style>
  120.     <!-- Vendor CSS (plugins) -->
  121.     <link href="{{ asset('assets/velok/vendor/flatpickr/flatpickr.min.css') }}" rel="stylesheet" type="text/css"/>
  122.     <link href="{{ asset('assets/velok/vendor/flatpickr/plugins/monthSelect/style.css') }}" rel="stylesheet" type="text/css"/>
  123.     <link href="{{ asset('assets/velok/vendor/choices.js/choices.min.css') }}" rel="stylesheet" type="text/css"/>
  124.     <link href="{{ asset('assets/velok/vendor/gridjs/theme/mermaid.min.css') }}" rel="stylesheet" type="text/css"/>
  125.     <link href="{{ asset('assets/velok/vendor/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet" type="text/css"/>
  126.     <link href="{{ asset('assets/velok/vendor/simplebar/simplebar.min.css') }}" rel="stylesheet" type="text/css"/>
  127.     <link href="{{ asset('assets/velok/vendor/daterangepicker/daterangepicker.css') }}" rel="stylesheet" type="text/css"/>
  128.     
  129.     <!-- Select2 CSS -->
  130.     <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
  131.     <link href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" rel="stylesheet" />
  132.     <link href="{{ asset('assets/css/select2-dark-theme.min.css') }}" rel="stylesheet" type="text/css"/>
  133.     <link href="{{ asset('assets/css/vanilla-jsoneditor-dark-theme.min.css') }}" rel="stylesheet" type="text/css"/>
  134.     <style>
  135.         /* Select2 compact styling */
  136.         .select2-container--bootstrap-5 .select2-selection--single {
  137.             min-height: 31px;
  138.             padding: 0.25rem 0.5rem;
  139.             font-size: 0.8125rem;
  140.         }
  141.         .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
  142.             padding: 0;
  143.             line-height: 1.5;
  144.         }
  145.         .select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow {
  146.             height: 29px;
  147.         }
  148.         .select2-container--bootstrap-5 .select2-dropdown .select2-results__option {
  149.             padding: 0.375rem 0.75rem !important;
  150.             font-size: 0.8125rem !important;
  151.         }
  153.         /* Fix sidebar submenu visibility - ensure .show overrides sidebar-hover hiding */
  154.         .main-nav .navbar-nav .collapse.show,
  155.         .main-nav .navbar-nav .collapsing {
  156.             display: block !important;
  157.         }
  158.         html.sidebar-hover .main-nav:hover .menu-item .collapse.show,
  159.         html.sidebar-hover .main-nav:hover .menu-item .collapsing {
  160.             display: block !important;
  161.         }
  162.         /* Ensure submenus are visible and properly styled */
  163.         .main-nav .sub-menu-nav {
  164.             display: flex;
  165.             flex-direction: column;
  166.             padding-left: 25px;
  167.             list-style: none;
  168.             margin: 0;
  169.         }
  171.         /* Fix dropdown menus in nav-pills (application tabs) */
  172.         .nav-pills .nav-item.dropdown {
  173.             position: relative;
  174.         }
  175.         .nav-pills .dropdown-toggle {
  176.             cursor: pointer;
  177.         }
  178.         .nav-pills .dropdown-toggle.btn-link {
  179.             padding: 0.25rem 0.75rem;
  180.             border: none;
  181.             background: transparent;
  182.         }
  183.         .nav-pills .dropdown-toggle.btn-link:hover,
  184.         .nav-pills .dropdown-toggle.btn-link:focus {
  185.             background-color: rgba(var(--bs-primary-rgb), 0.1);
  186.             border-radius: 0.375rem;
  187.         }
  188.         .nav-pills .dropdown-menu {
  189.             position: absolute;
  190.             z-index: 1055;
  191.             min-width: 12rem;
  192.             padding: 0.5rem 0;
  193.             margin-top: 0.125rem;
  194.             background-color: var(--bs-body-bg, #fff);
  195.             border: 1px solid var(--bs-border-color, rgba(0,0,0,.15));
  196.             border-radius: 0.375rem;
  197.             box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  198.         }
  199.         .nav-pills .dropdown-item {
  200.             display: flex;
  201.             align-items: center;
  202.             padding: 0.5rem 1rem;
  203.             font-size: 0.8125rem;
  204.             color: var(--bs-body-color, #212529);
  205.             transition: background-color 0.15s ease-in-out;
  206.         }
  207.         .nav-pills .dropdown-item:hover,
  208.         .nav-pills .dropdown-item:focus {
  209.             background-color: var(--bs-tertiary-bg, #f8f9fa);
  210.             color: var(--bs-body-color, #1e2125);
  211.         }
  212.         .nav-pills .dropdown-divider {
  213.             margin: 0.5rem 0;
  214.         }
  215.         
  216.         /* Nav tabs dropdown fix */
  217.         .nav-tabs .nav-item.dropdown {
  218.             position: relative;
  219.         }
  220.         .nav-tabs button.nav-link.dropdown-toggle {
  221.             background: none;
  222.             border: none;
  223.             border-bottom: 2px solid transparent;
  224.             cursor: pointer;
  225.         }
  226.         .nav-tabs button.nav-link.dropdown-toggle:hover {
  227.             border-bottom-color: var(--bs-primary);
  228.         }
  229.         .nav-tabs button.nav-link.dropdown-toggle.active {
  230.             border-bottom-color: var(--bs-primary);
  231.         }
  232.         .nav-tabs .dropdown-toggle::after {
  233.             margin-left: 0.25em;
  234.         }
  235.         .nav-tabs .dropdown-menu {
  236.             position: absolute;
  237.             z-index: 1055;
  238.             min-width: 12rem;
  239.             padding: 0.5rem 0;
  240.             margin-top: 0;
  241.             background-color: var(--bs-body-bg, #fff);
  242.             border: 1px solid var(--bs-border-color, rgba(0,0,0,.15));
  243.             border-radius: 0.375rem;
  244.             box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  245.         }
  246.         .nav-tabs .dropdown-item {
  247.             padding: 0.5rem 1rem;
  248.             font-size: 0.875rem;
  249.         }
  250.         .nav-tabs .dropdown-item:hover,
  251.         .nav-tabs .dropdown-item:focus {
  252.             background-color: var(--bs-tertiary-bg, #f8f9fa);
  253.         }
  254.         .nav-tabs .dropdown-item.active {
  255.             background-color: var(--bs-primary);
  256.             color: #fff;
  257.         }
  258.     </style>
  260.     {% block css %}{% endblock %}
  262.     <!-- Lucide Icons (loaded in head to prevent icon flash) -->
  263.     <script src="{{ asset('assets/velok/vendor/lucide/umd/lucide.min.js') }}"></script>
  264. </head>
  265. <body>
  266.     <div class="wrapper">
  267.         <!-- Sidebar Navigation -->
  268.         {% if is_granted('ROLE_READ_ONLY') %}
  269.             {{ include('main-nav-read-only.html.twig') }}
  270.         {% else %}
  271.             {{ include('main-nav.html.twig') }}
  272.         {% endif %}
  274.         <!-- Top Header -->
  275.         <header class="topbar d-flex">
  276.             <div class="container-fluid">
  277.                 <div class="navbar-header">
  278.                     <div class="d-flex align-items-center gap-2 ms-auto">
  279.                         <!-- Theme Color (Light/Dark) -->
  280.                         <div class="topbar-item">
  281.                             <button type="button" class="topbar-button fs-24" id="light-dark-mode" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Toggle Dark Mode">
  282.                                 <i data-lucide="moon" class="light-mode"></i>
  283.                                 <i data-lucide="sun" class="dark-mode"></i>
  284.                             </button>
  285.                         </div>
  287.                         <!-- User Info & Logout -->
  288.                         <div class="d-flex align-items-center gap-2">
  289.                             <span class="d-flex align-items-center gap-2">
  290.                                 <span class="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center" style="width: 28px; height: 28px; font-size: 12px; font-weight: 600;">
  291.                                     {{ app.user.username|first|upper }}
  292.                                 </span>
  293.                                 <span class="d-none d-md-block text-body fw-medium" style="font-size: 13px;">{{ app.user.username }}</span>
  294.                             </span>
  295.                             <a href="{{ path('app_logout') }}" class="btn btn-sm btn-outline-danger d-flex align-items-center gap-1" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Logout">
  296.                                 <i data-lucide="log-out" style="width: 14px; height: 14px;"></i>
  297.                                 <span class="d-none d-lg-inline">Logout</span>
  298.                             </a>
  299.                         </div>
  300.                     </div>
  301.                 </div>
  302.             </div>
  303.         </header>
  305.         <!-- Page Container -->
  306.         <div class="page-container">
  307.             <!-- Page Content -->
  308.             <div class="page-content">
  309.                 {% block toolbar %}
  310.                     {% if toolbarPage|default() %}
  311.                         <div class="page-title-box mb-4">
  312.                             <div class="d-flex align-items-center justify-content-between">
  313.                                 <h4 class="page-title mb-0">{{ toolbarPage }}</h4>
  314.                             </div>
  315.                         </div>
  316.                     {% endif %}
  317.                 {% endblock %}
  319.                 {% for label, messages in app.flashes %}
  320.                     {% for message in messages %}
  321.                         <div class="alert alert-{{ label == 'error' ? 'danger' : (label == 'notice' ? 'info' : label) }} alert-dismissible fade show" role="alert">
  322.                             {{ message }}
  323.                             <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  324.                         </div>
  325.                     {% endfor %}
  326.                 {% endfor %}
  328.                 {% block content %}{% endblock %}
  329.             </div>
  331.             <!-- Footer -->
  332.             <footer class="footer">
  333.                 <div class="container-fluid">
  334.                     <div class="row">
  335.                         <div class="col-12 text-center">
  336.                             {{ "now"|date("Y") }} &copy; Paynetics Admin. All rights reserved.
  337.                         </div>
  338.                     </div>
  339.                 </div>
  340.             </footer>
  341.         </div>
  342.     </div>
  344.     <!-- jQuery -->
  345.     <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
  347.     <!-- FOS JS Routing -->
  348.     <script src="{{ asset('bundles/fosjsrouting/js/router.min.js') }}"></script>
  349.     <script src="{{ path('fos_js_routing_js', { callback: 'fos.Router.setData' }) }}"></script>
  351.     <!-- Vendor JS (includes Bootstrap 5 bundle with Popper) -->
  352.     <script src="{{ asset('assets/velok/js/vendor.min.js') }}"></script>
  354.     <!-- Simplebar -->
  355.     <script src="{{ asset('assets/velok/vendor/simplebar/simplebar.min.js') }}"></script>
  357.     <!-- Initialize Lucide icons immediately (script loaded in head) -->
  358.     <script>if(typeof lucide!=='undefined'){lucide.createIcons();}</script>
  360.     <!-- Choices.js -->
  361.     <script src="{{ asset('assets/velok/vendor/choices.js/choices.min.js') }}"></script>
  363.     <!-- Select2 -->
  364.     <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
  366.     <!-- Flatpickr -->
  367.     <script src="{{ asset('assets/velok/vendor/flatpickr/flatpickr.min.js') }}"></script>
  368.     <script src="{{ asset('assets/velok/vendor/flatpickr/plugins/monthSelect/index.js') }}"></script>
  370.     <!-- Daterangepicker (requires moment.js) -->
  371.     <script src="{{ asset('assets/velok/vendor/daterangepicker/moment.min.js') }}"></script>
  372.     <script src="{{ asset('assets/velok/vendor/daterangepicker/daterangepicker.js') }}"></script>
  374.     <!-- GridJS -->
  375.     <script src="{{ asset('assets/velok/vendor/gridjs/gridjs.umd.js') }}"></script>
  377.     <!-- SweetAlert2 -->
  378.     <script src="{{ asset('assets/velok/vendor/sweetalert2/sweetalert2.min.js') }}"></script>
  380.     <!-- ApexCharts -->
  381.     <script src="{{ asset('assets/velok/vendor/apexcharts/apexcharts.min.js') }}"></script>
  383.     <!-- App JS -->
  384.     <script src="{{ asset('assets/velok/js/config.js') }}"></script>
  385.     <script src="{{ asset('assets/velok/js/layout.js') }}"></script>
  386.     <script src="{{ asset('assets/velok/js/app.js') }}"></script>
  388.     <!-- Initialize theme config immediately to prevent flash -->
  389.     <script>
  390.         if (typeof loadConfig === 'function') {
  391.             loadConfig();
  392.         }
  393.     </script>
  395.     <script>
  396.         document.addEventListener('DOMContentLoaded', function() {
  397.             // Theme toggle handler
  398.             var themeToggle = document.getElementById('light-dark-mode');
  399.             if (themeToggle) {
  400.                 themeToggle.addEventListener('click', function() {
  401.                     var currentTheme = document.documentElement.getAttribute('data-bs-theme') || 'light';
  402.                     var newTheme = currentTheme === 'dark' ? 'light' : 'dark';
  403.                     
  404.                     // Apply new theme
  405.                     document.documentElement.setAttribute('data-bs-theme', newTheme);
  406.                     
  407.                     // Save to cookie (365 days)
  408.                     if (typeof window.setThemeCookie === 'function') {
  409.                         window.setThemeCookie('theme', newTheme, 365);
  410.                     }
  411.                     
  412.                     window.currentTheme = newTheme;
  413.                     
  414.                     // Re-initialize Lucide icons after theme change
  415.                     if (typeof lucide !== 'undefined') {
  416.                         lucide.createIcons();
  417.                     }
  418.                 });
  419.             }
  420.             
  421.             // Initialize theme layout (includes dark mode toggle)
  422.             if (typeof loadLayout === 'function') {
  423.                 loadLayout();
  424.             }
  426.             // Initialize app components
  427.             if (typeof loadApps === 'function') {
  428.                 loadApps();
  429.             }
  431.             // Initialize Lucide icons
  432.             if (typeof lucide !== 'undefined') {
  433.                 lucide.createIcons();
  434.             }
  436.             // Initialize Bootstrap components
  437.             var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
  438.             tooltipTriggerList.map(function (tooltipTriggerEl) {
  439.                 return new bootstrap.Tooltip(tooltipTriggerEl);
  440.             });
  441.             
  442.             // Initialize nav dropdowns (tabs and pills)
  443.             var navDropdowns = document.querySelectorAll('.nav-tabs .dropdown-toggle, .nav-pills .dropdown-toggle');
  444.             navDropdowns.forEach(function(dropdownToggle) {
  445.                 new bootstrap.Dropdown(dropdownToggle);
  446.             });
  448.             // Fix dropdowns inside .table-responsive containers being clipped by overflow
  449.             document.querySelectorAll('.table-responsive').forEach(function(container) {
  450.                 container.addEventListener('show.bs.dropdown', function() {
  451.                     container.style.overflow = 'visible';
  452.                 });
  453.                 container.addEventListener('hide.bs.dropdown', function() {
  454.                     container.style.overflow = '';
  455.                 });
  456.             });
  458.             // Initialize Select2 AJAX dropdowns using jQuery ready
  459.             jQuery(function($) {
  460.                 if ($.fn.select2) {
  461.                     // Custom AJAX transport to set proper headers for JSON response
  462.                     var jsonAjaxTransport = function(params, success, failure) {
  463.                         var $request = $.ajax({
  464.                             url: params.url,
  465.                             data: params.data,
  466.                             dataType: 'json',
  467.                             beforeSend: function(xhr) {
  468.                                 xhr.setRequestHeader('Content-Type', 'application/json');
  469.                                 xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
  470.                             }
  471.                         });
  472.                         $request.then(success);
  473.                         $request.fail(failure);
  474.                         return $request;
  475.                     };
  477.                     // Instance dropdowns
  478.                     if ($('.select2-ajax-instances').length) {
  479.                         $('.select2-ajax-instances').select2({
  480.                             theme: 'bootstrap-5',
  481.                             allowClear: true,
  482.                             width: '100%',
  483.                             placeholder: 'Type to search...',
  484.                             minimumInputLength: 1,
  485.                             ajax: {
  486.                                 url: function(params) {
  487.                                     return '/instances/' + (params.page || 1);
  488.                                 },
  489.                                 data: function(params) {
  490.                                     return { name: params.term };
  491.                                 },
  492.                                 transport: jsonAjaxTransport,
  493.                                 delay: 300,
  494.                                 cache: true,
  495.                                 processResults: function(data) {
  496.                                     var items = data && data.items ? data.items : [];
  497.                                     return {
  498.                                         results: items.map(function(item) {
  499.                                             return { id: item.token, text: item.name };
  500.                                         }),
  501.                                         pagination: { more: items.length >= 20 }
  502.                                     };
  503.                                 },
  504.                                 error: function(xhr, status, error) {
  505.                                     console.error('Instance AJAX error:', status, error);
  506.                                 }
  507.                             }
  508.                         });
  509.                     }
  511.                     // Merchant dropdowns
  512.                     if ($('.select2-ajax-merchants').length) {
  513.                         $('.select2-ajax-merchants').select2({
  514.                             theme: 'bootstrap-5',
  515.                             allowClear: true,
  516.                             width: '100%',
  517.                             placeholder: 'Type to search...',
  518.                             minimumInputLength: 1,
  519.                             ajax: {
  520.                                 url: function(params) {
  521.                                     return '/merchants/' + (params.page || 1);
  522.                                 },
  523.                                 data: function(params) {
  524.                                     return { name: params.term };
  525.                                 },
  526.                                 transport: jsonAjaxTransport,
  527.                                 delay: 300,
  528.                                 cache: true,
  529.                                 processResults: function(data) {
  530.                                     var items = data && data.items ? data.items : [];
  531.                                     return {
  532.                                         results: items.map(function(item) {
  533.                                             return { id: item.token, text: item.name };
  534.                                         }),
  535.                                         pagination: { more: items.length >= 20 }
  536.                                     };
  537.                                 },
  538.                                 error: function(xhr, status, error) {
  539.                                     console.error('Merchant AJAX error:', status, error);
  540.                                 }
  541.                             }
  542.                         });
  543.                     }
  545.                     // Program dropdowns
  546.                     if ($('.select2-ajax-programs').length) {
  547.                         $('.select2-ajax-programs').select2({
  548.                             theme: 'bootstrap-5',
  549.                             allowClear: true,
  550.                             width: '100%',
  551.                             placeholder: 'Type to search...',
  552.                             minimumInputLength: 1,
  553.                             ajax: {
  554.                                 url: function(params) {
  555.                                     return '/programs/' + (params.page || 1);
  556.                                 },
  557.                                 data: function(params) {
  558.                                     return { name: params.term };
  559.                                 },
  560.                                 transport: jsonAjaxTransport,
  561.                                 delay: 300,
  562.                                 cache: true,
  563.                                 processResults: function(data) {
  564.                                     var items = data && data.items ? data.items : [];
  565.                                     return {
  566.                                         results: items.map(function(item) {
  567.                                             return { id: item.token, text: item.name };
  568.                                         }),
  569.                                         pagination: { more: items.length >= 20 }
  570.                                     };
  571.                                 },
  572.                                 error: function(xhr, status, error) {
  573.                                     console.error('Program AJAX error:', status, error);
  574.                                 }
  575.                             }
  576.                         });
  577.                     }
  579.                     // Static select2 dropdowns (non-AJAX)
  580.                     if ($('.select2-static').length) {
  581.                         $('.select2-static').each(function() {
  582.                             var $select = $(this);
  583.                             var placeholder = $select.attr('data-placeholder') || $select.attr('placeholder') || $select.find('option[value=""]').text() || 'Select...';
  584.                             $select.select2({
  585.                                 theme: 'bootstrap-5',
  586.                                 allowClear: true,
  587.                                 width: '100%',
  588.                                 placeholder: placeholder
  589.                             });
  590.                         });
  591.                     }
  593.                     console.log('Select2 initialized for', 
  594.                         $('.select2-ajax-instances').length, 'instances,',
  595.                         $('.select2-ajax-merchants').length, 'merchants,',
  596.                         $('.select2-ajax-programs').length, 'programs,',
  597.                         $('.select2-static').length, 'static dropdowns'
  598.                     );
  599.                 } else {
  600.                     console.warn('Select2 not loaded');
  601.                 }
  602.             });
  603.         });
  604.     </script>
  606.     {% block js %}{% endblock %}
  608.     <!-- n8n Chat Widget -->
  609.     <div id="n8n-chat-container"></div>
  610.     <link href="https://cdn.jsdelivr.net/npm/@n8n/chat/dist/style.css" rel="stylesheet" />
  611.     <script type="module">
  612.         import { createChat } from 'https://cdn.jsdelivr.net/npm/@n8n/chat/dist/chat.bundle.es.js';
  614.         createChat({
  615.             target: '#n8n-chat-container',
  616.             webhookUrl: 'https://dnstart.app.n8n.cloud/webhook/04149076-d358-4fab-8961-7c38e09477d7/chat',
  617.             mode: 'window',
  618.             showWelcomeScreen: true,
  619.             defaultLanguage: 'en',
  620.             initialMessages: [
  621.                 'Hello! ðŸ‘‹',
  622.                 'How can I help you today?'
  623.             ],
  624.             i18n: {
  625.                 en: {
  626.                     title: 'Admin Assistant',
  627.                     subtitle: 'Powered by n8n',
  628.                     footer: '',
  629.                     getStarted: 'Start Chat',
  630.                     inputPlaceholder: 'Type your question...',
  631.                 }
  632.             }
  633.         });
  634.     </script>
  635.     <style>
  636.         /* n8n Chat Widget Positioning */
  637.         #n8n-chat-container {
  638.             position: fixed;
  639.             bottom: 0;
  640.             right: 0;
  641.             z-index: 9999;
  642.         }
  643.     </style>
  644. </body>
  645. </html>