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

{% block title %} {{ 'Assets'|trans }}{% endblock %}

{% block body %}

    <div class="app-content-header">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-6"><h3 class="mb-0">{{ 'Assets'|trans }}</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">{{ 'Assets'|trans }}</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">Assets</h3>

                            <div style="float:right" data-toggle="tooltip" data-placement="top" title="Add New Asset">
                                <button data-bs-toggle="modal" data-bs-target="#addNewAssetModal" type="button" class="btn btn-success new_asset_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 Asset Categories">
                                <button data-bs-toggle="modal" data-bs-target="#filterAssetModal" type="button" class="btn btn-primary filter_asset_btn" >
                                    <i class="bi bi-search"></i> Search
                                </button>
                            </div>
                        </div>

                        <div class="card-body" style="overflow-x: auto;">
                            <table id="asset_table" class="table table-bordered table-striped">
                                <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Brand/Model</th>
                                    <th>Warranty Expiry</th>
                                    <th>Last Updated</th>
                                    <th>Status</th>
                                    <th>Actions</th>
                                </tr>
                                </thead><tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                {% include '@AssetVault/asset-vault/asset/partials/asset-create-modal.twig' %}
                {% include '@AssetVault/asset-vault/asset/partials/asset-filter-modal.twig' %}

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



{% endblock %}

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

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


            var assetTable = $('#asset_table').DataTable({
                "processing": true,
                "serverSide": true,
                "searching": false,
                "ajax": {
                    url : '{{ path('api_asset_index') }}',
                    type : 'post',
                    data : function(data){
                        data.name = $("#nameFilter").val(),
                        data.brand = $("#brandFilter").val(),
                        data.model = $("#modelFilter").val(),
                        data.warrantyExpiry = $("#warrantyExpiryFilter").val(),
                        data.category = $("#categoryFilter").val()
                    }
                },
                "columns": [
                    {
                        "data": "name",
                        "render": function ( data, type, full, meta ) {
                            var output = '<a href="/admin/asset/edit/'+ full.id +'" target="_blank">' + full.name + '</a>';

                            return  output;
                        }
                    },
                    {
                        "data": "brand",
                        "render": function ( data, type, full, meta ) {
                            var output = full.brand + '<br/><small class="text-muted">' + full.model + '</small>';

                            return output;
                        }
                    },
                    {
                        "data": "warrantyExpiry",
                        "render": function ( data, type, full, meta ) {
                            var output = full.warrantyExpiry + '<br/>';
                            output += '<span class="badge badge-danger">' + full.isExpired + '</span>';

                            return output;
                        }
                    },
                    {
                        "data": "updatedOn",
                        "render": function ( data, type, full, meta ) {
                            var output = full.updatedOn +'<br/>';
                            output += '<small class="text-muted">' + full.updatedBy.name + '</small>';

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

                            return output;
                        }
                    },
                    {
                        "data": "actions",
                        "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/asset/edit/'+ full.id +'"><i class="bi bi-pencil-square"></i> &nbsp;&nbsp;Edit {{ 'Asset'|trans }}</a>';
                            output += '</div>';
                            output +=  '</div>';

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


            $("#filterAssetBtn").on("click", function (e) {
                e.preventDefault();

                assetTable.ajax.reload();
                $('#filterAssetModal').modal('hide');
            });

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