@extends('layouts.admin')
@section('title', 'Galeri Kegiatan')
@section('style')
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/web-animations-js@2.3.2/web-animations.min.js"></script>

<style type="text/css">
    img{
        width: 100%;
    }

    #imgPreview{
        border: 1px solid black;
        padding: 10px;
    }

    #imgPreview img{
        width: 200px;
        padding: 5px;
    }
</style>
@endsection
@section('content')
<section class="content">
    <div class="d-flex flex-wrap justify-content-between">
        <h4>Form Galeri Kegiatan</h4>
        <div class="tools">
            <a type="button" class="btn btn-outline-success btn-sm pull-right" href="{{route('gallery_form')}}"><i class="fas fa-plus"></i> Buat Baru</a>
            <button type="button" class="btn btn-outline-primary btn-sm pull-right" onclick="$('#formData').submit();"><i class="fas fa-save"></i> Publish</button>
        </div>
    </div>
    @if ($message = Session::get('success'))
    <div class="alert alert-success">
        <p>{{ $message }}</p>
    </div>
    @endif
    @if ($message = Session::get('error'))
    <div class="alert alert-error">
        <p>{{ $message }}</p>
    </div>
    @endif
    <form id="formData" method="POST" action="javascript:void(0)" enctype="multipart/form-data" autocomplete="off">
        <div class="row g-2 my-2">
            <div class="col-md-12 g-2">
                <div class="card">
                    <div class="card-body">
                        <input type="hidden" name="galeri_id" id="galeri_id" value="{{ isset($gallery)?$gallery->galeri_id:'' }}">
                        @csrf
                        <div class="row g-2">
                            <div class="col-md-6">
                                <label for="judul" class="form-label">Judul <span style="color:red">*</span></label>
                                <input type="text" name="judul" id="judul" class="form-control" value="{{isset($gallery)?$gallery->galeri_judul:''}}">
                                @error('judul')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label for="tags" class="form-label">Tags</label>
                                <input type="text" name="tags" id="tags" class="form-control" onkeyup="if (this.value[0] !== '#') this.value = '#' + this.value" value="{{isset($gallery)?$gallery->galeri_tags:''}}" style="text-transform: lowercase;">
                                @error('tags')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                            <div class="col-md-12">
                                <label for="deskripsi" class="form-label">Deskripsi <span style="color:red">*</span></label>
                                <textarea type="text" name="deskripsi" id="deskripsi" class="form-control" style="width:100%">{{isset($gallery)?$gallery->galeri_deskripsi:''}}</textarea>
                                @error('deskripsi')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                            <div class="col-md-12">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" role="switch" name="publish" id="publish"  >
                                    <label class="form-check-label" for="publish">Publish</label>
                                </div>
                            </div>

                            <div id="sortable" class="d-flex flex-wrap">
                            </div>

                            <div id="imageUpload" class="mt-4 dropzone"></div>

                        </div>
                    </div>
                </div>
                <div class="card mt-4 hidden">
                    <div class="p-2">
                        <div class="grid">
                            <div class="item col" data-id="1">
                                <input style="display: none;" type="file" id="foto_1" name="bulkfoto[]" accept="image/png, image/gif, image/jpeg" onchange="showPreview('foto_1','prev_1');"/>
                                <img id="prev_1" onclick="document.getElementById('foto_1').click();" src="{{URL::asset(config('app.path_images').'/user_grey.png')}}" class="rounded shadow-sm p-2" style="object-fit: cover; width: 200px; height: 200px"/>
                            </div>
                            <div class="item col" data-id="2">
                                <input style="display: none;" type="file" id="foto_2" name="bulkfoto[]" accept="image/png, image/gif, image/jpeg" onchange="showPreview('foto_2','prev_2');"/>
                                <img id="prev_2" onclick="document.getElementById('foto_2').click();" src="{{URL::asset(config('app.path_images').'/user_grey.png')}}" class="rounded shadow-sm p-2" style="object-fit: cover; width: 200px; height: 200px"/>
                            </div>
                            <div class="item col" data-id="3">
                                <input style="display: none;" type="file" id="foto_3" name="bulkfoto[]" accept="image/png, image/gif, image/jpeg" onchange="showPreview('foto_3','prev_3');"/>
                                <img id="prev_3" onclick="document.getElementById('foto_3').click();" src="{{URL::asset(config('app.path_images').'/user_grey.png')}}" class="rounded shadow-sm p-2" style="object-fit: cover; width: 200px; height: 200px"/>
                            </div>
                            <div class="item col" data-id="4">
                                <input style="display: none;" type="file" id="foto_4" name="bulkfoto[]" accept="image/png, image/gif, image/jpeg" onchange="showPreview('foto_4','prev_4');"/>
                                <img id="prev_4" onclick="document.getElementById('foto_4').click();" src="{{URL::asset(config('app.path_images').'/user_grey.png')}}" class="rounded shadow-sm p-2" style="object-fit: cover; width: 200px; height: 200px"/>
                            </div>
                            <div class="item col" data-id="5">
                                <input style="display: none;" type="file" id="foto_5" name="bulkfoto[]" accept="image/png, image/gif, image/jpeg" onchange="showPreview('foto_5','prev_5');"/>
                                <img id="prev_5" onclick="document.getElementById('foto_5').click();" src="{{URL::asset(config('app.path_images').'/user_grey.png')}}" class="rounded shadow-sm p-2" style="object-fit: cover; width: 200px; height: 200px"/>
                            </div>
                            <div class="item col" data-id="6">
                                <input style="display: none;" type="file" id="foto_6" name="bulkfoto[]" accept="image/png, image/gif, image/jpeg" onchange="showPreview('foto_6','prev_6');"/>
                                <img id="prev_6" onclick="document.getElementById('foto_6').click();" src="{{URL::asset(config('app.path_images').'/user_grey.png')}}" class="rounded shadow-sm p-2" style="object-fit: cover; width: 200px; height: 200px"/>
                            </div>
                            <div class="item col" data-id="7">
                                <input style="display: none;" type="file" id="foto_7" name="bulkfoto[]" accept="image/png, image/gif, image/jpeg" onchange="showPreview('foto_7','prev_7');"/>
                                <img id="prev_7" onclick="document.getElementById('foto_7').click();" src="{{URL::asset(config('app.path_images').'/user_grey.png')}}" class="rounded shadow-sm p-2" style="object-fit: cover; width: 200px; height: 200px"/>
                            </div>
                            <div class="item col" data-id="8">
                                <input style="display: none;" type="file" id="foto_8" name="bulkfoto[]" accept="image/png, image/gif, image/jpeg" onchange="showPreview('foto_8','prev_8');"/>
                                <img id="prev_8" onclick="document.getElementById('foto_8').click();" src="{{URL::asset(config('app.path_images').'/user_grey.png')}}" class="rounded shadow-sm p-2" style="object-fit: cover; width: 200px; height: 200px"/>
                            </div>
                            <div class="item col" data-id="9">
                                <input style="display: none;" type="file" id="foto_9" name="bulkfoto[]" accept="image/png, image/gif, image/jpeg" onchange="showPreview('foto_9','prev_9');"/>
                                <img id="prev_9" onclick="document.getElementById('foto_9').click();" src="{{URL::asset(config('app.path_images').'/user_grey.png')}}" class="rounded shadow-sm p-2" style="object-fit: cover; width: 200px; height: 200px"/>
                            </div>
                            <div class="item col" data-id="10">
                                <input style="display: none;" type="file" id="foto_10" name="bulkfoto[]" accept="image/png, image/gif, image/jpeg" onchange="showPreview('foto_10','prev_10');"/>
                                <img id="prev_10" onclick="document.getElementById('foto_10').click();" src="{{URL::asset(config('app.path_images').'/user_grey.png')}}" class="rounded shadow-sm p-2" style="object-fit: cover; width: 200px; height: 200px"/>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-12 hidden">
                <div class="card">
                    <div class="m-2">
                        <div class="row gap-2">
                            <div class="col-12">
                                <div>
                                    <label class="col-12 control-label">Gambar Cover <span style="color:red">*</span></label>
                                    <div class="col-sm-12">
                                        <input type="file" id="foto" name="foto" accept="image/png, image/gif, image/jpeg" style="" />
                                        <input type="button" class="hidden btn btn-outline-primary btn-sm" value="Pilih Foto" onclick="document.getElementById('foto').click();" />
                                    </div>
                                    @error('foto')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-12">
                                <img data-fancybox id="previewFoto" class="rounded shadow-sm" src="{{isset($gallery)?URL::asset(config('app.path_images').'/gallery').'/'.$gallery->galeri_foto:''}}" style="object-fit: contain; max-height: 100px"/>
                            </div>
                        </div>

                        <div class="field_wrapper mb-2">
                            @forelse ($detail as $key => $value)
                            @if($key>0)
                            <div class="my-1 childWrapper" id="child_{{$key}}">
                                <div class="d-flex justify-content-between mb-1">
                                    <input type="file" name="bulk_photo[]" id="imgDetail_{{$key}}" accept="image/png, image/gif, image/jpeg" onchange="showPreview('imgDetail_{{$key}}','prevDetail_{{$key}}');" />
                                    <a href="javascript:void(0);" onclick="removeField('child_{{$key}}','{{$value->dtl_id}}')" class="remove_button" title="Remove field"><i class="fas fa-minus"></i></a>
                                </div>
                                <div style="max-height: 200px;">
                                    <img id="prevDetail_{{$key}}" src="{{URL::asset(config('app.path_images').'/gallery').'/'.$value->dtl_foto}}" class="rounded shadow-sm" style="object-fit: contain; max-height: 100px"/>
                                </div>
                            </div>
                            @else
                            <div class="my-1 childWrapper" id="child_{{$key}}">
                                <div class="d-flex justify-content-between mb-1">
                                    <input type="file" name="bulk_photo[]" id="imgDetail_{{$key}}" accept="image/png, image/gif, image/jpeg" onchange="showPreview('imgDetail_{{$key}}','prevDetail_{{$key}}');" />
                                    <a href="javascript:void(0);" class="add_button" title="Add field"><i class="fas fa-plus"></i></a>
                                </div>
                                <div style="max-height: 200px;">
                                    <img id="prevDetail_{{$key}}" src="{{URL::asset(config('app.path_images').'/gallery').'/'.$value->dtl_foto}}" class="rounded shadow-sm" style="object-fit: contain; max-height: 100px"/>
                                </div>
                            </div>
                            @endif
                            @empty
                            <div class="my-1 childWrapper" id="child_1">
                                <div class="d-flex justify-content-between mb-1">
                                    <input type="file" name="bulk_photo[]" id="imgDetail_1" accept="image/png, image/gif, image/jpeg" onchange="showPreview('imgDetail_1','prevDetail_1');" />
                                    <a href="javascript:void(0);" class="add_button" title="Add field"><i class="fas fa-plus"></i></a>
                                </div>
                                <img id="prevDetail_1" class="rounded shadow-sm" style="max-height: 400px; max-width: 300px"/>
                            </div>
                            @endforelse
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <div class="sticky-bottom d-grid float-lg-end">
            <button type="submit" class="btn btn-primary btn-sm shadow"><i class="fas fa-save"></i> Publish</button>
        </div>
    </form>
