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

{% block title %} Projects{% endblock %}

{% block body %}

    <style>
        .progress {
            border-radius: 5px;
        }
    </style>

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

                            <div style="float:right" data-toggle="tooltip" data-placement="top" title="Add New Project">
                                <button data-bs-toggle="modal" data-bs-target="#addNewProjectModal" type="button" class="btn btn-success new_project_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 Projects">
                                <button data-bs-toggle="modal" data-bs-target="#filterProjectsModal" type="button" class="btn btn-primary filter_projects_btn" >
                                    <i class="bi bi-search"></i> Search
                                </button>
                            </div>
                        </div>
                        <div class="card-body" style="overflow-x: auto;">
                            <table id="projects_table" class="table table-bordered table-striped">
                                <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Code</th>
                                    <th>Start Date</th>
                                    <th>Estimated End Date</th>
                                    <th>Estimated Budget</th>
                                    <th>Estimated Work Hours</th>
                                    <th>Status</th>
                                    <th>Last Updated</th>
                                    <th>Actions</th>
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                {% include '@Project/project/partials/project-filter-modal.html.twig' %}

                {% include '@Project/project/partials/project-create-modal.html.twig' %}

                {% include '@Project/project/partials/project-notes-modal.html.twig' %}

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

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

            var projectTable = $('#projects_table').DataTable({
                serverSide: true,
                processing: true,
                searching: false,
                ajax: {
                    url: '{{ path('api_project_filter') }}',
                    type: 'POST',
                    data: function (d) {
                        d.name = $("#project_edit_name").val(),
                        d.code = $("#project_edit_code").val(),
                        d.description = $("#project_edit_description").val(),
                        d.status = $("#project_edit_status").val(),
                        d.startDate = $("#project_edit_start_date").val(),
                        d.endDate = $("#project_edit_end_date").val(),
                        d.budget = $("#project_edit_estimated_budget").val(),
                        d.workHours = $("#project_edit_estimated_work_hours").val()

                        return d;
                    }
                },
                columns: [
                    {
                        data: 'name',
                        render: function (data, type, row, meta) {
                            var output = '<a href="/admin/project/edit/' + row.id + '">' + row.name + '</a>';
                            if (row.notes > 0) {
                                output += '<br/><span style="cursor: pointer;" class="badge bg-info notes_project_btn" data-bs-toggle="modal" data-bs-target="#projectNotesModal" data-project_id="' + row.id + '">' + row.notes + '</span>';
                            }
                            return output;
                        }
                    },
                    {
                        data: 'code',
                        render: function (data, type, row, meta) {
                            var output = row.code;

                            return output;
                        }
                    },
                    {
                        data: 'startDate',
                        render: function (data, type, row, meta) {
                            var output = row.startDate;

                            return output;
                        }
                    },
                    {
                        data: 'estimatedEndDate',
                        render: function (data, type, row, meta) {
                            var output = row.estimatedEndDate;

                            return output;
                        }
                    },
                    {
                        data: 'estimatedBudget',
                        render: function (data, type, row, meta) {
                            var output = "$" + row.estimatedBudget;

                            return output;
                        }
                    },
                    {
                        data: 'estimatedWorkHours',
                        render: function (data, type, row, meta) {
                            var output = row.estimatedWorkHours;

                            return output;
                        }
                    },
                    {
                        data: '',
                        orderable: false,
                        render: function (data, type, row, meta) {
                            var output = row.status;

                            var progressBg = '';
                            if (row.progress == 100) {
                                progressBg = 'bg-success';
                            }

                            output += '<br/><div class="progress" role="progressbar" aria-label="' + row.status + '" aria-valuenow="' + row.progress + ' " aria-valuemin="0" aria-valuemax="100">';
                            output += '<div class="progress-bar ' + progressBg + '" style="width: ' + row.progress + '%"></div>';
                            output += '</div>';

                            return output;
                        }
                    },
                    {
                        data: '',
                        orderable: false,
                        render: function (data, type, row, meta) {
                            var output = "";

                            if (row.updatedOn == "") {
                                output += row.createdOn + '<br/><small class="text-muted">' + row.createdBy.name + '</small>'
                            }

                            return output;
                        }
                    },
                    {
                        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/project/edit/' + row.id + '"><i class="bi bi-pencil-square"></i> &nbsp;&nbsp; Edit Project</a>';
                            output += '<a class="dropdown-item notes_project_btn" href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#projectNotesModal" data-project_id="' + row.id + '"><i class="bi bi-journal-text"></i> &nbsp;&nbsp; Project Notes</a>';
                            output += '<a class="dropdown-item delete_project_btn" href="javascript:void(0);" data-project_id="' + row.id + '" data-project_name="' + row.name + '"><i class="bi bi-trash" style="color: red;"></i> &nbsp;&nbsp; Delete Project</a>';
                            output += '</div>';
                            output += '</div>';

                            return output;
                        }
                    }
                ]
            });

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

                projectTable.ajax.reload();
                $('#filterProjectsModal').modal('hide');
            });

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

                $("#filter_project_name").val(''),
                    $("#filter_project_address").val(''),
                    $("#filter_project_reference").val(''),
                    $("#filter_project_phone").val(''),
                    $("#filter_project_email").val(''),
                    $("#filter_project_contact_person").val(''),
                    $("#filter_project_contact_person_phone").val('')

                projectTable.ajax.reload();
                $('#filterProjectModel').modal('hide');
            });

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

                var projectId = $(this).attr("data-project_id");

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

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

            });
        });
    </script>

{% endblock %}