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

{% block title %} Customers{% endblock %}

{% block body %}

    <div class="app-content-header">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-6"><h3 class="mb-0"> Edit {{ 'Customer'|trans }} - ({{ customer.companyName }})</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"><a href="{{ path('admin_customer_index') }}">{{ 'Customers'|trans }}</a></li>
                        <li class="breadcrumb-item active">Manage {{ 'Supervisor'|trans }}s</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" style="padding-bottom: 0px;">
                            {% include '@Customer/customer/partials/customer-header-links.html.twig' %}
                        </div>
                        <div class="card-body">
                            <div class="tab-content">
                                <div id="" class="tab-pane active">

                                    <div class="row">
                                        <div class="col-md-12">
                                        <button type="button" class="btn btn-success mb-4" id="add{{ 'Supervisor'|trans }}Btn" style="float: right;" data-bs-toggle="modal" data-bs-target="#add{{ 'Supervisor'|trans }}Modal">
                                            <i class="fa fa-plus"></i>
                                            Add New {{ 'Supervisor'|trans }}
                                        </button>
                                    </div>
                                    </div>

                                    <table class="table table-bordered" id="supervisor_table">
                                        <thead>
                                        <tr>
                                            <td><strong>{{ 'Supervisor'|trans }} Name</strong></td>
                                            <td><strong>Phone</strong></td>
                                            <td><strong>Email</strong></td>
                                            <td><strong>Notes</strong></td>
                                            <td><strong>Actions</strong></td>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        {% for supervisor in customer.supervisors %}
                                            {% if not supervisor.deletedOn %}
                                            <tr>
                                                <td>{{ supervisor.name }}</td>
                                                <td>{{ supervisor.phone }}</td>
                                                <td>{{ supervisor.email }}</td>
                                                <td>{{ supervisor.notes }}</td>
                                                <td>
                                                    <div class="dropdown">
                                                        <button class="btn btn-dark dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                                            <i class="bi bi-chevron-down"></i> Actions
                                                        </button>
                                                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                                            <a class="dropdown-item edit_supervisor_btn" href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#edit{{ 'Supervisor'|trans }}Modal" data-supervisorid="{{ supervisor.id }}"><i class="bi bi-pencil-square"></i> &nbsp;&nbsp; Edit {{ 'Supervisor'|trans }}</a>
                                                            <a class="dropdown-item delete_supervisor_btn" href="javascript:void(0);" data-supervisorid="{{ supervisor.id }}" data-supervisorName="{{ supervisor.name }}">
                                                                <i class="bi bi-trash" style="color: red;"></i> &nbsp;&nbsp; Delete {{ 'Supervisor'|trans }}
                                                            </a>
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>
                                            {% endif %}
                                        {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            </div>

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

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

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


{% endblock %}

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

        $(document).ready(function () {
            $('#supervisor_table').DataTable({});


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

                var supervisorId = $(this).data('supervisorid');

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

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

            });
        });

    </script>

{% endblock %}