@extends('layouts.panel.app', ['title' => 'Data Setup Dokumen'])

@section('content')
<section class="section">
    <div class="section-title">
        <h3>Setup Dokumen</h3>
    </div>
    <p class="section-lead">
        Silahkan tambah, ubah atau hapus data menu setup dokumen di sini.
    </p>
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4>Data Setup Dokumen</h4>
                    <div class="card-header-action" style="justify-content: end; width: 30%">
                        <form id="fm-filter" action="{{ route('admin.docform') }}" method="GET" class="needs-validation" onkeypress="return event.keyCode != 13;">
                            @csrf
                            @method('GET')
                            <div class="row">
                                <div class="col-lg-8">
                                    <select class="form-control select2 m-1 form-control-lg" name="application_status" placeholder="Pilih Semua">
                                        <option value="">Lihat semua</option>
                                        @foreach ($filter as $item)
                                        <option value="{{$item->code}}" {{ request()->query('application_status') == $item->code ? 'selected' : '' }}>{{$item->code}} - {{$item->name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-lg-4">
                                    <button type="submit" style="width: 100px" class="btn btn-info btn-action m-1" data-toggle="tooltip" title="Tekan Enter">Filter</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-striped mb-0">
                            <thead>
                                <tr style="text-align:left">
                                    <th>DOKUMEN</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($data as $item)
                                <tr>
                                    <td>
                                        <hr>
                                        <div class="row mt-2">
                                            <div class="col-md-8" style="text-align:left">
                                                <div class="row">
                                                    <div class="col-md-1">
                                                        <figure style="width: 45px; height: 45px;" class="avatar mr-2 avatar-lg bg-secondary text-white" data-initial="{{ $item->code }}"></figure>
                                                    </div>
                                                    <div class="col-md-7">
                                                        <b>{{ $item->name }}</b>
                                                        <br>
                                                        <small>{{ $item->desc }}</small>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-4" style="text-align:right">
                                                <a href="{{ route('admin.docform.create', ['id' => $item->id]) }}" class="btn btn-success">Tambah</a>
                                            </div>
                                        </div>
                                        <table class="table table-borderless">
                                            <tbody>
                                                <hr>
                                                @php
                                                $total = 0;
                                                @endphp
                                                @forelse ($item->document as $itemdetail)
                                                <tr>
                                                    @foreach ($itemdetail->detaildocument as $value)

                                                    @php
                                                    $total += $value->amount

                                                    @endphp

                                                    <td>
                                                        <div class="row">
                                                            <div class="col-8">
                                                                                                                                <strong style="color: cornflowerblue;">{{ $value->code }}</strong> - {{ $value->name }}
                                                                @if ($value->is_submission != 'NO')
                                                                <small class="text-info"> <span class="badge badge-info" title="KHUSUS {{$value->is_submission != 'NO' ? $value->is_submission : ''}}"><i class="fas fa-info-circle"></i> {{$value->is_submission != 'NO' ? $value->is_submission : ''}}</span></small>
                                                                @endif
                                                                <br><b>{{ $value->desc }}</b> <span class='text-danger'>{{ $mandatory }}</span>
                                                            </div>
                                                            <div class="col-4">
                                                                <div class="row justify-content-md-center">
                                                                    <div class="col col-lg-2">
                                                                        <a href="{{ route('admin.docform.edit', $itemdetail->id) }}" class="btn btn-light m-1" data-toggle="tooltip" title="Ubah"><i class="fas fa-pencil-alt"></i></a>
                                                                    </div>
                                                                    <div class="col col-lg-2">
                                                                        <form class="form-document" action="{{ route('admin.docform.destroy', $itemdetail->id) }}" method="POST">
                                                                            @csrf
                                                                            @method('DELETE')
                                                                            @if ($value->is_verified == 'N')
                                                                            <button type="button" id="delete-document-{{ $itemdetail->id }}" class="btn btn-danger delete-document m-1" data-id="{{$itemdetail->id}}" data-code="{{$value->code}}" data-toggle="tooltip" title="Hapus"><i class="fas fa-trash"></i></button>
                                                                            @else
                                                                            <button type="button" id="delete-document-{{ $itemdetail->id }}" class="btn btn-light delete-document m-1" data-id="{{$itemdetail->id}}" data-code="{{$value->code}}" data-toggle="tooltip" title="Hapus" disabled><i class="fas fa-trash"></i></button>
                                                                            @endif
                                                                        </form>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    @endforeach

                                                    @if ($loop->last)
                                                    <span class="text-secondary">Berikut Kebutuhan Dokumen <strong>{{ $item->desc }}</strong></span>
                                                    @endif

                                                </tr>
                                                @empty
                                                <div class="alert alert-danger">
                                                    Data setup dokumen {{ $item->name }} belum tersedia.
                                                </div>
                                                @endforelse
                                                <hr>
                                            </tbody>
                                        </table>
                                    </td>
                                </tr>
                                @empty
                                <div class="alert alert-danger">
                                    Data master form belum tersedia.
                                </div>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="d-felx justify-content-center">
                    <div class="card-footer text-right">
                        {{ $data->links('vendor.pagination.bootstrap-5') }}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Get all "delete-document" buttons
            $('.delete-document').click(function() {
                var id = $(this).data('id');
                var code = $(this).data('code');

                // Pilih form berdasarkan id
                const submitBtn = document.querySelector('#delete-document-' + id);

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

                // Show confirmation dialog using SweetAlert
                swal({
                    title: "Yakin Hapus Data " + code + " Ini ?",
                    text: "Cek Data dan konfirmasi Jika sudah sesuai !",
                    type: "warning",
                    showCancelButton: !0,
                    confirmButtonText: "Hapus",
                    cancelButtonText: "Batal",
                    cancelButtonColor: "#FA2A21",
                    confirmButtonColor: "#1AA13E",
                    reverseButtons: !0
                }).then(function(e) {
                    if (e.value === true) {
                        // Send form data
                        $('#delete-document-' + id).closest('form').submit();
                    } 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> Proses...';
                    submitBtn.disabled = true;
                }

                // Fungsi untuk menghilangkan loading spinner pada tombol submit
                function hideLoading() {
                    submitBtn.innerHTML = '<i class="fas fa-trash"></i>';
                }

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

                // Fungsi untuk mengaktifkan tombol submit
                function enableButton() {
                    submitBtn.disabled = false;
                }

            });

        });
    </script>

</section>
@endsection