@extends('admin.layouts.app-form')

@section('form-title')
    @if(isset($data))
        Ubah Data {{ $settings['title'] }}
    @else
        Tambah Data {{ $settings['title'] }}
    @endif
@endsection

@push('styles')
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <style>
        .img-preview {
            max-width: 400px;
        }
    </style>
@endpush

@push('scripts')
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
        function previewImage(input,target = 'imagePreview') {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    $('#'+target)
                        .attr('src', e.target.result);
                };

                reader.readAsDataURL(input.files[0]);
            }
        }

        $( function() {
            $( "#slider-drop" ).sortable({
            connectWith: ".connectedSortable",
            opacity: 0.5,
            }).disableSelection();

            $( ".connectedSortable" ).on( "sortupdate", function( event, ui ) {
                // var panddingArr = [];
                // var completeArr = [];

                // $("#padding-item-drop li").each(function( index ) {
                //     panddingArr[index] = $(this).attr('item-id');
                // });

                // $("#complete-item-drop li").each(function( index ) {
                //     completeArr[index] = $(this).attr('item-id');
                // });



            });

            var liItem = `<li class="list-group-item connectedSortable" >
                        <input type="file" name="slider[]" placeholder="Pilih Slider">
                        <button type="button" class="btn btn-danger btn-sm hapus-slider"><i class="fas fa-trash"></i></button>
                    </li>`;

            $( "#add-slider" ).click(function() {
                $( "#slider-drop" ).append(liItem);
            });

            $(document).on('click','.hapus-slider',function() {
                $(this).closest('li').remove();
            });

            $(document).on('change','.pilih-slider',function(event){
                $(this).closest('li').find('.img-preview').attr('src',URL.createObjectURL(event.target.files[0]));
            });

            $(document).on('change','#use_link',function(){
                if($(this).is(':checked')) {
                    $("#link_url").show();
                    $('#banner_link').removeAttr('disabled');
                    $('#banner').attr('disabled','disabled');
                } else {
                    $("#link_url").hide();
                    $('#banner_link').attr('disabled','disabled');
                    $('#banner').removeAttr('disabled');
                }
            });
        });
    </script>
@endpush


@section('form')
    @if(isset($data))
        <input type="hidden" name="_method" value="PUT">
    @endif

    <div class="form-group">
        <label for="banner">Gambar/Video Banner</label>
        <input type="file" accept="video/*,image/*" name="banner" onchange="previewImage(this)" class="form-control" id="banner" @if (!isset($data))
            required
        @endif placeholder="Banner" value="{{ old('banner',@$data->banner) }}">
        {{-- <div class="px-3">
            <input type="checkbox" id="use_link"> <label for="use_link">Pakai Link</label>
        </div>
        <br>
        <div style="display: none;" id="link_url">
            <input type="text" name="banner_link" id="banner_link" disabled class="form-control" placeholder="Link Banner" value="{{ old('banner_link',@$data->banner) }}">
        </div> --}}
        @error('banner')
            <div class="alert alert-danger">{{ $message }}</div>
        @enderror
        <img src="{{ asset('storage/'.old('banner',@$data->banner)) }}" alt="" style="max-width: 300px;" id="imagePreview">
    </div>

    <div class="form-group">
        <label for="judul" class="label-control">Judul Berita <span class="text-danger">*</span></label>
        <input type="text" maxlength="200" class="form-control" name="judul" id="judul" placeholder="Judul Berita" required value="{{ old('judul',@$data->judul) }}">
        @error('judul')
            <strong class="text-danger">{{ $message }}</strong>
        @enderror
    </div>


    <div class="row">
        <div class="col-md-12">
            <div class="form-group">
                <label for="isi">Isi Berita </label>
                <div id="toolbar"></div>
                <div id="editor" style="min-height: 300px;">{!! old('isi',@$data->isi) !!}</div>
                <input type="hidden" name="isi" id="isi" value="{{ old('isi',@$data->isi) }}">
                @error('isi')
                    <div class="alert alert-danger">{{ $message }}</div>
                @enderror
            </div>
        </div>
    </div>

@endsection
@push('styles')
    <link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
    <link href="//cdn.quilljs.com/1.3.6/quill.bubble.css" rel="stylesheet">
@endpush
@push('scripts')
    <script src="//cdn.quilljs.com/1.3.6/quill.js"></script>
    <script src="//cdn.quilljs.com/1.3.6/quill.min.js"></script>
    <script>
        var container = document.getElementById('editor');
        var editor = new Quill(container,{
        debug: 'info',
        modules: {
            toolbar: [
                ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
                ['blockquote', 'code-block'],
                [{ 'header': 1 }, { 'header': 2 }],               // custom button values
                [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
                [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
                [{ 'direction': 'rtl' }],                         // text direction
                [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
                [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
                [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
                [{ 'font': [] }],
                [{ 'align': [] }],
                ['image'],
                ['clean'],
            ]
        },
            placeholder: 'Isi...',
            theme: 'snow'
        });



        $(document).on("submit","#form",function(){
            var myEditor = document.querySelector('#editor')
            var html = myEditor.children[0].innerHTML
            $("#isi").val(html);
        });
    </script>
@endpush