<div class="section">
    <h2 style="padding-bottom: 20px"><strong>Client Orders and Inquiries</strong></h2>
    <% if (orders && orders.length> 0) { %>
        <div class="list-group">
            <% orders.forEach(function(order) { %>
                <div class="list-group-item list-group-item-action mb-3">
                    <div class="d-flex w-100 justify-content-between">
                        <h4><strong>Order #<%= order.id %>: </strong>
                            <%= order.product_name %> (<%= order.quantity %>)
                        </h4>
                        <small class="text-muted">Ordered at: <%= order.created_at %></small>
                    </div>
                    <p class="mb-1"><strong>1. Client:</strong>
                        <%= order.user_email %>
                    </p>
                    <p class="mb-1"><strong>2. Expected:</strong>
                        <%= order.expected_date %>
                    </p>
                    <% if (order.comments) { %>
                        <p class="mb-1"><strong>3. Comments:</strong>
                            <%= order.comments %>
                        </p>
                        <% } %>
                            <p class="mb-1"><strong>4. Last Updated:</strong>
                                <%= order.last_updated %>
                            </p>
                            <h5 style="padding-bottom: 20px"><strong>> Order Status:</strong>
                                <span class="badge bg-primary ms-2">
                                    <%= order.status ? order.status.charAt(0).toUpperCase() + order.status.slice(1)
                                        : 'Pending' %>
                                </span>
                            </h5>

                            <!-- Action Buttons -->
                            <div class="d-flex flex-wrap gap-2">
                                <!-- Delete Button -->
                                <form method="POST" action="/admin/delete-order/<%= order.id %>" style="display:inline;"
                                    onsubmit="return confirm('Delete this order?');">
                                    <button type="submit" class="btn btn-danger btn-sm">Delete</button>
                                </form>

                                <a href="https://mail.google.com/mail/?view=cm&fs=1&to=<%= order.user_email %>&su=Regarding Order #<%= order.id %> - <%= order.product_name %>"
                                    target="_blank" class="btn btn-info btn-sm">Send An Email</a>

                                <% if (order.status==='received' || order.status==='inquiry received' ) { %>
                                    <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal"
                                        data-bs-target="#quotationModal"
                                        onclick="openQuotationModal('<%= order.id %>', '<%= order.user_email %>', '<%= order.product_name %>')">
                                        Send Quotation
                                    </button>
                                    <% } else if (order.status==='order placed' ) { %>
                                        <form method="POST" action="/admin/dispatch-order/<%= order.id %>"
                                            style="display:inline;" onsubmit="return confirm('Dispatch this order?');">
                                            <button type="submit" class="btn btn-primary btn-sm">
                                                <i class="fas fa-truck me-1"></i> Dispatch Order
                                            </button>
                                        </form>
                                        <% } else if (order.status==='dispatched' ) { %>
                                            <form method="POST" action="/admin/mark-delivered/<%= order.id %>"
                                                style="display:inline;"
                                                onsubmit="return confirm('Mark as delivered?');">
                                                <button type="submit" class="btn btn-success btn-sm">
                                                    <i class="fas fa-check me-1"></i> Send "Delivered" Message
                                                </button>
                                            </form>
                                            <% } %>
                            </div>
                </div>
                <% }); %>
        </div>
        <% } else { %>
            <p class="text-muted">No orders yet.</p>
            <% } %>
</div>

<!-- Quotation Modal -->
<div class="modal fade" id="quotationModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Send Quotation</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" action="/admin/send-quotation" enctype="multipart/form-data">
                <div class="modal-body">
                    <input type="hidden" id="orderId" name="id">
                    <div class="mb-3">
                        <label class="form-label">Client Email</label>
                        <input type="email" class="form-control" id="clientEmail" name="user_email" readonly>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Product Information</label>
                        <input type="text" class="form-control" id="productInfo" readonly>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Message</label>
                        <textarea class="form-control" name="message" rows="6" required
                            placeholder="Enter your quotation message here..."></textarea>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Attachment (Optional)</label>
                        <input type="file" class="form-control" name="attachment">
                        <div class="form-text text-muted">Upload quotation document, PDF, or other files.</div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-light" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary" onclick="return confirm('Send this quotation?')">
                        <i class="fas fa-paper-plane me-1"></i> Send Quotation
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    function openQuotationModal(orderId, clientEmail, productName) {
        document.getElementById('orderId').value = orderId;
        document.getElementById('clientEmail').value = clientEmail;
        document.getElementById('productInfo').value = productName;
    }
</script>