@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;
        }
    </style>
    <div class="container-fluid">
        <div class="layout-specing">
            <div class="d-flex justify-content-between align-items-center">
                <a href="{{ route('panel.event') }}" class="text-secondary">
                    <i data-feather="arrow-left" class="fea icon-sm icons"></i>
                </a>
                @if (
                    $event->status === 'Menunggu' &&
                        auth()->user()->role->name === 'Operator' &&
                        auth()->user()->userDivision->division->name === 'Tata Usaha')
                    <button type="button" class="btn btn-sm btn-primary" data-bs-toggle="offcanvas"
                        data-bs-target="#staticBackdrop" aria-controls="staticBackdrop">Konsep <i data-feather="pen-tool"
                            class="fea icon-sm icons"></i></button>
                @endif
                @if (
                    $event->status === 'Verifikasi Jadwal' &&
                        auth()->user()->role->name === 'Operator' &&
                        auth()->user()->userDivision->division->id === $event->division_id)
                    <button type="button" class="btn btn-sm btn-primary" data-bs-toggle="offcanvas"
                        data-bs-target="#staticBackdrop" aria-controls="staticBackdrop">Verifikasi Jadwal <i
                            data-feather="calendar" 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-body">
                            <div class="row">
                                <div class="col-6">
                                    <div class="form-group mt-3">
                                        <label for="" class="m-0">Judul</label>
                                        <p class="m-0">{{ $event->title }}</p>
                                    </div>

                                </div>
                                <div class="col-6">
                                    <div class="form-group mt-3">
                                        <label for="" class="m-0">Tanggal</label>
                                        <p class="m-0">
                                            {{ \Carbon\Carbon::parse($event->date . ' ' . $event->time)->locale('id')->translatedFormat('d F Y - H:i') }}
                                        </p>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="form-group mt-3">
                                        <label for="" class="m-0">Organisasi/Lembaga</label>
                                        <p class="m-0">{{ $event->organization }}</p>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="form-group mt-3">
                                        <label for="" class="m-0">Kategori</label>
                                        <p class="m-0">{{ $event->category ? $event->category->name : '-' }}</p>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="form-group mt-3">
                                        <label for="" class="m-0">Sifat</label>
                                        <p class="m-0">{{ $event->characteristic ?: '-' }}</p>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="form-group mt-3">
                                        <label for="" class="m-0">Lokasi</label>
                                        <p class="m-0">{{ $event->place ? $event->place->name : '-' }}</p>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="form-group mt-3">
                                        <label for="" class="m-0">Dokumen</label>
                                        <p class="m-0">
                                            <a href="{{ Storage::url('events/' . $event->mail) }}">Lihat</a>
                                        </p>
                                        <p class="m-0">No. {{ $event->mail_number }}</p>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="form-group mt-3">
                                        <label for="" class="m-0">Alat Kelengkapan Dewan</label>
                                        @if ($event->toolOfParliaments->count() > 0)
                                            <ul>
                                                @foreach ($event->toolOfParliaments as $item)
                                                    <li>{{ $item->toolOfParliament->name }}</li>
                                                @endforeach
                                            </ul>
                                        @else
                                            <p class="m-0">-</p>
                                        @endif
                                    </div>
                                </div>
                                @if (auth()->user()->role->name !== 'Publik')
                                    <div class="col-6">
                                        <div class="form-group mt-3">
                                            <label for="" class="m-0">Bagian</label>
                                            <p class="m-0">{{ $event->division ? $event->division->name : '-' }}</p>
                                        </div>
                                    </div>
                                @endif
                                <div class="col-6">
                                    <div class="form-group mt-3">
                                        <label for="" class="m-0">Status</label>
                                        <div>
                                            @if ($event->status === 'Selesai')
                                                <span class="badge bg-soft-success">{{ $event->status }}</span>
                                            @else
                                                <span class="badge bg-soft-warning">{{ $event->status }}</span>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @if (
        $event->status === 'Menunggu' &&
            auth()->user()->role->name === 'Operator' &&
            auth()->user()->userDivision->division->name === 'Tata Usaha')
        <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">
                <input type="hidden" name="_id" value="{{ $event->id }}">
                <div class="form-group">
                    <label for="">Bagian</label>
                    <select name="division_id" id="" class="form-control">
                        <option value="">Pilih</option>
                        @foreach ($divisions as $division)
                            <option value="{{ $division->id }}">{{ $division->name }}</option>
                        @endforeach
                    </select>
                    <small class="text-danger"></small>
                </div>
                <div class="form-group mt-2">
                    <label for="">Kategori</label>
                    <select name="category_id" id="" class="form-control">
                        <option value="">Pilih</option>
                        @foreach ($categories as $category)
                            <option value="{{ $category->id }}">{{ $category->name }}</option>
                        @endforeach
                    </select>
                    <small class="text-danger"></small>
                </div>
                <div class="form-group mt-2">
                    <label for="">Sifat</label>
                    <select name="characteristic" id="" class="form-control">
                        <option value="">Pilih</option>
                        <option>Terbuka</option>
                        <option>Tertutup</option>
                    </select>
                    <small class="text-danger"></small>
                </div>
                <div class="form-group mt-2">
                    <label for="">Lokasi</label>
                    <select name="place_id" id="" class="form-control">
                        <option value="">Pilih</option>
                        @foreach ($places as $place)
                            <option value="{{ $place->id }}">{{ $place->name }}</option>
                        @endforeach
                    </select>
                    <small class="text-danger"></small>
                </div>
                <div class="form-group mt-2">
                    <label for="">Alat Kelengkapan Dewan</label>
                    @foreach ($toolOfParliaments as $toolOfParliament)
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="{{ $toolOfParliament->id }}"
                                id="check-{{ $toolOfParliament->id }}" name="tool_of_parliament[]">
                            <label class="form-check-label" for="check-{{ $toolOfParliament->id }}">
                                {{ $toolOfParliament->name }}
                            </label>
                        </div>
                    @endforeach
                    <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>
    @endif

    @if (
        $event->status === 'Verifikasi Jadwal' &&
            auth()->user()->role->name === 'Operator' &&
            auth()->user()->userDivision->division->id === $event->division_id)
        <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">
                <input type="hidden" name="_id" value="{{ $event->id }}">
                <div class="form-group">
                    <label for="">Tanggal</label>
                    <input type="text" class="form-control" name="date" value="{{ $event->date }}">
                    <small class="text-danger"></small>
                </div>
                <div class="form-group mt-2">
                    <label for="">Jam</label>
                    <input type="time" class="form-control" name="time"
                        value="{{ date('H:i', strtotime($event->time)) }}">
                    <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>
    @endif
