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

{% block title %} {{ 'Asset 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">Edit {{ 'Asset Schedule'|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"><a href="{{ path('admin_asset_index') }}">{{ 'Assets'|trans }}</a></li>
                        <li class="breadcrumb-item"><a href="{{ path('admin_asset_schedules', {id: asset.id}) }}">{{ 'Schedules'|trans }}</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Edit {{ 'Schedule'|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" style="padding-bottom: 0px;">
                            {% include '@AssetVault/asset-vault/asset/partials/asset-header-links.html.twig' %}
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group row mb-3">
                                        <label for="name" class="col-sm-3 col-form-label">{{ 'Asset'|trans }} Name</label>
                                        <div class="col-sm-9">
                                            <input type="text" class="form-control" placeholder="{{ 'Asset'|trans }} Name" disabled="disabled" value="{{ asset.name }}">
                                        </div>
                                    </div>
                                    <div class="form-group row mb-3">
                                        <div class="col-sm-6">
                                            <label for="type" class="col-sm-6 control-label">Type <span class="compulsory">*</span></label>
                                            <div class="col-sm-12" id="type_container">
                                                <select class="form-control" id="type">
                                                    {% for type in types %}
                                                        <option value="{{ type }}"
                                                        {% if type == schedule.type %}
                                                            selected="selected"
                                                        {% endif %}
                                                        >{{ type }}</option>
                                                    {% endfor %}
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-sm-6">
                                            <label for="dueDate" class="col-sm-6 control-label">Due Date <span class="compulsory">*</span></label>
                                            <div class="col-sm-12">
                                                <input type="text" class="form-control datepicker_fields" id="dueDate" placeholder="Due Date" autocomplete="off" value="{{ schedule.dueDate|date('Y-m-d') }}">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group row mb-3">
                                        <div class="col-sm-6">
                                            <label for="frequency" class="col-sm-6 control-label">Frequency <span class="compulsory">*</span></label>
                                            <div class="col-sm-12">
                                                <div class="row">
                                                    <div class="col-sm-8">
                                                        <input type="number" class="form-control" id="frequency" placeholder="Frequency" value="{{ schedule.frequency }}">
                                                    </div>
                                                    <div class="col-sm-4" id="frequencyUnit_container">
                                                        <select class="form-control" id="frequencyUnit">
                                                            {% for frequencyUnit in frequencyUnits %}
                                                                <option value="{{ frequencyUnit }}"
                                                                {% if frequencyUnit == schedule.frequencyUnit %}
                                                                    selected="selected"
                                                                {% endif %}
                                                                >{{ frequencyUnit }}</option>
                                                            {% endfor %}
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-6">
                                            <label for="notifications" class="col-sm-6 control-label">Notifications</label>
                                            <div class="col-sm-12" id="notifications_container">
                                                <select class="form-control" id="notifications" multiple>
                                                    {% for notification in notifications %}
                                                        <option value="{{ notification }}"
                                                        {% if notification in schedule.notifications %}
                                                            selected="selected"
                                                        {% endif %}
                                                        >{{ notification }} Days</option>
                                                    {% endfor %}
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group row mb-3">
                                        <div class="col-sm-6">
                                            <label for="notes" class="col-sm-6 control-label">Notes</label>
                                            <div class="col-sm-12">
                                                <input type="text" class="form-control" id="notes" placeholder="Notes" value="{{ schedule.notes|default('') }}">
                                            </div>
                                        </div>
                                        <div class="col-sm-6">
                                            <label for="autoRenewal" class="col-sm-6 control-label">Auto Renewal</label>
                                            <div class="col-sm-12">
                                                <div class="form-check form-switch">
                                                    <input class="form-check-input" type="checkbox" role="switch" id="autoRenewal" {% if schedule.autoRenewal %}checked{% endif %}>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group row mb-3">
                                        <div class="col-sm-12">
                                            <label for="notificationRecipients" class="col-sm-6 control-label">Notification Recipients</label>
                                            <div class="col-sm-12" id="notificationRecipients_container">
                                                <select class="form-control" id="notificationRecipients" multiple>
                                                    {% for user in users %}
                                                        <option value="{{ user.id }}"
                                                        {% if user in notificationRecipients %}
                                                            selected="selected"
                                                        {% endif %}
                                                        >{{ user.fullName }} ({{ user.email }})</option>
                                                    {% endfor %}
                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                    <button type="button" class="btn btn-primary" style="float:right;" id="updateAssetScheduleBtn">Update {{ 'Schedule'|trans }}</button>

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


{% endblock %}

{% block javascripts %}

    <script type="text/javascript">

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

        $('#type').select2({
            theme: 'bootstrap-5',
            dropdownParent: $('#type_container')
        });
        $('#notifications').select2({
            theme: 'bootstrap-5',
            dropdownParent: $('#notifications_container')
        });
        $('#notificationRecipients').select2({
            theme: 'bootstrap-5',
            dropdownParent: $('#notificationRecipients_container')
        });


        $("#updateAssetScheduleBtn").on("click", function (e) {

            var button = $(this);
            var type = $.trim($("#type").val());
            var dueDate = $.trim($("#dueDate").val());
            var frequency = $.trim($("#frequency").val());
            var frequencyUnit = $.trim($("#frequencyUnit").val());
            var notifications = $.trim($("#notifications").val());
            var notes = $.trim($("#notes").val());
            var autoRenewal = $("#autoRenewal").is(":checked")? 1 : 0;
            var notificationRecipients = $.trim($("#notificationRecipients").val());

            if (
                validateInput(type, 'Type') &&
                validateInput(dueDate, 'Due Date') &&
                validateInput(frequency, 'Frequency') &&
                validateNotifications(notifications, notificationRecipients)
            ) {
                button.attr('disabled', true);

                $.ajax({
                    type: 'post',
                    url: '{{ path('api_asset_schedule_upsert') }}',
                    data: {
                        id: '{{ schedule.id }}',
                        type : type,
                        dueDate: dueDate,
                        frequency: frequency,
                        frequencyUnit: frequencyUnit,
                        notifications: notifications,
                        notes: notes,
                        autoRenewal: autoRenewal,
                        assetId: '{{ asset.id }}',
                        notificationRecipients: notificationRecipients
                    },
                    success: function (html) {

                        Swal.fire(
                            'Success!',
                            '{{ 'Schedule'|trans }} Updated Successfully!',
                            'success'
                        );
                        // reloading the page on success
                        setTimeout(function(){ location.reload(); }, 1500);
                    },
                    fail: function () {
                        button.attr('disabled', false);
                        toastr.options.progressBar = true;
                        toastr.error('Failed to Save the {{ 'Schedule'|trans }}!', 'Error!');
                    }
                });
            }

        });

        function validateNotifications(notifications, notificationRecipients) {
            if (notifications.length > 0 && notificationRecipients.length == 0) {

                toastr.options.progressBar = true;

                var text = 'Please select recipients to receive the notifications!'

                toastr.error(text, 'Error!');
                return false;

                return false;
            }
            return true;
        }
    </script>

{% endblock %}