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

@section('content')


<section class="section">
    <div class="section-title">
        <h3>Persetujuan</h3>
    </div>
    <p class="section-lead">
        Silahkan ubah 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>Ubah 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-ppds" method="POST">
                        @csrf
                        @method('POST')

                        <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" name="user_id" value="{{ old('user_id', $data->user_id) }}" placeholder="Pilih akses" required="">
                                <option value="">Pilih Akses</option>
                                @foreach($user as $item)
                                @forelse ($item->detailuser as $itemdetail)
                                <option {{ old('user_id', $data->user_id) == $itemdetail->id ? "selected" : "" }} value="{{ $itemdetail->id }}"><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', $data->level)=='1' ? 'checked' : '' ) checked @endif>
                                <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', $data->level)=='2' ? 'checked' : '' ) checked @endif>
                                <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', $data->level)=='3' ? 'checked' : '' ) checked @endif>
                                <label class="form-check-label" for="level3">
                                    3
                                </label>
                            </div>
                        </div>


                        <div class="form-group">
                            <label class="font-weight-bold">STATUS DEFAULT <span style="color: red;"> **</span></label>
                            <select class="form-control select2" id="is_active" name="is_active" value="{{ old('is_active', $data->is_active) }}" placeholder="Pilih status" required="">
                                <option value="">Pilih Status</option>
                                <option {{ old('is_active', $data->is_active) == 'Y' ? "selected" : "" }} value="Y">UTAMA</option>
                                <option {{ old('is_active', $data->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">
                            <input type="hidden" name="id" value="{{$data->id}}">
                            <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" id="clear" 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>
    document.addEventListener('DOMContentLoaded', function() {
        // Cari elemen form dan tombol submit
        const form = document.querySelector('.form-ppds');
        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;
            }

            // 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 Melakukan Perubahan ?",
                text: "Cek Data dan konfirmasi Jika sudah sesuai !",
                type: "warning",
                showCancelButton: !0,
                confirmButtonText: "Ubah",
                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/update', {
                            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