{% extends 'back.html.twig' %}

{% block title %} Suppliers{% endblock %}

{% block body %}

    <div class="app-content-header">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-6"><h3 class="mb-0">Suppliers</h3></div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-end">
                        <li class="breadcrumb-item"><a href="{{ path('app_admin_dashboard') }}">Home</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Suppliers</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>


    <div class="app-content">
        <div class="container-fluid">
            <div class="row g-4">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header with-border">
                            <h3 class="card-title">Suppliers</h3>

                            <div style="float:right" data-toggle="tooltip" data-placement="top" title="Add New Supplier">
                                <button data-bs-toggle="modal" data-bs-target="#addNewSupplierModal" type="button" class="btn btn-success new_supplier_add_btn" >
                                    <i class="bi bi-plus-lg"></i> New
                                </button>
                            </div>
                            <div style="float:right; margin-right: 10px;float:right" data-toggle="tooltip" data-placement="top" title="Filter Suppliers">
                                <button data-bs-toggle="modal" data-bs-target="#filterSupplierModel" type="button" class="btn btn-primary filter_suppliers_btn" >
                                    <i class="bi bi-search"></i> Search
                                </button>
                            </div>
                        </div>
                        <div class="card-body" style="overflow-x: auto;">
                            <table id="suppliers_table" class="table table-bordered table-striped">
                                <thead>
                                <tr>
                                    <th>Company Name</th>
                                    <th>Address</th>
                                    <th>Reference</th>
                                    <th>Phone</th>
                                    <th>Email</th>
                                    <th>Contact Person</th>
                                    <th>Contact Person Phone</th>
                                    <th>Actions</th>
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                {% include '@Supplier/supplier/partials/supplier-filter-modal.html.twig' %}

                {% include '@Supplier/supplier/partials/supplier-delete-modal.html.twig' %}

                {% include '@Supplier/supplier/partials/supplier-create-modal.html.twig' %}

                {% include '@Supplier/supplier/partials/supplier-notes-modal.html.twig' %}

                <!-- /.col (RIGHT) -->
            </div>
            <!--end::Row-->
        </div>
        <!--end::Container-->
    </div>

    <script type="text/javascript">
        $(document).ready(function() {

            var supplierTable = $('#suppliers_table').DataTable({
                serverSide: true,
                processing: true,
                searching: false,
                ajax: {
                    url: '{{ path('api_supplier_filter') }}',
                    type: 'POST',
                    data: function (d) {
                            d.supplier_name = $("#filter_supplier_name").val(),
                            d.supplier_address = $("#filter_supplier_address").val(),
                            d.supplier_reference = $("#filter_supplier_reference").val(),
                            d.supplier_phone = $("#filter_supplier_phone").val(),
                            d.supplier_email = $("#filter_supplier_email").val(),
                            d.supplier_contact_person = $("#filter_supplier_contact_person").val(),
                            d.supplier_contact_person_phone = $("#filter_supplier_contact_person_phone").val()

                        return d;
                    }
                },
                columns: [
                    {
                        data: 'name',
                        render: function (data, type, row, meta) {
                            var output = '<a href="/admin/supplier/edit/' + row.id + '">' + row.name + '</a>';
                            if (row.noteCount > 0) {
                                output += '<span style="margin-left: 10px; cursor: pointer;" class="badge bg-info notes_supplier_btn" data-bs-toggle="modal" data-bs-target="#supplierNotesModal" data-supplier_id="' + row.id + '">' + row.noteCount + '</span>';
                            }
                            return output;
                        }
                    },
                    {
                        data: 'address1',
                        render: function (data, type, row, meta) {
                            var output = row.address1 +'<br/>';
                            output += row.address2 +'<br/>';
                            output += row.city +'<br/>';
                            output += row.postcode + ' ' + row.state +'<br/>';

                            return output;
                        }
                    },
                    { data: 'reference' },
                    { data: 'phone' },
                    { data: 'email' },
                    { data: 'contactPersonName' },
                    { data: 'contactPersonPhone' },
                    {
                        data: '',
                        orderable: false,
                        render: function (data, type, row, meta) {
                            var output = '';

                            output += '<div class="dropdown">';
                            output += '<button class="btn btn-dark dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">';
                            output += '<i class="bi bi-chevron-down"></i> Actions';
                            output += '</button>';
                            output += '<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">';
                            output += '<a class="dropdown-item" href="/admin/supplier/edit/' + row.id + '"><i class="bi bi-pencil-square"></i> &nbsp;&nbsp; Edit Supplier</a>';
                            output += '<a class="dropdown-item notes_supplier_btn" href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#supplierNotesModal" data-supplier_id="' + row.id + '"><i class="bi bi-journal-text"></i> &nbsp;&nbsp; Supplier Notes</a>';
                            output += '<a class="dropdown-item delete_supplier_btn" href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#deleteSupplierModal" data-supplier_id="' + row.id + '" data-supplier_name="' + row.name + '"><i class="bi bi-trash" style="color: red;"></i> &nbsp;&nbsp; Delete Supplier</a>';
                            output += '</div>';
                            output += '</div>';

                            return output;
                        }
                    }
                ]
            });

            $("#filterSupplierSubmitBtn").on("click", function (e) {
                e.preventDefault();

                supplierTable.ajax.reload();
                $('#filterSupplierModel').modal('hide');
            });

            $("#clearFilterSuppliersBtn").on("click", function (e) {
                e.preventDefault();

                $("#filter_supplier_name").val(''),
                $("#filter_supplier_address").val(''),
                $("#filter_supplier_reference").val(''),
                $("#filter_supplier_phone").val(''),
                $("#filter_supplier_email").val(''),
                $("#filter_supplier_contact_person").val(''),
                $("#filter_supplier_contact_person_phone").val('')

                supplierTable.ajax.reload();
                $('#filterSupplierModel').modal('hide');
            });
        });
    </script>

{% endblock %}