{% extends "base.html" %}

{% load static %}

{% block title %}Client | My Value Trip{% endblock %}

{% block content %}
<div class="container-fluid mt-4">
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="mb-0">Manage Client</h5>
            <div>
                <input type="text" id="client-search" class="form-control d-inline-block" style="width: 250px;" placeholder="Search">
                <button id="new-btn" class="btn btn-primary ms-2">+ New</button>
                <button id="import-btn" class="btn btn-warning ms-2">📥 Import</button>
            </div>
        </div>
        <div class="table-responsive p-2">
            <table id="client_list" class="table table-bordered" style="width:100%">
                <thead>
                    <tr class="bg-200 text-900">
                        <th class="text-center no-sort">#</th>
                        <th>Code</th>
                        <th>Client Name</th>
                        <th>Contact No</th>
                        <th>Email</th>
                        <th>City</th>
                        <th>Company</th>
                        <th>Type</th>
                        <th>Created On</th>
                        <th class="text-center">Status</th>
                        <th class="all no-sort" style="width: 4%;">Action</th>
                    </tr>
                </thead>
                <tbody>
                    {% for client in data %}
                    <tr>
                        <!--<td>{{ forloop.counter }}</td>-->  <!-- This is 1, 2, 3, ... not the DB id -->
                        <td>{{ forloop.counter }}</td>
                        <td>{{ client.client_code }}</td>
                        <td><a href="{% url 'client_view' client.id %}">{{ client.full_name }}</a></td>
                        <td>{{ client.contact_no }}</td>
                        <td>{{ client.email }}</td>
                        <td>{{ client.residential_city }}</td>
                        <td>{{ client.company }}</td>
                        <td>
                            {{ client.type}}
                        </td>
                        <td>{{ client.created_at }}</td>
                        <td>
                            {% if client.client_status == 'active' %}
                                <span class="badge bg-success">{{ client.client_status|capfirst }}</span>
                            {% else %}
                                <span class="badge bg-secondary">{{ client.client_status|capfirst }}</span>
                            {% endif %}
                        </td>
                        {% comment %} <td>
                            {% if client.client_id %}
                                <a href="{% url 'client_delete' client.client_id %}">Delete</a>
                            {% else %}
                                <span class="text-muted">No ID</span>
                            {% endif %}
                        </td> {% endcomment %}
                        <td>{% autoescape off %}{{ client.actions }}{% endautoescape %}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% comment %} <table id="client_list" class="table table-bordered" style="width:100%">
                <thead>
                    <tr class="bg-200 text-900">
                        <th class="text-center no-sort">#</th>
                        <th>Code</th>
                        <th>Client Name</th>
                        <th>Contact No</th>
                        <th>Email</th>
                        <th>City</th>
                        <th>Company</th>
                        <th>Type</th>
                        <th>Created On</th>
                        <th class="text-center">Status</th>
                        <th class="all no-sort" style="width: 4%;">Action</th>
                    </tr>
                </thead>
                <tbody>
                    {% for client in data %}
                    <tr>
                        <!-- Sequential number -->
                        <td class="text-center">{{ forloop.counter }}</td>

                        <td>{{ client.client_code }}</td>

                        <!-- Link only if ID exists -->
                        <td>
                            {% if client.id %}
                                <a href="{% url 'client_view' client.id %}">{{ client.full_name }}</a>
                            {% else %}
                                {{ client.full_name }}
                            {% endif %}
                        </td>

                        <td>{{ client.contact_no }}</td>
                        <td>{{ client.email }}</td>
                        <td>{{ client.residential_city }}</td>
                        <td>{{ client.company }}</td>

                        <td>
                            {% if client.client_id %}
                                Family Member
                            {% else %}
                                Primary Member
                            {% endif %}
                        </td>

                        <td>{{ client.created_at }}</td>

                        <td>
                            {% if client.client_status == 'active' %}
                                <span class="badge bg-success">{{ client.client_status|capfirst }}</span>
                            {% else %}
                                <span class="badge bg-secondary">{{ client.client_status|capfirst }}</span>
                            {% endif %}
                        </td>

                        <td>{% autoescape off %}{{ client.actions }}{% endautoescape %}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table> {% endcomment %}