</section>
@endsection
@section("javascript")
<script src="{{URL::asset(config('app.path_assets').'/vendor/summernote/summernote.min.js')}}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>

<script>
    /*Data belum disimpan, tetap reload halaman?*/
    var changed = false;
    var form = document.getElementById("formData");
    form.addEventListener("change", function () {
        changed = true;
    });
    window.onbeforeunload = function (event){
        if (changed) {
            return '';
        }
    };

    var save_method;
    var galeri_id = '{{ isset($gallery)?$gallery->galeri_id:'' }}';
    $(document).ready( function () {
        save_method = 'add';        /*if(save_method=="add"){
        $("#foto").attr('required', 'required');
        }else{
        $("#foto").removeAttr('required');
        }*/
        $('#deskripsi').summernote({
            placeholder: 'Write here...',
            codeviewFilter: false,
            codeviewIframeFilter: true,
            height: 100,
            minHeight: null,
            maxHeight: null,
            focus: false,
            toolbar: [
                ['style', ['bold','italic','clear']],
                ['font', ['strikethrough', 'superscript', 'subscript']],
                ['fontsize', ['fontsize']],
                ['color', ['color']],
                ['para', ['ul', 'ol', 'paragraph']],
                ],
            callbacks: {
                onChange: function(contents, $editable) {
                    changed = true;
                }
            }
        });
        load_foto(getParameterByName('id'));
    });

    $("#tags").change(function() {
        $("#tags").val($("#tags").val().split(' ').join('_'));
    });
    $("#foto").change(function() {
        showPreview('foto','previewFoto');
        /*if (this.files && this.files[0]) {
            var filePhoto = this.files[0];
            $("#previewFoto").attr("src", "");
            if(filePhoto.type=="image/jpeg"||filePhoto.type=="image/jpg"||filePhoto.type=="image/png"){
                if(filePhoto){
                    var reader = new FileReader();
                    reader.onload = function(){
                        document.getElementById("previewFoto").style.display = '';
                        $("#previewFoto").attr("src", reader.result);
                    }
                    reader.readAsDataURL(filePhoto);
                }
            }else{
                $("#previewFoto").attr("src", "");
                $("#foto").val('');
                alertSukses('Notifikasi','Hanya file foto','bg-danger');
            }
        } else {
            $("#previewFoto").attr("src", "");
        }*/
    });

    function load_foto(id){
        if (typeof id !== 'undefined' && id !== null) {
            $.ajax({
                type: "POST",
                url: "{{route('gallery_list_foto')}}",
                dataType: "html",
                data: {id:id},
                success: function(msg){
                    $("#sortable").html(msg);
                }
            });
        }
    }
    function getParameterByName(name) {
        var urlParams = new URLSearchParams(window.location.search);
        return urlParams.get(name);
    }

    Dropzone.autoDiscover = false;
    myDropzone = new Dropzone('div#imageUpload', {
        addRemoveLinks: true,
        autoProcessQueue: false,
        uploadMultiple: true,
        parallelUploads: 100,
        maxFiles: 10,
        maxFilesize: 40,
        maxfilesexceeded: function(file) {
            this.removeAllFiles(false);
            this.addFile(file);
        },
        paramName: 'file',
        acceptedFiles: '.jpeg,.jpg,.png',
        clickable: true,
        url: "{{ route('gallery_store') }}",
        init: function () {
            this.on('sending', function (file, xhr, formData) {
                var data = $("#formData").serializeArray();
                $.each(data, function (key, el) {
                    formData.append(el.name, el.value);
                });
            });
            this.on("error", function(file, response) {
                this.removeAllFiles(false);
                $('.img-uploader-box').removeClass('d-none');
                $('.img-reset-button').addClass('d-none');
                alertSukses('Notifikasi', response,'bg-danger');
            });
        },
        error: function (file, response){
            console.log(file, response);
        },
        successmultiple: function (file, response) {
            console.log(file, response);
            var dropzoneFilesCopy = file.slice(0);
            myDropzone.removeAllFiles();
            $.each(dropzoneFilesCopy, function(_, file) {
                if (file.status === Dropzone.ERROR) {
                    file.status = undefined;
                    file.accepted = undefined;
                }
                myDropzone.addFile(file);
            });
            if(response.status){
                alertSukses('Notifikasi',''+response.message,'bg-success');
                $.alert({
                    title: '',
                    content: response.message,
                    buttons: {
                        btnLanjut: {
                            text: 'Lanjut Edit',
                            btnClass: 'btn-light',
                            keys: ['esc'],
                            action: function(){
                                $("#galeri_id").val(response.id);
                                save_method = 'edit';
                                var url_edit = "{{ route('gallery_form') }}";
                                window.history.pushState('galeri', 'galeri', url_edit+'?id='+response.id);
                                load_foto(response.id);
                            }
                        },
                        btnSelesai: {
                            text: 'Selesai',
                            btnClass: 'btn-primary',
                            keys: ['enter'],
                            action: function(){
                                location.href = "{{ route('admin_gallery') }}";
                            }
                        },
                    }
                });
            }else{
                alertSukses('Notifikasi',''+response.message,'bg-danger');
            }
        },
        completemultiple: function (file, response) {
            console.log(file, response, "completemultiple");
            var dropzoneFilesCopy = file.slice(0);
            myDropzone.removeAllFiles();
            $.each(dropzoneFilesCopy, function(_, file) {
                if (file.status === Dropzone.ERROR) {
                    file.status = undefined;
                    file.accepted = undefined;
                }
                myDropzone.addFile(file);
            });
        },
        /*reset: function () {
            console.log("resetFiles");
            this.removeAllFiles(true);
        }*/
    });
    $(".dropzone").sortable({
        items:'.dz-preview',
        cursor: 'grab',
        opacity: 0.5,
        containment: '.dropzone',
        distance: 20,
        tolerance: 'pointer',
        stop: function () {
            var queue = myDropzone.getAcceptedFiles();
            newQueue = [];
            $('#imageUpload .dz-preview .dz-filename [data-dz-name]').each(function (count, el) {
                var name = el.innerHTML;
                queue.forEach(function(file) {
                    if (file.name === name) {
                        newQueue.push(file);
                    }
                });
            });
            myDropzone.files = newQueue;
        }
    });

    $("#formData").on("submit", function(e){
        e.preventDefault();
        console.clear();
        changed = false;
        console.log('submit');
        var formData = new FormData(this);
        myDropzone.on("sending", function(file, xhr, formData) {
            formData.append("imageUpload", $("input[name=album_gallery]").val());
        });
        myDropzone.processQueue();
        $('.btnSave').html(`<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Loading...`);
        $('.btnSave').attr('disabled', true);
        $(document).find("span.text-danger").remove();
        const elements = document.querySelectorAll('*');
        elements.forEach((element) => {
            element.classList.remove('is-invalid');
        });
        // $.ajax({
        //     type:'POST',
        //     url: "{{ route('gallery_store') }}",
        //     data: formData, cache: false, contentType: false, processData: false,
        //     success: (data) => {
        //         $(".btnSave").html('<i class="fas fa-save"></i> Simpan');
        //         $(".btnSave").attr("disabled", false);
        //         if(data.status){
        //             alertSukses('Notifikasi',''+data.message,'bg-success');
        //             $.alert({
        //                 title: '', content: data.message,
        //                 buttons: {
        //                     btnLanjut: {
        //                         text: 'Lanjut Edit', btnClass: 'btn-light', keys: ['esc'],
        //                         action: function(){
        //                             $("#galeri_id").val(data.id);
        //                             save_method = 'edit';
        //                             var url_edit = "{{ route('gallery_form') }}";
        //                             window.history.pushState('galeri', 'galeri', url_edit+'?id='+data.id);
        //                         }
        //                     },
        //                     btnSelesai: {
        //                         text: 'Selesai', btnClass: 'btn-primary', keys: ['enter'],
        //                         action: function(){
        //                             location.href = "{{ route('admin_gallery') }}";
        //                         }
        //                     },
        //                 }
        //             });
        //         }else{
        //             alertSukses('Notifikasi',''+data.message,'bg-danger');
        //         }
        //     },
        //     error: function(data){
        //         $(".btnSave").html('<i class="fas fa-save"></i> Simpan');
        //         $(".btnSave").attr("disabled", false);
        //         $.each(data.responseJSON.errors,function(field_name,error){
        //             $(document).find('[name='+field_name+']').addClass('is-invalid');
        //             $(document).find('[name='+field_name+']').after('<span style="font-weight: light" class="text-danger">' +error+ '</span>');
        //         });
        //     }
        // });
    });



    /*$("#imgDetail_0").change(function() {
        showPreview('imgDetail_0','prevDetail_0');
    });*/

    var maxField = 10; //Input fields increment limitation
    var addButton = $('.add_button'); //Add button selector
    var wrapper = $('.field_wrapper'); //Input field wrapper
    var x = document.querySelectorAll(".childWrapper").length; //Initial field counter is 1

    // Once add button is clicked
    $(addButton).click(function(){
        console.log(x);
        x++; //Increase field counter
        var changed = 'onchange="showPreview(\'imgDetail_' + x + '\', \'prevDetail_' + x + '\')"';
        var removeField = 'onclick="removeField(\'child_' + x +'\', "")"';
        var fieldHTML = '<div class="my-1 childWrapper" id="child_'+x+'"><div class="d-flex justify-content-between mb-1"><input type="file" name="bulk_photo[]" id="imgDetail_'+x+'" accept="image/png, image/gif, image/jpeg" '+changed+'/><a href="javascript:void(0);" '+removeField+' class="remove_button" title="Remove field"><i class="fas fa-minus"></i></a></div><img id="prevDetail_'+x+'" class="rounded shadow-sm" style="object-fit: contain; max-height: 100px"/></div>';
        $(wrapper).append(fieldHTML); //Add field html
    });
    function removeField(childId, id) {
        // var element = document.getElementById(childId);
        console.log(id);
        if(id==""){
            var elementsToRemove = document.querySelectorAll('#'+childId);
            elementsToRemove.forEach(function(element) {
                element.remove();
            });
        }else{
            $.ajax({
                url: "{{ route('gallery_delete_detail') }}",
                type:"POST",data:{id:id},dataType:"json",
                success: (data) => {
                    if(data.status){
                        alertSukses('Notifikasi',''+data.message,'bg-success');
                        var elementsToRemove = document.querySelectorAll('#'+childId);
                        elementsToRemove.forEach(function(element) {
                            element.remove();
                        });
                    }else{
                        alertSukses('Notifikasi',''+data.message,'bg-danger');
                    }
                },
                error: function(data){
                    alertSukses('Notifikasi',''+data.responseJSON,'bg-danger');
                }
            });
        }
    }

    function showPreview(idInput, idPreview) {
        var input = document.getElementById(idInput);
        var preview = document.getElementById(idPreview);
        if (input.files && input.files[0]) {
            var filePhoto = input.files[0];
            preview.setAttribute("src", "");
            if(filePhoto){
                var reader = new FileReader();
                reader.onload = function(){
                    preview.style.display = '';
                    preview.setAttribute("src", reader.result);
                }
                reader.readAsDataURL(filePhoto);
            }
        } else {
            preview.setAttribute("src", "");
        }
    }

</script>
@endsection