@extends('backoffice.layouts.main')

@section('title', 'Tambah Edukasi')


@push('scripts')
<!-- Bootstrap MDB JS -->
<script src="{{asset('backoffice/js/jquery.multi-select.js')}}"></script>

<script>
    $(document).ready(function () {
        $('#kategori').on('change', () => {
            console.log($('#kategori').val());
        })
    });

</script>
@endpush

@section('content')

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

    <!-- 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> Tambah</h4>

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

            <div class="mb-3">
                @error('images')
                <span class="text-danger">(Belum diisi)</span>
                @enderror
                <div class="preview-images-zone mb-3">
                </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 type="text" class="form-control" id="link" name="link" placeholder="Masukkan link video edukasi">
            </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>
                </label>
                <input type="text" class="form-control" id="judul" name="judul" placeholder="Masukkan judul edukasi">
            </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 id="kategori" name="kategori[]" class="form-select w-100 select2" multiple="multiple">
                    @foreach ($data as $item)
                    <option 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 type="text" value="Hipogonadisme, kelainan seksual, wanita" data-role="tagsinput"
                    class="form-control tags-input" id="tags" name="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 name="konten" id="konten" class="form-control" cols="30" rows="10"
                    placeholder="Masukkan konten edukasi"></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" type="checkbox" id="skrining" name="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" type="checkbox" id="home" name="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">Tambah</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 Tambah
                        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 menambahkan data edukasi baru?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-success">Ya</button>
                </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) {
        $(`#image-${no}`).remove();
        $(".preview-image.preview-show-" + no).remove();
    }



    var num = 4;

    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>

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


    $('button[type="submit"]').on('click', function (event) {
        event.preventDefault();
        tinyMCE.triggerSave();
        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>

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

</script>
@endif
@endpush