@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">
                <h5 class="m-0">User</h5>
                <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>
            </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>Aktif</option>
                                        <option>Tidak Aktif</option>
                                    </select>
                                </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>Nama Lengkap</th>
                                        <th>Email</th>
                                        <th>Status</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($users as $user)
                                        <tr>
                                            <td>{{ $user->name }}</td>
                                            <td>{{ $user->email }}</td>
                                            <td>
                                                @if ($user->is_active)
                                                    <span class="badge bg-soft-success">Aktif</span>
                                                @else
                                                    <span class="badge bg-soft-warning">Tidak Aktif</span>
                                                @endif
                                            </td>
                                            <td class="text-end">
                                                <a href="{{ route('panel.user.show', $user->email) }}"
                                                    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="">Nama Lengkap</label>
                <input type="text" class="form-control" name="name">
                <small class="text-danger"></small>
            </div>
            <div class="form-group mt-2">
                <label for="">Email</label>
                <input type="text" class="form-control" name="email">
                <small class="text-danger"></small>
            </div>
            <div class="form-group mt-2">
                <label for="">No. HP</label>
                <input type="text" class="form-control" name="phone_number">
                <small class="text-danger"></small>
            </div>
            <div class="form-group mt-2">
                <label for="">Bidang</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="">Password</label>
                <input type="password" class="form-control" name="password">
                <small class="text-danger"></small>
            </div>
            <div class="form-group mt-2">
                <label for="">Role</label>
                <select name="role_id" id="" class="form-control">
                    <option value="2">Operator</option>
                </select>
                <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('user-toast'))
        <script>
            const toastText = '{{ Session::get('user-toast') }}';
            saberToast.success({
                title: "Success",
                text: toastText,
                delay: 200,
                duration: 2600,
                rtl: false,
                position: "top-right"
            });
        </script>
    @endif
    <script>
        const name = document.querySelector('input[name="name"]');
        const email = document.querySelector('input[name="email"]');
        const phoneNumber = document.querySelector('input[name="phone_number"]');
        const division = document.querySelector('select[name="division_id"]');
        const password = document.querySelector('input[name="password"]');
        const role = document.querySelector('select[name="role_id"]');
        const saveButton = document.getElementById('save');

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

            const payload = {
                name: name.value,
                email: email.value,
                phone_number: phoneNumber.value,
                division_id: division.value,
                password: password.value,
                role_id: role.value
            }
            const response = await save(payload);
            if (response.status === 'success') {
                return location.reload();
            }

            if (response.errors) {
                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/user`, options);
            const result = await response.json();
            return result;
        }

        const disabledElement = () => {
            name.setAttribute('disabled', '');
            email.setAttribute('disabled', '');
            phoneNumber.setAttribute('disabled', '');
            division.setAttribute('disabled', '');
            password.setAttribute('disabled', '');
            role.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 = () => {
            name.removeAttribute('disabled');
            email.removeAttribute('disabled');
            phoneNumber.removeAttribute('disabled');
            division.removeAttribute('disabled');
            password.removeAttribute('disabled');
            role.removeAttribute('disabled');
            saveButton.removeAttribute('disabled');
            saveButton.innerHTML = 'Simpan';
        }

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

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

            if (errors.phone_number) {
                phoneNumber.nextElementSibling.textContent = errors.phone_number;
            }

            if (errors.division_id) {
                division.nextElementSibling.textContent = errors.division_id;
            }

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

            if (errors.role_id) {
                role.nextElementSibling.textContent = errors.role_id
            }
        }

        const clearErrors = () => {
            name.nextElementSibling.textContent = '';
            email.nextElementSibling.textContent = '';
            phoneNumber.nextElementSibling.textContent = '';
            division.nextElementSibling.textContent = '';
            password.nextElementSibling.textContent = '';
            role.nextElementSibling.textContent = '';
        }
    </script>
@endpush