@endsection

@push('scripts')
    @if (
        $event->status === 'Menunggu' &&
            auth()->user()->role->name === 'Operator' &&
            auth()->user()->userDivision->division->name === 'Tata Usaha')
        <script>
            const id = document.querySelector('input[name="_id"]');
            const division = document.querySelector('select[name="division_id"]');
            const category = document.querySelector('select[name="category_id"]');
            const characteristic = document.querySelector('select[name="characteristic"]');
            const place = document.querySelector('select[name="place_id"]');
            const toolOfParliaments = document.getElementsByName('tool_of_parliament[]');
            const saveButton = document.getElementById('save');

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

                const payload = {
                    division_id: division.value,
                    category_id: category.value,
                    characteristic: characteristic.value,
                    place_id: place.value,
                    tool_of_parliaments: [...toolOfParliaments].filter((el) => el.checked === true).map((el) =>
                        el.value)
                };
                const response = await save(payload);

                if (response.status === 'success') {
                    return window.location.href = `${window.location.origin}/panel/kegiatan`;
                }

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

            const save = async (payload) => {
                const options = {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(payload)
                }
                const response = await fetch(`${window.location.origin}/panel/kegiatan/${id.value}/konsep`, options);
                const result = await response.json();
                console.log(result);
                return result;
            }

            const disabledElement = () => {
                division.setAttribute('disabled', '');
                category.setAttribute('disabled', '');
                characteristic.setAttribute('disabled', '');
                place.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 = () => {
                division.removeAttribute('disabled', '');
                category.removeAttribute('disabled', '');
                characteristic.removeAttribute('disabled', '');
                place.removeAttribute('disabled', '');
                saveButton.removeAttribute('disabled', '');
                saveButton.innerHTML = 'Simpan';
            }

            const showErrors = (errors) => {
                if (errors.division_id) {
                    division.nextElementSibling.textContent = errors.division_id
                }
                if (errors.category_id) {
                    category.nextElementSibling.textContent = errors.category_id;
                }
                if (errors.characteristic) {
                    characteristic.nextElementSibling.textContent = errors.characteristic;
                }
                if (errors.place_id) {
                    place.nextElementSibling.textContent = errors.place_id
                }
                if (errors.tool_of_parliament) {
                    toolOfParliaments[toolOfParliaments.length - 1].parentElement.nextElementSibling.textContent = errors
                        .tool_of_parliament;
                }
            }

            const clearErrors = () => {
                division.nextElementSibling.textContent = '';
                category.nextElementSibling.textContent = '';
                characteristic.nextElementSibling.textContent = '';
                place.nextElementSibling.textContent = '';
                toolOfParliaments[toolOfParliaments.length - 1].parentElement.nextElementSibling.textContent = '';
            }
        </script>
    @endif

    @if (
        $event->status === 'Verifikasi Jadwal' &&
            auth()->user()->role->name === 'Operator' &&
            auth()->user()->userDivision->division->id === $event->division_id)
        <script>
            const id = document.querySelector('input[name="_id"]');
            const date = document.querySelector('input[name="date"]');
            const time = document.querySelector('input[name="time"]');
            const saveButton = document.getElementById('save');

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

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

                const payload = {
                    date: date.value,
                    time: time.value,
                };
                const response = await save(payload);

                if (response.status === 'success') {
                    return window.location.href = `${window.location.origin}/panel/kegiatan`;
                }

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

            const save = async (payload) => {
                const options = {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(payload)
                };
                const response = await fetch(`${window.location.origin}/panel/kegiatan/${id.value}/verifikasi`,
                    options);
                const result = await response.json();
                return result;
            }

            const disabledElement = () => {
                date.setAttribute('disabled', '');
                time.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 = () => {
                date.removeAttribute('disabled');
                time.removeAttribute('disabled');
                saveButton.removeAttribute('disabled');
                saveButton.innerHTML = 'Simpan';
            }

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

            const clearErrors = () => {
                date.nextElementSibling.nextElementSibling.textContent = '';
                time.nextElementSibling.textContent = '';
            }
        </script>
    @endif
@endpush