{% extends "base.html" %}
{% load static %}

{% block title %}Reports | Client Report{% endblock %}

{% block content %}
<div class="card g-3 mb-3">
    <div class="card-header">
        <h5 class="mb-0">Client Report</h5>
    </div>

    <form method="post" id="report-client-form" enctype="multipart/form-data" action="{% url 'report_client' %}">
        {% csrf_token %}
        <div class="card-body">
            <div class="row g-3 mb-3">

                <!-- Date Range -->
                <div class="col-md-3 col-lg-3">
                    <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>

                <!-- Company -->
                <div class="col-md-3 col-lg-3">
                    <div>
                        <label class="form-label" for="client_company">Company</label>
                        <select class="form-select select2" name="client_company" id="client_company" data-placeholder="-- Select Company --">
                            <option value=""></option>
                            {% for cmp in company_data %}
                                <option value="{{ cmp.id }}">{{ cmp.company_name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>

                <!-- Reference -->
                <div class="col-md-3 col-lg-3">
                    <div>
                        <label class="form-label" for="reference_id">Reference</label>
                        <select class="form-select select2" name="reference_id" id="reference_id" data-placeholder="-- Select Reference --">
                            <option value=""></option>
                            <option value="BNI">BNI</option>
                            <option value="Atul Sir">Atul Sir</option>
                            <option value="Jignesh Sir">Jignesh Sir</option>
                            <option value="Counter / Internal Staff">Counter / Internal Staff</option>
                            {% if reference_data %}
                                <optgroup label="Clients">
                                    {% for rf in reference_data %}
                                        <option value="CL-{{ rf.client_id }}">{{ rf.client_name }}</option>
                                    {% endfor %}
                                </optgroup>
                            {% endif %}
                        </select>
                    </div>
                </div>

                <!-- Status -->
                <div class="col-md-3 col-lg-3">
                    <label class="form-label">Status</label>
                    <div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="client_status" id="client_status1" value="1">
                            <label class="form-check-label" for="client_status1">Active</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="client_status" id="client_status0" value="0">
                            <label class="form-check-label" for="client_status0">Inactive</label>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row g-3 mb-3">
                <!-- Country -->
                <div class="col-md-3 col-lg-3">
                    <div>
                        <label class="form-label" for="client_country">Country</label>
                        <select class="form-select select2 country" name="client_country" id="client_country" data-placeholder="-- Select Country --">
                            <option value=""></option>
                            {% for cn in country_data %}
                                <option value="{{ cn.id }}">{{ cn.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>

                <!-- State -->
                <div class="col-md-3 col-lg-3">
                    <div>
                        <label class="form-label" for="client_state">State</label>
                        <select class="form-select select2 state" name="client_state" id="client_state" data-placeholder="-- Select State --">
                            <option value=""></option>
                        </select>
                    </div>
                </div>

                <!-- City -->
                <div class="col-md-3 col-lg-3">
                    <div>
                        <label class="form-label" for="client_city">City</label>
                        <select class="form-select select2 city" name="client_city" id="client_city" multiple data-placeholder="-- Select City --">
                            <option value=""></option>
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <div class="card-footer border-top text-end">
            <button type="submit" class="btn btn-primary me-2">Search</button>
            <button type="button" class="btn btn-secondary" onclick="window.location.reload();">Cancel</button>
        </div>
    </form>
</div>

<div id="view_report"></div>

<!-- jQuery AJAX -->
<script>
    $(document).ready(function() {
        $("#report-client-form").on("submit", function(e) {
            e.preventDefault();

            $.ajax({
                type: 'POST',
                url: "{% url 'get_client_report' %}",   // Django URL
                data: $(this).serialize(),
                headers: {
                    "X-CSRFToken": "{{ csrf_token }}"
                },
                success: function(response) {
                    if (response.status) {
                        $('#view_report').html(response.data);
                    } else {
                        alert("No data found.");
                    }
                },
                error: function(err) {
                    console.error(err);
                    alert("Something went wrong!");
                }
            });
        });
    });
</script>
{% endblock %}