@extends('backoffice.layouts.main')

@section('title', 'Ubah Edukasi')
@section('content')

<form action="{{route('bo.edukasi.update')}}" method="POST" enctype="multipart/form-data">
    @csrf
    @method('PUT')

    <!-- Content -->

    <h4 class="fw-bold py-3 mb-4"><span class="text-muted fw-light">Master /</span><span
            class="text-muted fw-light">Edukasi
            /</span> Ubah</h4>

    <div class="card">
        <div class="card-header">
            <h5>Ubah Edukasi</h5>
        </div>
        <div class="card-body">

            <input type="hidden" name="uuid" value="{{$data['edukasi']->uuid}}">
            <input type="hidden" id="num" value="{{count($data['edukasi']->gambar)}}">

            <div class="mb-3">
                @error('old_images')
                <span class="text-danger">(Belum diisi)</span>
                @enderror
              
                <div class="preview-images-zone mb-3">
                    @foreach ($data['edukasi']->gambar as $index => $item)
                    <div class="preview-image preview-show-{{$index + 1}}">
                        <div onclick="deleteImage({{$index+1}})" class="image-cancel" data-no="{{$index+1}}">x</div>
                        <div class="image-zone"><img id="pro-img-{{$index+1}}" src="{{asset($item->file)}}"></div>
                        <div class="tools-edit-image d-none"><a href="javascript:void(0)" data-no="{{$index+1}}"
                                class="btn btn-light btn-edit-image">edit</a></div>
                                <input type="hidden" id="old_images_{{$index+1}}" name="old_images[{{$index+1}}]" value="{{$item->file}}">
                    </div>
                    @endforeach
                </div>
                <fieldset class="form-group">
                    <a href="javascript:void(0)" class="btn btn-primary w-100" onclick="$('#images').click()">Unggah
                        Gambar</a>
                    <input  type="file" id="images"  style="display: none"  class="form-control"
                        multiple />
                </fieldset>
            </div>
            <div class="form-group mb-3">
                <label for="link" class="form-label">Link Video (Opsional)
                    @error('link')
                    <span class="text-danger">(Belum diisi)</span>
                    @enderror
                </label>
                <input required type="text" class="form-control" id="link" name="link" placeholder="Masukkan link video edukasi"
                    value="{{$data['edukasi']->link}}">
            </div>
            <div class="form-group mb-3">
                <label for="judul" class="form-label">Judul 
                    @error('judul')
                    <span class="text-danger">(Belum diisi)</span>
                    @enderror
                </label>
                <input required type="text" class="form-control" id="judul" name="judul" placeholder="Masukkan judul edukasi"
                    value="{{$data['edukasi']->judul}}">
            </div>
            <div class="form-group mb-3">
                <label for="kategori" class="form-label">Kategori 
                    @error('kategori')
                    <span class="text-danger">(Belum diisi)</span>
                    @enderror
                </label>
                <select required id="kategori" name="kategori[]" class="form-select w-100 select2" multiple="multiple">
                    @foreach ($data['kategori'] as $item)
                    <option @foreach ($data['edukasi']->kategori as $item2)
                        @if ($item->uuid == $item2->uuid)
                        selected
                        @endif
                        @endforeach
                        value="{{$item->uuid}}">{{$item->nama}}</option>
                    @endforeach
                </select>
            </div>
           
          
            <div class="form-group mb-3">
                <label for="tags" class="form-label">Tags 
                    @error('tags')
                    <span class="text-danger">(Belum diisi)</span>
                    @enderror
                </label>
                <input required type="text" data-role="tagsinput" class="form-control tags-input" id="tags" name="tags"                     value="{{$data['edukasi']->tags}}">
            </div>
            <div class="form-group mb-3">
                <label for="konten" class="form-label">Konten @error('konten')
                    <span class="text-danger">(Belum diisi)</span>
                    @enderror</label>
                <textarea required name="konten" id="konten" class="form-control " cols="30" rows="10"
                    placeholder="Masukkan konten edukasi">{{$data['edukasi']->konten}}</textarea>
            </div>
            <div class="form-group mb-3">
                <label for="skrining" class="form-label">Tombol mulai skrining</label>
                <div class="form-check">
                    <input class="form-check-input" name="skrining" type="checkbox" @if ($data['edukasi']->skrining)
                    checked
                    @endif id="skrining">
                    <label class="form-check-label" for="skrining">
                        Tampilkan
                    </label>
                </div>
            </div>
            <div class="form-group mb-3">
                <label for="home" class="form-label">Muncul di Home</label>
                <div class="form-check">
                    <input class="form-check-input" name="home" type="checkbox" @if ($data['edukasi']->home)
                    checked
                    @endif id="home">
                    <label class="form-check-label" for="home">
                        Tampilkan
                    </label>
                </div>
            </div>
            <div data-bs-toggle="modal" data-bs-target="#confirmModel" class="btn btn-primary w-100">Ubah</div>
        </div>
    </div>

    <div class="modal fade" id="confirmModel" tabindex="-1" aria-labelledby="confirmModelLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="confirmModelLabel">Konfirmasi Ubah
                        Edukasi</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center">
                    Apakah Anda yakin ingin mengubah data edukasi?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <div id="submit" class="btn btn-success">Ya</div>
                </div>
            </div>
        </div>
    </div>
