@extends('layouts.panel')

@section('content')
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <style>
        .saber-toasts-container-top-right.saber-toasts-containers {
            z-index: 100000;
        }

        .saber-toast .title,
        .saber-toast .text {
            margin: 0;
        }

        .btn-close {
            background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat !important;
        }

        #dropzone {
            position: relative;
            border: 2px dashed #ced4da;
            border-radius: 8px;
            color: white;
            font-size: 16px;
            height: 200px;
            text-align: center;
        }

        #dropzone:hover {
            background: #fafafa;
        }

        #dropzone.dropped {
            background: #222;
            border: 10px solid #444;
        }

        #dropzone .drop-title {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            color: #ced4da;
            word-break: break-word;
            padding: 10px;
        }

        #dropzone [type="file"] {
            cursor: pointer;
            position: absolute;
            opacity: 0;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }
    </style>
    <div class="container-fluid">
        <div class="layout-specing">
            <div class="d-flex justify-content-between align-items-center">
                <h5 class="m-0">Kegiatan</h5>
                @if (auth()->user()->role->name === 'Publik')
                    <button type="button" class="btn btn-sm btn-primary" data-bs-toggle="offcanvas"
                        data-bs-target="#staticBackdrop" aria-controls="staticBackdrop">Tambah <i data-feather="plus"
                            class="fea icon-sm icons"></i></button>
                @endif
            </div>
            <div class="row mt-3">
                <div class="col-12">
                    <div class="card shadow border-0 rounded">
                        <div class="card-header bg-white p-4">
                            <div class="row">
                                <div class="col-2">
                                    <select name="" id="" class="form-control">
                                        <option value="">Status</option>
                                        <option>Menunggu</option>
                                        <option>Verifikasi Jadwal</option>
                                        <option>Selesai</option>
                                    </select>
                                </div>
                                <div class="col-3">
                                    <div class="form-icon position-relative">
                                        <i data-feather="calendar" class="fea icon-sm icons"></i>
                                        <input type="text" class="form-control ps-5" name="search" readonly>
                                    </div>
                                </div>
                                <div class="col-4">
                                    <div class="form-icon position-relative">
                                        <i data-feather="search" class="fea icon-sm icons"></i>
                                        <input type="text" class="form-control ps-5" placeholder="Cari" name="search">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            <table class="table table-borderles">
                                <thead>
                                    <tr>
                                        <th>Judul</th>
                                        <th>Jadwal</th>
                                        <th>Organisasi</th>
                                        <th>Status</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($events as $event)
                                        <tr>
                                            <td>{{ $event->title }}</td>
                                            <td>{{ \Carbon\Carbon::parse($event->date)->translatedFormat('d M Y') }}
                                            </td>
                                            <td>{{ $event->organization }}</td>
                                            <td>
                                                @if ($event->status === 'Selesai')
                                                    <span class="badge bg-soft-success">{{ $event->status }}</span>
                                                @else
                                                    <span class="badge bg-soft-warning">{{ $event->status }}</span>
                                                @endif
                                            </td>
                                            <td class="text-end">
                                                <a href="{{ route('panel.event.show', $event->id) }}"
                                                    class="btn btn-outline-primary btn-sm"><i class="uil uil-eye"></i></a>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="offcanvas offcanvas-end" data-bs-backdrop="static" tabindex="-1" id="staticBackdrop"
        aria-labelledby="staticBackdropLabel">
        <div class="offcanvas-header justify-content-end">
            {{-- <h5 class="offcanvas-title" id="staticBackdropLabel">Tambah</h5> --}}
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            <div class="form-group">
                <label for="">Judul</label>
                <input type="text" class="form-control" name="title" autocomplete="off">
                <small class="text-danger"></small>
            </div>
            <div class="form-group mt-2">
                <label for="">Organisasi/Lembaga</label>
                <input type="text" class="form-control" name="organization" autocomplete="off">
                <small class="text-danger"></small>
            </div>
            <div class="form-group mt-2">
                <label for="">Tanggal</label>
                <input type="text" class="form-control" name="date" readonly>
                <small class="text-danger"></small>
            </div>
            <div class="form-group mt-2">
                <label for="">Jam</label>
                <input type="time" class="form-control" name="time">
                <small class="text-danger"></small>
            </div>
            <div class="form-group mt-2">
                <label for="">No. Surat</label>
                <input type="text" class="form-control" name="mail_number" autocomplete="off">
                <small class="text-danger"></small>
            </div>
            <div class="form-group mt-2">
                <label for="">Dokumen</label>
                <div id="dropzone">
                    <div class="drop-title">
                        <span>Browse or drop file here</span>
                    </div>
                    <input type="file" name="mail" accept="application/pdf">
                </div>
                <small class="text-danger"></small>
            </div>
            <div class="d-grid mt-2">
                <button type="button" class="btn btn-primary" id="save">Simpan</button>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    @if (Session::has('event-toast'))
        <script>
            const toastText = '{{ Session::get('event-toast') }}';
            saberToast.success({
                title: "Success",
                text: toastText,
                delay: 200,
                duration: 2600,
                rtl: false,
                position: "top-right"
            });
        </script>
    @endif
    <script>
        const title = document.querySelector('input[name="title"]');
        const organization = document.querySelector('input[name="organization"]');
        const date = document.querySelector('input[name="date"]');
        const time = document.querySelector('input[name="time"]');
        const mailNumber = document.querySelector('input[name="mail_number"]');
        const mail = document.querySelector('input[name="mail"]');
        const saveButton = document.getElementById('save');
        const dropzoneInput = document.querySelector('input[type="file"]');
        const dropzoneTitle = document.querySelector('.drop-title');
        let file = null;

        const datepicker = new Datepicker(date, {
            format: 'yyyy-mm-dd',
            autohide: true,
            minDate: new Date().setDate(new Date().getDate() + 1)
        });

        dropzoneInput.addEventListener('change', (e) => {
            file = e.target.files[0];
            if (file.type !== 'application/pdf') {
                file = null
                return alert('File type not allowed.');
            }
            dropzoneTitle.children[0].innerHTML = file.name;
        });

        saveButton.addEventListener('click', async () => {
            clearErrors();
            disabledElement();

            const response = await save();

            if (response.status === 'success') {
                return location.reload();
            }

            showErrors(response.errors);
            enabledElement();
        });

        const save = async () => {
            const formData = new FormData();
            formData.append('title', title.value);
            formData.append('organization', organization.value);
            formData.append('date', date.value);
            formData.append('time', time.value);
            formData.append('mail_number', mailNumber.value);
            formData.append('mail', file);
            const options = {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                },
                body: formData,
            };
            const response = await fetch(`${window.location.origin}/panel/kegiatan`, options);
            const result = await response.json();
            return result;
        }

        const disabledElement = () => {
            title.setAttribute('disabled', '');
            organization.setAttribute('disabled', '');
            date.setAttribute('disabled', '');
            time.setAttribute('disabled', '');
            mailNumber.setAttribute('disabled', '');
            mail.setAttribute('disabled', '');
            saveButton.setAttribute('disabled', '');
            saveButton.innerHTML =
                'Loading <div class="spinner-border spinner-border-sm" role="status"><span class="visually-hidden">Loading...</span></div>';
        }

        const enabledElement = () => {
            title.removeAttribute('disabled', '');
            organization.removeAttribute('disabled', '');
            date.removeAttribute('disabled', '');
            time.removeAttribute('disabled', '');
            mailNumber.removeAttribute('disabled', '');
            mail.removeAttribute('disabled', '');
            saveButton.removeAttribute('disabled', '');
            saveButton.innerHTML = 'Simpan';
        }

        const showErrors = (errors) => {
            if (errors.title) {
                title.nextElementSibling.textContent = errors.title;
            }

            if (errors.organization) {
                organization.nextElementSibling.textContent = errors.organization;
            }

            if (errors.date) {
                date.nextElementSibling.nextElementSibling.textContent = errors.date;
            }

            if (errors.time) {
                time.nextElementSibling.textContent = errors.time;
            }

            if (errors.mail_number) {
                mailNumber.nextElementSibling.textContent = errors.mail_number;
            }

            if (errors.mail) {
                mail.parentElement.nextElementSibling.textContent = errors.mail;
            }
        }

        const clearErrors = () => {
            title.nextElementSibling.textContent = '';
            organization.nextElementSibling.textContent = '';
            date.nextElementSibling.nextElementSibling.textContent = '';
            time.nextElementSibling.textContent = '';
            mailNumber.nextElementSibling.textContent = '';
            mail.parentElement.nextElementSibling.textContent = '';
        }
    </script>
@endpush