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

{% block title %} Jobs{% endblock %}


{% block stylesheets %}
    <style>
        .rework-jobs {
            background-color: bisque;
        }
        .jobUnfinished {
            color:red;
            font-weight:bold;
        }
        .jobFinished {
            color:green;
            font-weight:bold;
        }
    </style>
{% endblock %}

{% block body %}

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

                                    <div style="float:right" data-toggle="tooltip" data-placement="top" title="Add New Job">
                                        <button data-bs-toggle="modal" data-bs-target="#addNewJobModal" type="button" class="btn btn-success new_job_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 Jobs">
                                        <button data-bs-toggle="modal" data-bs-target="#filterJobModel" type="button" class="btn btn-primary filter_jobs_btn" >
                                            <i class="bi bi-search"></i> Search
                                        </button>
                                    </div>

                                </div>
                                <div class="card-body" style="overflow-x: auto;">
                                    <div class="col-md-12 mb-5">
                                        <a href="{{ path('admin_job_index_uncomplete_jobs') }}"><button type="button" class="btn btn-warning btn-lg {% if selectedFilter == "UNCOMPLETE" %}border-active{% endif %}">Unfinished Jobs</button></a>
                                        <a href="{{ path('admin_job_index_completed_jobs') }}"><button type="button" class="btn btn-success btn-lg {% if selectedFilter == "COMPLETED" %}border-active{% endif %}">Finished Jobs</button></a>
                                        <a href="{{ path('admin_job_index_quoted_jobs') }}"><button type="button" class="btn btn-secondary btn-lg {% if selectedFilter == "QUOTED" %}border-active{% endif %}">Quoted Jobs</button></a>
                                        <a href="{{ path('admin_job_index') }}"><button type="button" class="btn btn-primary btn-lg {% if selectedFilter == "ALL" %}border-active{% endif %}">All Jobs</button></a>
                                    </div>
                                    <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>
                                                <th>Actions</th>
                                            </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                </div>
                            </div>
                        </div>


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

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

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

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

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

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

                        <!-- /.col (RIGHT) -->
                    </div>
            </div>
        </div>

{% endblock %}

{% block javascripts %}

    <script type="application/javascript">

        $('.datepicker_fields').datepicker({dateFormat: 'yy-mm-dd',todayHighlight: true});

        $('#job_table').DataTable({
            "processing": true,
            "serverSide": true,
            "searching": false,
            "ajax": {
                url : '{{ path('api_jobs_filter') }}',
                type : 'post',
                data : function(data){
                    data.id = $("#filter_job_id").val(),
                    data.date = $("#filter_job_date").val(),
                    data.comment = $("#filter_job_comment").val(),
                    data.address = $("#filter_job_address").val(),
                    data.color = $("#filter_job_color").val(),
                    data.supervisor = $("#filter_job_supervisor").val(),
                    data.isUrgent = ($("#filter_is_urgent").prop("checked") == true ? 1:0),
                    data.urgentDate = $("#filter_urgent_date").val(),
                    data.project = $("#filter_job_project").val(),
                    data.workPerformed = $("#filter_work_performed").val(),
                    data.orderNumber = $("#filter_order_number").val(),
                    data.statuses = $("#filter_job_status").val(),
                    data.areaNumber = $("#filter_area_number").val()
                }
            },
            "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 ) {

                        var output = full.address;

                        if (full.areaNumber.length > 0) {
                            output += '<br/><span class="badge text-bg-secondary">' + full.areaNumber + '</span>';
                        }

                        return output;
                    }
                },
                {
                    "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;
                    }
                },
                {
                    "data": "actions",
                    orderable: false,
                    "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/job/edit/' + full.id + '" target="_blank"><i class="bi bi-pencil-square"></i> &nbsp;&nbsp;  Edit Job</a>';
                        output += '<a class="dropdown-item action_btn" href="/admin/job/invoices/'+ full.id +'"><i class="nav-icon bi bi-currency-dollar"></i> &nbsp;&nbsp; View Invoices</a>';
                        output += '<a class="dropdown-item notes_job_btn" href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#jobNotesModal" data-job_id="' + full.id + '"><i class="bi bi-journal-text"></i> &nbsp;&nbsp; Job Notes</a>';
                        output += '<a class="dropdown-item action_btn" href="/admin/job/files/' + full.id + '"><i class="bi bi-upload"></i> &nbsp;&nbsp; Job Files</a>';
                            if (!full.isRework) {
                                output += '<a class="dropdown-item reworks_job_btn action_btn" href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#jobReworksModal" data-job_no_reworks="' + full.id + '"><i class="bi bi-wrench"></i> &nbsp;&nbsp; Rework Job</a>';
                            }
                        output += '<a class="dropdown-item job_sheet_btn action_btn" href="/admin/pdf/job/view/job-sheet/' + full.id + '" target="_blank"><i class="bi bi-printer"></i> &nbsp;&nbsp; Print Job Sheet</a>';
                        output +=        '<a class="dropdown-item delete_job_btn" href="javascript:void(0);" data-job_id="' + full.id + '"><i class="bi bi-trash" style="color: red;"></i> &nbsp;&nbsp; Delete Job</a>';
                        output +=             '</div>';
                        output +=     '</div>';

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

    </script>

{% endblock %}