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

{% block title %} Reports{% endblock %}


{% block stylesheets %}
    <style type="text/css">
        #filter-container {
            background-color: #EAEAEA;
            padding: 10px;
            margin-bottom: 10px;
            border-radius: 10px;
        }
    </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">Reports</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_reports_index') }}">Reports</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Job Report</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="Job Report">Job Report</h3>
                        </div>
                        <div class="card-body">
                            <div class="row" id="filter-container">
                                <div class="col-md-2 mb-3">
                                    <div class="form-group">
                                        <label for="job_status" class="col-sm-12 control-label">Job Status</label>
                                        <div class="col-sm-12">
                                            <select class="form-control select2_fields" id="job_status">
                                                <option value="UNCOMPLETE">NOT COMPLETED</option>
                                                <option value="COMPLETED">COMPLETED</option>
                                                <option value="">ALL</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-2 mb-3">
                                    <div class="form-group">
                                        <label for="job_date_from" class="col-sm-12 control-label">Job Date <small class="text-muted">(From)</small></label>
                                        <div class="col-sm-12">
                                            <input type="text" class="form-control datepicker_fields" id="job_date_from" placeholder="YYYY-MM-DD" autocomplete="off">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-2 mb-3">
                                    <div class="form-group">
                                        <label for="job_date_to" class="col-sm-12 control-label">Job Date <small class="text-muted">(To)</small></label>
                                        <div class="col-sm-12">
                                            <input type="text" class="form-control datepicker_fields" id="job_date_to" placeholder="YYYY-MM-DD" autocomplete="off">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-2 mb-3">
                                    <div class="form-group">
                                        <label for="job_customer" class="col-sm-12 control-label">{{ 'Customer'|trans }}</label>
                                        <div class="col-sm-12">
                                            <select class="form-control select2_fields" id="job_customer">
                                                <option value="">ALL</option>
                                                {% for customer in customers %}
                                                    <option value="{{ customer.id }}">{{ customer.companyName }}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-2 mb-3">
                                    <div class="form-group">
                                        <label for="job_supervisor" class="col-sm-12 control-label">{{ 'Supervisor'|trans }}</label>
                                        <div class="col-sm-12">
                                            <select class="form-control select2_fields" id="job_supervisor">
                                                <option value="">ALL</option>
                                                {% for supervisor in supervisors %}
                                                    <option value="{{ supervisor.id }}">{{ supervisor.name }}  -> {{ supervisor.customer.companyName }}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-2 mb-3">
                                    <div class="form-group">
                                        <label for="job_area_number" class="col-sm-12 control-label">Job Area Number</label>
                                        <div class="col-sm-12">
                                            <input type="text" class="form-control" id="job_area_number" placeholder="Job Area Number" autocomplete="off">
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-12 mb-3">
                                    <button type="button" class="btn btn-primary mb-4" id="filter-report" style="float: right;"><i class="bi bi-search"></i> &nbsp; Filter</button>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <button type="button" class="btn btn-success mb-2 mt-4" id="export-csv" style="float: right;">
                                        <i class="bi bi-filetype-csv"></i>
                                        Export as CSV
                                    </button>
                                    <button type="button" class="btn btn-danger mb-2 mt-4" id="export-pdf" style="float: right; margin-right: 10px;">
                                        <i class="bi bi-filetype-pdf"></i>
                                        Export as PDF
                                    </button>
                                </div>
                                <div class="col-md-12">
                                    <table id="job_table" class="table table-bordered table-striped">
                                        <thead>
                                        <tr>
                                            <th>Job Id</th>
                                            <th>Job Date</th>
                                            <th>Address</th>
                                            <th>Order No</th>
                                            <th>{{ 'Customer'|trans }}</th>
                                            <th>{{ 'Supervisor'|trans }}</th>
                                            <th>Area No</th>
                                        </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block javascripts %}

    <script type="text/javascript">
        $( document ).ready(function() {

            $('.select2_fields').select2({
                theme: 'bootstrap-5'
            });

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

            var jobsTable = $('#job_table').DataTable({
                "processing": true,
                "serverSide": true,
                "searching": false,
                "ajax": {
                    url : '{{ path('api_jobs_filter') }}',
                    type : 'post',
                    data : function(data){
                        data.jobStatus = $("#job_status").val(),
                        data.areaNumber = $("#job_area_number").val(),
                        data.jobDateFrom = $("#job_date_from").val(),
                        data.jobDateTo = $("#job_date_to").val(),
                        data.customer = $("#job_customer").val(),
                        data.supervisor = $("#job_supervisor").val()
                    }
                },
                "columns": [
                    {
                        "data": "jobId",
                        "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>";

                            return output;
                        }
                    },
                    {
                        "data": "jobDate",
                        "render": function ( data, type, full, meta ) {
                            return full.date;
                        }
                    },
                    {
                        "data": "address",
                        "render": function ( data, type, full, meta ) {
                            return full.address;
                        }
                    },
                    {
                        "data": "orderNo",
                        "render": function ( data, type, full, meta ) {
                            return full.etsNumber;
                        }
                    },
                    {
                        "data": "customer",
                        "render": function ( data, type, full, meta ) {
                            return full.supervisor.customerName;
                        }
                    },
                    {
                        "data": "areaNo",
                        "render": function ( data, type, full, meta ) {
                            return full.supervisor.name;
                        }
                    },
                    {
                        "data": "areaNumber",
                        "render": function ( data, type, full, meta ) {
                            return full.areaNumber;
                        }
                    }
                ],
                error: function(xhr, status, error) {
                    new Noty({
                        theme: 'metroui',
                        type: 'error',
                        text: "<strong>Error!</strong> Failed to Retrieve Job Data!",
                        timeout: 2000
                    }).show();
                }
            });

            $('#filter-report').click(function() {
                jobsTable.ajax.reload();
            });

            $('#export-csv, #export-pdf').click(function() {
                var data = {}
                var fileType = $(this).attr('id').replace('export-', '');

                var rawData = {
                    jobStatus: $("#job_status").val(),
                    areaNumber: $("#job_area_number").val(),
                    jobDateFrom: $("#job_date_from").val(),
                    jobDateTo: $("#job_date_to").val(),
                    customer: $("#job_customer").val(),
                    supervisor: $("#job_supervisor").val()

                };

                var data = Object.fromEntries(
                    Object.entries(rawData).filter(([_, value]) => value !== null && value.toString().trim().length > 0)
                );

                var url = '{{ path('admin_reports_job_report_export') }}?type=' + fileType + '&criteria=' + btoa(JSON.stringify(data));

                window.open(url, '_blank');
            });
        });
    </script>


{% endblock %}