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

@section('content')
<section class="section">
    <div class="row">
        <div class="col-8">
            <div class="section-title">
                <h3>Perpanjangan STR</h3>
            </div>
            <p class="section-lead">
                Silahkan tambah, ubah atau hapus data rekomendasi STR di sini.
            </p>
        </div>
        <div class="col-4 text-right">
            <button class="btn btn-info" onclick="showBiayaModal()" title="Lihat Biaya"><i class="fas fa-credit-card"></i></button>
            <button class="btn btn-info" onclick="showDokumenModal()" title="Lihat Persyaratan"><i class="fas fa-file"></i></button>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="card border-0 shadow rounded">
                <div class="card-header">
                    <h4>Tambah Rekomendasi STR</h4>
                    <marquee behavior="scroll" direction="left">Harap siapkan dokumen pendukung :
                        @forelse($document as $file)
                        | {{ $loop->iteration }}.
                        <b> {{$file->name}}</b>
                        <span class="text-danger"> {{$file->desc}}</span>
                        <span> dalam format {{$file->allowed_file_types}}</span>
                        @empty
                        <div class="alert alert-danger">
                            Data setup dokumen belum tersedia.
                        </div>
                        @endforelse
                    </marquee>
                    <div class="card-header-action">
                        <a href="{{ route('anggota.recommendation') }}" class="btn btn-success">Kembali</a>
                    </div>
                </div>
                <div class="card-body">
                    @if($profil == 0)
                    <div class="alert alert-warning text-dark text-center">
                        <i class="fa fa-exclamation-triangle"></i> Lengkapi data diri anda terlebih dahulu
                    </div>
                    <div class="md-12 text-center">
                        <img id="imgPreview" src="{{asset('assets-panel/img/empty-data.gif')}}" alt="Gambar" style="width: 272px; height: 272px" />
                        <br>
                        <a href="{{ route('anggota.profil') }}" class="btn btn-dark btn-action" data-toggle="tooltip" title="Lihat"> Menu Profil</a>
                    </div>
                    <br>
                    @elseif($data->position != "DOKTER UMUM")
                    <div class="alert alert-warning alert-has-icon">
                        @php
                        $label = \App\Models\Label::where(['code' => 'info-str-du' ])->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>
                    <br>
                    @else
                    <div class="alert alert-info alert-has-icon">
                        @php
                        $label = \App\Models\Label::where(['code' => 'info-str' ])->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>

                    <form class="form-ext-str" method="POST">
                        <div class="text-center">
                            <div class="row">
                                <div class="col-md-4 mt-5">
                                    <span class="badge badge-pill badge-danger mb-2">
                                        <span class="number">1</span>
                                    </span>
                                    @php
                                    $label = \App\Models\Label::where(['code' => 'str-ext-point-1' ])->first()
                                    @endphp
                                    <h6>{!!html_entity_decode($label->title)!!}</h6>
                                    <label>{!!html_entity_decode($label->desc)!!}</label>
                                    @php
                                    $download = \App\Models\Download::where(['ordering' => '13' ])->first();
                                    @endphp
                                    <a target="_blank" href="{{asset('storage/download/' . $download->path)}}" class="btn btn-action" data-toggle="tooltip" title="Unduh Dokumen"> <span class="text-info">Unduh Formulir</span></a>
                                </div>
                                <div class="col-md-4 mt-5">
                                    <span class="badge badge-pill badge-danger mb-2">
                                        <span class="number">2</span>
                                    </span>
                                    @php
                                    $label = \App\Models\Label::where(['code' => 'str-ext-point-2' ])->first()
                                    @endphp
                                    <h6>{!!html_entity_decode($label->title)!!}</h6>
                                    <label>{!!html_entity_decode($label->desc)!!}</label>
                                    <a href="{{route('anggota.confirm')}}" class="btn btn-action" data-toggle="tooltip" title="Konfirmasi Pembayaran"> <span class="text-info">Konfirmasi Pembayaran</span></a>
                                </div>
                                <div class="col-md-4 mt-5">
                                    <span class="badge badge-pill badge-danger mb-2">
                                        <span class="number">3</span>
                                    </span>
                                    @php
                                    $label = \App\Models\Label::where(['code' => 'str-ext-point-3' ])->first()
                                    @endphp
                                    <h6>{!!html_entity_decode($label->title)!!}</h6>
                                    <label>{!!html_entity_decode($label->desc)!!}</label>
                                </div>
                            </div>
                        </div>

                        <div class="row mt-5">
                            <div class="col-md-10">
                                <input type="checkbox" id="agree" name="agree" value="1" checked required>
                                <label for="agree"> Setuju, saya sudah membaca panduan dan lanjutkan proses <strong>{{$application->name}}</strong></label>
                            </div>
                            <div class="col-md-2">
                                <input type="hidden" name="application_type" value="{{$application->code}}">
                                <button type="button" class="btn btn-success btn-lg btn-block submit-btn-str" data-id="{{$application->code}}">
                                    Ajukan
                                </button>
                            </div>
                        </div>

                    </form>
                    @endif
                </div>
            </div>
        </div>
    </div>
    <div id="loading" style="display: none;">
        <img src="{{ asset('assets-panel/img/loading-submit.gif') }}" alt="Loading...">
    </div>
</section>

