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

{% block title %} Invoices - Edit Invoice{% endblock %}

{% block stylesheets %}

{% endblock %}

{% block body %}

    <div class="app-content-header">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-6">
                    <h3 class="mb-0">
                        Edit Invoice ({{ invoice.invoiceNumber }})

                        {% if invoice.sentDate %}
                            <span class='badge bg-success'>SENT</span>
                        {% else %}
                            <span class='badge bg-warning'>NOT SENT</span>
                        {% endif %}

                        {% if invoice.paymentDate %}
                            <span class='badge bg-success' style="color: #000000;">PAID</span>
                        {% else %}
                            <span class='badge bg-danger'>UNPAID</span>
                        {% endif %}
                    </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_invoice_index') }}">Invoices</a></li>
                        <li class="breadcrumb-item active">Edit Invoice</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">
                            {% include '@Invoice/invoices/partials/invoice-header-links.html.twig' %}
                        </div>
                        <div class="card-body">
                            <div class="tab-content">
                                <div id="edit_invoice_details" class="tab-pane active">
                                    <form class="form-horizontal" action="javascript:void(0)">
                                        <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" placeholder="Job Date" value="{{ invoice.job.date | date('Y-m-d') }}" disabled>
                                            </div>
                                        </div>
                                        <div class="form-group row mb-3">
                                            <label for="job_comment" class="col-sm-2 col-form-label">Comment</label>
                                            <div class="col-sm-10">
                                                <textarea class="form-control" rows="5" placeholder="Comment" disabled>{{ invoice.job.comment }}</textarea>
                                            </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" placeholder="Job Address" value="{{ invoice.job.address }}" disabled>
                                            </div>
                                        </div>
                                        <div class="form-group row mb-3">
                                            <label for="job_color" class="col-sm-2 col-form-label">Color</label>
                                            <div class="col-sm-10">
                                                <input type="text" class="form-control" placeholder="Color" value="{{ jobColour['color_name'] }}" disabled>
                                            </div>
                                        </div>
                                        <div class="form-group row mb-3">
                                            <label for="job_supervisor" class="col-sm-2 col-form-label">{{ 'Supervisor'|trans }}</label>
                                            <div class="col-sm-10">
                                                <input type="text" class="form-control" placeholder="{{ 'Supervisor'|trans }}" value="{{ invoice.job.supervisor.name }} -> {{ invoice.job.supervisor.customer.companyName }}" disabled>
                                            </div>
                                        </div>
                                        <div class="form-group row mb-3">
                                            <label for="work_performed" class="col-sm-2 col-form-label">Work Performed</label>
                                            <div class="col-sm-10">
                                                <input type="text" class="form-control" placeholder="Work Performed" value="{{ invoice.job.workPerformed }}" disabled>
                                            </div>
                                        </div>
                                        <div class="form-group row mb-3">
                                            <label for="ETS_number" class="col-sm-2 col-form-label">ETS/Order Number</label>
                                            <div class="col-sm-10">
                                                <input type="text" class="form-control" placeholder="ETS/Order Number" value="{{ invoice.job.etsNumber }}" disabled>
                                            </div>
                                        </div>
                                        <div class="row mb-3">
                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <label for="invoice_date_date" class="col-sm-3 control-label">Invoice Date <span class="compulsory">*</span></label>
                                                    <div class="col-sm-12">
                                                        <input type="text" class="form-control datepicker_fields" id="invoice_date_date"
                                                               placeholder="Invoice Date" value="{% if invoice.invoiceDate %} {{ invoice.invoiceDate | date('Y-m-d') }} {% endif %}" autocomplete="off">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <label for="invoice_sent_date" class="col-sm-3 control-label">Sent Date</label>
                                                    <div class="col-sm-12">
                                                        <input type="text" class="form-control datepicker_fields" id="invoice_sent_date"
                                                               placeholder="Sent Date" value="{% if invoice.sentDate %} {{ invoice.sentDate | date('Y-m-d') }} {% endif %}" autocomplete="off">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <label for="invoice_discount" class="col-sm-3 control-label">Discount %</label>
                                                    <div class="col-sm-12">
                                                        <input type="number" class="form-control" id="invoice_discount" placeholder="Discount %" value="{{ invoice.discount }}">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row mb-3">
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="invoice_payment_date" class="col-sm-3 control-label">Payment Date</label>
                                                    <div class="col-sm-12">
                                                        <input type="text" class="form-control datepicker_fields"
                                                               id="invoice_payment_date" placeholder="Payment Date"
                                                               value="{% if invoice.paymentDate %} {{  invoice.paymentDate | date('Y-m-d') }} {% endif %}" autocomplete="off">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label for="invoice_payment_method" class="col-sm-5 control-label">Payment Method</label>
                                                    <div class="col-sm-12">
                                                        <select class="form-control" id="invoice_payment_method">
                                                            {% for paymentMethod in paymentMethods %}
                                                            <option value="{{ paymentMethod }}"
                                                                    {% if invoice.paymentMethod == paymentMethod %} selected {% endif %}
                                                            >{{ paymentMethod }}</option>
                                                            {% endfor %}
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label for="invoice_payment_method" class="col-sm-5 control-label">Payment Type</label>
                                                    <div class="col-sm-12">
                                                        <select class="form-control" id="invoice_payment_type">
                                                            {% for paymentType in paymentTypes %}
                                                                <option value="{{ paymentType }}"
                                                                    {% if invoice.paymentType == paymentType %} selected {% endif %}
                                                                >{{ paymentType }}</option>
                                                            {% endfor %}
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row mb-3" style="margin-top: 10px;">
                                            <div class="col-md-4">
                                               <div class="form-check form-switch">
                                                    <input class="form-check-input" type="checkbox" role="switch" id="switchCheckDefault" {% if invoice.includeDisclaimer %} checked {% endif%} id="include_disclaimer">
                                                    <label class="form-check-label" for="include_disclaimer">Include Disclaimer</label>
                                                </div>
                                            </div>
                                            <div class="col-md-8">
                                                <div class="form-group row mb-3">
                                                    <label for="note" class="col-sm-12">Note</label>
                                                    <div class="col-sm-12">
                                                        <textarea class="form-control" rows="5" id="note" placeholder="Note">{{ invoice.note }}</textarea>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <button type="button" class="btn btn-primary" id="updateInvoiceBtn" style="float: right;">Update Invoice</button>

                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


