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

{% block title %} Quotations{% endblock %}

{% block stylesheets %}
<style>
    .text-bold-green {
        color:green;
        font-weight:bold;
    }
    .text-bold-red {
        color:red;
        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">Quotations</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" aria-current="page">Quotations</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">Quotations ({{ quotationCount }})</h3>

                            <div style="float:right" data-toggle="tooltip" data-placement="top" title="Add New Quotation">
                                <button data-bs-toggle="modal" data-bs-target="#addNewQuotationModal" type="button" class="btn btn-success new_quotation_add_btn" >
                                    <i class="bi bi-plus-lg"></i> New
                                </button>
                            </div>
                            <div style="float:right; margin-right: 10px;float:right" data-toggle="tooltip" data-placement="top" title="Filter Quotations">
                                <button data-bs-toggle="modal" data-bs-target="#filterQuotationsModel" type="button" class="btn btn-primary filter_quotations_btn" >
                                    <i class="bi bi-search"></i> Search
                                </button>
                            </div>
                        </div>
                        <div class="card-body">
                            <table class="table table-bordered table-striped" id="quotation_table">
                                <thead>
                                <tr>
                                    <th>Id</th>
                                    <th>Address</th>
                                    <th>{{ 'Customer'|trans }}</th>
                                    <th>Date</th>
                                    <th>Expiry</th>
                                    <th>Total</th>
                                    <th>Converted</th>
                                    <th>Actions</th>
                                </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

        {% include '@Quotation/quotation/partials/filter-quotations-modal.twig' %}
        {% include '@Quotation/quotation/partials/create-quotation-modal.twig' %}


{% endblock %}

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

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

            $('#quotation_table').DataTable({
                "processing": true,
                "serverSide": true,
                "searching": false,
                "order": [[0, 'desc']],
                "ajax": {
                    url: '{{ path("api_quotation_filter") }}',
                    type: 'post',
                    data: function (data) {
                        data.id = $("#filter_quotation_id").val(),
                        data.jobId = $("#filter_job_id").val(),
                        data.date = $("#filter_quotation_date").val(),
                        data.expiry = $("#filter_expiry_date").val(),
                        data.customerName = $("#filter_builder_name").val(),
                        data.address = $("#filter_address").val(),
                        data.depositNeeded = ($("#filter_deposit_needed").prop('checked')) ? 1 : 0,
                        data.depositPercentage = $("#filter_deposit_percentage").val()
                    }
                },
                "columns": [
                    {
                        "data": "id",
                        "render": function (data, type, full, meta) {
                            var output = '<a href="/admin/quotation/edit/' + full.id + '" target="_blank">' + full.referenceNo + '</a>';

                            return output;
                        }
                    },
                    {
                        "data": "address",
                        "render": function (data, type, full, meta) {
                            var output = full.address;

                            return output;
                        }
                    },
                    {
                        "data": "customer",
                        "render": function (data, type, full, meta) {

                            var output = "";

                            if ('id' in full.customer) {
                                output = '<a href="/admin/customer/edit/' + full.customer.id + '">' + full.customer.name + '</a>';
                            }

                            return output;
                        }
                    },
                    {
                        "data": "date",
                        "render": function (data, type, full, meta) {
                            var output = full.date
                            return output;
                        }
                    },
                    {
                        "data": "expiry",
                        "render": function (data, type, full, meta) {
                            var output = full.expiry
                            return output;
                        }
                    },
                    {
                        "data": "total",
                        "orderable": false,
                        "render": function (data, type, full, meta) {
                            var output = "$" + full.total;

                            return output;
                        }
                    },
                    {
                        "data": "jobs",
                        "orderable": false,
                        "render": function (data, type, full, meta) {
                            var output = "NO";
                            if (full.jobs.converted > 0) {
                                output = "YES";
                            }

                            return output;
                        }
                    },
                    {
                        "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" href="/admin/quotation/edit/' + full.id + '"><i class="bi bi-pencil-square"></i> &nbsp;&nbsp; Edit Quotation</a>';
                            if (full.jobs.total == 0) {
                                output += '<a class="dropdown-item" href="/admin/quotation/job/create/' + full.id + '"><i class="bi bi-layers"></i> &nbsp;&nbsp; Create Job From Quotation</a>';
                            }
                            output += '<a class="dropdown-item delete_quotation_btn" href="javascript:void(0);" data-toggle="modal" data-target="#deleteQuotationModal" data-quotationid="' + full.id + '"><i class="bi bi-trash" style="color: red;"></i> &nbsp;&nbsp; Delete Quotation</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 Quotations!",
                        timeout: 2000
                    }).show();
                }
            });


            $(document).on("click", ".delete_quotation_btn", function (e) {
                e.preventDefault();

                var quotationId = $(this).attr("data-quotationid");

                Swal.fire({
                    title: "Are you sure?",
                    text: "Quotation will be deleted ONLY if the Quotation has no Jobs!",
                    icon: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#3085d6",
                    cancelButtonColor: "#d33",
                    confirmButtonText: "Delete"
                }).then((result) => {
                    if (result.isConfirmed) {

                        $.ajax({
                            type: 'POST',
                            url: '{{ path('api_quotation_delete') }}',
                            datatype: 'json',
                            data: {
                                id : quotationId
                            }
                        })
                        .done(function (data) {
                            Swal.fire({
                                title: "Deleted!",
                                text: "Quotation deleted successfully!.",
                                icon: "success"
                            });
                            setTimeout(function(){ location.reload(); }, 1500);
                        })
                        .fail(function (jqXHR, textStatus, errorThrown) {
                            toastr.options.progressBar = true;
                            toastr.error('Failed to Delete Quotation!', 'Error!');
                        });
                    }
                });

            });
        });
    </script>
{% endblock %}