@extends('admin.index')
@section('content')


<!-- Vertical modal -->
<div class="vertical-modal-ex">
    <button style="display: none;" type="button" id="settingsModalButton" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#settingsModal">
    </button>
    <!-- Modal -->
    <div class="modal fade" id="settingsModal" tabindex="-1" aria-labelledby="settingsModalTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form onsubmit="updateSettings(this); return false;">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title" id="settingsModalTitle"></h5>
                        <button type="button" id="dismissSettingsModalButton" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <input type="hidden" id="setting-id" name="id">
                        <div class="col-12">
                            <div class="mb-1">
                                <label class="form-label" for="value">{{ trans('general.value') }}</label>
                                <div id="content">

                                </div>
                                <!-- <input required name="value" id="setting-value" class="form-control" value="{{old('value')? old('value') :  '' }}"> -->
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-primary" data-bs-dismiss="modal">{{trans('general.save')}}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- Vertical modal end-->

<!-- Responsive Datatable -->
<section id="responsive-datatable">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header border-bottom">
                    <h4 class="card-title">{{ trans("general.settings") }}</h4>
                </div>
                <div class="card-datatable">
                    {{ $dataTable->table([
                    "class" => "dt-responsive table",
                    "style" => ""
                        ])
                    }}
                </div>
            </div>
        </div>
    </div>
</section>
<!--/ Responsive Datatable -->


@push('scripts')

<script src="{{ url('design') }}/app-assets/vendors/js/tables/datatable/jquery.dataTables.min.js"></script>
<script src="{{ url('design') }}/app-assets/vendors/js/tables/datatable/dataTables.bootstrap5.min.js"></script>
<script src="{{ url('design') }}/app-assets/vendors/js/tables/datatable/dataTables.responsive.min.js"></script>
<script src="{{ url('design') }}/app-assets/vendors/js/tables/datatable/responsive.bootstrap5.js"></script>
{!! $dataTable->scripts() !!}


<script>
    function showEditSettingsModal(id, setting, value, type) {
        $('#settingsModalTitle').html(setting);
        $('#setting-id').val(id);
        if (type == "textarea") {
            $("#content").html(`<textarea name="setting-value" class="form-control" id="setting-value" rows="4"></textarea>`);
        } else {
            $("#content").html(`<input required name="value" id="setting-value" class="form-control" value="">`);
        }
        $('#setting-value').val(value);

        $('#settingsModalButton').click();
    }

    function updateSettings(element) {


        formData = $(element).serializeArray().reduce(function(obj, item) {
            obj[item.name] = item.value;
            return obj;
        }, {});

        var jqxhr = $.ajax({
                url: "{{route('admin.settings.update')}}",
                method: "POST",
                timeout: 0,
                data: formData
            })
            .done(function(response) {
                console.log(response);
                $('#dismissSettingsModalButton').click();
                $('#settings-table').DataTable().ajax.reload();
                toastr.success(response.msg);
            })
            .fail(function(response) {
                console.log(response);
                toastr.error(response.responseJSON.msg, '{{ trans("general.error") }}');
            })
            .always(function() {
                getUserPermissions();
            });

    }
</script>
@endpush

@push('header')


<link rel="stylesheet" type="text/css" href="{{ url('design') }}/app-assets/vendors/css/vendors-rtl.min.css">
<link rel="stylesheet" type="text/css" href="{{ url('design') }}/app-assets/vendors/css/tables/datatable/dataTables.bootstrap5.min.css">
<link rel="stylesheet" type="text/css" href="{{ url('design') }}/app-assets/vendors/css/tables/datatable/responsive.bootstrap5.min.css">
<link rel="stylesheet" type="text/css" href="{{ url('design') }}/app-assets/vendors/css/pickers/flatpickr/flatpickr.min.css">



<link rel="stylesheet" type="text/css" href="{{ url('design') }}/app-assets/css-rtl/bootstrap.css">
<link rel="stylesheet" type="text/css" href="{{ url('design') }}/app-assets/css-rtl/bootstrap-extended.css">
<link rel="stylesheet" type="text/css" href="{{ url('design') }}/app-assets/css-rtl/colors.css">
<link rel="stylesheet" type="text/css" href="{{ url('design') }}/app-assets/css-rtl/components.css">
<link rel="stylesheet" type="text/css" href="{{ url('design') }}/app-assets/css-rtl/themes/dark-layout.css">
<link rel="stylesheet" type="text/css" href="{{ url('design') }}/app-assets/css-rtl/themes/bordered-layout.css">
<link rel="stylesheet" type="text/css" href="{{ url('design') }}/app-assets/css-rtl/themes/semi-dark-layout.css">



<style>
    table.dataTable>thead .sorting:before,
    table.dataTable>thead .sorting_asc:before,
    table.dataTable>thead .sorting_desc:before,
    table.dataTable>thead .sorting_asc_disabled:before,
    table.dataTable>thead .sorting_desc_disabled:before {
        right: 0.45rem;
    }
</style>
@endpush
@endsection