{% extends "base.html" %}

{% load static %}

{% block title %}Company | 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 Company</h5>
            <div>
                <input type="text" id="company-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 scrollbar p-2">
        <table id="company_list" class="table table-bordered" style="width:100%">
            <thead>
                <tr>
                    <th class="no-sort">#</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 class="all" style="width: 4%;">Action</th>
                </tr>
            </thead>
            <tbody>
                {% for company in data %}
                <tr>
                    <td class="text-center">{{ forloop.counter }}</td>
                    <td><a href="{% url 'company_view' company.id %}">{{ company.company_name }}</a></td>
                    <td>{{ company.gst_name }}</td>
                    <td>{{ company.gst_no }}</td>
                    <td>{{ company.company_address }}</td>
                    <td>{{ company.account_concerned_person }}</td>
                    <td>{{ company.account_concerned_person_contact_no }}</td>
                    <td class="text-center">
                        {% if company.company_status == 'active' %}
                            <span class="badge bg-success">Active</span>
                        {% else %}
                            <span class="badge bg-danger">Inactive</span>
                        {% endif %}
                    </td>
                    <td class="text-center">
                        <a href="{% url 'company_edit' company.id %}" class="btn btn-sm btn-info">
                            <i class="fas fa-edit"></i>
                        </a>
                        <button href="{% url 'delete_company' company.id %}" class="btn btn-sm btn-danger">
                            <i class="fas fa-trash"></i>
                        </button>
                        {% comment %} <button id="del-btn" class="btn btn-primary ms-2">delete</button> {% endcomment %}
                    </td>
                </tr>
                {% empty %}
                <tr>
                    <td colspan="9" class="text-center">No companies found.</td>
                </tr>
                {% endfor %}
            </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;
    console.log('_can_add =', _can_add);

    $(document).ready(function() {
        _company_list = $('#company_list').DataTable({
            processing: true,
            serverSide: true,
            searching: true,
            ajax: {
                url: "{% url 'search_company' %}",
                type: 'POST',
                headers: { "X-CSRFToken": "{{ csrf_token }}" },
                data: function(d) {
                    d.search_text = $('#search-text').val();
                }
            },
            dom: '<"row align-items-center" <"col-lg-3 mb-3 table-heading"><"col-lg-5 mb-3 table-search"><"col-lg-4" p>>' +
                 '<"row"<"col-sm-12 p-0" rt>>' +
                 '<"row"<"col-md-5" i><"col-md-1" B><"col-md-6" p>>',
            lengthChange: false,
            fixedHeader: true,
            pageLength: 25,
            language: {
                paginate: {
                    next: "»",
                    previous: "«"
                }
            },
            responsive: true,
            buttons: [],
            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(settings, json) {
                $('.table-heading').html('<h5 class="mb-0" id="captions">Manage Company</h5>');

                let searchHtml = `
                    <div class="row flex-between-center">
                        <div class="col-md">
                            <div class="mb-2 mb-md-0">
                                <input type="text" class="form-control form-control-sm w-sm-100 w-100" id="search-text" placeholder="Search">
                            </div>
                        </div>
                        <div class="col-auto">`;

                // Correctly add buttons here
                if (_can_add === 1) {
                    searchHtml += `<button id="new-btn" class="btn btn-sm btn-primary ms-2">
                                        <i class="fas fa-plus me-1"></i> New
                                </button>`;
                }

                if (_can_export === 1) {
                    searchHtml += `<a class="btn btn-sm btn-warning ms-3" href="{% url 'company_import' %}">
                                        <i class="fas fa-file-import me-1"></i><span class="d-none d-sm-inline-block ms-1"> Import</span>
                                </a>`;
                }

                searchHtml += `</div></div>`;
                $('.table-search').html(searchHtml);

                // Attach click listener after button is added to DOM
                $('#new-btn').on('click', function() {
                    window.location.href = "{% url 'company_create' %}";
                });
            }

        });
    });
    
    $('#new-btn').on('click', function () {
        window.location.href = "{% url 'company_create' %}";
    });


    {% comment %} $(document).ready(function () {
        $('#create-company-form').on('submit', function (e) {
            e.preventDefault();

            let formData = new FormData(this);

            $.ajax({
                url: "{% url 'company_create' %}",
                type: "POST",
                data: formData,
                processData: false,
                contentType: false,
                headers: { "X-CSRFToken": "{{ csrf_token }}" },
                success: function (response) {
                    if (response.status) {
                        $('#createCompanyModal').modal('hide');
                        _company_list.ajax.reload();
                        toastr.success("Company created successfully.");
                    } else {
                        let errorText = "";
                        for (let key in response.errors) {
                            errorText += `${key}: ${JSON.stringify(response.errors[key])}\n`;
                        }
                        toastr.error(errorText || "Validation failed.");
                    }
                },
                error: function () {
                    toastr.error("Server error occurred.");
                }
            });
        });
    }); {% endcomment %}


    $('#import-btn').on('click', function () {
        window.location.href = "{% url 'company_import' %}";
    });

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

    {% comment %} $('#company-search').on('click', function () {
        window.location.href = "{% url 'search_company' %}";
    }); {% endcomment %}


    function delete_company(company.id) {
        if (confirm("Are you sure you want to delete this client?")) {
            fetch(`/company/delete/${company.id}/`, {
                method: "POST",
                headers: {
                    "X-CSRFToken": "{{ csrf_token }}",
                    "Content-Type": "application/x-www-form-urlencoded"
                },
                body: new URLSearchParams({ id: company.id })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    location.reload(); // Reload the page to update the list
                } else {
                    alert("Error deleting company.");
                }
            });
        }
    }
    {% comment %} $('#del-btn').on('click', function () {
        href = "{% url 'delete_company' %}";
    }); {% endcomment %}

    
    {% comment %} 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,
                focusConfirm: false,
                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 }}" },
                        dataType: 'json',
                        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');
        }
    } {% endcomment %}

    // Helper function to get CSRF token from cookies
    function getCookie(name) {
        let cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            const cookies = document.cookie.split(';');
            for (let i = 0; i < cookies.length; i++) {
                const cookie = cookies[i].trim();
                // Does this cookie string begin with the name we want?
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
</script>
{% endblock %}