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

{% block title %} {{ 'Upcoming Schedules'|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">Upcoming {{ 'Asset'|trans }} Schedules</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">Upcoming {{ 'Asset'|trans }} Schedules</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" style="padding-bottom: 0px;">

                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-12">
                                    <table id="schedules_table" class="table table-bordered table-striped">
                                        <thead>
                                        <tr>
                                            <th>Type</th>
                                            <th>Due Date</th>
                                            <th>Frequency</th>
                                            <th>Notifications</th>
                                            <th>Auto Renewal</th>
                                            <th>Updated</th>
                                            <th>Active</th>
                                            <th>Actions</th>
                                        </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


{% endblock %}

{% block javascripts %}

    <script type="text/javascript">

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

        var schedulesTable = $('#schedules_table').DataTable({
            "processing": false,
            "serverSide": true,
            "searching": false,
            "ajax": {
                url : '{{ path('api_asset_schedules') }}',
                type : 'post',
                data : function(data){
                }
            },
            "columns": [
                {
                    "data": "type",
                    "render": function ( data, type, full, meta ) {
                        var output = full.type;

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

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

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

                        return output;
                    }
                },
                {
                    "data": "autoRenewal",
                    "render": function ( data, type, full, meta ) {
                        var output = full.autoRenewal == 1 ? 'Yes' : 'No';

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

                        return output;
                    }
                },
                {
                    "data": "active",
                    "render": function ( data, type, full, meta ) {
                        var output = full.active == 1 ? 'Yes' : 'No';

                        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/schedule/' + full.asset.id + '/edit/' + full.id + '" target="_blank"><i class="bi bi-pencil-square"></i> &nbsp;&nbsp; Edit Schedule</a>';
                        output += '<a class="dropdown-item" href="/admin/asset/schedule/' + full.asset.id + '/logs/' + full.id + '" target="_blank"><i class="bi bi-list-columns"></i> &nbsp;&nbsp; View Schedule Log</a>';
                        if (full.active == 1) {
                            output += '<a class="dropdown-item deactivate_schedule_btn" data-scheduleid="' + full.id + '" data-assetid="' + full.asset.id + '"><i class="bi bi-exclamation-diamond-fill text-danger" ></i> &nbsp;&nbsp; Deactivate Schedule</a>';
                        }
                        else {
                            output += '<a class="dropdown-item activate_schedule_btn" data-scheduleid="' + full.id + '" data-assetid="' + full.asset.id + '"><i class="bi bi-exclamation-diamond-fill text-success" ></i> &nbsp;&nbsp; Activate Schedule</a>';
                        }
                        output += '</div>';
                        output +=  '</div>';

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

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

            var scheduleId = $(this).data('scheduleid');
            var assetId = $(this).data('assetid');

            Swal.fire({
                title: "Are you sure?",
                text: "Schedule will be deactivated! This will also prevent schedule from auto renewal.",
                icon: "warning",
                showCancelButton: true,
                confirmButtonColor: "#3085d6",
                cancelButtonColor: "#d33",
                confirmButtonText: "Deactivate"
            }).then((result) => {
                if (result.isConfirmed) {

                    $.ajax({
                        type: 'POST',
                        url: '/api/asset/schedule/{{ asset.id }}/deactivate/'+scheduleId,
                        datatype: 'json',
                        data: {}
                    })
                        .done(function (data) {
                            toastr.options.progressBar = true;
                            toastr.success('Schedule Deactivated Successfully!', 'Success!');

                            $("#schedules_table").DataTable().ajax.reload();
                        })
                        .fail(function (jqXHR, textStatus, errorThrown) {
                            toastr.options.progressBar = true;
                            toastr.error('Failed to Deactivate Schedule!', 'Error!');
                        });
                }
            });
        });

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

            var scheduleId = $(this).data('scheduleid');
            var assetId = $(this).data('assetid');

            Swal.fire({
                title: "Are you sure?",
                text: "Schedule will be deactivated! This will also prevent schedule from auto renewal.",
                icon: "warning",
                showCancelButton: true,
                confirmButtonColor: "#3085d6",
                cancelButtonColor: "#d33",
                confirmButtonText: "Activate"
            }).then((result) => {
                if (result.isConfirmed) {

                    $.ajax({
                        type: 'POST',
                        url: '/api/asset/schedule/{{ asset.id }}/activate/'+scheduleId,
                        datatype: 'json',
                        data: {}
                    })
                        .done(function (data) {
                            toastr.options.progressBar = true;
                            toastr.success('Schedule Activated Successfully!', 'Success!');

                            $("#schedules_table").DataTable().ajax.reload();
                        })
                        .fail(function (jqXHR, textStatus, errorThrown) {
                            toastr.options.progressBar = true;
                            toastr.error('Failed to Activate Schedule!', 'Error!');
                        });
                }
            });
        });
    </script>

{% endblock %}