@if (session('success') && request()->segment(4) === 'presentation')
    <div class="kt-alert kt-alert-light kt-alert-success mb-5">
        {{ session('success') }}
    </div>
@endif

<div class="kt-card">
    <form method="POST" action="{{ route('admin.crm.media.presentation.update', $media) }}">
        @csrf
        @method('PUT')

        <div class="kt-card-content p-5">
            <textarea id="summernote" name="presentation">{{ old('presentation', $media->presentation) }}</textarea>
        </div>

        <div class="kt-card-footer justify-end gap-3">
            @can('edit-media')
            <x-ui.loading-button type="submit" class="kt-btn-primary" loadingText="{{ __('ui.states.saving') }}">
                {{ __('ui.actions.save') }}
            </x-ui.loading-button>
            @endcan
        </div>
    </form>
</div>

@push('styles')
<link href="{{ asset('assets/vendors/summernote/summernote-lite.min.css') }}" rel="stylesheet">
<style>
    .note-editable ul { list-style: disc !important; padding-left: 1.5rem !important; margin: 0.5rem 0 !important; }
    .note-editable ol { list-style: decimal !important; padding-left: 1.5rem !important; margin: 0.5rem 0 !important; }
    .note-editable li { display: list-item !important; }
</style>
@endpush

@push('scripts')
<script src="{{ asset('assets/vendors/summernote/jquery.min.js') }}"></script>
<script src="{{ asset('assets/vendors/summernote/summernote-lite.min.js') }}"></script>
<script>
$(document).ready(function () {
    $('#summernote').summernote({
        height: 350,
        toolbar: [
            ['style', ['style', 'bold', 'italic', 'underline', 'clear']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['insert', ['link']],
            ['custom', ['removeInlineStyles']],
            ['view', ['codeview', 'fullscreen']],
        ],
        styleTags: ['p', 'h1', 'h2', 'h3', 'h4'],
        buttons: {
            removeInlineStyles: function(context) {
                return $.summernote.ui.button({
                    contents: '<i class="ki-outline ki-eraser"></i>',
                    tooltip: 'Supprimer les styles inline',
                    click: function() {
                        var html = context.invoke('code');
                        context.invoke('code', html.replace(/ style="[^"]*"/gi, ''));
                    }
                }).render();
            }
        },
        callbacks: {
            onImageUpload: function() { return false; },
            onPaste: function(e) {
                var buf = e.originalEvent.clipboardData.getData('text/html');
                if (buf) {
                    document.execCommand('insertHTML', false, buf.replace(/ style="[^"]*"/gi, ''));
                    e.preventDefault();
                }
            }
        }
    });
});
</script>
@endpush