<link rel="stylesheet" href="/admin/assets/css/pages/providers.css?v=2.8.1">

<%
  const isArabic = typeof lang === 'undefined' || lang !== 'en';
  const providerName = provider?.name || (isArabic ? 'مقدم خدمة' : 'Service provider');
  const initials = String(providerName).trim().split(/\s+/).filter(Boolean).slice(0, 2).map((part) => part.charAt(0)).join('').toUpperCase() || 'KT';
  const isBlocked = provider?.status === 'block';
  const isActive = provider?.active !== false && !isBlocked;
%>

<main class="kt-provider-profile-page" data-provider-profile>
  <header class="kt-provider-profile-hero">
    <div class="kt-provider-profile-hero__identity">
      <div class="kt-provider-profile-avatar" data-provider-avatar-shell>
        <% if (provider?.avatar) { %>
          <img src="<%= provider.avatar %>" alt="<%= providerName %>" loading="lazy" data-provider-avatar>
        <% } %>
        <span class="kt-provider-profile-avatar__fallback"<%= provider?.avatar ? ' hidden' : '' %>><%= initials %></span>
        <span class="kt-provider-profile-avatar__status <%= isActive ? 'is-online' : '' %>" aria-hidden="true"></span>
      </div>
      <div class="kt-provider-profile-hero__copy">
        <span class="kt-provider-profile-hero__eyebrow"><%= isArabic ? 'ملف مقدم الخدمة' : 'Provider profile' %></span>
        <h1><%= providerName %></h1>
        <p><%= isArabic ? 'راجع الهوية، حالة الوصول، وبيانات التشغيل من مساحة واحدة.' : 'Review identity, access status, and operations from one workspace.' %></p>
        <div class="kt-provider-profile-chips">
          <span class="kt-provider-chip <%= isBlocked ? 'kt-provider-chip--danger' : 'kt-provider-chip--success' %>">
            <i class="ti <%= isBlocked ? 'ti-lock' : 'ti-shield-check' %>" aria-hidden="true"></i>
            <%= isBlocked ? (isArabic ? 'محظور' : 'Blocked') : (provider?.statusText || (isArabic ? 'نشط' : 'Active')) %>
          </span>
          <span class="kt-provider-chip <%= isActive ? 'kt-provider-chip--success' : 'kt-provider-chip--warning' %>">
            <i class="ti ti-activity" aria-hidden="true"></i>
            <%= isActive ? (isArabic ? 'الوصول مفعل' : 'Access enabled') : (isArabic ? 'الوصول متوقف' : 'Access disabled') %>
          </span>
          <span class="kt-provider-chip kt-provider-chip--primary" dir="ltr">#<%= provider?.providerNumber || provider?.id || '—' %></span>
        </div>
      </div>
    </div>

    <div class="kt-provider-profile-hero__actions" aria-label="<%= isArabic ? 'إجراءات مقدم الخدمة' : 'Provider actions' %>">
      <a href="/dashboard/providers/edit/<%= provider.id %>" class="kt-provider-profile-action kt-provider-profile-action--primary">
        <i class="ti ti-edit" aria-hidden="true"></i><span><%= i18n.__('common.edit') %></span>
      </a>
      <button type="button" class="kt-provider-profile-action kt-provider-profile-action--danger" data-provider-profile-delete>
        <i class="ti ti-trash" aria-hidden="true"></i><span><%= i18n.__('common.delete') %></span>
      </button>
    </div>
  </header>

  <nav class="kt-provider-profile-nav" aria-label="<%= isArabic ? 'أقسام ملف مقدم الخدمة' : 'Provider profile sections' %>">
    <a data-href="/dashboard/providers/mainInfo/<%= provider.id %>" class="kt-provider-profile-nav__item ajax-link is-active">
      <i class="ti ti-id" aria-hidden="true"></i><span><%= i18n.__('providers.providerInfo') %></span>
    </a>
    <a data-href="/dashboard/providers/orders/<%= provider.id %>" class="kt-provider-profile-nav__item ajax-link">
      <i class="ti ti-shopping-bag" aria-hidden="true"></i><span><%= i18n.__('orders.orders') %></span>
    </a>
  </nav>

  <div class="kt-provider-profile-grid">
    <section class="kt-provider-profile-main refreshed-data" aria-live="polite" aria-busy="false">
      <%- include('./parts/mainInfo.ejs') %>
    </section>

    <aside class="kt-provider-profile-aside">
      <details class="kt-provider-communication" open>
        <summary><span><i class="ti ti-bell" aria-hidden="true"></i><%= i18n.__('providers.sendNotifyToProvider') %></span><i class="ti ti-chevron-down" aria-hidden="true"></i></summary>
        <div class="kt-provider-communication__body"><%- include('./parts/notify.ejs') %></div>
      </details>
      <details class="kt-provider-communication">
        <summary><span><i class="ti ti-message" aria-hidden="true"></i><%= i18n.__('providers.sendSMStoProvider') %></span><i class="ti ti-chevron-down" aria-hidden="true"></i></summary>
        <div class="kt-provider-communication__body"><%- include('./parts/sms.ejs') %></div>
      </details>
    </aside>
  </div>
</main>

