{% extends '_include/base.html.twig' %}

{% block title %}Suppliers · ERP Starz{% endblock %}

{% block breadcrumbs %}
    <nav aria-label="Breadcrumb">
        <ul class="breadcrumb__list">
            <li class="breadcrumb__item"><a href="{{ path('dashboard') }}">Dashboard</a></li>
            <li class="breadcrumb__item" aria-current="page">Suppliers</li>
        </ul>
    </nav>
{% endblock %}

{% block page_title %}Suppliers{% endblock %}

{% block page_actions %}
    <a href="{{ path('app_supplier_info_new') }}" class="btn btn--primary">
        <i class="fa fa-plus" aria-hidden="true"></i> New Supplier
    </a>
    <a href="{{ path('app_supplier_info_export_excel') }}" class="btn btn--secondary">
        <i class="fa fa-file-excel-o" aria-hidden="true"></i> Export Excel
    </a>
    <a href="{{ path('app_supplier_info_export_csv') }}" class="btn btn--secondary">
        <i class="fa fa-file-text-o" aria-hidden="true"></i> Export CSV
    </a>
{% endblock %}

{% block content %}
    <div class="card">
        <div class="card__body">
            <table id="suppliersTable" class="data-table table-full">
                    <thead>
                    <tr>

                        <th>Name</th>
                        <th>Billing Address</th>
                        <th>Shipping Address</th>
                        <th>City</th>
                        <th>Type</th>
                        <th>Active</th>
                        <th></th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for supplier_info in supplier_infos %}
                        <tr>

                            <td>{{ supplier_info.name }}</td>
                            <td>{{ supplier_info.billingAddress }}</td>
                            <td>{{ supplier_info.shippingAddress }}</td>
                            <td>{{ supplier_info.city }}</td>
                            <td>{{ supplier_info.idType.type}}</td>
                            <td>
                                <a href="#" class="toggle-status status-dot" data-id="{{ supplier_info.id }}" data-status="{{ supplier_info.isActive ? 'active' : 'inactive' }}" title="Toggle status" aria-label="Toggle supplier status"></a>
                            </td>
                            <td>
                                <div class="user-area dropdown">
                                    <a class="btn btn--secondary" href="{{ path('app_supplier_info_edit',{'id': supplier_info.id}) }}" title="Edit" aria-label="Edit supplier"><i class="fa fa-edit" aria-hidden="true"></i></a>
                                    <a class="btn btn--secondary" href="{{ path('app_supplier_info_show',{'id': supplier_info.id}) }}" title="View" aria-label="View supplier"><i class="fa fa-book" aria-hidden="true"></i></a>
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="Actions" aria-label="Supplier actions">
                                        <i class="fa fa-cogs" aria-hidden="true"></i>
                                    </a>
                                    <div class="user-menu dropdown-menu">
                                        <a class="btn btn--secondary btn--sm" href="{{ path('app_supplier_contact_new', {'id': supplier_info.id}) }}"> <i class="fa fa-plus" aria-hidden="true"> </i> Add Contact</a>

                                    </div>
                                </div>

                            </td>

                        </tr>
                    {% else %}
                        <tr>
                            <td>no records found</td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    {#datatable#}
    <link href="{{ asset('assets/lib/DataTables/datatables.min.css') }}" rel="stylesheet">
    <script src="{{ asset('assets/lib/DataTables/datatables.min.js') }}"></script>

    <script>
        $(document).ready(function() {
            $('#suppliersTable').DataTable({
                pageLength: 25,
                order: [[0, 'asc']],
                responsive: true
            });
    </script>
    {#end datatable#}

    <script>
         // Change status script
        document.querySelectorAll('.toggle-status').forEach(function(element) {
            element.addEventListener('click', function(event) {
                event.preventDefault();

                var id = this.getAttribute('data-id');
                var status = this.getAttribute('data-status');

                // Toggle the status (active <-> inactive)
                status = status === 'active' ? 'inactive' : 'active';

                var xhr = new XMLHttpRequest();
                xhr.open('GET', '/supplier/info/toggle-status/' + id, true);

                // Add the CSRF token to the request headers
                xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
                xhr.setRequestHeader('X-CSRF-Token', '{{ csrf_token("toggle_status") }}');

                xhr.onload = function() {
                    if (xhr.readyState === 4 && xhr.status === 200) {
                        // Update the status and background color
                        element.setAttribute('data-status', status);
                    }
                };
                xhr.send();
            });
        });
    </script>


{% endblock %}