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

{% block title %} Jobs - Job Sheet Tracker{% 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 Tracker</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 Tracker</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>

    <div class="app-content">
        <div class="container-fluid">
            <div class="row g-4">
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-header with-border">
                                <h3 class="card-title">Barcode Scanner</h3>
                            </div>
                            <div class="card-body">
                                <form class="form-horizontal" action="javascript:void(0)">
                                    <div class="form-group">
                                        <label for="barcode_number" class="col-sm-6 control-label">Barcode Number <span class="compulsory">*</span></label>
                                        <div class="col-sm-9">
                                            <input type="text" class="form-control" id="barcode_number" placeholder="Barcode Number" autocomplete="off">
                                        </div>
                                    </div>
                                    <div class="col-md-12" style="margin-top: 20px;"><p>Place cursor in the "Barcode Number" input field and scan the barcode or type the barcode number and press "Track Job Sheet" Button to proceed.</p></div>

                                    <button type="button" class="btn btn-primary pull-right" id="track_job_sheet">Track Job Sheet</button>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-header with-border">
                                <h3 class="card-title">Job Sheet History</h3>
                            </div>
                            <div class="card-body">
                                <div class="row" id="barcode_details_div">

                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header with-border">
                                <h3 class="card-title">All OUT Job Sheets</h3>
                            </div>
                            <div class="card-body">
                                <table class="table table-striped" id="job_sheet_out_table">
                                    <thead>
                                    <tr>
                                        <th>Job Number</th>
                                        <th>Job Address</th>
                                        <th>User</th>
                                        <th>Direction</th>
                                        <th>Date</th>
                                        <th>Actions</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    {% for outJob in outJobs %}
                                        {% set jobSheetHistory = jobSheetHistoryService.jobSheetHistory(outJob, true) %}
                                    <tr>
                                        <td>
                                            <div class='col-md-12'><a target='_blank' href='{{ path('admin_job_edit', {'jobId': outJob.id}) }}'>{{ outJob.referenceNumber }}</a></div>
                                            <div class='col-md-12'>&nbsp;</div>
                                            {% if outJob.notes %}
                                            <div class='col-md-12 jobNotesDiv' data-toggle='modal' data-target='#jobNotesModal' data-jobId='{{ outJob.id }}'><span><i class='fas fa-file'></i></span></div>
                                            {% endif %}
                                            {% if outJob.urgentDate %}
                                            <div class='col-md-12'><span class='right badge badge-primary'> <i class='fas fa-star'></i> URGENT</span></div>
                                            {% endif %}
                                            {% if outJob.reworkDate %}
                                            <div class='col-md-12'><span class='right badge badge-warning'>REWORK</span></div>
                                            {% endif %}
                                        </td>
                                        <td>{{ outJob.address }}</td>
                                        <td>{{ jobSheetHistory.sheetHistoryUser.getFullName() }}</td>
                                        <td>
                                            {% if outJob.inOutStatus == "O" %}
                                                OUT
                                            {% elseif outJob.inOutStatus == "I" %}
                                                IN
                                            {% else %}
                                                ERROR!
                                            {% endif %}
                                        </td>
                                        <td>{{ jobSheetHistory.historyTimestamp | date("d/m/Y H:i:s") }}</td>
                                        <td>
                                            <div class="dropdown" data-toggle="tooltip" data-placement="top" title="View Actions">
                                                <button class="btn btn-dark dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                    <i class="fas fa-chevron-down"></i>
                                                </button>
                                                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                                    <a class="dropdown-item view_job_sheet_history_btn action_btn" href="javascript:void(0);" data-job_no_history="{{ outJob.id }}0"><i class="fas fa-search"></i> &nbsp;&nbsp; View Job Sheet History</a>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
<script type="text/javascript">

    $("#barcode_number").focus();

    $('#job_sheet_out_table').DataTable();

    function getSheetHistory(barcodeNo){

        if(barcodeNo==null || barcodeNo=="" || barcodeNo.length==0){

            toastr.options.progressBar = true;
            toastr.error('Barcode Number cannot be Blank!', 'Error!');

            $("#barcode_number").val("");
            $("#barcode_number").focus();
        }
        else{
            $("#barcode_details_div").html("");
            $("#barcode_number").val("");
            $("#barcode_number").focus();

            // fetching job sheet information
            $.ajax({
                type: 'post',
                url: '{{ path('api_jobs_job_sheet_details') }}?',
                datatype: 'json',
                data: {
                    barcodeNo: barcodeNo
                }
            })
                .done(function (response) {

                    var output = '';
                    var printed = "NO";
                    var printedStyle = "not-printed";

                    output += "<div class='col-md-6'><h3>Job Number : "+ response.jobId +"</h3></div>";
                    if (response.printed){
                        printed = "YES";
                        printedStyle = "printed";
                    }
                    output += "<div class='col-md-6'><h3>Printed : <span class='"+ printedStyle +"'>"+ printed +"</span></h3></div>";
                    output += "<div class='col-md-12'><div class='alert alert-info' style='font-size:large;'><strong>"+ response.direction +"</strong> with "+ response.userFullName +".</div></div>";
                    output += "<div class='col-md-12'>";
                    output += "<table class='table table-striped'>";
                    output += "<thead>";
                    output += "<tr>";
                    output += "<th>User</th>";
                    output += "<th>Direction</th>";
                    output += "<th>Scanned Date</th>";
                    output += "<th>Scanned For Date</th>";
                    output += "<th>Job Status</th>";
                    output += "</tr>";
                    output += "</thead>";
                    output += "<tbody>";
                    for (var i = 0; i < response.history.length; i++) {
                        output += "<tr>";
                        output += "<td>"+ response.history[i].userFullName +"</td>";
                        output += "<td>"+ response.history[i].direction +"</td>";
                        output += "<td>"+ response.history[i].scannedDate +"</td>";
                        output += "<td>"+ response.history[i].scannedForDate +"</td>";
                        output += "<td>"+ response.history[i].status +"</td>";
                        output += "</tr>";
                    }
                    output += "</tbody>";
                    output += "</table>";
                    output += "</div>";

                    $("#barcode_details_div").html(output);
                })
                .fail(function (jqXHR, textStatus, errorThrown) {
                    new Noty({
                        theme: 'metroui',
                        type: 'error',
                        text: "<strong>Error!</strong> Failed to Retrieve Job Sheet Information!",
                        timeout: 2000
                    }).show();
                });
        }
    }

    $("#barcode_number").change(function() {
        var barcode_number = $("#barcode_number").val();
        getSheetHistory(barcode_number);
    });

    $(".view_job_sheet_history_btn").on("click",function() {

        var barcode_number = $(this).data("job_no_history");
        getSheetHistory(barcode_number);
    });
</script>
{% endblock %}