@extends('layouts.panel.app', ['title' => 'Tambah Persetujuan'])

@section('content')


<section class="section">
    <div class="section-title">
        <h3>Persetujuan</h3>
    </div>
    <p class="section-lead">
        Silahkan tambah data akses persetujuan di sini.
    </p>
    <div class="row">
        <div class="col-md-12">
            <div class="card border-0 shadow rounded">
                <div class="card-header">
                    <h4>Tambah Akses Persetujuan</h4>
                    <div class="card-header-action">
                        <a href="{{ route('admin.approval') }}" class="btn btn-success">Kembali</a>
                    </div>
                </div>
                <div class="card-body">
                    <form class="form-approval" method="POST">
                        @csrf

                        <div class="alert alert-info alert-has-icon">
                            @php
                            $label = \App\Models\Label::where(['code' => 'info-master' ])->first()
                            @endphp
                            <div class="alert-icon"><i class="far fa-lightbulb"></i></div>
                            <div class="alert-body">
                                <div class="alert-title"><strong> {!!html_entity_decode($label->title)!!}</strong></div>
                                {!!html_entity_decode($label->desc)!!}
                            </div>
                        </div>
                        <label class="font-weight-bold">Note : <span style="color: red;"> **</span> ) wajib diisi </label>
                        <hr>

                        <div class="form-group">
                            <label class="font-weight-bold">AKSES <span style="color: red;"> **</span></label>
                            <select class="form-control select2" id="user_id" name="user_id" value="{{ old('user_id') }}" placeholder="Pilih akses" required="" onchange="changeLevel()">
                                <option value="">Pilih Akses</option>
                                @foreach($user as $item)
                                @forelse ($item->detailuser as $itemdetail)
                                <option {{ old('user_id') == $itemdetail->id ? "selected" : "" }} value="{{ $itemdetail->id }}" data-role="{{ $item->code }}"><b>{{ $item->name }}</b> ( {{ $itemdetail->name }} ) </option>
                                @empty
                                <div class="alert alert-danger">
                                    Data approval {{ $item->name }} belum tersedia.
                                </div>
                                @endforelse
                                @endforeach
                            </select>
                            <!-- error message untuk route -->
                            <div class="invalid-feedback alert alert-danger mt-2">
                                Pilih akses
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="d-block">LEVEL <span style="color: red;"> **</span></label>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="level" id="level1" value="1" @if(old('level')=='1' ? 'checked' : '' ) checked @endif required>
                                <label class="form-check-label" for="level1">
                                    1
                                </label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="level" id="level2" value="2" @if(old('level')=='2' ? 'checked' : '' ) checked @endif required>
                                <label class="form-check-label" for="level2">
                                    2
                                </label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="level" id="level3" value="3" @if(old('level')=='3' ? 'checked' : '' ) checked @endif required>
                                <label class="form-check-label" for="level3">
                                    3
                                </label>
                            </div>
                            <div class="invalid-feedback alert alert-danger mt-2">
                                Pilih level
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="font-weight-bold">STATUS DEFAULT<span style="color: red;"> **</span></label>
                            <select class="form-control select2" name="is_active" value="{{ old('is_active') }}" placeholder="Pilih status" required="">
                                <option value="">Pilih Status</option>
                                <option {{ old('is_active') == 'Y' ? "selected" : "" }} value="Y">UTAMA</option>
                                <option {{ old('is_active') == 'N' ? "selected" : "" }} value="N">PENGGANTI</option>
                            </select>
                            <!-- error message untuk route -->
                            <div class="invalid-feedback alert alert-danger mt-2">
                                Pilih status
                            </div>
                        </div>

                        <div class="form-group">
                            <button type="button" style="width:100px" class="btn btn-primary btn-action submitBtn" data-toggle="tooltip" title="Simpan"><i class="fas fa-save"></i></button>
                            <button type="reset" onclick="myReset()" class="btn btn-warning btn-action" data-toggle="tooltip" title="Batal"><i class="fas fa-redo-alt"></i></button>
                        </div>

                    </form>
                </div>
            </div>
        </div>
    </div>
</section>