{% endblock %}

{% block javascripts %}

    <script type="text/javascript">

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

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

            var sentDate = $("#invoice_sent_date").val();
            var paymentDate = $("#invoice_payment_date").val();
            var invoiceDate = $("#invoice_date_date").val();
            var button = $(this);

            var confirmText = "<p>Invoice details will be updated!</p>";

            if ($.trim(sentDate).length > 0){
                confirmText += "<p>Invoice will be marked as <b>SENT</b>!</p>"
            }
            if ($.trim(paymentDate).length > 0){
                confirmText += "<p> Invoice will be marked as <b>PAID</b>!</p>"
            }

            if (validateInput(invoiceDate, 'Invoice Date')) {
                Swal.fire({
                    title: 'Are you sure?',
                    text: confirmText,
                    icon: 'warning',
                    html: confirmText,
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Confirm'
                }).then((result) => {
                    if (result.isConfirmed) {

                        var id = {{ invoice.id }};
                        var discount = $.trim($("#invoice_discount").val());
                        var paymentMethod = $.trim($("#invoice_payment_method").val());
                        var paymentType = $.trim($("#invoice_payment_type").val());
                        var note = $.trim($("#note").val());
                        var include_disclaimer = ($("#include_disclaimer").prop("checked") == true)? 1 : 0;

                        $.ajax({
                            type: 'post',
                            url: '{{ path('api_invoice_edit') }}',
                            datatype: 'json',
                            data: {
                                id: id,
                                sentDate: sentDate,
                                discount: discount,
                                paymentDate: paymentDate,
                                paymentMethod: paymentMethod,
                                paymentType: paymentType,
                                includeDisclaimer: include_disclaimer,
                                note: note,
                                invoiceDate: invoiceDate
                            }
                        })
                            .done(function (data) {
                                Swal.fire(
                                    'Success!',
                                    'Invoice Updated Successfully!',
                                    'success'
                                );

                                setTimeout(function(){ location.reload(); }, 1500);
                            })
                            .fail(function (jqXHR, textStatus, errorThrown) {
                                button.attr('disabled', false);
                                toastr.options.progressBar = true;
                                toastr.error('Failed to Update Invoice!', 'Error!');
                            });
                    }
                });
            }

        });

    </script>
{% endblock %}