@extends('admin.app')
@section('content')
    <style>
        .del-button {
            display: none;
        }

        #location-unused .del-button {
            display: block;
        }

        .fa-remove {
            color: red !important;
            font-size: 20px;
        }

        .fa-plus {
            color: green !important;
            font-size: 20px;
        }


        #location-unused {
            height: 180px;
            overflow-y: scroll;
        }

        #location-unused .bg-secondary {
            height: 120px !important;
        }

        ::-webkit-scrollbar {
            -webkit-appearance: none;
            width: 7px;
        }

        ::-webkit-scrollbar-thumb {
            border-radius: 4px;
            background-color: rgba(0, 0, 0, .5);
            -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
        }
    </style>
    <div class="app-content content">
        <div class="content-overlay"></div>
        <div class="header-navbar-shadow"></div>
        <div class="content-wrapper">
            <div class="content-header row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h2>Kullanılabilir Modüller</h2>

                            <button type="button" class="btn btn-md btn-success pull-right"
                                    id="save-layout">Sayfayı Kaydet
                            </button>

                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-6">
                                    <button type="button" id="max-min-unused" data-current="showing"
                                            class="btn btn-info pull-left">Gizde
                                    </button>
                                </div>
                                <div class="col-6">
                                    <button type="button" class="btn btn-primary pull-right" onclick="getEditModal(0)">
                                        Yeni Modül Oluştur
                                    </button>
                                </div>
                            </div>
                            <div class="row" id="location-unused">
                                @foreach($modules['unused'] as $module_used)
                                    @if($module_used->usingPage->count() == 0)
                                        <div data-status="unused" data-location="unused"
                                             id="module-{{$module_used->id}}"
                                             class="col-4 mt-1 bg-secondary"
                                             style="background-color: lightgray;border: 4px solid white;height: 185px">
                                            <input id="module-input-{{$module_used->id}}" type="hidden"
                                                   name="module[unused][{{$module_used->id}}]"
                                                   value="12">
                                            <div class="row">
                                                <div class="col-12 col-xs-12 col-sm-12 pt-1">
                                                     <span onclick="useUnuse({{$module_used->id}})"><i
                                                             class="fa fa-plus usenuse"></i></span>
                                                    <span>{{$module_used->module_name}}</span>
                                                </div>
                                                <div class="col-4 col-xs-12 col-sm-12 pt-1">

                                                    <p>
                                                        <button type="button" class="btn btn-info"
                                                                onclick="getEditModal({{$module_used->id}})">Düzenle
                                                        </button>
                                                        <button type="button"
                                                                class="del-button btn btn-md btn-danger pull-right"
                                                                onclick="deleteModule({{$module_used->id}})">Sil
                                                        </button>
                                                    </p>
                                                </div>
                                                <div class="col-8">

                                                    <div class="row p-1 navigates hide-usends pull-right btn-group">
                                                        <div class="col-8" style="padding-left: 20%">
                                                            <select style="width: 100px" id="module-resize-select-{{$module_used->id}}"
                                                                    class="form-control module-resize-select"
                                                                    data-current="{{$modules['theme_options']['theme_grid']}}"
                                                                    onchange="resizeModule('{{$module_used->id}}')">
                                                                <option
                                                                    {{$module_used->module_style == '12' ? 'selected' : ''}} value="12">
                                                                    1
                                                                </option>
                                                                <option
                                                                    {{$module_used->module_style == '3' ? 'selected' : ''}} value="3">
                                                                    1/4
                                                                </option>
                                                                <option
                                                                    {{$module_used->module_style == '4' ? 'selected' : ''}} value="4">
                                                                    1/3
                                                                </option>
                                                                <option
                                                                    {{$module_used->module_style == '6' ? 'selected' : ''}} value="6">
                                                                    1/2
                                                                </option>
                                                                <option
                                                                    {{$module_used->module_style == '8' ? 'selected' : ''}} value="8">
                                                                    2/3
                                                                </option>
                                                                <option
                                                                    {{$module_used->module_style == '9' ? 'selected' : ''}} value="9">
                                                                    3/4
                                                                </option>
                                                            </select>
                                                        </div>
                                                    </div>


                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                @endforeach

                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="content-body">
                <form id="layout-form">
                    <input type="hidden" name="page_layout" value="{{$page_layout}}">
                    {{csrf_field()}}
                    <div class="row">


                        <div class="col-12">
                            <div class="card">
                                <div class="card-header">
                                    <h2>Orta Blok</h2>
                                </div>
                                <div class="card-body">

                                    <div class="row module-sort" id="location-center">
                                        @foreach($modules['center'] as $module_mid)
                                            <div data-status="use" data-location="{{$module_mid->location}}"
                                                 id="module-{{$module_mid->module->id}}"
                                                 class="col-{{$modules['theme_options']['theme_grid'] > 12 ? (($module_mid->module_style / $modules['theme_options']['theme_grid'])*12) : $module_mid->module_style}} mt-1 bg-secondary"
                                                 style="background-color: lightgray;border: 4px solid white;height: 185px">
                                                <input id="module-input-{{$module_mid->module->id}}" type="hidden"
                                                       name="module[{{$module_mid->location}}][{{$module_mid->module->id}}]"
                                                       value="{{$module_mid->module_style}}">
                                                <div class="row">
                                                    <div class="col-12 col-xs-12 col-sm-12 pt-1">
                                                     <span onclick="useUnuse({{$module_mid->module->id}})"><i
                                                             class="fa fa-remove usenuse"></i></span>
                                                        <span>{{$module_mid->module->module_name}}</span>
                                                    </div>
                                                    <div class="col-4 col-xs-12 col-sm-12 pt-1">

                                                        <p>
                                                            <button type="button" class="btn btn-info"
                                                                    onclick="getEditModal({{$module_mid->module->id}})">
                                                                Düzenle
                                                            </button>
                                                            <button type="button"
                                                                    onclick="deleteModule({{$module_used->id}})"
                                                                    class="del-button btn btn-md btn-danger pull-right">
                                                                Sil
                                                            </button>
                                                        </p>
                                                    </div>
                                                    <div class="col-8 col-xs-12 col-sm-12">

                                                        <div class="row p-1 navigates pull-right btn-group">
                                                            <div class="col-8" style="padding-left: 20%">
                                                                <select style="width: 100px"
                                                                    id="module-resize-select-{{$module_mid->module->id}}"
                                                                    class="form-control module-resize-select"
                                                                    data-current="{{$modules['theme_options']['theme_grid'] > 12 ? (($module_mid->module_style / $modules['theme_options']['theme_grid'])*12) : $module_mid->module_style}}"
                                                                    onchange="resizeModule({{$module_mid->module->id}})">
                                                                    <option
                                                                        {{$module_mid->module_style == round($modules['theme_options']['theme_grid'] / 4,0,PHP_ROUND_HALF_UP) ? 'selected' : ''}} value="{{round($modules['theme_options']['theme_grid'] / 4,0,PHP_ROUND_HALF_UP)}}" data-size="3">
                                                                        1/4
                                                                    </option>
                                                                    <option
                                                                        {{$module_mid->module_style == round($modules['theme_options']['theme_grid'] / 3,0,PHP_ROUND_HALF_UP) ? 'selected' : ''}} value="{{round($modules['theme_options']['theme_grid'] / 3,0,PHP_ROUND_HALF_UP)}}" data-size="4">
                                                                        1/3
                                                                    </option>
                                                                    <option
                                                                        {{$module_mid->module_style == round($modules['theme_options']['theme_grid'] / 2) ? 'selected' : ''}} value="{{round($modules['theme_options']['theme_grid'] / 2)}}" data-size="6">
                                                                        1/2
                                                                    </option>
                                                                    <option
                                                                        {{$module_mid->module_style == round(($modules['theme_options']['theme_grid'] / 3) * 2,0,PHP_ROUND_HALF_DOWN) ? 'selected' : ''}} value="{{round(($modules['theme_options']['theme_grid'] / 3) * 2,0,PHP_ROUND_HALF_DOWN)}}" data-size="8">
                                                                        2/3
                                                                    </option>
                                                                    <option
                                                                        {{$module_mid->module_style == round(($modules['theme_options']['theme_grid'] / 4) * 3,0,PHP_ROUND_HALF_DOWN) ? 'selected' : ''}} value="{{round(($modules['theme_options']['theme_grid'] / 4)*3,0,PHP_ROUND_HALF_DOWN)}}" data-size="9">
                                                                        3/4
                                                                    </option>
                                                                    <option
                                                                        {{$module_mid->module_style == round($modules['theme_options']['theme_grid'] )? 'selected' : ''}} value="{{round($modules['theme_options']['theme_grid'] )}}" data-size="12">
                                                                        1
                                                                    </option>
                                                                </select>
                                                            </div>

                                                        </div>

                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </form>

            </div>
        </div>
    </div>
    <div class="modal fade" id="edit-module-modal" tabindex="-1" role="dialog"
         aria-labelledby="create-module-modalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="create-module-modalLabel">Modül Ekle</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" id="edit-modal-body">


                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Kapat
                    </button>
                    <button id="add-module-button" type="button" class="btn btn-primary">Kaydet
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="hidden" id="s2-ajax-template">
        <div class="form-group product">
            <select style=""width=:100%" data-type="product" name="json_data[whereIn][id][]"
                    class="custom-select form-control s2-ajax">
                <option value="0">Seç</option>
            </select>
        </div>
        <div class="form-group category">
            <select style=""width=:100%" data-type="category" name="json_data[where][category_id]"
                    class="custom-select form-control s2-ajax">
                <option value="0">Seç</option>
            </select>
        </div>
        <div class="form-group category_win">
            <select style=""width=:100%" data-type="category" name="json_data[whereIn][category_id][]"
                    class="custom-select form-control s2-ajax">
                <option value="0">Seç</option>
            </select>
        </div>
        <div class="form-group brand">
            <select style=""width=:100%" data-type="brand" name="json_data[where][brand]" class="custom-select form-control s2-ajax">
                <option value="0">Seç</option>
            </select>
        </div>
        <div class="form-group blog">
            <select style=""width=:100%" data-type="blog" name="json_data[whereIn][category_ids][]" class="custom-select form-control s2-ajax">
                <option value="0">Seç</option>
            </select>
        </div>
        <div class="form-group banner">
            <select style=""width=:100%" data-type="banner" name="link" class="custom-select form-control s2-ajax">
                <option value="0">Seç</option>
            </select>
        </div>
    </div>
