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

{% block title %} 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">Contractor Printout</h3></div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-end">
                        <li class="breadcrumb-item"><a href="{{ path('app_login') }}">iTrack</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Contractor Printout</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">Daily Contractor Printout ({{ today|date('Y-m-d') }})</h3>
                        </div>
                        <div class="card-body">
                            <form class="form-horizontal" action="javascript:void(0)">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group row mb-3">
                                            <label for="user_name" class="col-sm-3 col-form-label">Contractor Name <span class="compulsory">*</span></label>
                                            <div class="col-sm-9">
                                                <select class="form-control select2_fields" id="user_initials" name="user_initials">
                                                    <option value="">Select User</option>
                                                    {% for user in users %}
                                                        <option value="{{ user.id }}">{{ user.fullName }}</option>
                                                    {% endfor %}
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group row mb-3">
                                            <label for="date" class="col-sm-3 col-form-label">Contractor Printout Date <span class="compulsory">*</span></label>
                                            <div class="col-sm-9">
                                                <input type="text" class="form-control datepicker_fields" id="contractor_date" name="contractor_date" placeholder="Date" autocomplete="off" value="{{ today|date('Y-m-d') }}">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <button type="button" class="btn btn-primary" id="print_contractor_sheet" style="float:right;">Generate Contractor Report</button>
                            </form>
                        </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});

        $("#print_contractor_sheet").on("click",function() {

            var user_name = $("#user_initials").val();
            var date = $("#contractor_date").val();

            if (
                validateInput(user_name, 'Please select a contractor.') &&
                validateInput(date, 'Please select a date.')
            ) {
                var url = '{{ path('itack_contractor_printout') }}?date=' + date + '&user=' + user_name;

                window.open(url, '_blank');
            }
        });
    });

</script>
{% endblock %}