<div class="kt-provider-profile-modal" role="alertdialog" aria-modal="true" aria-labelledby="provider-profile-delete-title" aria-describedby="provider-profile-delete-description" data-provider-profile-modal hidden>
  <button type="button" class="kt-provider-profile-modal__backdrop" aria-label="<%= i18n.__('common.cancel') %>" data-provider-profile-modal-close></button>
  <section class="kt-provider-profile-modal__panel">
    <span class="kt-provider-profile-modal__icon" aria-hidden="true"><i class="ti ti-trash"></i></span>
    <h2 id="provider-profile-delete-title"><%= isArabic ? 'حذف مقدم الخدمة؟' : 'Delete provider?' %></h2>
    <p id="provider-profile-delete-description"><%= isArabic ? 'سيتم حذف مقدم الخدمة من السجل. لا يمكن التراجع عن هذه العملية.' : 'The provider will be removed from the directory. This action cannot be undone.' %></p>
    <div class="kt-provider-profile-modal__actions">
      <button type="button" class="kt-provider-profile-modal__button kt-provider-profile-modal__button--cancel" data-provider-profile-modal-close><%= i18n.__('common.cancel') %></button>
      <button type="button" class="kt-provider-profile-modal__button kt-provider-profile-modal__button--confirm" data-provider-profile-modal-confirm><i class="ti ti-trash" aria-hidden="true"></i><span><%= i18n.__('common.delete') %></span></button>
    </div>
  </section>
</div>

<%- include('./includes.ejs') %>
<%- include('../../includes/notify.ejs'), { i18n } %>

<script>
  (function () {
    var root = document.querySelector('[data-provider-profile]');
    if (!root) return;
    var modal = document.querySelector('[data-provider-profile-modal]');
    var deleteTrigger = root.querySelector('[data-provider-profile-delete]');
    var deleteConfirm = modal && modal.querySelector('[data-provider-profile-modal-confirm]');
    var deleteBusy = false;

    var image = root.querySelector('[data-provider-avatar]');
    if (image) image.addEventListener('error', function () {
      image.hidden = true;
      var fallback = root.querySelector('.kt-provider-profile-avatar__fallback');
      if (fallback) fallback.hidden = false;
    }, { once: true });

    function closeDeleteModal() {
      if (!modal || deleteBusy) return;
      modal.hidden = true;
      document.body.classList.remove('kt-modal-open');
      if (deleteTrigger) deleteTrigger.focus();
    }

    if (deleteTrigger && modal) deleteTrigger.addEventListener('click', function () {
      modal.hidden = false;
      document.body.classList.add('kt-modal-open');
      var cancel = modal.querySelector('[data-provider-profile-modal-close]');
      if (cancel) cancel.focus();
    });

    if (modal) modal.addEventListener('click', function (event) {
      if (event.target.closest('[data-provider-profile-modal-close]')) closeDeleteModal();
    });

    document.addEventListener('keydown', function (event) {
      if (event.key === 'Escape' && modal && !modal.hidden) closeDeleteModal();
    });

    if (deleteConfirm) deleteConfirm.addEventListener('click', function () {
      if (deleteBusy) return;
      deleteBusy = true;
      deleteConfirm.disabled = true;
      deleteConfirm.classList.add('is-loading');
      var token = document.querySelector('meta[name="csrf-token"]')?.content || '<%= csrfToken %>';
      var body = new URLSearchParams();
      body.append('_csrf', token);
      body.append('ids[]', '<%= provider.id %>');

      fetch('/dashboard/providers/delete', {
        method: 'DELETE',
        credentials: 'same-origin',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8', 'X-CSRF-Token': token, Accept: 'application/json' },
        body: body.toString()
      }).then(function (response) {
        return response.json().catch(function () { return {}; }).then(function (payload) {
          if (!response.ok) throw new Error(payload.message || '<%= isArabic ? 'تعذر حذف مقدم الخدمة' : 'Unable to delete provider' %>');
          return payload;
        });
      }).then(function (payload) {
        window.location.assign(payload?.data?.url || '/dashboard/providers/all');
      }).catch(function (error) {
        if (window.KamTeswaToast?.error) window.KamTeswaToast.error(error.message);
        deleteBusy = false;
        deleteConfirm.disabled = false;
        deleteConfirm.classList.remove('is-loading');
      });
    });

    root.addEventListener('click', function (event) {
      var link = event.target.closest('.ajax-link');
      if (!link) return;
      event.preventDefault();
      var url = link.dataset.href;
      var target = root.querySelector('.refreshed-data');
      if (!url || !target || target.getAttribute('aria-busy') === 'true') return;

      root.querySelectorAll('.kt-provider-profile-nav__item').forEach(function (item) {
        item.classList.toggle('is-active', item === link);
      });
      target.setAttribute('aria-busy', 'true');
      target.classList.add('is-loading');

      fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest', Accept: 'text/html' }, credentials: 'same-origin' })
        .then(function (response) {
          if (!response.ok) throw new Error('provider-section-failed');
          return response.text();
        })
        .then(function (html) {
          target.innerHTML = html;
          if (url.indexOf('mainInfo') !== -1 && typeof window.findLocation === 'function') window.findLocation();
        })
        .catch(function () {
          if (window.KamTeswaToast) window.KamTeswaToast.error('<%= isArabic ? 'تعذر تحميل القسم' : 'Unable to load section' %>');
        })
        .finally(function () {
          target.setAttribute('aria-busy', 'false');
          target.classList.remove('is-loading');
        });
    });
  })();
</script>
