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

{% block title %} Settings{% endblock %}

{% block stylesheets %}

{% endblock %}

{% block body %}

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

                            <div style="float:right" data-bs-toggle="tooltip" data-bs-placement="top" title="Add Setting">
                                <button data-bs-toggle="modal" data-bs-target="#addNewSettingModal" type="button" class="btn btn-success new_setting_add_btn" title="Add New Setting">
                                    <i class="bi bi-plus-lg"></i> New
                                </button>
                            </div>

                            <div style="float:right; margin-right: 10px;" data-bs-toggle="tooltip" data-bs-placement="top" title="Filter Settings">
                                <button data-bs-toggle="modal" data-bs-target="#filterSettingModal" type="button" class="btn btn-primary" >
                                    <i class="bi bi-search"></i> Search
                                </button>
                            </div>
                        </div>
                        <div class="card-body" style="overflow-x: auto;">
                            <table id="settings_table" class="table table-bordered table-striped">
                                <thead>
                                <tr>
                                    <th>Key</th>
                                    <th>Value</th>
                                    <th>Description</th>
                                    <th>Last Updated</th>
                                    <th>Actions</th>
                                </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>

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

    <!-- Add New Setting Model Start -->
    <div class="modal fade" id="addNewSettingModal" style="display: none;">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title"> Add New Setting</h4>
                    <button type="button" class="close modal-close" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" action="javascript:void(0)">
                        <div class="form-group row mb-3">
                            <label for="setting_key" class="col-sm-2 control-label">Key <span class="compulsory">*</span></label>
                            <div class="col-sm-10">
                                <input type="email" class="form-control" id="setting_key" placeholder="Key">
                            </div>
                        </div>
                        <div class="form-group row mb-3">
                            <label for="setting_value" class="col-sm-2 control-label">Value <span class="compulsory">*</span></label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="setting_value" placeholder="Value">
                            </div>
                        </div>
                        <div class="form-group row mb-3">
                            <label for="setting_description" class="col-sm-2 control-label">Description</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="setting_description" placeholder="Description">
                            </div>
                        </div>


                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default pull-left" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="addNewSetttingBtn">Add New Setting</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Add New Setting Model End -->

    <!-- Search Setting Model Start -->
    <div class="modal fade" id="filterSettingModal" style="display: none;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title"> Filter Settings</h4>
                    <button type="button" class="close modal-close" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" action="javascript:void(0)">
                        <div class="form-group mb-3">
                            <label for="setting_search" class="col-sm-6 control-label">Search</label>
                            <div class="col-sm-12">
                                <input type="text" class="form-control" id="setting_search" placeholder="Search">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default pull-left" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="filterSettingsBtn">Filter Settings</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Search Setting Model End -->

{% endblock %}

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

        $('#settings_table').DataTable({
            "processing": true,
            "serverSide": true,
            "searching": false,
            "ajax": {
                url : '{{ path('api_setting_filter') }}',
                type : 'post',
                data : function(data){
                    data.search = $("#setting_search").val()
                }
            },
            "columns": [
                {
                    "data": "key",
                    "render": function ( data, type, full, meta ) {
                        var output = full.key;
                        return output;
                    }
                },
                {
                    "data": "value",
                    "render": function ( data, type, full, meta ) {
                        return full.value;
                    }
                },
                {
                    "data": "description",
                    "render": function ( data, type, full, meta ) {
                        return full.description;
                    }
                },
                {
                    "data": "lastUpdated",
                    "render": function ( data, type, full, meta ) {
                        var output = full.updatedAt;
                        output += '<br/><small class="text-muted">' + full.updatedBy.name + '</small>';

                        return output;
                    }
                },
                {
                    "data": "actions",
                    "render" : function (data, type, full, meta) {
                        var output = '';
                        output += '<div class="dropdown" data-toggle="tooltip" data-placement="top" title="View Actions">';
                        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 editSettingValue" href="javascript:void(0);" data-key="' + full.key + '" data-value="' + full.value + '"><i class="bi bi-pencil-square"></i> &nbsp;&nbsp; Edit Value</a>';
                        output += '</div>';
                        output += '</div>';

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

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

            var button = $(this);
            var key = $.trim($("#setting_key").val());
            var value = $.trim($("#setting_value").val());
            var description = $.trim($("#setting_description").val());

            if (
                validateInput(key, "Key") &&
                validateInput(value, "Value")
            )
            {
                button.attr('disabled', true);

                $.ajax({
                    type: 'post',
                    url: '{{ path('api_setting_create') }}',
                    datatype: 'json',
                    data: {
                        key : key,
                        value : value,
                        description : description
                    }
                })
                .done(function (data) {
                    Swal.fire(
                        'Success!',
                        'Setting Created Successfully!',
                        'success'
                    );

                    setTimeout(function(){ location.reload(); }, 2500);
                })
                .fail(function (jqXHR, textStatus, errorThrown) {
                    button.attr('disabled', false);
                    toastr.options.progressBar = true;
                    toastr.error('Failed to Create the Setting!', 'Error!');
                });
            }



        });

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

            var link = $(this);
            var key = link.data('key');
            var value = link.data('value');


            Swal.fire({
                title: key,
                input: 'text',
                inputLabel: 'Update setting value',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                inputValidator: (value) => {
                    if (!value) {
                        return 'Please enter a value to update!'
                    }
                }
            }).then((result) => {
                if (result.isConfirmed) {

                    $.ajax({
                        type: 'post',
                        url: '{{ path('api_setting_edit') }}',
                        datatype: 'json',
                        data: {
                            key : key,
                            value : result.value
                        }
                    })
                        .done(function (data) {
                            Swal.fire(
                                'Success!',
                                'Setting Updated Successfully!',
                                'success'
                            );

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

                }
            });

        });

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

            $("#settings_table").DataTable().ajax.reload();
            $('#filterSettingModal').modal('toggle');
        });

    </script>
{% endblock %}