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

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

{% block content %}
<div class="card">
    <div class="table-responsive scrollbar p-2">
        <table id="company_list" class="table table-bordered" style="width:100%">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Company Name</th>
                    <th>GST Name</th>
                    <th>GST No</th>
                    <th>Company Address</th>
                    <th>Account Concerned Person</th>
                    <th>Contact No</th>
                    <th>Status</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</div>

<script>
    const _can_add = {{ menu_permissions.can_add|default:0 }};
    const _can_export = {{ menu_permissions.can_export|default:0 }};
    let _company_list = null;

    $(document).ready(function() {
        _company_list = $('#company_list').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: "{% url 'company_list' %}",
                type: 'POST',
                headers: { "X-CSRFToken": "{{ csrf_token }}" },
                data: function(d) {
                    d.search_text = $('#search-text').val();
                }
            },
            pageLength: 25,
            fixedHeader: true,
            responsive: true,
            searching: false,  // disable default search
            lengthChange: false,
            dom: '<"top d-flex justify-content-between align-items-center mb-3" <"table-heading"><"table-search">>rt<"bottom d-flex justify-content-between"ip>',
            columnDefs: [
                { targets: [0, 8], orderable: false },
                { targets: [0, 7, 8], className: 'text-center align-middle' },
                { targets: '_all', className: 'text-wrap align-middle' }
            ],
            columns: [
                { data: 'id' },
                { data: 'company_name' },
                { data: 'gst_name' },
                { data: 'gst_no' },
                { data: 'company_address' },
                { data: 'account_concerned_person' },
                { data: 'contact_no' },
                { data: 'status' },
                { data: 'actions' }
            ],
            initComplete: function() {
                // Heading
                $('.table-heading').html('<h5 class="mb-0">Manage Company</h5>');

                // Search + Buttons
                let html = `<div class="d-flex flex-wrap gap-2">`;

                html += `<input type="text" class="form-control form-control-sm" id="search-text" placeholder="Search">`;

                if (_can_add === 1) {
                    html += `<a class="btn btn-sm btn-primary" href="{% url 'company_create' %}">
                                <i class="fas fa-plus me-1"></i> New</a>`;
                }

                if (_can_export === 1) {
                    html += `<a class="btn btn-sm btn-warning" href="{% url 'company_import' %}">
                                <i class="fas fa-file-import me-1"></i> Import</a>`;
                }

                html += `</div>`;

                $('.table-search').html(html);
            }
        });

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

    function delete_company(_id) {
        if (_id) {
            Swal.fire({
                title: "Are you sure!",
                icon: 'warning',
                html: '<i><b>You want to delete?</b></i>',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes',
                cancelButtonText: 'No'
            }).then((result) => {
                if (result.isConfirmed) {
                    const _url = `/company/delete/${_id}/`;
                    $.ajax({
                        type: 'DELETE',
                        url: _url,
                        headers: { "X-CSRFToken": "{{ csrf_token }}" },
                        success: function(response) {
                            if (response.status === true) {
                                _company_list.ajax.reload();
                            } else {
                                Swal.fire('Warning!', response.message, 'warning');
                            }
                        },
                        error: function() {
                            Swal.fire('Error!', 'Something went wrong!', 'error');
                        }
                    });
                }
            });
        } else {
            Swal.fire('Warning!', 'Something went wrong, Try again!', 'warning');
        }
    }
</script>
{% endblock %}