@extends('backoffice.layouts.main')

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

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

    <div class="card">
        <div class="card-header">
            <h5>Ubah Event</h5>
        </div>
        <div class="card-body">
            <input type="hidden" value="{{$data['event']->uuid}}" name="uuid">

            <div class="mb-3">
                <img id="frame" src="{{$data['event']->gambar}}" class="img-fluid" />

                <div class="mt-2">
                    <label for="gambar" class="form-label">Gambar Event</label>
                    <input 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 
                    @error('tanggal')
                    <span class="text-danger">(Belum diisi)</span>
                    @enderror
                </label>
                <input type="date" value="{{$data['event']->tanggal}}" class="form-control" id="tanggal" name="tanggal" placeholder="Masukkan tanggal mulai event"
                    >
            </div>
            <div class="form-group mb-3">
                <label for="nama" class="form-label">Nama 
                    @error('nama')
                    <span class="text-danger">(Belum diisi)</span>
                    @enderror
                </label>
                <input type="text" class="form-control" id="nama" name="nama" placeholder="Masukkan nama event"
                  value="{{$data['event']->nama}}"  >
            </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  name="deskripsi" id="deskripsi" class="form-control ck-editor" cols="30" rows="10"
                    placeholder="Masukkan deskripsi event">{{$data['event']->deskripsi}}</textarea>
            </div>
            <div class="form-group mb-3">
                <label for="link" class="form-label">Link (ZOOM / GMEET / GFORM / WA GROUP)
                    @error('link')
                    <span class="text-danger">(Belum diisi)</span>
                    @enderror
                </label>
                <input type="text" class="form-control" id="link" name="link" 
                    placeholder="Masukkan link konferensi video event" value="{{$data['event']->link}}">
            </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
                        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 mengubah data event?
                </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>
    function preview() {
        frame.src = URL.createObjectURL(event.target.files[0]);
    }

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



</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#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 (!$('#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