{% extends "base.html" %}

{% load static %}

{% load custom_filters %}

{% block title %}View a Client's Logs | My Value Trip{% endblock %}

{% block content %}
<div class="card mb-3">
    <div class="card-header bg-body-tertiary">
        <h6 class="mb-0">Filter</h6>
    </div>
    <div class="card-body">
        <form id="filter-client-logs">
            <div class="row g-3 mb-2">
                <div class="col-4">
                    <div>
                        <label class="form-label" for="filter_date">Select Date Range</label>
                        <input class="form-control datetimepicker"
                               name="filter_date"
                               id="filter_date"
                               type="text"
                               placeholder="Select Range"
                               data-options='{"mode":"range","dateFormat":"d/m/Y","disableMobile":true}' />
                    </div>
                </div>
                <div class="col-4">
                    <label class="form-label" for="filter_client">Client</label>
                    <select class="form-select select2"
                            name="filter_client"
                            id="filter_client"
                            multiple
                            data-placeholder="-- Select Client --">
                        <option value="">-- Select Clients --</option>
                        {% for cvalue in client_data %}
                            <option value="{{ cvalue.client_id }}">{{ cvalue.client_name }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-4">
                    <label class="form-label" for="filter_performed_by">Performed By</label>
                    <select class="form-select select2"
                            name="filter_performed_by"
                            id="filter_performed_by"
                            multiple
                            data-placeholder="-- Select Performed By --">
                        <option value="">All Clients</option>
                        {% for uvalue in user_data %}
                            <option value="{{ uvalue.id }}">{{ uvalue.username }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>
        </form>
    </div>
</div>

<div class="card">
    <div class="card-header d-flex flex-between-center py-2 border-bottom">
        <h6 class="mb-0">Client Logs</h6>
    </div>
    <div class="card-body d-flex flex-column justify-content-between">
        <div class="card-body border-top p-0">
            <div class="row g-0 align-items-center border-bottom py-2 px-3">
                <div class="col-md-5 fw-semi-bold">Client Name</div>
                <div class="col-md-3 fw-semi-bold">Performed By</div>
                <div class="col-md-3 fw-semi-bold">Performed On</div>
                <div class="col-md-1 fw-semi-bold">Action</div>
            </div>
            <div id="clients_log"></div>
        </div>
    </div>
</div>

<!-- MODAL -->
<div class="modal fade" id="viewDetailLogModal" data-bs-backdrop="static" tabindex="-1" aria-labelledby="viewDetailLogLabel" aria-hidden="true">
    <div class="modal-dialog modal-fullscreen">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="viewDetailLogLabel">Log Preview</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body bg-body-tertiary border-top">
            </div>
        </div>
    </div>
</div>

<script>
    // Define logsUrl dynamically to avoid errors if client.id is missing
    var logsUrl = {% if client and client.id %}"{% url 'client_logs_table' client.id %}"{% else %}null{% endif %};

    function loadClientLogs() {
        $.ajax({
            url: "{% url 'client_log_list' %}",  // URL for your client_log_list view without client_id argument
            type: "POST",
            data: $('#filter-client-logs').serialize(),
            dataType: "json",
            headers: { "X-CSRFToken": "{{ csrf_token }}" },
            success: function(response) {
                var logsContainer = $("#clients_log");
                logsContainer.empty();

                if (!response.logs || response.logs.length === 0) {
                    logsContainer.html('<tr><td colspan="4" class="text-center text-muted">No logs found.</td></tr>');
                    return;
                }

                $.each(response.logs, function(index, log) {
                    logsContainer.append(`
                        <tr>
                            <td><a href="javascript:void(0);" class="view_details" data-id="${log.id}">${log.client_name || 'N/A'}</a></td>
                            <td>${log.performed_by || 'N/A'}</td>
                            <td>${log.performed_at || 'N/A'}</td>
                            <td>
                                ${log.action_type === 'INSERT'
                                    ? '<span class="badge rounded-pill bg-dark">Created</span>'
                                    : '<span class="badge rounded-pill bg-secondary">Updated</span>'}
                            </td>
                        </tr>
                    `);
                });
            },
            error: function(xhr, status, error) {
                console.error("Error loading logs:", error);
                $("#clients_log").html('<tr><td colspan="4" class="text-center text-danger">Error loading logs. Please try again later.</td></tr>');
            }
        });
    }

    $(document).ready(function() {
        loadClientLogs();

        // Reload logs when any filter changes
        $("#filter_date, #filter_client, #filter_performed_by").on("change", function() {
            loadClientLogs();
        });
    });

    // Handle clicking on a log item to show details modal
    $(document).on('click', '.view_details', function() {
        let _d_id = $(this).attr('data-id');
        if (_d_id) {
            $.ajax({
                type: 'POST',
                url: "{% url 'view_client_log' 0 %}".replace('0', _d_id),
                dataType: 'json',
                headers: { "X-CSRFToken": "{{ csrf_token }}" },
                success: function(_return_data) {
                    if (_return_data.status && _return_data.Data) {
                        $('#viewDetailLogModal .modal-body').html(_return_data.Data);
                        $('#viewDetailLogModal').modal('show');
                    } else {
                        Swal.fire('Error!', 'No details found for this log.', 'error');
                    }
                },
                error: function() {
                    Swal.fire('Error!', 'Failed to fetch log details. Please try again.', 'error');
                }
            });
        } else {
            Swal.fire('Error!', 'Invalid log selected.', 'error');
        }
    });
</script>

{% endblock %}