<script>
    function showBiayaModal() {
        // Menampilkan modal
        $('#biayaModal').modal('show');
    }

    function showDokumenModal() {
        // Menampilkan modal
        $('#dokumenModal').modal('show');
    }

    document.addEventListener('DOMContentLoaded', function() {
        // Cari elemen form dan tombol submit
        const form = document.querySelector('.form-ext-str');
        const submitBtn = document.querySelector('.submit-btn-str');

        // Tambahkan event listener pada tombol submit
        submitBtn.addEventListener('click', function() {

            const applicationCode = event.target.getAttribute('data-id');

            // Validasi form
            if (!form.checkValidity()) {
                // Jika form tidak valid, munculkan pesan peringatan
                swal('Peringatan', 'Anda sudah membaca tapi belum menyetujui persyaratan', 'warning');
                return;
            }

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

            // Kirim data form ke server
            const formData = new FormData(form);
            swal({
                title: "Yakin Melakukan Pengajuan ?",
                text: "Baca panduan yang sudah diberikan !",
                type: "warning",
                showCancelButton: !0,
                confirmButtonText: "Kirim",
                cancelButtonText: "Batal",
                cancelButtonColor: "#FA2A21",
                confirmButtonColor: "#1AA13E",
                reverseButtons: !0
            }).then(function(e) {
                if (e.value === true) {
                    var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
                    $.ajax({
                        type: 'POST',
                        url: '/anggota/strext/store',
                        data: {
                            _token: CSRF_TOKEN,
                            application_type: applicationCode
                        },
                        dataType: 'JSON',
                        success: function(results) {
                            if (results.success === true) {
                                swal("Berhasil", results.message, "success");
                                window.location.replace("{{ url('anggota/recommendation') }}");
                            } else {
                                swal("Gagal", results.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> Loading...';
            submitBtn.disabled = true;
        }

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

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

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

<!-- Modal Biaya -->
<div class="modal fade" id="biayaModal" tabindex="-1" role="dialog" aria-labelledby="dokumenModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="biayaModalLabel">Rincian Biaya</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="table-responsive">
                    <table class="table table-striped mb-0">
                        <thead>
                            <tr style="text-align:left">
                                <th>DESKRIPSI</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($cost as $item)
                            <tr>
                                <td style="text-align:left">
                                    <table class="table table-borderless">
                                        <tbody>
                                            <hr>
                                            @php
                                            $total = 0;
                                            @endphp
                                            @forelse ($item->cost as $itemdetail)
                                            <tr>
                                                @foreach ($itemdetail->detailcost as $value)

                                                @php
                                                $total += $value->amount
                                                @endphp

                                                <td>
                                                    <div class="row">
                                                        <div class="col-8">
                                                            {{ $value->code }} - {{ $value->type }}
                                                        </div>
                                                        <div class="col-4 text-right">
                                                            <b>Rp. {{ number_format($value->amount,0) }}</b>
                                                        </div>
                                                    </div>
                                                </td>
                                                @endforeach

                                                @if ($loop->last)
                                                Total Biaya <span class="text-success">{{ $item->desc }}</span> <b> Rp. {{ number_format($total,0) }}</b>
                                                <hr>
                                                @endif

                                            </tr>
                                            @empty
                                            <div class="alert alert-danger">
                                                Data setup biaya {{ $item->name }} belum tersedia.
                                            </div>
                                            @endforelse
                                        </tbody>
                                    </table>
                                </td>
                            </tr>
                            @empty
                            <div class="alert alert-danger">
                                Data setup biaya belum tersedia.
                            </div>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <span class="text-danger">*) Biaya dapat berubah sewaktu-waktu jika dibutuhkan</span>
            </div>
        </div>
    </div>
</div>

<!-- Modal Dokumen -->
<div class="modal fade" id="dokumenModal" tabindex="-1" role="dialog" aria-labelledby="dokumenModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="dokumenModalLabel">Dokumen Pendukung</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="table-responsive">
                    <table class="table table-striped mb-0">
                        <thead>
                            <tr style="text-align:left">
                                <th>DESKRIPSI</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($docu as $item)
                            <tr>
                                <td style="text-align:left">
                                    <table class="table table-borderless">
                                        <tbody>
                                            <hr>
                                            @forelse ($item->document as $itemdetail)
                                            <tr>
                                                @foreach ($itemdetail->detaildocument as $value)

                                                <td>
                                                    <div class="row">
                                                        <div class="col-8">
                                                            {{ $value->code }} - {{ $value->desc }}
                                                        </div>
                                                        <div class="col-4 text-right">
                                                            <b>Format <span class="text-primary">{{ $value->allowed_file_types }}</span> Ukuran Maksimal {{ $value->max_size }}</b>
                                                        </div>
                                                    </div>
                                                </td>
                                                @endforeach

                                                @if ($loop->last)
                                                Dokumen Upload <span class="text-success">{{ $item->desc }}</span>
                                                <hr>
                                                @endif

                                            </tr>
                                            @empty
                                            <div class="alert alert-danger">
                                                Data setup dokumen {{ $item->name }} belum tersedia.
                                            </div>
                                            @endforelse
                                        </tbody>
                                    </table>
                                </td>
                            </tr>
                            @empty
                            <div class="alert alert-danger">
                                Data setup dokumen belum tersedia.
                            </div>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <span class="text-danger">*) Dokumen dapat berubah sewaktu-waktu jika dibutuhkan</span>
            </div>
        </div>
    </div>
</div>