<% title = trans.cruds.MODULE.ORDER + ' ' + trans.global.view + ' - ' + companyInfo.NAME %>
<%- include('./dispute-style') %>

<div class="container-fluid">
    <!-- Page Title and Breadcrumb -->
    <div class="page-title">
        <div class="row align-items-center">
            <div class="col-sm-6 col-12">
                <h2><%= trans.cruds.DISPUTE_ORDER?.title %></h2>
            </div>
            <div class="col-sm-6 col-12">
                <ol class="breadcrumb float-sm-end">
                    <li class="breadcrumb-item"><a href="/admin/dashboard"><i class="iconly-Home icli svg-color"></i> <%= trans.global.home %></a></li>
                    <li class="breadcrumb-item"><a href="/admin/orders"><%= trans.cruds.ORDER?.title_singular || trans.global.view %></a></li>
                    <li class="breadcrumb-item active">Dispute - <%= dispute.orderId._id %></li>
                </ol>
            </div>
        </div>
    </div>

    <!-- new code -->
     <div class="dispute-container">
        <!-- Header -->
        <div class="dispute-header">
            <h3><%= trans.cruds.DISPUTE_ORDER.fields.order_dispute_details %></h3>
            <div class="status-badge status-<%= dispute.status === 'resolved' ? 'resolved' : dispute.status === 'discussion' ? 'discussion' : 'open' %>">
                <%= dispute.status === 'resolved' ? '✓' : dispute.status === 'discussion' ? '' : '' %>
                <%= dispute.status.toUpperCase() %>
            </div>
        </div>

        <!-- Information Cards Grid -->
        <div class="info-grid">
            <!-- Order Information -->
            <div class="info-card">
                <div class="card-header header-order">
                    📦 <%= trans.cruds.DISPUTE_ORDER.fields.order_information %>
                </div>
                <div class="card-body">
                    <div class="info-row">    
                        <span class="info-label"><%= trans.cruds.DISPUTE_ORDER.fields.orderId %></span>
                        <span class="info-value"><%= dispute.orderId._id %></span>
                    </div>
                    <div class="info-row">
                        <span class="info-label"><%= trans.cruds.DISPUTE_ORDER.fields.order_date %></span>
                        <span class="info-value"><%= new Date(dispute.orderId.createdAt).toLocaleDateString() %></span>
                    </div>
                    <div class="info-row">
                        <span class="info-label"><%= trans.cruds.DISPUTE_ORDER.fields.total_amount %></span>
                        <span class="info-value price-highlight">SAR <%= dispute.orderId.totalAmount %></span>
                    </div>
                </div>
            </div>

            <!-- Dispute Information -->
            <div class="info-card">
                <div class="card-header header-dispute">
                    ⚠️ <%= trans.cruds.DISPUTE_ORDER.fields.dispute_information %>
                </div>
                <div class="card-body">
                    <div class="info-row">
                        <span class="info-label"><%= trans.cruds.DISPUTE_ORDER.fields.dispute_created %></span>
                        <span class="info-value"><%= new Date(dispute.createdAt).toLocaleString() %></span>
                    </div>
                    <div class="info-row">
                        <span class="info-label"><%= trans.cruds.DISPUTE_ORDER.fields.initiator %></span>
                        <span class="info-value"><%= trans.cruds.DISPUTE_ORDER.fields.buyer %></span>
                    </div>
                    <div class="info-row">
                        <span class="info-label"><%= trans.cruds.DISPUTE_ORDER.fields.current_status %></span>
                        <span class="info-value">
                            <span class="mini-badge"><%= dispute.status.toUpperCase() %></span>
                        </span>
                    </div>
                </div>
            </div>

            <!-- Product Information -->
            <% if (dispute?.orderId?.products && dispute?.orderId?.products?.productSnapshot) { %>
            <div class="info-card">
                <div class="card-header header-product">
                    🛍️ <%= trans.cruds.DISPUTE_ORDER.fields.product_information %>
                </div>
                <div class="card-body">
                    <% const product = dispute.orderId.products.productSnapshot; %>
                    <div class="product-display">
                        <% if (product['upload-feature-image'] && product['upload-feature-image'].content) { %>
                            <img src="<%= isFileExists('storage/post' + product['upload-feature-image'].content) && product['upload-feature-image'].content.meta.files[0].location ? product['upload-feature-image'].meta.files[0].location : '/backend/images/dummy-image.jpg' %>" 
                                 alt="<%= product.title ? product.title.content : 'Product' %>"
                                 class="product-image">
                        <% } else { %>
                            <img src="/backend/images/dummy-image.jpg" alt="Product" class="product-image">
                        <% } %>
                        <div class="product-info">
                            <h3><%= product.title ? product.title.content : 'Product' %></h3>
                            <p class="product-desc">
                                <%= product['short-description'] ? (product['short-description'].content.length > 80 ? product['short-description'].content.substring(0, 80) + '...' : product['short-description'].content) : 'No description available' %>
                            </p>
                        </div>
                    </div>
                    <div class="info-row">
                        <span class="info-label"><%= trans.cruds.DISPUTE_ORDER.fields.original_price %></span>
                        <span class="info-value">SAR <%= product.price ? product.price.content : 'N/A' %></span>
                    </div>
                    <div class="info-row">
                        <span class="info-label"><%= trans.cruds.DISPUTE_ORDER.fields.negotiated_price %></span>
                        <span class="info-value price-highlight">SAR <%= dispute.orderId.products.negotiatePrice %></span>
                    </div>
                </div>
            </div>
            <% } %>
        </div>

        <!-- Users Section -->
        <div class="users-section">
            <!-- Buyer Card -->
            <div class="user-card">
                <div class="user-header header-buyer">
                    👤 <%= trans.cruds.DISPUTE_ORDER.fields.buyer_initiator %>
                </div>
                <div class="user-content">
                    <div class="user-profile">
                        <% if (initiator.profile_image) { %>
                            <img src="<%= initiator.profile_image %>" alt="<%= initiator.first_name %>" class="user-avatar">
                        <% } else { %>
                            <div class="user-avatar-placeholder">
                                <%= initiator.first_name.charAt(0).toUpperCase() %>
                            </div>
                        <% } %>
                        <div class="user-details">
                            <h3><%= initiator.first_name %> <%= initiator.last_name %></h3>
                            <p class="user-email"><%= initiator.email %></p>
                            <span class="user-badge badge-buyer"><%= trans.cruds.DISPUTE_ORDER.fields.buyer %></span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Seller Card -->
            <div class="user-card">
                <div class="user-header header-seller">
                    👤 <%= trans.cruds.DISPUTE_ORDER.fields.seller_opponent %>
                </div>
                <div class="user-content">
                    <div class="user-profile">
                        <% if (opponent.profile_image) { %>
                            <img src="<%= opponent.profile_image %>" alt="<%= opponent.first_name %>" class="user-avatar">
                        <% } else { %>
                            <div class="user-avatar-placeholder">
                                <%= opponent.first_name.charAt(0).toUpperCase() %>
                            </div>
                        <% } %>
                        <div class="user-details">
                            <h3><%= opponent.first_name %> <%= opponent.last_name %></h3>
                            <p class="user-email"><%= opponent.email %></p>
                            <span class="user-badge badge-seller"><%= trans.cruds.DISPUTE_ORDER.fields.seller %></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- end -->
    
    <!-- Chat/Conversation Section -->
    <div class="chat-section mb-5">
        <div class="chat-header">
            <h2>
                💬 <%= trans.cruds.DISPUTE_ORDER.fields.conversation %>
                <span class="message-count-badge">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
                        <polyline points="22,6 12,13 2,6"></polyline>
                    </svg>
                    <span><%= disputeHistory ? disputeHistory.length : 0 %></span>
                </span>
            </h2>

            <div class="filter-group">
                <button class="filter-btn active" data-filter="all"><%= trans.cruds.DISPUTE_ORDER.fields.all %></button>
                <button class="filter-btn" data-filter="buyer_seller"><%= trans.cruds.DISPUTE_ORDER.fields.buyer_and_seller %></button>
            </div>
        </div>

        <div class="chat-container">
            <% if (disputeHistory && disputeHistory.length > 0) { 
                disputeHistory.forEach((history, index) => { 
                    const isBuyer = history.action === 'buyer_message';
                    const isSeller = history.action === 'seller_message';
                    const isAdmin = history.action === 'admin_message';
                    const isInitiator = (isBuyer && dispute.userType === 'buyer') || (isSeller && dispute.userType === 'seller');
                    
                    let user;
                    if (isBuyer) user = dispute.userType === 'buyer' ? initiator : orderBuyer;
                    if (isSeller) user = dispute.userType === 'seller' ? initiator : orderSeller;
                    
                    let filterClasses = '';
                    if (isBuyer) filterClasses += ' buyer-message';
                    if (isSeller) filterClasses += ' seller-message';
                    if (isAdmin) filterClasses += ' admin-message';
                    
                    const recipients = history.recipients || [];
                    const hasBuyer = recipients.includes('buyer');
                    const hasSeller = recipients.includes('seller');
                    
                    if (isAdmin) {
                        if (hasBuyer && hasSeller) {
                            filterClasses += ' admin-both';
                        } else if (hasBuyer) {
                            filterClasses += ' admin-buyer';
                        } else if (hasSeller) {
                            filterClasses += ' admin-seller';
                        }
                    }
            %>
                <div class="message-item <%= isInitiator ? 'sent' : 'received' %><%= filterClasses %>" 
                        data-filter="<%= filterClasses.trim() %>"
                        style="--message-index: <%= index + 1 %>">
                    
                    <!-- Avatar -->
                    <% if (user && user.profile_image) { %>
                        <img src="<%= user.profile_image %>" alt="<%= user.first_name %>" class="message-avatar">
                    <% } else if (user) { %>
                        <div class="message-avatar-placeholder <%= isBuyer ? 'avatar-buyer' : isSeller ? 'avatar-seller' : 'avatar-admin' %>">
                            <%= user.first_name ? user.first_name.charAt(0).toUpperCase() : 'U' %>
                        </div>
                    <% } else if (isAdmin) { %>
                        <div class="message-avatar-placeholder avatar-admin">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
                            </svg>
                        </div>
                    <% } %>

                    <!-- Message Content -->
                    <div class="message-content">
                        <!-- Header -->
                        <div class="message-header">
                            <span class="sender-name">
                                <%= isAdmin ? 'System Administrator' : (user ? user.first_name + ' ' + user.last_name : 'User') %>
                            </span>
                            <% if (isBuyer) { %>
                                <span class="role-badge buyer"><%= trans.cruds.DISPUTE_ORDER.fields.buyer %></span>
                            <% } else if (isSeller) { %>
                                <span class="role-badge seller"><%= trans.cruds.DISPUTE_ORDER.fields.seller %></span>
                            <% } else if (isAdmin) { %>
                                <span class="role-badge admin"><%= trans.cruds.DISPUTE_ORDER.fields.admin %></span>
                            <% } %>
                        </div>

                        <!-- Message Bubble -->
                        <div class="message-bubble <%= isInitiator ? 'sent' : isAdmin ? 'admin' : 'received' %>">
                            <% if (history.message) { %>
                                <p class="message-text"><%= history.message %></p>
                            <% } %>

                            <!-- Adjustment Card -->
                            <% if (history.adjustment) { 
                                const originalAmount = dispute.orderId.totalAmount;
                                const percentage = history.adjustment.percentage;
                                const newAmount = originalAmount - (originalAmount * percentage / 100);
                            %>
                                <div class="adjustment-card">
                                    <div class="adjustment-inner">
                                        <div class="adjustment-header">
                                            <div class="adjustment-title">
                                                <span class="adjustment-icon">💰</span>
                                                <span><%= trans.cruds.DISPUTE_ORDER.fields.adjust_amount %></span>
                                            </div>
                                            <div class="percentage-badge"><%= percentage %>%</div>
                                        </div>
                                        
                                        <div class="amount-section">
                                            <div class="amount-item">
                                                <div class="amount-label"><%= trans.cruds.DISPUTE_ORDER.fields.original %></div>
                                                <div class="amount-value">SAR <%= originalAmount %></div>
                                            </div>
                                            
                                            <div class="amount-divider">→</div>
                                            
                                            <div class="amount-item">
                                                <div class="amount-label"><%= trans.cruds.DISPUTE_ORDER.fields.new %></div>
                                                <div class="amount-value">SAR <%= newAmount.toFixed(2) %></div>
                                            </div>
                                        </div>

                                        <div class="status-row">
                                            <div class="status-item">
                                                <div class="status-label">
                                                    <span class="status-label-icon">🛍️</span>
                                                    <span><%= trans.cruds.DISPUTE_ORDER.fields.buyer %></span>
                                                </div>
                                                <div class="status-badge status-<%= history.adjustment.responseBuyer.status %>">
                                                    <%= history.adjustment.responseBuyer.status %>
                                                </div>
                                            </div>
                                            
                                            <div class="status-item">
                                                <div class="status-label">
                                                    <span class="status-label-icon">🏪</span>
                                                    <span><%= trans.cruds.DISPUTE_ORDER.fields.seller %></span>
                                                </div>
                                                <div class="status-badge status-<%= history.adjustment.responseSeller.status %>">
                                                    <%= history.adjustment.responseSeller.status %>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            <% } %>

                            <!-- Evidence/Attachments -->
                            <% if (history.evidence && history.evidence.length > 0) { %>
                                <div class="evidence-container">
                                    <% history.evidence.forEach((file, idx) => { 
                                        const isImage = file && file.mimetype && file.mimetype.startsWith('image/');
                                        const isVideo = file && file.mimetype && file.mimetype.startsWith('video/');
                                        const isPDF = file && file.mimetype && file.mimetype === 'application/pdf';
                                        
                                        let fileIcon = 'fa-file';
                                        let iconColor = '#6b7280';
                                        if (isImage) { fileIcon = 'fa-image'; iconColor = '#11998e'; }
                                        else if (isVideo) { fileIcon = 'fa-video'; iconColor = '#f5576c'; }
                                        else if (isPDF) { fileIcon = 'fa-file-pdf'; iconColor = '#f5576c'; }
                                    %>
                                        <div class="evidence-item">
                                            <% if (isImage && file.url) { %>
                                                <a href="<%= file.url %>" target="_blank">
                                                    <img src="<%= file.url %>" alt="Evidence" class="evidence-image">
                                                </a>
                                            <% } else if (isVideo && file.url) { %>
                                                <video controls class="evidence-image">
                                                    <source src="<%= file.url %>" type="<%= file.mimetype %>">
                                                </video>
                                            <% } else { %>
                                                <a href="<%= file.url %>" target="_blank" class="evidence-file">
                                                    <i class="fas <%= fileIcon %> file-icon" style="color: <%= iconColor %>"></i>
                                                    <span class="file-name"><%= file.originalName %></span>
                                                </a>
                                            <% } %>
                                            <% if (file.url) { %>
                                                <a href="<%= file.url %>" download class="download-btn">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                                                        <polyline points="7 10 12 15 17 10"></polyline>
                                                        <line x1="12" y1="15" x2="12" y2="3"></line>
                                                    </svg>
                                                </a>
                                            <% } %>
                                        </div>
                                    <% }) %>
                                </div>
                            <% } %>

                            <span class="message-time">
                                <%= new Date(history.createdAt).toLocaleString() %>
                            </span>
                        </div>

                        <!-- Recipients -->
                        <div class="recipients-info">
                            <span class="recipients-label"><%= trans.cruds.DISPUTE_ORDER.fields.sent_to %>:</span>
                            <% if (recipients.length > 0) { 
                                recipients.forEach(recipient => { 
                                    let badgeClass = '';
                                    let label = recipient;
                                    if (recipient === 'buyer') { badgeClass = 'role-badge buyer'; label = 'Buyer'; }
                                    else if (recipient === 'seller') { badgeClass = 'role-badge seller'; label = 'Seller'; }
                                    else if (recipient === 'admin') { badgeClass = 'role-badge admin'; label = 'Admin'; }
                            %>
                                <span class="<%= badgeClass %>"><%= label %></span>
                            <% }); } else { %>
                                <span class="recipient-badge" style="background: #e5e7eb; color: #6b7280;">None</span>
                            <% } %>
                        </div>
                    </div>
                </div>
            <% });
            } else { %>
                <div class="empty-chat">
                    <div class="empty-chat-icon">💬</div>
                    <p><%= trans.cruds.DISPUTE_ORDER.fields.no_messages %></p>
                </div>
            <% } %>
        </div>

        <% if (dispute.status !== 'resolved') { %>
        <div class="admin-command-center">
            <div class="admin-header-compact">
                <div class="admin-badge">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>
                    System Administrator
                </div>
                <div class="recipient-wrapper">
                    <span class="label-to"><%= trans.global.to %>:</span>
                    <select id="sendMessageTo" name="sendMessageTo" class="recipient-select-minimal">
                        <option value="both">Both Parties</option>
                        <option value="buyer">Buyer Only</option>
                        <option value="seller">Seller Only</option>
                    </select>
                </div>
            </div>

            <form id="disputeReplyForm" class="composer-form">
                <div class="composer-wrapper">
                    <div id="filePreviewContainer" class="file-preview-strip" style="display: none;"></div>

                    <textarea class="composer-input" 
                            name="message" 
                            rows="3" 
                            placeholder="<%= trans.cruds.DISPUTE_ORDER.fields.write_response %>"></textarea>

                    <div class="composer-toolbar">
                        <div class="toolbar-left">
                            <label class="icon-btn" title="Attach Files">
                                <input type="file" id="fileAttachment" name="attachments" multiple hidden accept="image/*,.pdf,.video" />
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path></svg>
                            </label>
                        </div>

                        <div class="toolbar-right">
                            <button type="button" class="text-action-btn btn-adjust" data-bs-toggle="modal" data-bs-target="#adjustAmountModal">
                                <span>SAR</span> <%= trans.cruds.DISPUTE_ORDER.fields.adjust %>
                            </button>
                            
                            <button type="button" class="text-action-btn btn-close-dispute" data-bs-toggle="modal" data-bs-target="#closeDisputeModal">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
                                <%= trans.cruds.DISPUTE_ORDER.fields.close %>
                            </button>

                            <div class="divider-vertical"></div>

                            <button type="submit" class="send-fab">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <% } %>
    </div>

</div>

<!-- Include Modals -->
<%- include("./dispute-modal") %>
<%- include("./adjustment-modal") %>

<!-- Include Scripts -->
<%- include("./script") %>