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

{% block title %} Jobs - Job Sheet Printer{% endblock %}

{% block stylesheets %}
<style>
    .not-printed {
        color:red;
        font-weight:bold;
    }
    .printed {
        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">Job Sheet Printer</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">Job Sheet Printer</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">Job Sheets</h3>

                                <div style="float:right; margin-right: 10px; display: inline-flex;">
                                    <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="#filterPrintingJobSheets" type="button" class="btn btn-primary filter_jobs_btn" >
                                            <i class="bi bi-search"></i> Search
                                        </button>
                                    </div>
                                    <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> Bulk Options
                                        </button>
                                        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
                                            <a class="dropdown-item" id="bulk_print_job_sheets" href="javascript:void(0);"><i class="bi bi-file-earmark-ruled"></i> &nbsp;&nbsp; Print Selected Sheets</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body">
                                <table class="table table-bordered table-striped" id="unprintedSheetsTable">
                                    <thead>
                                    <tr>
                                        <th>
                                            <div class="form-check">
                                                <input class="form-check-input job_print_select_all" type="checkbox">
                                            </div>
                                        </th>
                                        <th>Date</th>
                                        <th>Job Type</th>
                                        <th>Job Id</th>
                                        <th>Address</th>
                                        <th>{{ 'Supervisor'|trans }}</th>
                                        <th>Print Status</th>
                                        <th>Action</th>
                                    </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
        </div>
    </div>

    <!--Filter Job Sheets Model Start -->
    <div class="modal fade" id="filterPrintingJobSheets" style="display: none;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Filter Job Sheets</h4>
                    <button type="button" class="close modal-close" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                        <div class="form-group row mb-3">
                            <label for="job_id" class="col-sm-2 col-form-label">Job Id</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="job_id" name="job_id" placeholder="Job Id">
                            </div>
                        </div>
                        <div class="form-group row mb-3">
                            <label for="job_date" class="col-sm-2 col-form-label">Job Date</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control datepicker_fields" id="job_date" name="job_date" placeholder="Job Date">
                            </div>
                        </div>
                        <div class="form-group row mb-3">
                            <label for="job_address" class="col-sm-2 col-form-label">Job Address</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="job_address" name="job_address" placeholder="Job Address">
                            </div>
                        </div>
                    </form>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default pull-left" data-bs-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary" id="filterJobSheetsSubmitBtn">Filter</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

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

{% endblock %}

{% block javascripts %}
<script type="text/javascript">
    $('.datepicker_fields').datepicker({dateFormat: 'yy-mm-dd',todayHighlight: true});

    $('#unprintedSheetsTable').DataTable({
        "processing": true,
        "serverSide": true,
        "searching": false,
        "ajax": {
            url : '/api/job/filter-sheets',
            type : 'post',
            data : function(data){
                data.id = $("#job_id").val(),
                data.date = $("#job_date").val(),
                data.address = $("#job_address").val()
            }
        },
        "columns": [
            {
                "data": "job",
                "orderable": false,
                "render": function ( data, type, full, mets) {
                    var output = '<div class="form-check">';
                    output += '<input class="form-check-input job_print_select" type="checkbox" value="'+ full.id +'">';
                    output += '</div>';

                    return output;
                }
            },
            {
                "data": "date",
                "render": function ( data, type, full, meta ) {
                    return full.date;
                }
            },
            {
                "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": "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>";
                    }
                    if (full.isUrgent) {
                        output += '<div class="col-md-12"><span class="badge bg-warning" style="color: #000000;">URGENT</span></div>';
                    }
                    return output;
                }
            },
            {
                "data": "address",
                "render": function ( data, type, full, meta ) {
                    return full.address;
                }
            },
            {
                "data": "supervisor",
                "render": function ( data, type, full, meta ) {
                    var supervisor = full.supervisor;
                    return supervisor.name +" -> <i>" + supervisor.customerName + "</i>";
                }
            },
            {
                "data": "status",
                "render": function ( data, type, full, meta ) {
                    var statusClass = "printed";
                    var status = "PRINTED";

                    if (!full.printStatus){
                        status = "NOT PRINTED"
                        statusClass = "not-printed";
                    }
                    return "<span class='"+ statusClass +"'>" + status + "</span>";
                }
            },
            {
                "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 print_individual_job_sheet" data-jobId="'+ full.id +'" href="javascript:void(0);"><i class="bi bi-file-earmark-ruled"></i> &nbsp;&nbsp; Print Job Sheet</a>';
                    if (full.type == "REWORK") {
                        output += '<a class="dropdown-item print_individual_rework_sheet bg-warning" data-jobId="'+ full.id +'" href="javascript:void(0);"><i class="fas fa-print"></i> &nbsp;&nbsp; Print Rework Sheet</a>';
                    }
                    output += '</div>';
                    output += '</div>';

                    return output;
                }
            }
        ],
        error: function(xhr, status, error) {
            new Noty({
                theme: 'metroui',
                type: 'error',
                text: "<strong>Error!</strong> Failed to Retrieve Job Sheets!",
                timeout: 2000
            }).show();
        }
    });

    $("#filterJobSheetsSubmitBtn").on("click", function () {
        $("#unprintedSheetsTable").DataTable().ajax.reload();
        $('#filterPrintingJobSheets').modal('toggle');
    });


    $(document).on("click", ".job_print_select_all", function () {
        if($(this).prop('checked')){
            $( ".job_print_select" ).prop( "checked", true );
        }
        else{
            $( ".job_print_select" ).prop( "checked", false );
        }
    });

    $(document).on("click", ".print_individual_job_sheet, .download_individual_job_sheet", function (e) {

        var includeImageCheckbox = $(this).parent('div').parent('div').parent('td').parent('tr').find('.job_print_images');
        var jobId = $(this).attr("data-jobId");

        var includeImgs = "";

        if (includeImageCheckbox.prop('checked') == true){
            includeImgs = "images=1"
        }

        var download = "";
        if ($(this).hasClass('download_individual_job_sheet')) {
            download = "download=1";
        }

        window.open("/admin/pdf/job/view/job-sheet/"+jobId+"?printed=1&"+includeImgs+"&"+download);

        $("#unprintedSheetsTable").DataTable().ajax.reload();
    });

    $(document).on("click", ".print_individual_rework_sheet", function (e) {

        var includeImageCheckbox = $(this).parent('div').parent('div').parent('td').parent('tr').find('.job_print_images');
        var jobId = $(this).attr("data-jobId");

        window.open("/admin/pdf/job/view/rework-sheet/"+jobId+"?save=1&printed=1");

        $("#unprintedSheetsTable").DataTable().ajax.reload();
    });

    $(document).on("click", '#bulk_print_job_sheets', function (e) {
        e.preventDefault();

        var jobIds = [];
        var elements = $(".job_print_select");

        for (var i = 0; i < elements.length; i++) {
            if ($(elements[i]).prop('checked')) {
                jobIds.push($(elements[i]).val());
            }
        }

        if (jobIds.length == 0) {
            toastr.options.progressBar = true;
            toastr.error('Please select Job Sheets to print!', 'Error!');
            return;
        }

        var jobIdsJson = JSON.stringify(jobIds);

        var url = '{{ path('admin_pdf_job_view_job_sheet_bulk_print') }}?jobIds=' + btoa(jobIdsJson);

        window.open(url, '_blank');

        $("#unprintedSheetsTable").DataTable().ajax.reload();
    });
</script>
{% endblock %}