@extends('admin.layout.master')

@section('title', 'Pop-up Düzenle')

@section('breadcrumb')
    <div class="container-fluid px-4">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb my-0">
                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard.index') }}">Anasayfa</a></li>
                <li class="breadcrumb-item"><a href="{{ route('admin.popup.index') }}">Pop-uplar</a></li>
                <li class="breadcrumb-item active"><span>Pop-up Düzenle</span></li>
            </ol>
        </nav>
    </div>
@stop

@section('content')

    <div class="container-lg px-4">
        <div class="row">
            <div class="col-12">
                <div class="card mb-4">
                    <div class="card-header">
                        <strong>Pop-up Düzenle</strong>
                    </div>
                    <div class="card-body">
                        <div class="example">
                            <ul class="nav nav-underline-border" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link active" data-coreui-toggle="tab" href="#preview-1004" role="tab">
                                        <svg class="icon me-2">
                                            <use
                                                xlink:href="{{ URL::to('admin/vendors/@coreui/icons/svg/free.svg#cil-align-left') }}">
                                            </use>
                                        </svg>
                                        Pop-up Düzenle
                                    </a>
                                </li>
                            </ul>
                            <div class="tab-content rounded-bottom">
                                <div class="tab-pane p-3 active preview" role="tabpanel" id="preview-1004">
                                    <livewire:admin.popup.edit :$popup />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@section('css')
@stop

@section('js')
    <script src="{{ URL::to('admin/ckeditor/build/ckeditor.js') }}"></script>

    <script>
        const toastConfig = {
            toast: true,
            position: 'top-end',
            showConfirmButton: false,
            timer: 2000,
            timerProgressBar: true,
        };

        document.addEventListener('livewire:init', () => {
            initCKEditor();

            Livewire.on('showAlert', (event) => {
                Swal.fire({
                    ...toastConfig,
                    text: event[0].text,
                    icon: event[0].icon,
                });
            });
        });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var lfm = function(id, type, options) {
                let button = document.getElementById(id);

                var displayPreview = function(url, previewElement) {
                    if (!previewElement.querySelector('img[src="' + url + '"]')) {
                        let img = document.createElement('img');
                        img.setAttribute('style', 'height: 5rem');
                        img.setAttribute('src', url);
                        previewElement.appendChild(img);
                    }
                };

                button.addEventListener('click', function() {
                    var route_prefix = (options && options.prefix) ? options.prefix :
                        '/laravel-filemanager';
                    var target_input = document.getElementById(button.getAttribute('data-input'));
                    var target_preview = document.getElementById(button.getAttribute('data-preview'));
                    var target_path = document.getElementById(button.getAttribute('data-path'));

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

                        var file_name = items.map(function(item) {
                            return item.url.split('/').pop();
                        }).join(',');

                        target_input.value = file_name;
                        target_input.dispatchEvent(new Event('change'));
                        target_input.dispatchEvent(new Event('input'));

                        target_path.value = file_path;
                        target_path.dispatchEvent(new Event('change'));
                        target_path.dispatchEvent(new Event('input'));

                        target_preview.innerHTML = '';

                        items.forEach(function(item) {
                            displayPreview(item.thumb_url, target_preview);
                        });

                        target_preview.dispatchEvent(new Event('change'));
                    };
                });

                var initial_path = document.getElementById(button.getAttribute('data-path')).value;
                if (initial_path) {
                    var initial_preview = document.getElementById(button.getAttribute('data-preview'));
                    displayPreview(initial_path, initial_preview);
                }
            };

            var route_prefix = "{{ url('filemanager') }}";

            document.querySelectorAll('[id^="lfm-"]').forEach(function(element) {
                lfm(element.id, 'image', {
                    prefix: route_prefix
                });
            });
        });
    </script>

@stop

@stop