@extends('backoffice.layouts.main')

@section('title', 'Tambah Event')
@section('content')

<form action="{{route('bo.event.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">Event
            /</span> Tambah</h4>

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

            <div class="mb-3">
                <img id="frame" src="" class="img-fluid" />

                <div class="mt-2">
                    <label for="gambar" class="form-label">Gambar Event</label>
                    <input required class="form-control" type="file" id="gambar" name="gambar" onchange="preview()">
                </div>
            </div>
            <div class="form-group mb-3">
                <label for="tanggal" class="form-label">Tanggal Mulai</label>
                <input  type="date" class="form-control" id="tanggal" name="tanggal" placeholder="Masukkan tanggal mulai event"
                    required>
            </div>
            <div class="form-group mb-3">
                <label for="nama" class="form-label">Nama</label>
                <input type="text" class="form-control" id="nama" name="nama" placeholder="Masukkan nama event"
                    required>
            </div>
            <div class="form-group mb-3">
                <label for="deskripsi" class="form-label">Deskripsi 
                    @error('deskripsi')
                    <span class="text-danger">(Belum diisi)</span>
                    @enderror
                </label>
                <textarea required name="deskripsi" id="deskripsi" class="form-control" cols="30" rows="10"
                    placeholder="Masukkan deskripsi event"></textarea>
            </div>
            <div class="form-group mb-3">
                <label for="link" class="form-label">Link Konferensi Video (Gmeet/Zoom)</label>
                <input type="text" class="form-control" id="link" name="link" required
                    placeholder="Masukkan link konferensi video event">
            </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
                        Event</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 menambhakan data event baru?
                </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() {
        $('#frame').hide();
    });

    function preview() {
        frame.src = URL.createObjectURL(event.target.files[0]);
        $('#frame').show();
    }

    function clearImage() {
        document.getElementById('foto').value = null;
        frame.src = "";
        $('#frame').hide();
    }

    var today = new Date().toISOString().split('T')[0];
document.getElementsByName("tanggal")[0].setAttribute('min', today);

</script>

<!-- CK Editor JS -->
<script src="{{asset('backoffice/js/ckeditor.js')}}"></script>
<script>
    tinyMCE.init({
        selector: 'textarea#deskripsi',
        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();
        let required;
        if (!$('#gambar').val()) {
            required = 'Gambar';
        } else if (!$('#tanggal').val()) {
            required = 'Tanggal';
        } else if (!$('#nama').val()) {
            required = 'Nama';
        }else if (!$('#deskripsi').val()) {
            required = 'deskripsi';
        }else if (!$('#link').val()) {
            required = 'Link';
        } 


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

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

    })

    loading()

</script>
@endpush