</form>
@endsection


@push('scripts')
<script>
    $(document).ready(function () {
        document.getElementById('images').addEventListener('change', readImage, false);

        $(".preview-images-zone").sortable();


    });

    function deleteImage(no) {
        $(`#old_images_${no}`).remove();
        $("#image-" + no).remove();
        $(".preview-show-" + no).remove();
    }



    var num = parseInt($('#num').val()) + 1;


    function readImage() {
        if (window.File && window.FileList && window.FileReader) {
            var files = event.target.files; //FileList object
            var output = $(".preview-images-zone");

            for (let i = 0; i < files.length; i++) {
                var file = files[i];
                if (!file.type.match('image')) continue;

                var picReader = new FileReader();

                picReader.addEventListener('load', function (event) {
                    var picFile = event.target;
                    var html = '<div class="preview-image preview-show-' + num + '">' +
                        `<div onclick="deleteImage(${num})" class="image-cancel" data-no="` + num +
                        '">x</div>' +
                        '<div class="image-zone"><img id="pro-img-' + num + '" src="' + picFile.result +
                        '"></div>' +
                        '<div class="tools-edit-image d-none"><a href="javascript:void(0)" data-no="' + num +
                        '" class="btn btn-light btn-edit-image">edit</a></div>' +
                        '</div> ' + `<input type="file" id="image-${num}" name="images[${num}]" style="display: none"   class="form-control"
                       />`;

                    output.append(html);
                    document.getElementById(`image-${num}`).files = files;

                    num = num + 1;
                });

                picReader.readAsDataURL(file);
            }
        } else {
            console.log('Browser not support');
        }
    }

loading();
</script>

<script src="{{asset('backoffice/js/jqueryui.js')}}"></script>


@if (session('error'))
<script>
    Swal.fire({
        title: 'Proses Gagal',
        text: '{{session("error")[1]}} | Line : {{session("error")[2]}}',
        icon: 'error',
        confirmButtonText: 'Tutup'
    })

</script>
@endif

<script>
    tinyMCE.init({
        selector: 'textarea#konten',
        plugins: 'lists | link',
  toolbar: 'undo redo | blocks | bold italic | alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist | link',
    });


    $('div#submit').on('click', function (event) {
        event.preventDefault();
        tinyMCE.triggerSave();
        console.log()
        let required;
        if ($('.preview-images-zone').children().length <= 0) {
            required = 'Gambar';
        }  else if (!$('#judul').val()) {
            required = 'Judul';
        }else if ($('#kategori').val().length<= 0) {
            required = 'Kategori';
        } else if (!$('#tags').val()) {
            required = 'Tags';
        } else if (!$('#konten').val()) {
            required = 'Konten';
        }  

        if (required) {
            $('#confirmModel').modal('toggle');

            $.toast({
                heading: required + ' belum diisi',
                icon: 'error',
                position: 'top-center'
            })
        } else {
            $( "form" ).trigger( "submit" );
        }

    })

</script>
@endpush