<script>
    var _can_add = {{ can_add|default:0 }};
    var _can_export = {{ can_export|default:0 }};
    var _client_list = null;

    {% comment %} document.addEventListener('DOMContentLoaded', function () {
        // Search filter
        document.getElementById('client_search').addEventListener('keyup', function () {
            const value = this.value.toLowerCase();
            $('#client_list').DataTable().search(value).draw();
        });

        // New button click
        document.getElementById('new-btn').addEventListener('click', function () {
            window.location.href = "{% url 'client_create' %}";
        });

        // Import button click
        document.getElementById('import-btn').addEventListener('click', function () {
            window.location.href = "{% url 'client_import' %}";
        });
    }); {% endcomment %}

    document.addEventListener('DOMContentLoaded', function () {
        // Live search using custom input
        const clientSearch = document.getElementById('client_search');
        if (clientSearch) {
            clientSearch.addEventListener('input', function () {
                const value = this.value;
                if (_client_list) {
                    _client_list.search(value).draw();
                }
            });
        }

        // New button click
        document.getElementById('new-btn').addEventListener('click', function () {
            window.location.href = "{% url 'client_create' %}";
        });

        // Import button click
        document.getElementById('import-btn').addEventListener('click', function () {
            window.location.href = "{% url 'client_import' %}";
        });
    });


    $(document).ready(function () {
        _client_list = $('#client_list').DataTable({
            "dom": '<"row d-flex flex-between-center"' +
                '<"col-sm-12 col-md-3 mb-3 mb-lg-0 table-heading">' +
                '<"col-sm-12 col-md-5 mb-3 mb-lg-0 table-search">' +
                '<"col-sm-12 col-md-4" p>>' +
                '<"row"<"col-sm-12 p-0" rt>>' +
                '<"row"' +
                '<"col-sm-12 col-md-5" i>' +
                '<"col-sm-12 col-md-1" B>' +
                '<"col-sm-12 col-md-6" p>>',
            "lengthChange": false,
            "fixedHeader": true,
            "pageLength": 25,
            "language": {
                "paginate": {
                    "next": "»",
                    "previous": "«"
                }
            },
            "processing": true,
            "serverSide": false,  // set to false because we are handling all data at once
            "searching": true,
            "responsive": true,
            "buttons": [],
            "columnDefs": [
                { "targets": [0, 10], "orderable": false },
                { "targets": [0, 9, 10], "className": 'text-center align-middle' }
            ],
            "ajax": {
                'url': "{% url 'client_list' %}",
                'type': 'GET'
            },
            "columns": [
                { "data": 0 },
                { "data": 1 },
                { "data": 2 },
                { "data": 3 },
                { "data": 4 },
                { "data": 5 },
                { "data": 6 },
                { "data": 7 },
                { "data": 8 },
                { "data": 9 },
                { "data": 10 }
            ],
            'createdRow': function (row, data, dataIndex) {
                if (data[data.length - 1] > 0) {
                    $(row).addClass('client-child');
                }
            },
            'initComplete': function (settings, json) {
                $('.table-heading').html('<h5 class="mb-0" id="captions">Manage Clients</h5>');

                let searchHtml = '';
                searchHtml += '<div class="row flex-between-center">';
                searchHtml += '<div class="col-md">';
                searchHtml += '<div class="mb-2 mb-md-0">';
                searchHtml += '<input type="text" class="form-control form-control-sm w-sm-100 w-100" id="search-text" placeholder="Search">';
                searchHtml += '</div></div>';
                searchHtml += '<div class="col-auto">';
                if (_can_add === 1) {
                    searchHtml += '<a class="btn btn-sm btn-primary" href="{% url "client_create" %}"><i class="fas fa-plus me-1"></i> New</a>';
                }
                if (_can_export === 1) {
                    searchHtml += '<a class="btn btn-sm btn-warning ms-3" href="{% url "client_import" %}"><i class="fas fa-file-import me-1"></i> Import</a>';
                }
                searchHtml += '</div></div>';
                $('.table-search').html(searchHtml);
            }
        });
    });

    $(document).on('input', '#search-text', function() {
        _client_list.ajax.reload();
    });

    {% comment %} function change_status(_id, _status) {
        if (_id) {
            Swal.fire({
                title: "Are you sure!",
                icon: 'warning',
                html: '<i><b>You want to change status?</b></i>',
                showCancelButton: true,
                focusConfirm: false,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes',
                cancelButtonText: 'No'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        type: 'POST',
                        url: `/client/edit/${client_id}/`,  // Matches new CBV URL name
                        dataType: 'json',
                        data: {
                            client_id: _id,
                            client_status: _status,
                            csrfmiddlewaretoken: '{{ csrf_token }}'
                        },
                        success: function (_return_data) {
                            if (_return_data.success) {
                                Swal.fire('Updated!', _return_data.message, 'success');
                                setTimeout(() => window.location.reload(), 1000);
                            } else {
                                Swal.fire('Warning!', _return_data.message || 'Something went wrong.', 'warning');
                            }
                        },
                        error: function () {
                            Swal.fire('Error!', 'Failed to update status.', 'error');
                        }
                    });
                }
            });
        }
    } {% endcomment %}

    function change_status(_id) {
        if (_id) {
            Swal.fire({
                title: "Are you sure!",
                icon: 'warning',
                html: '<i><b>You want to change status?</b></i>',
                showCancelButton: true,
                focusConfirm: false,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes',
                cancelButtonText: 'No'
            }).then((result) => {
                if (result.isConfirmed) {
                    // Redirect to the toggle status URL
                    window.location.href = `/clients-status/${_id}/`;
                }
            });
        }
    }


    function delete_client(_id) {
        if (_id) {
            Swal.fire({
                title: "Are you sure!",
                icon: 'warning',
                html: '<i><b>You want to delete?</b></i>',
                showCancelButton: true,
                focusConfirm: false,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes',
                cancelButtonText: 'No'
            }).then((result) => {
                if (result.value) {
                    $.ajax({
                        type: 'POST',
                        url: '{% url "client_delete" %}',
                        dataType: 'json',
                        data: {
                            'id': _id,
                            'csrfmiddlewaretoken': '{{ csrf_token }}'
                        },
                        success: function(_return_data) {
                            if (_return_data.status) {
                                setTimeout(() => window.location.reload(), 10);
                            } else {
                                Swal.fire('Warning!', _return_data.message || 'Something went wrong.', 'warning');
                            }
                        }
                    });
                }
            });
        }
    }
</script>
{% endblock %}