@endsection
@section('css')

    <link rel="stylesheet" type="text/css" href="{{asset('app-assets/css/plugins/extensions/toastr.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset('app-assets/vendors/css/vendors.min.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset('app-assets/vendors/css/extensions/toastr.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset('app-assets/vendors/css/forms/select/select2.min.css')}}">
@endsection
@section('js')
    <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
    <script src="{{asset('/vendor/jquery-sortablejs/jquery-sortable.js')}}"></script>
    <!-- BEGIN: Page Vendor JS-->
    <script src="{{asset('app-assets/vendors/js/ui/jquery.sticky.js')}}"></script>
    <script src="{{asset('app-assets/vendors/js/extensions/toastr.min.js')}}"></script>
    <!-- END: Page Vendor JS-->
    <!-- BEGIN: Page JS-->
    <script src="{{asset('app-assets/js/scripts/extensions/toastr.js')}}"></script>
    <script src="{{asset('vendor/tinymce/tinymce.js')}}"></script>
    <!-- END: Page JS-->

    <!-- BEGIN: Page JS-->
    <script src="{{asset('app-assets/vendors/js/forms/select/select2.full.min.js')}}"></script>
    <script src="{{asset('app-assets/js/scripts/forms/select/form-select2.js')}}"></script>
    <!-- END: Page JS-->
    <script>
        $(document).keydown(function(event) {
                if((event.ctrlKey || event.metaKey) && event.which == 83) {
                    $(this).attr('disabled', 'disabled');
                    $(this).text('Kaydediliyor...');
                    $.post('{{route('design-save-layout')}}', $('#layout-form').serialize(), function (response) {
                        if (response.status == 'success') {
                            toastr.success(response.msg, 'Başarılı!', {
                                positionClass: 'toast-bottom-right',
                                containerId: 'toast-bottom-right'
                            });
                            $('#save-layout').removeAttr('disabled');
                            $('#save-layout').text('Sayfayı Kaydet');
                        } else {
                            toastr.warning(response.msg, 'Hata!', {
                                positionClass: 'toast-bottom-right',
                                containerId: 'toast-bottom-right'
                            });
                        }
                    }).fail(function (response) {
                        if (response.responseJSON && response.responseJSON.status == 'failure') {
                            toastr.warning(response.responseJSON.msg, 'Hata!', {
                                positionClass: 'toast-bottom-right',
                                containerId: 'toast-bottom-right'
                            });
                        } else {
                            toastr.warning('Güncellenemedi', 'Hata!', {
                                positionClass: 'toast-bottom-right',
                                containerId: 'toast-bottom-right'
                            });
                        }
                    });
                    event.preventDefault();
                    return false;
                };
            }
        );
        function applyTinyMce(selector) {
            var editor_config = {
                path_absolute: "/",
                selector: selector,
                language: 'tr_TR',
                plugins: [
                    "advlist autolink lists link image charmap print preview hr anchor pagebreak",
                    "searchreplace wordcount visualblocks visualchars code fullscreen",
                    "insertdatetime media nonbreaking save table contextmenu directionality",
                    "emoticons template paste textcolor colorpicker textpattern"
                ],
                toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media",
                relative_urls: false,
                file_browser_callback: function (field_name, url, type, win) {
                    var x = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth;
                    var y = window.innerHeight || document.documentElement.clientHeight || document.getElementsByTagName('body')[0].clientHeight;

                    var cmsURL = editor_config.path_absolute + 'panel/filemanager?field_name=' + field_name;
                    if (type == 'image') {
                        cmsURL = cmsURL + "&type=Images";
                    } else {
                        cmsURL = cmsURL + "&type=Files";
                    }

                    tinyMCE.activeEditor.windowManager.open({
                        file: cmsURL,
                        title: 'Filemanager',
                        width: x * 0.8,
                        height: y * 0.8,
                        resizable: "yes",
                        close_previous: "no"
                    });
                }
            };

            tinymce.init(editor_config);
        }

        function filemanager(type, input, thumbnail) {
            type = type || 'file';
            var route_prefix = '/filemanager';
            var target_input = $('#' + input);
            var target_preview = $('#' + thumbnail);
            window.open(route_prefix + '?type=' + type, 'FileManager', 'width=900,height=600');
            window.SetUrl = function (items) {
                var file_path = items.map(function (item) {
                    return item.url;
                }).join(',');

                // set the value of the desired input to image url
                target_input.val('').val(file_path).trigger('change');

                // clear previous preview
                target_preview.html('');

                // set or change the preview image src
                items.forEach(function (item) {
                    target_preview.attr('src', item.thumb_url);
                });

                // trigger change event
                target_preview.trigger('change');
            };
            return false;
        }


        $('#save-layout').on('click', function () {
            $(this).attr('disabled', 'disabled');
            $(this).text('Kaydediliyor...');
            $.post('{{route('design-save-layout')}}', $('#layout-form').serialize(), function (response) {
                if (response.status == 'success') {
                    toastr.success(response.msg, 'Başarılı!', {
                        positionClass: 'toast-bottom-right',
                        containerId: 'toast-bottom-right'
                    });
                    $('#save-layout').removeAttr('disabled');
                    $('#save-layout').text('Sayfayı Kaydet');
                } else {
                    toastr.warning(response.msg, 'Hata!', {
                        positionClass: 'toast-bottom-right',
                        containerId: 'toast-bottom-right'
                    });
                }
            }).fail(function (response) {
                if (response.responseJSON && response.responseJSON.status == 'failure') {
                    toastr.warning(response.responseJSON.msg, 'Hata!', {
                        positionClass: 'toast-bottom-right',
                        containerId: 'toast-bottom-right'
                    });
                } else {
                    toastr.warning('Güncellenemedi', 'Hata!', {
                        positionClass: 'toast-bottom-right',
                        containerId: 'toast-bottom-right'
                    });
                }
            });
        });

        function select2Apply(type, id) {
            switch (type) {
                case 'std':
                    $('#data-spesificity .s2-ajax').select2({
                        ajax: {
                            url: '{{route('design-autocomplete')}}?data_type=' + $('#data_type').children('option:selected').attr('data-query-type'),
                            dataType: 'json'
                        }
                    });
                    break;
                case 'type':
                    $('#data-spesificity .s2-ajax').select2({
                        ajax: {
                            url: '{{route('design-autocomplete')}}?data_type=' + id,
                            dataType: 'json'
                        }
                    });
                    break;
                case 'spesificity':
                    $('#' + id).select2({
                        ajax: {
                            url: '{{route('design-autocomplete')}}?data_type=' + $('#' + type).val(),
                            dataType: 'json'
                        }
                    });
                    break;
                default:
                    $('#' + id).select2({
                        ajax: {
                            url: '{{route('design-autocomplete')}}?data_type=' + $('#' + type).val(),
                            dataType: 'json'
                        }
                    });
                    break;
            }

        }

        $('#add-module-button').on('click', function () {
            if ($('#module-type').val() == 'html') {
                $('.tiny_editor').val(tinyMCE.activeEditor.getContent());
            }

            $.post('{{route('design-add-module')}}', $('#add-module-form').serialize(), function (response) {
                if (response.status == 'success') {
                    if (response.edit) {
                        toastr.success(response.msg, 'Hata!', {
                            positionClass: 'toast-bottom-right',
                            containerId: 'toast-bottom-right'
                        });
                        $('#edit-module-modal').modal('hide');
                        $('#add-module-form').trigger('reset');
                        $('#edit-modal-body').html(' ');
                    } else {
                        var html = '<div data-status="unused" data-location="unused"\n' +
                            '                                                 id="module-' + response.id + '"\n' +
                            '                                                 class="col-4 mt-1 bg-secondary"\n' +
                            '                                                 style="background-color: lightgray;border: 4px solid white;height: 185px">\n' +
                            '                                                <input id="module-input-' + response.id + '" type="hidden"\n' +
                            '                                                       name="module[unused][' + response.id + ']"\n' +
                            '                                                       value="' + response.id + '">\n' +
                            '                                                <div class="row">\n' +
                            '                                                    <div class="col-12 col-xs-12 col-sm-12 pt-1">\n' +
                            '                                                     <span onclick="useUnuse(' + response.id + ')"><i\n' +
                            '                                                             class="fa fa-plus usenuse"></i></span>\n' +
                            '                                                        <span>' + response.module_name + '</span>\n' +
                            '                                                    </div>\n' +
                            '                                                    <div class="col-4 col-xs-12 col-sm-12 pt-1">\n' +
                            '\n' +
                            '                                                        <p>\n' +
                            '                                                            <button type="button" class="btn btn-info" onclick="getEditModal(' + response.id + ')">Düzenle</button>\n<button type="button" class="del-button btn btn-md btn-danger pull-right" onclick="deleteModule(' + response.id + ')">Sil</button>' +
                            '                                                        </p>\n' +
                            '                                                    </div>\n' +
                            '                                                    <div class="col-8 col-xs-12 col-sm-12">\n' +
                            '\n' +
                            '                                                        <div class="row p-1 navigates pull-right btn-group">\n' +
                            '                                                            <div class="col-8" style="padding-left: 20%">\n' +
                            '                                                                <select style="width:100%"\n' +
                            '                                                                    id="module-resize-select-' + response.id + '"\n' +
                            '                                                                    class="form-control module-resize-select"\n' +
                            '                                                                    data-current="{{$modules['theme_options']['theme_grid']}}"\n' +
                            '                                                                    onchange="resizeModule(' + response.id + ')">\n' +
                            '                                                                    <option\n' +
                            '                                                                        value="3">\n' +
                            '                                                                        1/4\n' +
                            '                                                                    </option>\n' +
                            '                                                                    <option\n' +
                            '                                                                        value="4">\n' +
                            '                                                                        1/3\n' +
                            '                                                                    </option>\n' +
                            '                                                                    <option\n' +
                            '                                                                       value="6">\n' +
                            '                                                                        1/2\n' +
                            '                                                                    </option>\n' +
                            '                                                                    <option\n' +
                            '                                                                       value="8">\n' +
                            '                                                                        2/3\n' +
                            '                                                                    </option>\n' +
                            '                                                                    <option\n' +
                            '                                                                       value="9">\n' +
                            '                                                                        3/4\n' +
                            '                                                                    </option>\n' +
                            '                                                                    <option\n' +
                            '                                                                       selected value="12">\n' +
                            '                                                                        1\n' +
                            '                                                                    </option>\n' +
                            '                                                                </select>\n' +
                            '                                                            </div>\n' +
                            '                                                        </div>\n' +
                            '\n' +
                            '                                                    </div>\n' +
                            '                                                </div>\n' +
                            '                                            </div>';
                        $('#location-unused').append(html);
                        $('#edit-module-modal').modal('hide');
                        $('#add-module-form').trigger('reset');
                        $('#edit-modal-body').html(' ');
                    }
                } else {
                    toastr.warning(response.msg, 'Hata!', {
                        positionClass: 'toast-bottom-right',
                        containerId: 'toast-bottom-right'
                    });
                }
            }).fail(function (response) {
                if (response.responseJSON && response.responseJSON.status == 'failure') {
                    toastr.warning(response.responseJSON.msg, 'Hata!', {
                        positionClass: 'toast-bottom-right',
                        containerId: 'toast-bottom-right'
                    });
                } else {
                    toastr.warning('Güncellenemedi', 'Hata!', {
                        positionClass: 'toast-bottom-right',
                        containerId: 'toast-bottom-right'
                    });
                }
            });
        });

        var cwin = 0;
        $(document).ready(function () {
            $('.module-sort').sortable();
            $('.hide-usends').hide();
        });

        function getEditModal(id) {
            counter = counter + 1;
            if (id === 0) {
                var html = '<form id="add-module-form">';
                html += '{{csrf_field()}}';
                html += '<div class="form-group">';
                html += '<label>Modül Adı</label>';
                html += '<input type="text" name="module_name" class="form-control">';
                html += '</div>';
                html += '<div class="form-group">';
                html += '<label>Modül Tipi</label>';
                html += '<select style="width:100%" class="form-control" id="module-type" onchange="changeModuleType()" name="module_type">';
                html += '<option value="0">Seçiniz</option>';
                html += '<option value="slider">Slider</option>';
                html += '<option value="banner">Banner</option>';
                html += '<option value="infoblock">Bilgi Blokları</option>';
                html += '<option value="product">Ürün</option>';
                html += '<option value="category">Kategori</option>';
                html += '<option value="html">Html</option>';
                html += '<option value="blog">Blog</option>';
                html += '</select>';
                html += '</div>';
                html += '<div id="module-spesificity">';
                html += '</div>';
                html += '<div id="data-spesificity">';
                html += '</div>';
                html += '</form>';
                $('#edit-modal-body').html(html);
                $('#edit-module-modal').modal('show');
            } else {
                $.get('{{route('design-get-edit-module',[''])}}/' + id + '?counter='+counter, function (response) {
                    if (response.status == 'failure') {
                        toastr.warning(response.msg, 'Hata!', {
                            positionClass: 'toast-bottom-right',
                            containerId: 'toast-bottom-right'
                        });
                    } else {
                        $('#edit-modal-body').html(response);
                        $('#edit-module-modal').modal('show');
                        select2Apply('std');
                        applyTinyMce('#tiny_editor_'+counter);
                    }
                });
            }
        }

        function duplicater(id, prefix, dataType, name) {
            var html = '';
            switch (dataType) {
                case 'category_win':
                    cwin = cwin + 1;
                    html += '<div class="col-12" id="cwin-' + cwin + '">';
                    html += '<div class="row">';
                    html += '<div class="col-9">';
                    html += '<div class="form-group">';
                    html += '<label>Filtre</label>';
                    html += $('#s2-ajax-template .' + $('#data_type').children('option:selected').attr('data-query-type')).clone().attr('id', prefix + '-select-' + id).html();
                    html += '</div>';
                    html += '</div>';
                    html += '<div class="col-3">';
                    html += '<button type="button" class="btn btn-sm btn-success" style="margin-top:22px;color:white;" onclick="selectRemover(\'#' + prefix + '-' + cwin + '\')"><i class="fa fa-remove"></i></button>';
                    html += '</div>';
                    html += '</div>';
                    html += '</div>';
                    $.when($('#data-spesificity').append(html)).then(select2Apply('std', 'data-spesificity select:last'));
                    break;
                case 'product':
                    cwin = cwin + 1;
                    html += '<div class="col-12" id="cwin-' + cwin + '">';
                    html += '<div class="row">';
                    html += '<div class="col-9">';
                    html += '<div class="form-group">';
                    html += '<label>Filtre</label>';
                    html += $('#s2-ajax-template .' + $('#data_type').children('option:selected').attr('data-query-type')).clone().attr('id', prefix + '-select-' + id).html();
                    html += '</div>';
                    html += '</div>';
                    html += '<div class="col-3">';
                    html += '<button type="button" class="btn btn-sm btn-success" style="margin-top:22px;color:white;" onclick="selectRemover(\'#' + prefix + '-' + cwin + '\')"><i class="fa fa-remove"></i></button>';
                    html += '</div>';
                    html += '</div>';
                    html += '</div>';
                    $.when($('#data-spesificity').append(html)).then(select2Apply('type', 'product'));
                    break;
                case 'blog':
                    cwin = cwin + 1;
                    html += '<div class="col-12" id="cwin-' + cwin + '">';
                    html += '<div class="row">';
                    html += '<div class="col-9">';
                    html += '<div class="form-group">';
                    html += '<label>Filtre</label>';
                    html += $('#s2-ajax-template .' + $('#data_type').children('option:selected').attr('data-query-type')).clone().attr('id', prefix + '-select-' + id).html();
                    html += '</div>';
                    html += '</div>';
                    html += '<div class="col-3">';
                    html += '<button type="button" class="btn btn-sm btn-success" style="margin-top:22px;color:white;" onclick="selectRemover(\'#' + prefix + '-' + cwin + '\')"><i class="fa fa-remove"></i></button>';
                    html += '</div>';
                    html += '</div>';
                    html += '</div>';
                    $.when($('#data-spesificity').append(html)).then(select2Apply('std', 'data-spesificity select:last'));
                    break;
                default:
                    cwin = cwin + 1;
                    html += '<div class="col-12" id="cwin-' + cwin + '">';
                    html += '<div class="row">';
                    html += '<div class="col-9">';
                    html += '<div class="form-group">';
                    html += '<label>Filtre</label>';
                    html += $('#s2-ajax-template .' + $('#data_type').children('option:selected').attr('data-query-type')).clone().attr('id', prefix + '-select-' + id).html();
                    html += '</div>';
                    html += '</div>';
                    html += '<div class="col-3">';
                    html += '<button type="button" class="btn btn-sm btn-success" style="margin-top:22px;color:white;" onclick="selectRemover(\'#' + prefix + '-' + cwin + '\')"><i class="fa fa-remove"></i></button>';
                    html += '</div>';
                    html += '</div>';
                    html += '</div>';
                    $.when($('#data-spesificity').append(html)).then(select2Apply('spesificity', 'data-spesificity select:last'));
                    break;
            }


        }

        var slides_num = 1;

        function addSlider() {
            var html = '';
            html += '<div class="row" style="border-bottom:1px solid lightgray">';
            html += '<input type="hidden" name="module_identifer" value="WidgetSliderController">';
            html += '<div class="col-12">';
            html += '</div>';
            html += '<div class="col-6">';
            html += '<div class="form-group">';
            html += '<label>Slider Yazı Başlık</label>';
            html += '<input name="slider[' + (slides_num) + '][title]" placeholder="(Başlık istemiyorsanız boş bırakın)" class="form-control">';
            html += '</div>';
            html += '</div>';
            html += '<div class="col-6">';
            html += '<div class="form-group">';
            html += '<label>Sıra</label>';
            html += '<input name="slider[' + slides_num + '][priority]" type="number" class="form-control">';
            html += '</div>';
            html += '</div>';
            html += '<div class="col-6">';
            html += '<div class="form-group">';
            html += '<label>Slider Yazı Başlık Rengi</label>';
            html += '<input name="slider[' + slides_num + '][title_color]" type="color" placeholder="(Başlık istemiyorsanız boş bırakın)" class="form-control">';
            html += '</div>';
            html += '</div>';
            html += '<div class="col-6">';
            html += '<div class="form-group">';
            html += '<label>Slider Yazı Rengi</label>';
            html += '<input name="slider[' + slides_num + '][text_color]" type="color" placeholder="(Yazı istemiyorsanız boş bırakın)" class="form-control">';
            html += '</div>';
            html += '</div>';
            html += '<div class="col-12">';
            html += '<div class="form-group">';
            html += '<label>Slider Yazı</label>';
            html += '<input name="slider[' + slides_num + '][text]" placeholder="(Yazı istemiyorsanız boş bırakın)" class="form-control">';
            html += '</div>';
            html += '</div>';
            html += '<div class="col-12">';
            html += '<div class="form-group">';
            html += '<img src="" class="img-thumbnail" id="slider-desktop-' + slides_num + '" style="width: 100%;height: auto">';
            html += '<p>Slider Masaüstü</p>';
            html += '<button type="button" class="btn btn-primary" data-input="slider-desktop_input-' + slides_num + '" onclick="filemanager(\'image\',\'slider-desktop_input-' + slides_num + '\',\'slider-desktop-' + slides_num + '\')">Görsel Seç</button>';
            html += '<input type="hidden" name="slider[' + slides_num + '][image_desktop]" class="form-control" id="slider-desktop_input-' + slides_num + '">';
            html += '</div>';
            html += '</div>';
            html += '<div class="col-12">';
            html += '<div class="form-group">';
            html += '<img src="" class="img-thumbnail" id="slider-mobile-' + slides_num + '" style="width: 100%;height: auto">';
            html += '<p>Slider Mobil</p>';
            html += '<button type="button" class="btn btn-primary" onclick="filemanager(\'image\',\'slider-mobile_input-' + slides_num + '\',\'slider-mobile-' + slides_num + '\')">Görsel Seç</button>';
            html += '<input type="hidden" name="slider[' + slides_num + '][image_mobile]" class="form-control" id="slider-mobile_input-' + slides_num + '">';
            html += '</div>';
            html += '</div>';
            html += '<div class="col-6">';
            html += '<div class="form-group">';
            html += '<label>Buton Yazısı </label>';
            html += '<input type="text" class="form-control" placeholder="(Buton istemiyorsanız boş bırakın)" name="slider[' + slides_num + '][button][text]">';
            html += '</div>';
            html += '</div>';
            html += '<div class="col-12">';
            html += '<div class="form-group">';
            html += '<label>Link Tipi</label>';
            html += '<select style="width:100%" class="form-control" name="slider[' + slides_num + '][link_type]" id="slider_link_type_' + slides_num + '" onchange="select2Apply(\'slider_link_type_' + slides_num + '\',\'slider-link-' + slides_num + '\')">';
            html += '<option value="">Seçiniz</option>';
            html += '<option value="spesific">Özel</option>';
            html += '<option value="category">Kategori</option>';
            html += '<option value="blog">Blog</option>';
            html += '<option value="product">Ürün</option>';
            html += '</select>';
            html += '</div>';
            html += '</div>';
            html += '<div class="col-6">';
            html += '<div class="form-group">';
            html += '<label>Link</label>';
            html += '<select style="width:100%" class="form-control" id="slider-link-' + slides_num + '" name="slider[' + slides_num + '][link]">';
            html += '<option value="">Link Tipi Seçiniz</option>';
            html += '</select>';
            html += '</div>';
            html += '</div>';
            html += '</div>';
            slides_num = slides_num + 1;
            $(html).insertAfter('#add-slider');
        }

        function selectRemover(id) {

            $(id).remove();
        }

        function moduleRequirements() {
            var requirements = $('#data_type').children('option:selected').attr('data-requirements').split(',');
            var html = '';
            html += '<div class="row">';
            $.each(requirements, function (key, val) {
                switch (val) {
                    case 'limit':
                        html += '<div class="col-6">';
                        html += '<div class="form-group">';
                        html += '<label>Gösterim Adedi</label>';
                        html += '<input type="number" class="form-control" min="1" name="json_data[limit]">';
                        html += '</div>';
                        html += '</div>';
                        break;
                    case 'orderBy':
                        html += '<div class="col-6">';
                        html += '<div class="form-group">';
                        html += '<label>Sıralama</label>';
                        html += '<select style="width:100%" class="form-control" name="json_data[orderBy]">';
                        html += '<option value=\'["name","ASC"]\'>İsme Göre (A-Z)</option>';
                        html += '<option value=\'["name","DESC"]\'>İsme Göre (Z-A)</option>';
                        html += '<option value=\'["price","ASC"]\'>Fiyata Göre (Artan)</option>';
                        html += '<option value=\'["price","DESC"]\'>Fiyata Göre (Azalan)</option>';
                        html += '<option value=\'["created_at","ASC"]\'>Eklenme Tarihine Göre (Eski-Yeni)</option>';
                        html += '<option value=\'["created_at","DESC"]\'>Eklenme Tarihine Göre (Yeni-Eski)</option>';
                        html += '<option value=\'["RAND()"]\'>Rasgele</option>';
                        html += '</select>';
                        html += '</div>';
                        html += '</div>';
                        break;
                    case 'where':
                        html += '<div class="col-6">';
                        html += '<div class="form-group">';
                        html += '<label>Filtre</label>';
                        html += $('#s2-ajax-template .' + $('#data_type').children('option:selected').attr('data-query-type')).html();
                        html += '</div>';
                        html += '</div>';
                        break;
                    case 'whereIn':
                        html += '<div class="col-12" id="cwin-' + cwin + '">';
                        html += '<div class="row">';
                        html += '<div class="col-9">';
                        html += '<div class="form-group">';
                        html += '<label>Filtre</label>';
                        html += $('#s2-ajax-template .' + $('#data_type').children('option:selected').attr('data-query-type')).clone().attr('id', 'cwin-' + cwin).html();
                        html += '</div>';
                        html += '</div>';
                        html += '<div class="col-3">';
                        html += '<button type="button" class="btn btn-sm btn-success" style="margin-top:22px;color:white;" onclick="duplicater(\'' + cwin + '\',\'cwin\',\'' + $('#data_type').children('option:selected').attr('data-query-type') + '\',\'\')"><i class="fa fa-plus"></i></button>';
                        html += '</div>';
                        html += '</div>';
                        html += '</div>';
                        cwin = cwin + 1;
                        break;
                }
            });
            html += '</div>';
            $('#data-spesificity').html(html);
            select2Apply('std', $('#data_type').children('option:selected').attr('data-query-type'), '', '');

        }

        function deleteModule(id) {
            if (window.confirm("Silmek istediğinize emin misinz?")) {
                $.get('{{route('design-delete-module',[''])}}/' + id, function (response) {
                    if (response.status == 'success') {
                        toastr.success(response.msg, 'Başarılı!', {
                            positionClass: 'toast-bottom-right',
                            containerId: 'toast-bottom-right'
                        });
                        $('#module-' + id).remove();
                    } else {
                        toastr.warning(response.msg, 'Başarısız!', {
                            positionClass: 'toast-bottom-right',
                            containerId: 'toast-bottom-right'
                        });
                    }
                }).fail(function (response) {
                    if (response.responseJSON && response.responseJSON.status == 'failure') {
                        toastr.warning(response.responseJSON.msg, 'Hata!', {
                            positionClass: 'toast-bottom-right',
                            containerId: 'toast-bottom-right'
                        });
                    } else {
                        toastr.warning('Güncellenemedi', 'Hata!', {
                            positionClass: 'toast-bottom-right',
                            containerId: 'toast-bottom-right'
                        });
                    }
                });
            }
        }
        var counter = 0;
        function changeModuleType() {
            var html = '';
            counter = counter + 1;
            switch ($('#module-type').children('option:selected').val()) {
                case 'product':
                    html += '<div class="row">';
                    html += '<div class="col-6">';
                    html += '<div class="form-group">';
                    html += '<label>Modül Tasarımı</label>';
                    html += '<select style="width:100%" class="form-control" name="module_identifer">';
                    @foreach($modules['theme_widgets']->where('type','product') as $widget)
                    html += '<option value="{{$widget->identifer}}">{{$widget->name}}</option>';
                    @endforeach
                    html += '</select>';
                    html += '</div>';
                    html += '</div>';
                    html += '<div class="form-group">';
                    html += '<label>Modül Tipi</label>';
                    html += '<select style="width:100%" class="form-control" onchange="moduleRequirements()" id="data_type" name="data_type">';
                    html += '<option value="0">Seçiniz</option>';
                    @if($modules['theme_widgets']->where('type','product')->count())
                    @foreach($modules['data_templates']->where('data_type','product') as $p_template)
                        html += '<option data-query-type="{{$p_template->query_type}}" data-requirements="{{$p_template->location}}" value="{{$p_template->id}}">{{$p_template->name}}</option>';
                    @endforeach
                        @endif
                        html += '</select>';
                    html += '</div>';
                    html += '</div>';
                    $('#module-spesificity').html(html);
                    $('#data-spesificity').html('');
                    break;
                case 'category':
                    html += '<div class="row">';
                    html += '<div class="col-6">';
                    html += '<div class="form-group">';
                    html += '<label>Modül Tasarımı</label>';
                    html += '<select style="width:100%" class="form-control" name="module_identifer">';
                    html += '<option value="ModuleCategoryBlocks">Kategori Blokları</option>';
                    html += '<option value="ModuleCategorySlider">Kategori Slider</option></select>';
                    html += '</div>';
                    html += '</div>';
                    html += '<div class="form-group">';
                    html += '<label>Modül Tipi</label>';
                    html += '<select style="width:100%" class="form-control" onchange="moduleRequirements()" id="data_type" name="data_type">';
                    html += '<option value="0">Seçiniz</option>';
                    @foreach($modules['data_templates']->where('data_type','category') as $p_template)
                        html += '<option data-query-type="{{$p_template->query_type}}" data-requirements="{{$p_template->location}}" value="{{$p_template->id}}">{{$p_template->name}}</option>';
                    @endforeach
                    html += '</select>';
                    html += '</div>';
                    html += '</div>';
                    $('#module-spesificity').html(html);
                    $('#data-spesificity').html('');
                    break;
                case 'infoblock':
                    html += '<div class="row">';
                    html += '<input type="hidden" name="module_identifer" value="ModuleInfoBlocks">';
                    html += '<input type="hidden" name="data_type" value="infoblock">';
                    html += '<div class="col-12">';
                    html += '<div class="form-group">';
                    html += '<p style="color:red">Görseller için önerilen boyut: 275x100</p>';
                    html += '<img src="" class="img-thumbnail" id="banner-desktop_img_0" style="width: 100%;height: auto">';
                    html += '<p>Bilgi Resim 1</p>';
                    html += '<button type="button" class="btn btn-primary" data-input="banner-desktop_img_0" onclick="filemanager(\'image\',\'banner-desktop_input_0\',\'banner-desktop_img_0\')">Görsel Seç</button>';
                    html += '<input type="hidden" name="info_image[]" class="form-control" id="banner-desktop_input_0">';
                    html += '</div>';
                    html += '</div>';
                    html += '<div class="col-12">';
                    html += '<div class="form-group">';
                    html += '<p style="color:red">Görseller için önerilen boyut: 275x100</p>';
                    html += '<img src="" class="img-thumbnail" id="banner-desktop_img_1" style="width: 100%;height: auto">';
                    html += '<p>Bilgi Resim 2</p>';
                    html += '<button type="button" class="btn btn-primary" data-input="banner-desktop_img_1" onclick="filemanager(\'image\',\'banner-desktop_input_1\',\'banner-desktop_img_1\')">Görsel Seç</button>';
                    html += '<input type="hidden" name="info_image[]" class="form-control" id="banner-desktop_input_1">';
                    html += '</div>';
                    html += '</div>';
                    html += '<div class="col-12">';
                    html += '<div class="form-group">';
                    html += '<p style="color:red">Görseller için önerilen boyut: 275x100</p>';
                    html += '<img src="" class="img-thumbnail" id="banner-desktop_img_2" style="width: 100%;height: auto">';
                    html += '<p>Bilgi Resim 3</p>';
                    html += '<button type="button" class="btn btn-primary" data-input="banner-desktop_img_2" onclick="filemanager(\'image\',\'banner-desktop_input_2\',\'banner-desktop_img_2\')">Görsel Seç</button>';
                    html += '<input type="hidden" name="info_image[]" class="form-control" id="banner-desktop_input_2">';
                    html += '</div>';
                    html += '</div>';
                    html += '<div class="col-12">';
                    html += '<div class="form-group">';
                    html += '<p style="color:red">Görseller için önerilen boyut: 275x100</p>';
                    html += '<img src="" class="img-thumbnail" id="banner-desktop_img_3" style="width: 100%;height: auto">';
                    html += '<p>Bilgi Resim 4</p>';
                    html += '<button type="button" class="btn btn-primary" data-input="banner-desktop_img_3" onclick="filemanager(\'image\',\'banner-desktop_input_3\',\'banner-desktop_img_3\')">Görsel Seç</button>';
                    html += '<input type="hidden" name="info_image[]" class="form-control" id="banner-desktop_input_3">';
                    html += '</div>';
                    html += '</div>';
                    html += '</div>';
                    $('#module-spesificity').html(html);
                    $('#data-spesificity').html('');
                    break;
                case 'slider':
                    html += '<div class="row" style="border-bottom:1px solid lightgray">';
                    html += '<input type="hidden" name="module_identifer" value="WidgetSliderController">';
                    html += '<input type="hidden" name="data_type" value="slider">';
                    html += '<div class="col-12">';
                    html += '<p style="color:red">Tam genişlikteki görseller için önerilen boyut, (Soldan Anamenü Yoksa) Masaüstü resim: 1110x480 , Mobil Resim: 510x395, (Soldan Ana Menü Varsa) Masaüstü resim: 840x395 , Mobil Resim: 510x395</p>';
                    html += '<button type="button" id="add-slider" onclick="addSlider(0)" class="btn btn-sm btn-success"><i class="fa fa-plus"></i></button>';
                    html += '</div>';
                    html += '<div class="col-6">';
                    html += '<div class="form-group">';
                    html += '<label>Slider Yazı Başlık</label>';
                    html += '<input name="slider[0][title]" placeholder="(Başlık istemiyorsanız boş bırakın)" class="form-control">';
                    html += '</div>';
                    html += '</div>';
                    html += '<div class="col-6">';
                    html += '<div class="form-group">';
                    html += '<label>Sıra</label>';
                    html += '<input name="slider[0][priority]" type="number" class="form-control">';
                    html += '</div>';
                    html += '</div>';
                    html += '<div class="col-6">';
                    html += '<div class="form-group">';
                    html += '<label>Slider Yazı Başlık Rengi</label>';
                    html += '<input name="slider[0][title_color]" type="color" placeholder="(Başlık istemiyorsanız boş bırakın)" class="form-control">';
                    html += '</div>';
                    html += '</div>';
                    html += '<div class="col-6">';
                    html += '<div class="form-group">';
                    html += '<label>Slider Yazı Rengi</label>';
                    html += '<input name="slider[0][text_color]" type="color" placeholder="(Yazı istemiyorsanız boş bırakın)" class="form-control">';
                    html += '</div>';
                    html += '</div>';
                    html += '<div class="col-12">';
                    html += '<div class="form-group">';
                    html += '<label>Slider Yazı</label>';
                    html += '<input name="slider[0][text]" placeholder="(Yazı istemiyorsanız boş bırakın)" class="form-control">';
                    html += '</div>';
                    html += '</div>';
                    html += '<div class="col-12">';
                    html += '<div class="form-group">';
                    html += '<img src="" class="img-thumbnail" id="slider-desktop-0" style="width: 100%;height: auto">';
                    html += '<p>Slider Masaüstü</p>';
                    html += '<button type="button" class="btn btn-primary" data-input="slider-desktop_input-0" onclick="filemanager(\'image\',\'slider-desktop_input-0\',\'slider-desktop-0\')">Görsel Seç</button>';
                    html += '<input type="hidden" name="slider[0][image_desktop]" class="form-control" id="slider-desktop_input-0">';
                    html += '</div>';
                    html += '</div>';
                    html += '<div class="col-12">';
                    html += '<div class="form-group">';
                    html += '<img src="" class="img-thumbnail" id="slider-mobile-0" style="width: 100%;height: auto">';
                    html += '<p>Slider Mobil</p>';
                    html += '<button type="button" class="btn btn-primary" onclick="filemanager(\'image\',\'slider-mobile_input-0\',\'slider-mobile-0\')">Görsel Seç</button>';
                    html += '<input type="hidden" name="slider[0][image_mobile]" class="form-control" id="slider-mobile_input-0">';
                    html += '</div>';
                    html += '</div>';
                    html += '<div class="col-6">';
                    html += '<div class="form-group">';
                    html += '<label>Buton Yazısı </label>';
                    html += '<input type="text" class="form-control" placeholder="(Buton istemiyorsanız boş bırakın)" name="slider[0][button][text]">';
                    html += '</div>';
                    html += '</div>';
                    html += '<div class="col-6">';
                    html += '<div class="form-group">';
                    html += '<label>Link Tipi</label>';
                    html += '<select style="width:100%" class="form-control" name="slider[0][link_type]" id="slider_link_type_0" onchange="select2Apply(\'slider_link_type_0\',\'slider-link-0\')">';
                    html += '<option value="">Seçiniz</option>';
                    html += '<option value="spesific">Özel</option>';
                    html += '<option value="category">Kategori</option>';
                    html += '<option value="blog">Blog</option>';
                    html += '<option value="product">Ürün</option>';
                    html += '</select>';
                    html += '</div>';
                    html += '</div>';
                    html += '<div class="col-6">';
                    html += '<div class="form-group">';
                    html += '<label>Link</label>';
                    html += '<select style="width:100%" class="form-control" id="slider-link-0" name="slider[0][link]">';
                    html += '<option value="">Link Tipi Seçiniz</option>';
                    html += '</select>';
                    html += '</div>';
                    html += '</div>';
                    html += '</div>';
                    $('#module-spesificity').html(html);
                    $('#data-spesificity').html('');
                    break;
                case 'banner':
                    html += '<div class="row">';
                    html += '<input type="hidden" name="module_identifer" value="ModuleBanner">';
                    html += '<input type="hidden" name="data_type" value="banner">';
                    html += '<div class="col-6">';
                    html += '<div class="form-group">';
                    html += '<label>Banner Yazı Başlık</label>';
                    html += '<input type="text" name="title" class="form-control">';
                    html += '</div>';
                    html += '</div>';
                    html += '<div class="col-6">';
                    html += '<div class="form-group">';
                    html += '<label>Banner Yazı Alt Başlık</label>';
                    html += '<input type="text" name="sub_title" class="form-control">';
                    html += '</div>';
                    html += '</div>';
                    html += '<div class="col-12">';
                    html += '<div class="form-group">';
                    html += '<label>Banner Yazı Rengi</label>';
                    html += '<input type="color" name="title_color" class="form-control">';
                    html += '</div>';
                    html += '</div>';
                    html += '<div class="col-12">';
                    html += '<div class="form-group">';
                    html += '<p style="color:red">Tam genişlikteki görseller için önerilen boyut, Masaüstü resim: 1110x170 , Mobil Resim: 510x390</p>';
                    html += '<img src="" class="img-thumbnail" id="banner-desktop" style="width: 100%;height: auto">';
                    html += '<p>Banner Masaüstü</p>';
                    html += '<button type="button" class="btn btn-primary" data-input="banner-desktop_input" onclick="filemanager(\'image\',\'banner-desktop_input\',\'banner-desktop\')">Görsel Seç</button>';
                    html += '<input type="hidden" name="banner_desktop" class="form-control" id="banner-desktop_input">';
                    html += '</div>';
                    html += '</div>';
                    html += '<div class="col-12">';
                    html += '<div class="form-group">';
                    html += '<img src="" class="img-thumbnail" id="banner-mobile" style="width: 100%;height: auto">';
                    html += '<p>Banner Mobil</p>';
                    html += '<button type="button" class="btn btn-primary" onclick="filemanager(\'image\',\'banner-mobile_input\',\'banner-mobile\')">Görsel Seç</button>';
                    html += '<input type="hidden" name="banner_mobile" class="form-control" id="banner-mobile_input">';
                    html += '</div>';
                    html += '</div>';
                    html += '<div class="col-6">';
                    html += '<div class="form-group">';
                    html += '<label>Link Açılışı</label>';
                    html += '<select style="width:100%" class="form-control" name="target" >';
                    html += '<option value="">Aynı Sayfada</option>';
                    html += '<option value="_blank">Yeni Sekmede</option>';
                    html += '</select>';
                    html += '</div>';
                    html += '</div>';
                    html += '<div class="col-6">';
                    html += '<div class="form-group">';
                    html += '<label>Link Bot Takip</label>';
                    html += '<select style="width:100%" class="form-control" name="rel" >';
                    html += '<option value="">Botlar Takip Etsin (Follow)</option>';
                    html += '<option value="nofollow noopener noreferrer">Botlar Takip Etmesin (NoFollow)</option>';
                    html += '</select>';
                    html += '</div>';
                    html += '</div>';
                    html += '<div class="col-6">';
                    html += '<div class="form-group">';
                    html += '<label>Link Tipi</label>';
                    html += '<select style="width:100%" class="form-control" id="link_type" name="link_type" onchange="getLinkSelect2()">';
                    html += '<option value="">Seçiniz</option>';
                    html += '<option value="spesific">Özel</option>';
                    html += '<option value="category">Kategori</option>';
                    html += '<option value="blog">Blog</option>';
                    html += '<option value="product">Ürün</option>';
                    html += '</select>';
                    html += '</div>';
                    html += '</div>';
                    html += '</div>';
                    $('#module-spesificity').html(html);
                    $('#data-spesificity').html('');
                    break;
                case 'blog':
                    html += '<div class="row">';
                    html += '<div class="col-6">';
                    html += '<div class="form-group">';
                    html += '<input type="hidden" name="data_type" value="blog">';
                    html += '<label>Modül Tasarımı</label>';
                    html += '<select style="width:100%" class="form-control" name="module_identifer">';
                    html += '<option value="ModuleBlogBlocks">Blog Blokları</option>';
                    html += '<option value="ModuleBlogSlider">Blog Slider</option></select>';
                    html += '</div>';
                    html += '</div>';
                    html += '<div class="form-group">';
                    html += '<label>Modül Tipi</label>';
                    html += '<select style="width:100%" class="form-control" onchange="moduleRequirements()" id="data_type" name="data_type">';
                    html += '<option value="0">Seçiniz</option>';
                    @foreach($modules['data_templates']->where('data_type','blog') as $p_template)
                        html += '<option data-query-type="{{$p_template->query_type}}" data-requirements="{{$p_template->location}}" value="{{$p_template->id}}">{{$p_template->name}}</option>';
                    @endforeach
                        html += '</select>';
                    html += '</div>';
                    html += '</div>';
                    $('#module-spesificity').html(html);
                    $('#data-spesificity').html('');
                    break;
                case 'html':

                    html += '<div class="row">';
                    html += '<input type="hidden" name="module_identifer" value="ModuleHtml">';
                    html += '<input type="hidden" name="data_type" value="html">';
                    html += '<div class="col-12">';
                    html += '<div class="form-group">';
                    html += '<label>HTML Data</label>';
                    html += '<textarea id="tiny_editor_'+counter+'" name="html" class="tiny_editor form-control"></textarea>';
                    html += '</div>';
                    html += '</div>';
                    html += '</div>';
                    $('#module-spesificity').html(html);
                    $('#data-spesificity').html('');
                    applyTinyMce('#tiny_editor_'+counter);
                    break;
                default:
                    $('#module-spesificity').html('');
                    $('#data-spesificity').html('');
                    break;
            }

        }

        function getLinkSelect2() {
            var html = '';
            if ($('#link_type').children('option:selected').val() == 'spesific') {
                html += '<label>Link</label>';
                html += '<input type="text" name="link" class="form-control">';
            } else {
                html += '<label>Link</label>';
                html += $('#s2-ajax-template .banner').html();
            }
            $.when($('#data-spesificity').html(html)).then(select2Apply('type', $('#link_type').children('option:selected').val()));
        }

        function moveElement(dest, id) {
            var currentLocation = $('#module-' + id).attr('data-location');
            switch (currentLocation) {
                case 'right':
                    if (dest == 'left') {
                        $('#module-' + id).prependTo('#location-center');
                        $('#module-' + id).attr('data-location', 'center');
                        $('#module-input-' + id).attr('name', 'module[center][' + id + ']');
                    } else {
                        $('#module-' + id).prependTo('#location-left');
                        $('#module-' + id).attr('data-location', 'left');
                        $('#module-input-' + id).attr('name', 'module[left][' + id + ']');
                    }
                    break;
                case 'left':
                    if (dest == 'left') {
                        $('#module-' + id).prependTo('#location-right');
                        $('#module-' + id).attr('data-location', 'right');
                        $('#module-input-' + id).attr('name', 'module[right][' + id + ']');
                    } else {
                        $('#module-' + id).prependTo('#location-center');
                        $('#module-' + id).attr('data-location', 'center');
                        $('#module-input-' + id).attr('name', 'module[center][' + id + ']');
                    }
                    break;
                case 'center':
                    if (dest == 'left') {
                        $('#module-' + id).prependTo('#location-left');
                        $('#module-' + id).attr('data-location', 'left');
                        $('#module-input-' + id).attr('name', 'module[left][' + id + ']');
                    } else {
                        $('#module-' + id).prependTo('#location-right');
                        $('#module-' + id).attr('data-location', 'right');
                        $('#module-input-' + id).attr('name', 'module[right][' + id + ']');
                    }
                    break;
            }
        }

        function useUnuse(id) {
            var currentStatus = $('#module-' + id).attr('data-status');
            var currentSize = $('#module-resize-select-' + id).attr('data-current');
            if (currentStatus == 'use') {
                $('#module-' + id).appendTo('#location-unused');
                $('#module-' + id).attr('data-location', 'unused');
                $('#module-' + id).attr('data-status', 'unused');
                $('#module-input-' + id).attr('name', 'module[unused][' + id + ']');
                $('#module-input-' + id).val('4');
                $('#module-' + id).removeClass('col-' + currentSize);
                $('#module-' + id).toggleClass('col-4');
                $('#module-' + id + ' .usenuse').removeClass('fa-remove');
                $('#module-' + id + ' .usenuse').toggleClass('fa-plus');
                $('#module-' + id + ' .navigates').hide();
            } else {
                $('#module-' + id).attr('data-location', 'center');
                $('#module-input-' + id).attr('name', 'module[center][' + id + ']');
                $('#module-' + id).prependTo('#location-center');
                $('#module-' + id).attr('data-status', 'use');
                $('#module-' + id).removeClass('col-4');
                $('#module-' + id).toggleClass('col-12');
                $('#module-input-' + id).val('{{$modules['theme_options']['theme_grid']}}');
                $('#module-' + id + ' .usenuse').toggleClass('fa-remove');
                $('#module-' + id + ' .usenuse').removeClass('fa-plus');
                $('#module-' + id + ' .navigates').show();
            }
        }

        function resizeModule(id) {
            var current = $('#module-resize-select-' + id).attr('data-current');
            $('#module-' + id).removeClass('col-' + current);
            $('#module-' + id).toggleClass('col-' + $('#module-resize-select-' + id).children('option:selected').data('size'));
            $('#module-resize-select-' + id).attr('data-current', $('#module-resize-select-' + id).children('option:selected').data('size'));
            $('#module-input-' + id).val($('#module-resize-select-' + id).children('option:selected').val());
        }

        $('#max-min-unused').on('click', function () {
            if ($(this).attr('data-current') == 'showing') {
                $('#location-unused').hide();
                $(this).attr('data-current', 'hidding');
                $(this).text('Göster');
            } else {
                $('#location-unused').show();
                $(this).attr('data-current', 'showing');
                $(this).text('Gizle');
            }
        });
    </script>
@endsection