<%- include('../operationsContent/assets.ejs') %>
<% const replied = complaint.status === 'replied' || Boolean(complaint.reply); %>
<main class="kt-ops" data-ops-page
  data-ops-required-message="<%= i18n.__('operationsContent.validationRequired') %>"
  data-ops-action-success="<%= i18n.__('operationsContent.actionSuccess') %>"
  data-ops-action-error="<%= i18n.__('complaints.sendReplyErrorMessage') %>">
  <div class="kt-ops__stack">
    <%- include('../operationsContent/hero.ejs', {
      heading: i18n.__('complaints.complaint') + ' #' + complaint.complaintNumber,
      description: i18n.__('operationsContent.detailsDescription'),
      icon: 'ti-message-report', count: 0, showCount: false,
      primaryUrl: null, primaryLabel: null, backUrl: '/dashboard/complaints'
    }) %>
    <section class="kt-ops-section">
      <header class="kt-ops-section__header"><span class="kt-ops-section-icon"><i class="ti ti-user-shield"></i></span><div><h2><%= i18n.__('operationsContent.identitySection') %></h2><p>#<%= complaint.complaintNumber %></p></div></header>
      <div class="kt-ops-section__body"><div class="kt-ops-details-grid">
        <div class="kt-ops-detail"><span class="kt-ops-detail__label"><%= i18n.__('complaints.name') %></span><strong class="kt-ops-detail__value"><%= complaint.name || i18n.__('operationsContent.noData') %></strong></div>
        <div class="kt-ops-detail" dir="ltr"><span class="kt-ops-detail__label"><%= i18n.__('complaints.phone') %></span><strong class="kt-ops-detail__value"><%= complaint.phone || i18n.__('operationsContent.noData') %></strong></div>
        <div class="kt-ops-detail"><span class="kt-ops-detail__label"><%= i18n.__('operationsContent.status') %></span><span class="kt-ops-status <%= replied ? 'kt-ops-status--success' : 'kt-ops-status--warning' %>"><%= i18n.__(replied ? 'operationsContent.replied' : 'operationsContent.notReplied') %></span></div>
        <div class="kt-ops-detail"><span class="kt-ops-detail__label"><%= i18n.__('operationsContent.createdAt') %></span><strong class="kt-ops-detail__value"><%= complaint.createdAt ? moment(complaint.createdAt).locale(user.lang || 'ar').format('YYYY/MM/DD HH:mm') : i18n.__('operationsContent.noData') %></strong></div>
        <div class="kt-ops-detail kt-ops-detail--wide"><span class="kt-ops-detail__label"><%= i18n.__('complaints.title') %></span><strong class="kt-ops-detail__value"><%= complaint.title || i18n.__('operationsContent.noData') %></strong></div>
      </div></div>
    </section>
    <section class="kt-ops-section"><header class="kt-ops-section__header"><span class="kt-ops-section-icon"><i class="ti ti-message"></i></span><div><h2><%= i18n.__('operationsContent.message') %></h2><p><%= i18n.__('complaints.complaint') %></p></div></header><div class="kt-ops-section__body"><div class="kt-ops-content-block"><%= complaint.message || i18n.__('operationsContent.noData') %></div></div></section>
    <% if (complaint.images && complaint.images.length) { %>
      <section class="kt-ops-section"><header class="kt-ops-section__header"><span class="kt-ops-section-icon"><i class="ti ti-photo"></i></span><div><h2><%= i18n.__('complaints.images') %></h2><p><%= complaint.images.length %></p></div></header><div class="kt-ops-section__body"><div class="kt-ops-form-grid">
        <% complaint.images.forEach(function(image) { %><a class="kt-ops-media" data-ops-media-wrap href="/assets/uploads/complaints/<%= complaint._id %>/<%= image %>" target="_blank" rel="noopener"><img src="/assets/uploads/complaints/<%= complaint._id %>/<%= image %>" alt="" data-ops-media><span class="kt-ops-media__fallback" data-ops-media-fallback hidden><span class="kt-ops-media__fallback-icon"><i class="ti ti-photo-off"></i></span><span><%= i18n.__('operationsContent.imageUnavailable') %></span></span></a><% }) %>
      </div></div></section>
    <% } %>
    <% if (replied) { %><section class="kt-ops-section"><header class="kt-ops-section__header"><span class="kt-ops-section-icon"><i class="ti ti-message-check"></i></span><div><h2><%= i18n.__('complaints.reply') %></h2><p><%= complaint.repliedAt ? moment(complaint.repliedAt).locale(user.lang || 'ar').format('YYYY/MM/DD HH:mm') : '' %></p></div></header><div class="kt-ops-section__body"><div class="kt-ops-content-block"><%= complaint.reply %></div></div></section><% } %>
    <% if (!replied) { %><div class="kt-ops-details__footer"><button class="kt-ops-btn kt-ops-btn--primary" type="button" data-ops-modal-target="#complaint-reply-modal"><i class="ti ti-send"></i><span><%= i18n.__('complaints.sendReply') %></span></button></div><% } %>
  </div>
  <% if (!replied) { %><%- include('./reply.ejs', { complaint, csrfToken }) %><% } %>
</main>
<%- include('../operationsContent/scripts.ejs') %>
