@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 Produk</label>
        <input type="file" accept="image/*" name="banner" onchange="previewImage(this)" class="form-control" id="banner" @if (!isset($data))
            required
        @endif placeholder="Banner" value="{{ old('banner',@$data->banner) }}">
        @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="nama_produk" class="label-control">Nama Produk <span class="text-danger">*</span></label>
        <input type="text" maxlength="200" class="form-control" name="nama_produk" id="nama_produk" placeholder="Nama Produk" required value="{{ old('nama_produk',@$data->nama_produk) }}">
        @error('nama_produk')
            <strong class="text-danger">{{ $message }}</strong>
        @enderror
    </div>
   

    <div class="row">
        <div class="col-md-12">
            <div class="form-group">
                <label for="keterangan">Keterangan Produk </label>
                <div id="toolbar"></div>
                <div id="editor" style="min-height: 300px;">{!! old('keterangan',@$data->keterangan) !!}</div>
                <input type="hidden" name="keterangan" id="keterangan" value="{{ old('keterangan',@$data->keterangan) }}">
                @error('keterangan')
                    <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: 'keterangan...',
            theme: 'snow'
        });

   

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