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

{% block title %} Banking{% endblock %}

{% block stylesheets %}
<style>
    .paid {
        color:green;
        font-weight:bold;
    }
    .unpaid {
        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">Banking</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">Banking</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">Banking</h3>

                                <div style="float:right" data-toggle="tooltip" data-placement="top" title="Add New Banking Records">
                                    <button data-bs-toggle="modal" data-bs-target="#addNewBankingModal" type="button" class="btn btn-success new_banking_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 Banking Records">
                                    <button data-bs-toggle="modal" data-bs-target="#filterBankingRecordsModel" type="button" class="btn btn-primary filter_banking_records_btn" >
                                        <i class="bi bi-search"></i> Search
                                    </button>
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="col-md-12 mb-5">
                                    <a href="{{ path('admin_banking_index_unpaid') }}"><button type="button" class="btn btn-warning btn-lg {% if status == "UNPAID" %}border-active{% endif %}">Unpaid</button></a>
                                    <a href="{{ path('admin_banking_index_paid') }}"><button type="button" class="btn btn-success btn-lg {% if status == "PAID" %}border-active{% endif %}">Paid</button></a>
                                    <a href="{{ path('admin_banking_index') }}"><button type="button" class="btn btn-primary btn-lg {% if status == "ALL" %}border-active{% endif %}">All</button></a>
                                </div>
                                <table class="table table-bordered table-striped" id="banking_table">
                                    <thead>
                                    <tr>
                                        <th>Date</th>
                                        <th>Amount</th>
                                        <th>Description</th>
                                        <th>Status</th>
                                        <th>Actions</th>
                                    </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <!-- /.col (RIGHT) -->
                </div>
        </div>
    </div>

        {% include '@Banking/banking/partials/filter-banking.twig' %}

        {% include '@Banking/banking/partials/add-banking.twig' %}

{% endblock %}

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

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

        $('#banking_table').DataTable({
            "processing": true,
            "serverSide": true,
            "searching": false,
            "ajax": {
                url : '/api/banking/filter',
                type : 'post',
                data : function(data){
                    data.fromDate = $("#from_date").val(),
                    data.toDate = $("#to_date").val(),
                    data.amount = $("#amount").val(),
                    data.description = $("#description").val(),
                    data.paymentStatus = $("#payment_status").val()
                }
            },
            "columns": [
                {
                    "data": "date",
                    "render": function ( data, type, full, meta ) {
                        var output =  full.date;

                        return output;
                    }
                },
                {
                    "data": "amount",
                    "render": function ( data, type, full, meta ) {
                        return full.amount;
                    }
                },
                {
                    "data": "description",
                    "render": function ( data, type, full, meta ) {
                        var output = full.description
                        return output;
                    }
                },
                {
                    "data": "status",
                    "render": function ( data, type, full, meta ) {
                        var output = "<span class='unpaid'>UNPAID</span>";

                        if (full.status){
                            output = "<span class='paid'>PAID</span>";;
                        }

                        return output;
                    }
                },
                {
                    "data": "actions",
                    "render" : function (data, type, full, meta) {
                        var output = '';
                        if (full.status) {
                            output += '<button type="button" class="btn btn-danger update_banking_btn" title="Mark as Unpaid" data-toggle="tooltip" ' +
                                'data-placement="top" data-banking_id_edit="' + full.id + '"><i class="fa fa-times"></i> Mark as Unpaid</button>';
                        }
                        else {
                            output += '<button type="button" class="btn btn-success update_banking_btn" title="Mark as Paid" data-toggle="tooltip" data-placement="top" ' +
                                'data-banking_id_edit="' + full.id + '"><i class="fa fa-check"></i> Mark as Paid</button>';
                        }

                        return output;
                    }
                }
            ],
            error: function(xhr, status, error) {
                toastr.options.progressBar = true;
                toastr.error('Failed to Retrieve Banking Data!', 'Error!');
            }
        });


        $(document).on("click", ".update_banking_btn", function (){

            var banking_id = $(this).data("banking_id_edit");
            var button = $(this);

            if (validateInput(banking_id, "Banking Record Id"))
            {

                button.attr('disabled', true);

                $.ajax({
                    type: 'post',
                    url: '/api/banking/update',
                    datatype: 'json',
                    data: {
                        bankingId: banking_id
                    }
                })
                .done(function (data) {
                    toastr.options.progressBar = true;
                    toastr.success('Updated Successfully!', 'Success!');

                    button.attr('disabled', false);
                    button.text("Updated");
                    button.removeClass("update_banking_btn").removeClass("btn-success").addClass("btn-dark");
                    button.removeClass("update_banking_btn").removeClass("btn-danger").addClass("btn-dark");



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

            }

        });

    </script>
{% endblock %}