@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) {
            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",
            }).disableSelection();

            $( ".connectedSortable" ).on( "sortupdate", function( event, ui ) {

                $("#slider-drop li").each(function( index ) {
                    var li = $(this);
                    li.find('input').each(function( index ) {
                        $(this).attr('name',$(this).attr('name').split("[]")[0]+`[${li.index()}]`);
                    });
                });

            

                
                
            });

            var liItem = `<li class="list-group-item connectedSortable" >
                        <input type="file" name="slider[]" placeholder="Pilih Slider" class="pilih-slider">
                        <button type="button" class="btn btn-danger btn-sm hapus-slider"><i class="fas fa-trash"></i></button>
                        <br>
                        <img src="" alt="" class="img-preview">
                    </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(){
                previewImage(this,$(this).closest('li').find('.img-preview'));
            });
        });
    </script>
@endpush


@section('form')
<input type="hidden" name="_method" value="PUT">

    <div class="form-group">
        <label for="slider">Slider</label>
        <div class="row">
            
            <div class="col-md-6">
                <ul class="list-group connectedSortable" id="slider-drop">
                    @forelse ($sliderGroup->sliders as $slider)
                        <li class="list-group-item connectedSortable" >
                            <input type="file" name="slider[]" placeholder="Pilih Slider" class="pilih-slider">
                            <button type="button" class="btn btn-danger btn-sm hapus-slider"><i class="fas fa-trash"></i></button>
                            <br>
                            <img src="{{ url('storage/'.$slider->gambar) }}" alt="" class="img-preview">
                            <input type="hidden" name="slider_id[]" value="{{ $slider->id }}">
                        </li>
                    @empty
                        <li class="list-group-item connectedSortable" >
                            <input type="file" name="slider[]" placeholder="Pilih Slider" class="pilih-slider">
                            <button type="button" class="btn btn-danger btn-sm hapus-slider"><i class="fas fa-trash"></i></button>
                            <br>
                            <img src="" alt="" class="img-preview">
                        </li>
                    @endforelse
                </ul>
            </div>
            
        </div>
        <div class="row mt-2">
            <div class="col-md-2">
                <button type="button" class="btn btn-primary btn-sm" id="add-slider"><i class="fas fa-plus"></i></button>
            </div>
        </div>
        @error('slider')
            <div class="alert alert-danger">{{ $message }}</div>
        @enderror
    </div>
    
@endsection