<script>
    function changeLevel() {
        var userSelect = document.getElementById("user_id");
        var selectedUserId = userSelect.value;

        var selectedOption = userSelect.options[userSelect.selectedIndex];
        var selectedRole = selectedOption.getAttribute('data-role');

        var level1 = document.getElementById("level1");
        var level2 = document.getElementById("level2");
        var level3 = document.getElementById("level3");

        if (selectedRole === 'W' || selectedRole === 'K') {
            level1.checked = true;
        } else if (selectedRole === 'SK') {
            level2.checked = true;
        } else if (selectedRole === 'Adm') {
            level3.checked = true;
        }
    }
</script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Cari elemen form dan tombol submit
        const form = document.querySelector('.form-approval');
        const submitBtn = document.querySelector('.submitBtn');

        // Tambahkan event listener pada tombol submit
        submitBtn.addEventListener('click', function() {
            // Validasi form
            const user = $("select[name='user_id']").val();
            const level = $("input[name='level']:checked").val();
            const is_active = $("select[name='is_active']").val();

            if (!user || user === '') {
                swal("Informasi", "Silahkan pilih akses terlebih dahulu!", "info");
                return;
            }

            if (!level || level === undefined) {
                swal("Informasi", "Silahkan pilih level terlebih dahulu!", "info");
                return;
            }

            if (!is_active || is_active === '') {
                swal("Informasi", "Silahkan pilih status terlebih dahulu!", "info");
                return;
            }

            var userSelect = document.getElementById("user_id");
            var selectedUserId = userSelect.value;

            var selectedOption = userSelect.options[userSelect.selectedIndex];
            var selectedRole = selectedOption.getAttribute('data-role');

            var level1 = document.getElementById("level1");
            var level2 = document.getElementById("level2");
            var level3 = document.getElementById("level3");

            if (selectedRole === 'W' || selectedRole === 'K') {
                level1.checked = true;
            } else if (selectedRole === 'SK') {
                level2.checked = true;
            } else if (selectedRole === 'Adm') {
                level3.checked = true;
            }

            // Jika form valid, tampilkan loading spinner pada tombol submit
            showLoading();
            disableButton();

            // Buat objek FormData dari form
            const formData = new FormData(form);

            // Show confirmation dialog using SweetAlert
            swal({
                title: "Yakin Simpan Data ?",
                text: "Cek Data dan konfirmasi Jika sudah sesuai !",
                type: "warning",
                showCancelButton: !0,
                confirmButtonText: "Simpan",
                cancelButtonText: "Batal",
                cancelButtonColor: "#FA2A21",
                confirmButtonColor: "#1AA13E",
                reverseButtons: !0
            }).then(function(e) {
                if (e.value === true) {
                    // Send form data to server using fetch
                    fetch('/admin/approval/store', {
                            method: 'POST',
                            body: formData
                        })
                        .then(response => {
                            if (!response.ok) {
                                throw new Error('Respon jaringan tidak baik');
                            }
                            return response.json();
                        })
                        .then(data => {
                            // Handle response from server
                            if (data.success === true) {
                                swal("Berhasil", data.message, "success");
                                window.location.replace("{{ url('admin/approval') }}");
                                console.log(data);
                            } else {
                                swal("Gagal", data.message, "error");
                                // Hilangkan loading spinner pada tombol submit
                                hideLoading();
                                enableButton();
                            }
                        })
                        .catch(error => {
                            // Handle error
                            console.error(error);
                            swal("Gagal", error.message, "error");
                            // Hilangkan loading spinner pada tombol submit
                            hideLoading();
                            enableButton();
                        });
                } else {
                    e.dismiss;
                    // Hilangkan loading spinner pada tombol submit
                    hideLoading();
                    enableButton();
                }
            }, function(dismiss) {
                return false;
                // Hilangkan loading spinner pada tombol submit
                hideLoading();
                enableButton();
            });
        });

        // Fungsi untuk menampilkan loading spinner pada tombol submit
        function showLoading() {
            submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>';
            submitBtn.disabled = true;
        }

        // Fungsi untuk menghilangkan loading spinner pada tombol submit
        function hideLoading() {
            submitBtn.innerHTML = 'Kirim';
        }

        // Fungsi untuk menonaktifkan tombol submit
        function disableButton() {
            submitBtn.disabled = true;
        }

        // Fungsi untuk mengaktifkan tombol submit
        function enableButton() {
            submitBtn.disabled = false;
        }
    });
</script>
@endsection