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

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

{% block body %}

    <div class="app-content-header">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-6"><h3 class="mb-0">Project ({{ project.name }})</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_project_index') }}">Projects</a></li>
                        <li class="breadcrumb-item active">Edit Project</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 '@Project/project/partials/project-header-links.html.twig' %}
                        </div>
                        <div class="card-body">
                            <div class="tab-content">
                                <div class="row">
                                    <div class="col-md-10" id="job_progress">
                                        <div class="progress mb-2" role="progressbar" aria-label="Job Progress" aria-valuenow="{{ progress }}" aria-valuemin="0" aria-valuemax="100">
                                            <div class="progress-bar bg-success" style="width: {{ progress }}%; border-radius: 0.375rem"></div>
                                        </div>
                                    </div>
                                    <div class="col-md-2" id="job_progress_text">
                                        <p>{{ completedJobs }} out of {{ totalJobs }} Invoices Completed</p>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-12">
                                        <table id="job_table" class="table table-bordered table-striped">
                                            <thead>
                                            <tr>
                                                <th>Job Id</th>
                                                <th>Type</th>
                                                <th>Status</th>
                                                <th>Date</th>
                                                <th>Comment</th>
                                                <th>Address</th>
                                                <th>Color</th>
                                                <th>{{ 'Supervisor'|trans }}</th>
                                                <th>Project</th>
                                                <th>Urgent</th>
                                            </tr>
                                            </thead>
                                            <tbody></tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>

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

    {% include '@Job/jobs/partials/job-notes-modal.twig' %}

    <script type="text/javascript">
        $('#job_table').DataTable({
            "processing": true,
            "serverSide": true,
            "searching": false,
            "ajax": {
                url : '{{ path('api_jobs_filter') }}',
                type : 'post',
                data : function(data){
                        data.project = {{ project.id }}
                }
            },
            "columns": [
                {
                    "data": "id",
                    "render": function ( data, type, full, meta ) {
                        var output =  "<div class='col-md-12'><a target='_blank' href='/admin/job/edit/"+ full.id +"'>"+ full.id +"</a></div>";
                        output += "<div class='col-md-12'>&nbsp;</div>";
                        if (full.notes) {
                            output += "<div class='col-md-12 notes_job_btn' data-bs-toggle='modal' data-bs-target='#jobNotesModal' data-job_id='"+ full.id +"'><span style='cursor: pointer;' class='badge bg-info notes_project_btn'>"+full.notes+"</span></div>";
                        }

                        return output;
                    }
                },
                {
                    "data": "type",
                    "render": function ( data, type, full, meta ) {
                        var jobType = '<h5><span class="badge bg-warning">REWORK</span></h5>';
                        if (full.type == "JOB"){
                            jobType = '<h5><span class="badge bg-primary">JOB</span></h5>';
                        }
                        return jobType;
                    }
                },
                {
                    "data": "status",
                    "render": function ( data, type, full, meta ) {
                        var statusClass = "";
                        if (full.status == "COMPLETED"){
                            statusClass = "jobFinished"
                        }
                        return "<span class='"+ statusClass +"'>" + full.status + "</span>";
                    }
                },
                {
                    "data": "date",
                    "render": function ( data, type, full, meta ) {
                        return full.date;
                    }
                },
                {
                    "data": "comment",
                    "render": function ( data, type, full, meta ) {
                        return full.comment;
                    }
                },
                {
                    "data": "address",
                    "render": function ( data, type, full, meta ) {
                        return full.address;
                    }
                },
                {
                    "data": "color",
                    "render": function ( data, type, full, meta ) {

                        var color = null;

                        if ('color_name' in full.color) {
                            color = full.color.color_name;
                        }

                        return color;
                    }
                },
                {
                    "data": "supervisor",
                    "render": function ( data, type, full, meta ) {
                        var supervisor = null;

                        if ('name' in full.supervisor) {
                            supervisor = full.supervisor.name +" -> <i>" + full.supervisor.customerName + "</i>";
                        }

                        return supervisor;
                    }
                },
                {
                    "data": "project",
                    "render": function ( data, type, full, meta ) {
                        if (full.project.length == 0) {
                            return '';
                        }
                        return '<a href="/admin/project/edit/'+ full.project.id +'" target="_blank">'+ full.project.name +'</a>';
                    }
                },
                {
                    "data": "urgent",
                    "render": function ( data, type, full, meta ) {
                        var output = full.urgentDate;
                        if (full.isUrgent) {
                            output += '<h5><span class="badge bg-warning" style="color: #000000;">URGENT</span></h5>';
                        }
                        return output;
                    }
                }
            ],
            error: function(xhr, status, error) {
                toastr.options.progressBar = true;
                toastr.error('Failed to Retrieve Jobs!', 'Error!');
            }
        });
    </script>

{% endblock %}