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

{% block title %} {{ 'Customers'|trans }}{% endblock %}

{% block body %}

    <div class="app-content-header">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-6"><h3 class="mb-0">{{ 'Customers'|trans }}</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">{{ 'Customers'|trans }}</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">{{ 'Customers'|trans }}</h3>

                            <div style="float:right" data-toggle="tooltip" data-placement="top" title="Add New Customer">
                                <button data-bs-toggle="modal" data-bs-target="#addNewCustomerModal" type="button" class="btn btn-success new_customer_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 Customers">
                                <button data-bs-toggle="modal" data-bs-target="#filterCustomerModel" type="button" class="btn btn-primary filter_customers_btn" >
                                    <i class="bi bi-search"></i> Search
                                </button>
                            </div>
                        </div>

                        <div class="card-body" style="overflow-x: auto;">
                            <table id="customers_table" class="table table-bordered table-striped">
                                <thead>
                                <tr>
                                    <th>Company Name</th>
                                    <th>Address</th>
                                    <th>Phone</th>
                                    <th>Billing Email</th>
                                    <th>Email</th>
                                    <th>Website</th>
                                    <th>Actions</th>
                                </tr>
                                </thead><tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                {% include '@Customer/customer/partials/customer-create-modal.html.twig' %}

                {% include '@Customer/customer/partials/customer-filter-modal.html.twig' %}

            </div>
        </div>
    </div>

{% endblock %}

{% block javascripts %}
    <script type="text/javascript">

        $(document).ready(function() {
            var customerTable = $('#customers_table').DataTable({
            "processing": true,
            "serverSide": true,
            "searching": false,
            "ajax": {
                url : '{{ path('api_customer_filter') }}',
                type : 'post',
                data : function(data){
                    data.name = $("#filter_name").val(),
                    data.address = $("#filter_address").val(),
                    data.phone = $("#filter_phone").val(),
                    data.email = $("#filter_email").val(),
                    data.website = $("#filter_website").val(),
                    data.billingEmail = $("#filter_billing_email").val(),
                    data.searchFlags = $("#searchFlags").prop("checked"),
                    data.flagged = $("#switchFlagged").prop("checked")? true : null,
                    data.bankrupt = $("#switchBankrupt").prop("checked")? true: null
                }
            },
            "columns": [
                {
                    "data": "name",
                    "render": function ( data, type, full, meta ) {
                        var output = '<a href="/admin/customer/edit/'+ full.id +'" target="_blank">' + full.name + '</a>';
                        output += '<br/><div style="display: inline-flex; margin-top: 10px;">';
                            if (full.flagged) {
                                output += '<i class="bi bi-flag text-warning mr-10"></i>';
                            }
                            if (full.bankrupt) {
                                output += '<i class="bi bi-flag-fill text-danger mr-10"></i>';
                            }
                        output += '</div>';
                        return  output;
                    }
                },
                {
                    "data": "",
                    "render": function ( data, type, full, meta ) {
                        var output = full.address1 +'<br/>';
                        output += full.address2 +'<br/>';
                        output += full.city +'<br/>';
                        output += full.postcode + ' ' + full.state +'<br/>';

                        return output;
                    }
                },
                {
                    "data": "phone",
                    "render": function ( data, type, full, meta ) {
                        return full.phone;
                    }
                },
                {
                    "data": "billingEmail",
                    "render": function ( data, type, full, meta ) {
                        return full.billingEmail;
                    }
                },
                {
                    "data": "email",
                    "render": function ( data, type, full, meta ) {
                        return full.email;
                    }
                },
                {
                    "data": "website",
                    "render": function ( data, type, full, meta ) {
                        return full.website;
                    }
                },
                {
                    "data": "actions",
                    "render" : function (data, type, full, 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/customer/edit/'+ full.id +'"><i class="bi bi-pencil-square"></i> &nbsp;&nbsp;Edit {{ 'Customer'|trans }}</a>';
                        output += '<a class="dropdown-item" href="/admin/customer/supervisors/'+ full.id +'"><i class="bi bi-person-rolodex"></i> &nbsp;&nbsp;Manage {{ 'Supervisor'|trans }}s</a>';
                        output += '<a class="dropdown-item delete_builder_btn" href="javascript:void(0);" data-customerid="'+ full.id +'"><i class="bi bi-trash" style="color: red;"></i> &nbsp;&nbsp;Delete Builder</a>';
                        output += '</div>';
                        output +=  '</div>';

                        return output;
                    }
                }
            ],
            error: function(xhr, status, error) {
                toastr.options.progressBar = true;
                toastr.error('Failed to Retrieve {{ 'Customer'|trans }} Data!', 'Error!');
            }
        });


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

                customerTable.ajax.reload();
                $('#filterCustomerModel').modal('hide');
            });

            $(document).on("click", ".delete_builder_btn", function (e) {
                e.preventDefault();

                var customerId = $(this).attr("data-customerid");

                Swal.fire({
                    title: "Are you sure?",
                    text: "{{ 'Customer'|trans }} will be deleted!",
                    icon: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#3085d6",
                    cancelButtonColor: "#d33",
                    confirmButtonText: "Delete"
                }).then((result) => {
                    if (result.isConfirmed) {

                        $.ajax({
                            type: 'POST',
                            url: '{{ path('api_customer_delete') }}',
                            datatype: 'json',
                            data: {
                                id : customerId
                            }
                        })
                            .done(function (data) {
                                Swal.fire({
                                    title: "Deleted!",
                                    text: "{{ 'Customer'|trans }} deleted successfully!.",
                                    icon: "success"
                                });
                                setTimeout(function(){ location.reload(); }, 1500);
                            })
                            .fail(function (jqXHR, textStatus, errorThrown) {
                                toastr.options.progressBar = true;
                                toastr.error('Failed to {{ 'Customer'|trans }} {{ 'Supervisor'|trans }}!', 'Error!');
                            });
                    }
                });

            });

            $("#deleteBuilderSubmitBtn").on("click", function () {

                var builderId = $("#deleteBuilderId").val();

                $.ajax({
                    type: 'post',
                    url: '/api/builder/delete',
                    datatype: 'json',
                    data: {
                        id: builderId
                    }
                })
                .done(function (data) {
                    Swal.fire(
                        'Success!',
                        'Builder Deleted Successfully!',
                        'success'
                    );

                    setTimeout(function(){ location.reload(); }, 2500);
                })
                .fail(function (jqXHR, textStatus, errorThrown) {
                    new Noty({
                        theme: 'metroui',
                        type: 'error',
                        text: "<strong>Error!</strong> Failed to Delete Builder!",
                        timeout: 2000
                    }).show();
                });
            });
        });
    </script>
{% endblock %}