@extends('layouts.main')

@section('isi')
    <div id="kt_app_content_container" class="app-container  container-fluid ">

        @if ($errors->any())
            <div class="alert alert-danger">
                <strong>Whoops!</strong> There were some problems with your input.<br><br>
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <div class="card">
            <div class="card-body p-lg-20">
                <div class="d-flex flex-column flex-xl-row">
                    <div class="flex-lg-row-fluid me-xl-18 mb-10 mb-xl-0">
                        <div class="mt-n1">
                            <div class="d-flex flex-stack pb-10">
                                <a href="#">
                                    <img alt="Logo" src="{{ asset('assets/media/logos/logoppappm.png') }}"
                                        width="30%" />
                                </a>
                                <a href="{{ route('pengisian-pelatihan.index') }}" class="btn btn-sm btn-success w-full">
                                    Kembali
                                </a>
                            </div>
                            <div class="m-0">
                                <div class="fw-bold fs-3 text-gray-800 mb-8">Data Pembayaran Pelatihan</div>
                                <div class="flex-grow-1">
                                    <div class="table-responsive border-bottom mb-9">
                                        <table class="table mb-3">
                                            <thead>
                                                <tr class="border-bottom fs-6 fw-bold text-muted">
                                                    <th class="min-w-175px pb-2">Pelatihan</th>
                                                    <th class="min-w-70px text-end pb-2">Kelas</th>
                                                    <th class="min-w-100px text-end pb-2">Amount</th>
                                                </tr>
                                            </thead>

                                            <tbody>
                                                @foreach ($data as $item)
                                                    <tr class="fw-bold text-gray-700 fs-5 text-end">
                                                        <td class="d-flex align-items-center">
                                                            <i class="fa fa-genderless text-primary fs-2 me-2"></i>
                                                            {{ $item->jadwal->matakuliahpelatihan->kd_mppel . ' - ' . $item->jadwal->matakuliahpelatihan->nmpel }}
                                                        </td>
                                                        <td>{{ $item->kelas }}</td>
                                                        <td class="fs-5 text-gray-900 fw-bolder">
                                                            {{ Number::currency($item->jadwal->matakuliahpelatihan->hargapelatihan->first()->harga, in: 'IDR', locale: 'id') }}
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="d-flex justify-content-end">
                                        <div class="mw-300px">
                                            <div class="d-flex flex-stack">
                                                <div class="fw-semibold pe-10 text-gray-600 fs-7">Total</div>
                                                <div class="text-end fw-bold fs-6 text-gray-800">
                                                    {{ Number::currency($totalHarga, in: 'IDR', locale: 'id') }}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    @if ($checkBayarPelatihan)
                        <div class="m-0">
                            <div
                                class="d-print-none border border-dashed border-gray-300 card-rounded h-lg-100 min-w-md-350px p-9 bg-lighten">
                                <div class="mb-8">
                                    @if ($checkBayarPelatihan->bukti_bayar_fileUrl == null)
                                        <span class="badge badge-light-success">Menunggu Unggah Bukti Bayar</span>
                                    @else
                                        @if ($checkBayarPelatihan->sts_bayar == null)
                                            <span class="badge badge-light-warning">Menunggu Konfirmasi Keuangan</span>
                                        @else
                                            <span class="badge badge-light-success">Pembayaran Lunas</span>
                                        @endif
                                    @endif
                                </div>
                                <h6 class="mb-3 fw-bolder text-gray-600 text-hover-primary">Detail Pembayaran</h6>
                                <div class="mb-6">
                                    <div class="fw-semibold text-gray-600 fs-7">Bank:</div>

                                    <div class="fw-bold text-gray-800 fs-6">{{ $rekening->bank }}</div>
                                </div>
                                <div class="mb-10">
                                    <div class="fw-semibold text-gray-600 fs-7">Nomor Rekening:</div>

                                    <div class="fw-bold text-gray-800 fs-6">
                                        {{ $rekening->norekening }} <br />
                                        {{ $rekening->atasnama_rekening }}
                                    </div>
                                </div>
                                <h6 class="mb-3 fw-bolder text-gray-600 text-hover-primary">BUKTI PEMBAYARAN</h6>
                                <div class="mb-6">
                                    <div class="fw-semibold text-gray-600 fs-7">Bukti Pembayaran</div>
                                    <div class="fw-bold fs-6 text-gray-800">
                                        @if ($checkBayarPelatihan->bukti_bayar_fileUrl == null)
                                            <a href="#" class="badge badge-success" data-bs-toggle="modal"
                                                data-bs-target="#kt_modal_upload_bukti_bayar">Unggah Bukti</a>
                                        @else
                                            <a href="#" data-bs-toggle="modal"
                                                data-bs-target="#kt_modal_lihat_bukti_bayar"
                                                data-url="{{ $checkBayarPelatihan->bukti_bayar_fileUrl }}"
                                                class="badge badge-info" id="lihat_bukti_bayar">Lihat Bukti</a>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif
                </div>
                <div class="d-flex flex-stack flex-wrap pt-13">
                    <div class="my-1 me-5">
                        @if ($checkBayarPelatihan)
                            <a href="{{ route('pengisian-pelatihan.print-kwitansi') }}" class="btn btn-info my-1 me-12"
                                id="button-cetak">
                                <i class="ki-outline ki-printer fs-1"></i>
                                Cetak Kwitansi Pembayaran Pelatihan
                            </a>

                            @if ($checkBayarPelatihan->bukti_bayar_fileUrl == null)
                                <a href="#" class="btn btn-success" data-bs-toggle="modal"
                                    data-bs-target="#kt_modal_upload_bukti_bayar">Unggah Bukti</a>
                            @else
                                <a href="#" data-bs-toggle="modal" data-bs-target="#kt_modal_lihat_bukti_bayar"
                                    data-url="{{ $checkBayarPelatihan->bukti_bayar_fileUrl }}" class="btn btn-info"
                                    id="lihat_bukti_bayar">Lihat Bukti</a>
                            @endif
                        @else
                            <button type="button" class="btn btn-primary my-1 me-12" id="button-save">
                                <span class="indicator-label" id="indicatorLabel">
                                    Simpan Data Pelatihan
                                </span>
                                <span class="indicator-progress" id="indicatorProgress">Mohon tunggu...
                                    <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                                </span>
                            </button>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('modals')
    @if ($checkBayarPelatihan)
        <div class="modal fade" tabindex="-1" id="kt_modal_upload_bukti_bayar" data-bs-backdrop="static"
            data-bs-keyboard="false">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h3 class="modal-title">Unggah Bukti Bayar</h3>

                        <!--begin::Close-->
                        <div class="btn btn-icon btn-sm btn-active-light-primary ms-2 closeButton" data-bs-dismiss="modal"
                            aria-label="Close">
                            <i class="ki-duotone ki-cross fs-1"><span class="path1"></span><span class="path2"></span></i>
                        </div>
                        <!--end::Close-->
                    </div>

                    <form method="post" class="form" enctype="multipart/form-data"
                        action="{{ route('pengisian-pelatihan.upload-bukti-bayar') }}" id="form">
                        @csrf
                        <div class="modal-body">
                            <input type="hidden" value="{{ $checkBayarPelatihan->idbayar }}" name="idbayar">
                            <input type="file" name="file" class="form-control"
                                accept="image/png, image/jpeg, image/jpg, application/pdf" required>
                            <div class="form-text">Tipe File harus: png, jpeg, jpg, pdf, dengan maksimal ukuran file 2MB
                            </div>
                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-light closeButton"
                                data-bs-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-primary" id="submitButton">
                                <span class="indicator-label" id="indicatorLabel">Upload</span>
                                <span class="indicator-progress" id="indicatorProgress">{{ __('Please wait') }}
                                    <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                                </span>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    @endif

    <div class="modal fade" tabindex="-1" id="kt_modal_lihat_bukti_bayar">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">Lihat Bukti Bayar</h3>
                    <!--begin::Close-->
                    <div class="btn btn-icon btn-sm btn-active-light-primary ms-2 closeButton" data-bs-dismiss="modal"
                        aria-label="Close">
                        <i class="ki-duotone ki-cross fs-1"><span class="path1"></span><span class="path2"></span></i>
                    </div>
                    <!--end::Close-->
                </div>

                <div class="modal-body">
                    <iframe src="" frameborder="0" id="iframe_docs" width="100%" height="500px"></iframe>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-light closeButton" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js-page')
    <script>
        $(document).ready(function() {
            var button_save = $('#button-save');
            var indicator_label = $('#indicatorLabel');
            var indicator_progress = $('#indicatorProgress');

            button_save.click(function(e) {
                button_save.addClass('disabled');
                indicator_label.css('display', 'none');
                indicator_progress.css('display', 'block');

                Swal.fire({
                    text: "Apakah anda yakin untuk menyimpan data pelatihan? Setelah ini anda tidak dapat mengubah pilihan anda lagi.",
                    icon: "question",
                    showCancelButton: true,
                    confirmButtonText: "Ya, Simpan Data",
                    cancelButtonText: "Batal",
                }).then(result => {
                    if (result.isConfirmed) {
                        $.ajax({
                            url: "{{ route('pengisian-pelatihan.store-pembayaran') }}",
                            type: "POST",
                            headers: {
                                'X-CSRF-TOKEN': $(
                                    'meta[name="csrf-token"]').attr(
                                    'content')
                            },
                            data: {
                                "total_bayar": "{{ $totalHarga }}",
                            },
                            success: function(response) {

                                Swal.fire({
                                    text: "Data berhasil disimpan.",
                                    icon: "success",
                                    footer: "Silakan download Kartu Pembayaran Remedial.",
                                    buttonsStyling: false,
                                    showConfirmButton: false,
                                    timer: 2500,
                                }).then(() => {
                                    location.reload();
                                });
                            },
                            error: function(response) {
                                Swal.fire({
                                    title: "Gagal!",
                                    text: "Terjadi kesalahan saat menyimpan data pelatihan. (" +
                                        response
                                        .responseJSON.message + ")",
                                    icon: "error",
                                    buttonsStyling: !1,
                                    confirmButtonText: "Ok, got it!",
                                    customClass: {
                                        confirmButton: "btn btn-primary"
                                    }
                                });
                            },
                            complete: function() {
                                button_save.removeClass('disabled');
                                indicator_label.css('display', 'block');
                                indicator_progress.css('display', 'none');
                            }
                        });
                    } else {
                        Swal.fire({
                            title: "Dibatalkan!",
                            text: "Data pelatihan batal disimpan.",
                            icon: "info",
                        });

                        button_save.removeClass('disabled');
                        indicator_label.css('display', 'block');
                        indicator_progress.css('display', 'none');
                    }
                });
            });
        });
    </script>

    <script>
        $(document).ready(function() {
            var form = $('#form');
            var submitButton = $('#submitButton');
            var indicator_label = $('#indicatorLabel');
            var indicator_progress = $('#indicatorProgress');

            form.submit(function() {
                submitButton.addClass('disabled');
                indicator_label.css('display', 'none');
                indicator_progress.css('display', 'block');
            });
        })
    </script>

    <script>
        $(document).on('click', '#lihat_bukti_bayar', function() {
            var data = $(this).data('url');
            $('#iframe_docs').attr('src', data);
        })
    </script>
@endpush