<!DOCTYPE html>
<html lang="en">

<head>
    <%- include('./partials/head'); -%>
</head>
<body onload="startTime()">
    <%- include('./partials/header_sidebar'); -%>

    <!-- Page Body -->
    <div class="page-body">
        <div class="container-fluid">
            <div class="page-title">
                <div class="row">
                    <div class="col-sm-6">
                        <h3>Support Tickets</h3>
                    </div>
                    <div class="col-sm-6">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="/index"><i data-feather="home"></i></a></li>
                            <li class="breadcrumb-item"><%=lan.dashboard%></li>
                            <li class="breadcrumb-item active">Support Tickets</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>

        <!-- Container-fluid starts -->
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-12">
                    <div class="card">
                        <div class="card-header py-3 border-bottom d-flex align-items-center justify-content-between">
                            <h5 class="mb-0">All Support Tickets</h5>
                            <span class="text-muted f-13">Tickets raised by customers and drivers</span>
                        </div>
                        <div class="card-body">
                            <%- include('./partials/table_skeleton'); -%>
                            <div class="real-table-wrapper dt-loading">
                                <div class="table-responsive theme-scrollbar">
                                    <table class="display" id="basic-1">
                                        <thead>
                                            <tr>
                                                <th>#</th>
                                                <th>Ticket ID</th>
                                                <th>Name</th>
                                                <th>Phone</th>
                                                <th>Type</th>
                                                <th>Description</th>
                                                <th>Image</th>
                                                <th>Status</th>
                                                <th>Date</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <% var i = 1 %>
                                            <% if (ticket_list.length === 0) { %>
                                                <tr>
                                                    <td colspan="10" class="text-center text-muted py-4">No support tickets found.</td>
                                                </tr>
                                            <% } %>
                                            <% ticket_list.forEach((data) => { %>
                                                <tr>
                                                    <td><%= i %></td>
                                                    <td><strong>#<%= data.ticket_id %></strong></td>
                                                    <td><%= data.name %></td>
                                                    <td><%= data.phone %></td>
                                                    <td>
                                                        <% if ((data.type || '').toLowerCase() === 'driver') { %>
                                                            <span class="badge rounded-pill badge-light-warning text-dark">Driver</span>
                                                        <% } else { %>
                                                            <span class="badge rounded-pill badge-light-primary text-primary">User</span>
                                                        <% } %>
                                                    </td>
                                                    <td>
                                                        <span class="d-inline-block text-truncate" style="max-width: 200px;" title="<%= data.description %>">
                                                            <%= data.description %>
                                                        </span>
                                                    </td>
                                                    <td>
                                                        <% if (data.image) { 
                                                            var ticketImg = data.image.startsWith('uploads/') ? '/' + data.image : (data.image.startsWith('/uploads/') ? data.image : '/uploads/ticket/' + data.image);
                                                        %>
                                                            <a href="<%= ticketImg %>" target="_blank">
                                                                <img src="<%= ticketImg %>" alt="Ticket Image" style="width:45px; height:45px; object-fit:cover; border-radius:6px; border:1px solid #ddd;">
                                                            </a>
                                                        <% } else { %>
                                                            <span class="text-muted">&#8212;</span>
                                                        <% } %>
                                                    </td>
                                                    <td>
                                                        <% if (data.status == '0') { %>
                                                            <span class="badge badge-warning">Open</span>
                                                        <% } else if (data.status == '1') { %>
                                                            <span class="badge badge-success">Resolved</span>
                                                        <% } else { %>
                                                            <span class="badge badge-secondary"><%= data.status %></span>
                                                        <% } %>
                                                    </td>
                                                    <td><%= data.date ? new Date(data.date).toLocaleDateString() : '&#8212;' %></td>
                                                    <td>
                                                        <ul class="action">
                                                            <li class="custom_tooltip view-ticket"
                                                                data-id="<%= data.ticket_id %>"
                                                                data-name="<%= data.name %>"
                                                                data-phone="<%= data.phone %>"
                                                                data-type="<%= data.type %>"
                                                                data-description="<%= data.description %>"
                                                                data-status="<%= data.status %>"
                                                                data-date="<%= data.date %>"
                                                                data-image="<%= data.image || '' %>"
                                                                style="cursor:pointer;">
                                                                <a href="javascript:void(0)" style="color: #7366ff;"><i class="icon-eye f-14"></i></a>
                                                                <span class="tooltiptext" style="width: 80px; margin-left: -40px; padding: 5px; font-size: 11px; bottom: 135%;">View</span>
                                                            </li>
                                                            <% if (data.status == '0') { %>
                                                            <li class="custom_tooltip resolve-ticket" style="margin-left:8px; cursor:pointer;"
                                                                data-id="<%= data.ticket_id %>">
                                                                <a href="javascript:void(0)" style="color: #51bb25;"><i class="icon-check f-14"></i></a>
                                                                <span class="tooltiptext" style="width: 90px; margin-left: -45px; padding: 5px; font-size: 11px; bottom: 135%;">Resolve</span>
                                                            </li>
                                                            <% } %>
                                                        </ul>
                                                    </td>
                                                </tr>
                                            <% i++ %>
                                            <% }) %>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Container-fluid Ends -->
    </div>

    <!-- View Ticket Modal -->
    <div class="modal fade" id="viewTicketModal" tabindex="-1" role="dialog" aria-labelledby="viewTicketModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="viewTicketModalLabel">Ticket Details</h5>
                    <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="col-form-label fw-semibold text-muted">Ticket ID</label>
                            <p class="mb-0 fw-bold" id="modal_ticket_id">&#8212;</p>
                        </div>
                        <div class="col-md-6">
                            <label class="col-form-label fw-semibold text-muted">Type</label>
                            <p class="mb-0" id="modal_ticket_type">&#8212;</p>
                        </div>
                        <div class="col-md-6">
                            <label class="col-form-label fw-semibold text-muted">Name</label>
                            <p class="mb-0" id="modal_ticket_name">&#8212;</p>
                        </div>
                        <div class="col-md-6">
                            <label class="col-form-label fw-semibold text-muted">Phone</label>
                            <p class="mb-0" id="modal_ticket_phone">&#8212;</p>
                        </div>
                        <div class="col-md-6">
                            <label class="col-form-label fw-semibold text-muted">Status</label>
                            <p class="mb-0" id="modal_ticket_status">&#8212;</p>
                        </div>
                        <div class="col-md-6">
                            <label class="col-form-label fw-semibold text-muted">Date</label>
                            <p class="mb-0" id="modal_ticket_date">&#8212;</p>
                        </div>
                        <div class="col-12">
                            <label class="col-form-label fw-semibold text-muted">Description</label>
                            <p class="mb-0" id="modal_ticket_description">&#8212;</p>
                        </div>
                        <div class="col-12" id="modal_image_wrapper" style="display:none;">
                            <label class="col-form-label fw-semibold text-muted">Attached Image</label>
                            <div>
                                <img id="modal_ticket_image" src="" alt="Ticket Image" style="max-width: 100%; max-height: 300px; border-radius: 8px; border: 1px solid #ddd;">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" type="button" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Resolve Confirm Modal -->
    <div class="modal fade" id="resolveTicketModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Resolve Ticket</h5>
                    <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form action="/support_ticket/resolve" method="post">
                    <div class="modal-body">
                        <p>Are you sure you want to mark Ticket <strong id="resolve_ticket_id_label"></strong> as <strong class="text-success">Resolved</strong>?</p>
                        <input type="hidden" name="ticket_id" id="resolve_ticket_id_input">
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-secondary" type="button" data-bs-dismiss="modal">Cancel</button>
                        <button class="btn btn-success" type="submit">Yes, Resolve</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <%- include('./partials/footer'); -%>
    <%- include('./partials/script'); -%>

    <script>
        // View ticket modal
        $(document).on("click", ".view-ticket", function () {
            var id       = $(this).data("id");
            var name     = $(this).data("name");
            var phone    = $(this).data("phone");
            var type     = $(this).data("type");
            var desc     = $(this).data("description");
            var status   = $(this).data("status");
            var date     = $(this).data("date");
            var image    = $(this).data("image");

            $("#modal_ticket_id").text("#" + id);
            $("#modal_ticket_name").text(name);
            $("#modal_ticket_phone").text(phone);
            $("#modal_ticket_type").html(
                String(type || '').toLowerCase() === "driver"
                    ? '<span class="badge rounded-pill badge-light-warning text-dark">Driver</span>'
                    : '<span class="badge rounded-pill badge-light-primary text-primary">User</span>'
            );

            var statusHtml = (status == "0")
                ? '<span class="badge badge-warning">Open</span>'
                : '<span class="badge badge-success">Resolved</span>';
            $("#modal_ticket_status").html(statusHtml);

            $("#modal_ticket_date").text(date ? new Date(date).toLocaleDateString() : "—");
            $("#modal_ticket_description").text(desc || "—");

            if (image) {
                var imgSrc = image.startsWith('uploads/') ? '/' + image : (image.startsWith('/uploads/') ? image : '/uploads/ticket/' + image);
                $("#modal_ticket_image").attr("src", imgSrc);
                $("#modal_image_wrapper").show();
            } else {
                $("#modal_image_wrapper").hide();
            }

            $("#viewTicketModal").modal("show");
        });

        // Resolve ticket modal
        $(document).on("click", ".resolve-ticket", function () {
            var id = $(this).data("id");
            $("#resolve_ticket_id_label").text("#" + id);
            $("#resolve_ticket_id_input").val(id);
            $("#resolveTicketModal").modal("show");
        });
    </script>

</body>
</html>
