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

{% block title %} Quotations - Quotation Jobs{% endblock %}

{% block body %}

        <div class="app-content-header">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-sm-6"><h3 class="mb-0">Quotation Jobs ({{ quotation.referenceNumber }})</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_quotation_index') }}">Quotations</a></li>
                            <li class="breadcrumb-item active">Quotation Jobs</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>

        <div class="app-content">
            <div class="container-fluid">
                <div class="row">
                        <div class="col-md-12">
                            <div class="card">
                                <div class="card-header with-border" style="padding-bottom: 0px;">
                                    {% include '@Quotation/quotation/partials/quotation-header-links.html.twig' %}
                                </div>
                                <div class="card-body">

                                    <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">
                                            {{ completedJobCount }} out of {{ totalJobCount }} Jobs completed
                                        </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>

{% endblock %}

{% block javascripts %}

    <script type="text/javascript">

        $( document ).ready(function() {

            $('#job_table').DataTable({
                "processing": true,
                "serverSide": true,
                "searching": false,
                "ajax": {
                    url : '{{ path('api_jobs_filter') }}',
                    type : 'post',
                    data : function(data){
                        data.quotation = {{ quotation.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.referenceNo +"</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 %}