@php
    use Carbon\Carbon;
    $title_site = 'Detail Pembayaran';
@endphp
@section('title', $title_site)
@section('styles')
    <link rel="stylesheet" href="{{ asset('assets/admin/vendor/libs/bootstrap-datepicker/bootstrap-datepicker.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/admin/vendor/libs/bootstrap-daterangepicker/bootstrap-daterangepicker.css') }}">
    @if (!$is_use_payment_gateway)
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.15.2/css/selectize.bootstrap5.min.css" integrity="sha512-Ars0BmSwpsUJnWMw+KoUKGKunT7+T8NGK0ORRKj+HT8naZzLSIQoOSIIM3oyaJljgLxFi0xImI5oZkAWEFARSA==" crossorigin="anonymous" referrerpolicy="no-referrer">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4/dist/fancybox.min.css">
    @else
        @if ($payment->status == 'unpaid')
            <script type="text/javascript" src="{{ config('app.env') == 'production' ? 'https://app.midtrans.com/snap/snap.js' : 'https://app.sandbox.midtrans.com/snap/snap.js' }}" data-client-key="{{ config('app.env') == 'production' ? config('app.midtrans.production.client_key') : config('app.midtrans.sandbox.client_key') }}"></script>
        @endif
    @endif
    <style>
        .light-style .daterangepicker {
            z-index: 99999 !important;
        }
    </style>
@endsection
<div>
    <div wire:loading>
        @include('layouts.admin.loading-screen')
    </div>
    @include('livewire.admin.payment.detail.payment-detail-modal')
    <div class="row g-3">
        @if ($payment->is_force_paid)
            <div class="col-12">
                <div class="card">
                    <div class="alert alert-warning d-flex align-items-center mb-0" role="alert">
                        <span class="alert-icon text-warning me-2">
                            <i class="fa-solid fa-circle-info"></i>
                        </span>
                        <span class="text-white">Pembayaran ini diselesaikan secara dipaksa.</span>
                    </div>
                </div>
            </div>
        @endif
        @if ($payment->status != 'paid')
            <div class="col-12">
                <div class="card">
                    <div class="alert alert-info d-flex align-items-center mb-0" role="alert">
                        <span class="alert-icon text-info me-2">
                            <i class="fa-solid fa-circle-info"></i>
                        </span>
                        <span class="text-black">Jika nominal pembayaran tertera dibawah menurut Anda salah, silahkan hubungi admin.</span>
                    </div>
                </div>
            </div>
        @endif
        <div class="{{ !$is_use_payment_gateway && (($price >= 0 && $auth->hasAnyRole('admin', 'ketua')) || ($price > 0 && $auth->hasAnyRole('mahasiswa', 'dosen', 'umum'))) ? 'col-lg-8' : '' }} col-12">
            <div class="card invoice-preview-card">
                <div class="p-2 rounded-top text-center text-white fw-bold @if (in_array($payment->status, ['unpaid', 'rejected'])) bg-danger @elseif($payment->status == 'awaiting-confirmation') bg-primary @elseif($payment->status == 'paid') bg-success @endif">
                    @if ($payment->status == 'unpaid')
                        @if (Carbon::now()->lt($payment->valid_until) || Carbon::now()->isSameDay($payment->valid_until))
                            Mohon melakukan pembayaran paling lambat tanggal {{ $payment->valid_until->format('d/m/Y') }}
                        @else
                            Maaf pembayaran Anda telah jatuh tempo ({{ $payment->valid_until->format('d/m/Y') }})
                        @endif
                    @elseif($payment->status == 'awaiting-confirmation')
                        Menunggu Konfirmasi
                    @elseif($payment->status == 'rejected')
                        Ditolak
                    @elseif($payment->status == 'paid')
                        Paid
                    @endif
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-8">
                            <div class="mb-3">
                                <img src="{{ asset('storage/' . $system_setting_cached->logo) }}" style="width: 250px;object-fit: contain;" loading="lazy">
                            </div>
                            <p class="mb-1">{{ $system_setting_cached?->address }}</p>
                            <p class="mb-0">{{ $system_setting_cached?->fax }}</p>
                        </div>
                        <div class="col-4 text-end">
                            <h4 class="fw-semibold mb-0">#{{ $payment->invoice }}</h4>
                            <div class="mb-2 pt-1">
                                <span>Tanggal :</span>
                                <span class="fw-semibold">{{ $payment->created_at->isoFormat('MMMM D, Y') }}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <hr class="my-0">
                <div class="card-body">
                    <div class="d-flex gap-3">
                        <div>
                            <h6 class="mb-1">Tagihan Kepada :</h6>
                            <p class="mb-1 fw-semibold">{{ $payment?->research?->researchers()->where('position', 'ketua')->first()?->researcher?->name }}</p>
                            {{-- <p class="mb-1">{{ $payment?->research?->researchers()->where('position', 'ketua')->first()?->researcher?->researcherDetail->street_name }} No. {{ $payment?->research?->researchers()->where('position', 'ketua')->first()?->researcher?->researcherDetail->building_number }}</p>
                            <p class="mb-1">{{ $payment?->research?->researchers()->where('position', 'ketua')->first()?->researcher?->researcherDetail->subDistrict->name }}, {{ $payment?->research?->researchers()->where('position', 'ketua')->first()?->researcher?->researcherDetail->district->name }},</p>
                            <p class="mb-1">{{ $payment?->research?->researchers()->where('position', 'ketua')->first()?->researcher?->researcherDetail->city->name }}, {{ $payment?->research?->researchers()->where('position', 'ketua')->first()?->researcher?->researcherDetail->province->name }} {{ $payment?->research?->researchers()->where('position', 'ketua')->first()?->researcher?->researcherDetail->postcode }}</p> --}}
                            <p class="mb-0">{{ $payment?->research?->researchers()->where('position', 'ketua')->first()?->researcher?->researcherDetail->phone_number }}</p>
                            <p class="mb-0">{{ $payment?->research?->researchers()->where('position', 'ketua')->first()?->researcher?->email }}</p>
                        </div>
                        <div class="ms-auto">
                            <h6 class="mb-1">Pembayaran Ke :</h6>
                            @if (!$is_use_payment_gateway)
                                <table>
                                    <tbody>
                                        <tr>
                                            <td>Nama Bank</td>
                                            <td class="ps-2 pe-2">:</td>
                                            <td>{{ $system_setting->bank?->name ?? '-' }}</td>
                                        </tr>
                                        <tr>
                                            <td>Nama Penerima</td>
                                            <td class="ps-2 pe-2">:</td>
                                            <td>{{ $system_setting->receipent_name }}</td>
                                        </tr>
                                        <tr>
                                            <td>Nomor Rek / VA</td>
                                            <td class="ps-2 pe-2">:</td>
                                            <td>{{ $system_setting->account_number }}</td>
                                        </tr>
                                        @if ($system_setting->swift_code)
                                            <tr>
                                                <td>Swift Code</td>
                                                <td class="ps-2 pe-2">:</td>
                                                <td>{{ $system_setting->swift_code?->name ?? '-' }}</td>
                                            </tr>
                                        @endif
                                    </tbody>
                                </table>
                            @else
                                <p class="mb-0">Payment Gateway</p>
                            @endif
                        </div>
                    </div>
                </div>
                <div class="table-responsive border-top">
                    <table class="table table-bordered m-0">
                        <thead class="table-light">
                            <tr>
                                <th>Judul Penelitian</th>
                                <th>Harga</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="text-nowrap">Penelitian {{ $payment->research->researchCategory->name }}</td>
                                <td>
                                    <div class="d-flex align-items-center gap-3">
                                        <div>Rp.</div>
                                        <div class="ms-auto">@number($price)</div>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="border-top text-center mt-3 p-3 fw-semibold">Terimakasih Atas Kerjasamanya !</div>
            </div>
            <div class="row g-3 mt-3">
                <div class="col-lg-3 col-12">
                    <button class="btn btn-info btn-sm" data-bs-toggle="modal" data-bs-target="#listPrice">Daftar Harga <i class="fa-solid fa-circle-info fa-fw ms-2"></i></button>
                </div>
                <div class="col-lg-9 col-12 justify-content-end text-end">
                    <div class="row row-cols-auto g-1 justify-content-end text-end">
                        @if ($auth->hasAnyRole('admin', 'ketua') && $payment->status != 'paid')
                            <div class="col">
                                <button class="btn btn-warning btn-sm" data-bs-toggle="modal" data-bs-target="#changeDueDate">Ubah Jatuh Tempo <i class="fa-solid fa-pencil-alt fa-fw ms-2"></i></button>
                            </div>
                            <div class="col">
                                <button class="btn btn-warning btn-sm" data-bs-toggle="modal" data-bs-target="#changePrice">Ubah Harga <i class="fa-solid fa-pencil-alt fa-fw ms-2"></i></button>
                            </div>
                            <div class="col">
                                <button class="btn btn-danger btn-sm" wire:click="forcePaidConfirm()">Jadikan Terbayar Secara Paksa <i class="fa-solid fa-lock-open fa-fw ms-2"></i></button>
                            </div>
                        @endif
                        @if ($price > 0)
                            <div class="col">
                                <button class="btn btn-instagram btn-sm" wire:click="printInvoice()">Cetak Invoice <i class="fa-solid fa-print fa-fw ms-2"></i></button>
                            </div>
                            @if ($payment->status == 'paid')
                                <div class="col">
                                    <button class="btn btn-facebook btn-sm" wire:click="printReceipt()">Cetak Kuitansi <i class="fa-solid fa-print fa-fw ms-2"></i></button>
                                </div>
                            @endif
                        @endif
                    </div>
                </div>
            </div>
            @if (($price > 0 && $auth->hasAnyRole('dosen', 'mahasiswa', 'umum') && Carbon::now()->lt($payment->valid_until)) || Carbon::now()->isSameDay($payment->valid_until))
                <div class="mt-3 text-end">
                    @if ($is_use_payment_gateway && $payment->status == 'unpaid')
                        <button class="btn btn-warning" wire:click="resetPaymentConfirm()">Reset Pembayaran <i class="fa-solid fa-arrow-rotate-right fa-fw ms-2"></i></button>
                        <button class="btn btn-danger" wire:click="$dispatch('payWithMidtrans')">Bayar <i class="fa-solid fa-bolt fa-fw ms-2"></i></button>
                    @endif
                </div>
            @endif
        </div>
        @if (!$is_use_payment_gateway && (($price >= 0 && $auth->hasAnyRole('admin', 'ketua')) || ($price > 0 && $auth->hasAnyRole('mahasiswa', 'dosen', 'umum'))))
            <div class="{{ !$is_use_payment_gateway ? 'col-lg-4' : '' }} col-12">
                <div class="row g-3">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="mb-0">Pembayaran</h5>
                                <hr class="my-3">
                                <div class="row g-3">
                                    <div class="col-12">
                                        <div class="form-label">Bank</div>
                                        <div>
                                            <div wire:key="{{ rand() }}">
                                                <select x-data x-ref="input" x-init="$($refs.input).selectize({
                                                    dropdownParent: 'body',
                                                    onChange: function(e) {
                                                        @this.set('bank_id', $('#bank_id').val());
                                                    }
                                                });" wire:model.live="bank_id" id="bank_id" {{ $auth->hasAnyRole('mahasiswa', 'dosen', 'umum') && (Carbon::now()->lt($payment->valid_until) || (Carbon::now()->isSameDay($payment->valid_until) && in_array($payment->status, ['unpaid', 'rejected']))) ? '' : 'disabled' }}>
                                                    <option value="">-- Pilih Bank --</option>
                                                    @foreach ($banks as $item)
                                                        <option value="{{ $item->id }}">{{ $item->name }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        @error('bank_id')
                                            <span class="invalid-feedback d-block">{{ $message }}</span>
                                        @enderror
                                    </div>
                                    <div class="col-12">
                                        <div class="form-label">Nomor Rekening Anda</div>
                                        <input type="tel" class="form-control @error('account_number') is-invalid @enderror" wire:model="account_number" placeholder="Nomor Rekening Anda..." onkeypress="return onlyNumberKey(event)" maxlength="20" {{ $auth->hasAnyRole('mahasiswa', 'dosen', 'umum') && (Carbon::now()->lt($payment->valid_until) || (Carbon::now()->isSameDay($payment->valid_until) && in_array($payment->status, ['unpaid', 'rejected']))) ? '' : 'disabled' }}>
                                        @error('account_number')
                                            <span class="invalid-feedback d-block">{{ $message }}</span>
                                        @enderror
                                    </div>
                                    <div class="col-12">
                                        <div class="form-label">Nama Pemilik Rekening</div>
                                        <input type="text" class="form-control @error('sender_name') is-invalid @enderror" wire:model="sender_name" placeholder="Nama Pemilik Rekening..." {{ $auth->hasAnyRole('mahasiswa', 'dosen', 'umum') && (Carbon::now()->lt($payment->valid_until) || Carbon::now()->isSameDay($payment->valid_until)) && in_array($payment->status, ['unpaid', 'rejected']) ? '' : 'disabled' }}>
                                        @error('sender_name')
                                            <span class="invalid-feedback d-block">{{ $message }}</span>
                                        @enderror
                                    </div>
                                    <div class="col-12">
                                        <div class="form-label">Tanggal Bayar</div>
                                        <input type="text" x-data x-ref="input" x-init="$($refs.input).daterangepicker({
                                            showDropdowns: true,
                                            singleDatePicker: true,
                                            autoApply: true,
                                            autoUpdateInput: true,
                                            timePicker: false,
                                            startDate: '{{ !$pay_date ? Carbon::now()->format('d/m/Y') : $pay_date }}',
                                            locale: {
                                                format: 'DD/MM/YYYY',
                                                cancelLabel: 'Clear'
                                            },
                                        }).on('apply.daterangepicker', function(e, picker) {
                                            @this.set('pay_date', $('#pay_date').val());
                                            $('#pay_date').val(picker.startDate.format('DD/MM/YYYY'));
                                        });" id="pay_date" placeholder="DD/MM/YYYY" class="form-control" {{ $auth->hasAnyRole('mahasiswa', 'dosen', 'umum') && (Carbon::now()->lt($payment->valid_until) || (Carbon::now()->isSameDay($payment->valid_until) && in_array($payment->status, ['unpaid', 'rejected']))) ? '' : 'disabled' }} readonly>
                                        @error('pay_date')
                                            <span class="invalid-feedback d-block">{{ $message }}</span>
                                        @enderror
                                    </div>
                                    <div class="col-12">
                                        <div class="form-label">File Bukti Bayar</div>
                                        @if (!$auth->hasAnyRole('admin'))
                                            <div x-data="{ isUploading: false, progress: 0 }" x-on:livewire-upload-start="isUploading = true" x-on:livewire-upload-finish="isUploading = false" x-on:livewire-upload-error="isUploading = false" x-on:livewire-upload-progress="progress = $event.detail.progress">
                                                <div class="input-group">
                                                    <input type="file" wire:model="proof_of_payment" class="form-control @error('proof_of_payment') is-invalid @enderror" accept=".pdf,.png,.jpeg,.jpg,.webp" {{ $auth->hasAnyRole('mahasiswa', 'dosen', 'umum') && (Carbon::now()->lt($payment->valid_until) || Carbon::now()->isSameDay($payment->valid_until)) && in_array($payment->status, ['unpaid', 'rejected']) ? '' : 'disabled' }}>
                                                    <button class="btn btn-info btn-sm" @if ($proof_of_payment || $proof_of_payment_old) data-fancybox="proof_of_payment" data-src="{{ $proof_of_payment ? $proof_of_payment->temporaryUrl() : asset('storage/' . $proof_of_payment_old) }}" @else disabled @endif>Pratinjau <i class="fa-regular fa-eye fa-fw ms-2"></i></button>
                                                </div>
                                                <div x-show="isUploading">
                                                    <progress max="100" x-bind:value="progress"></progress>
                                                </div>
                                            </div>
                                            @error('proof_of_payment')
                                                <span class="invalid-feedback d-block">{{ $message }}</span>
                                            @enderror
                                        @else
                                            <button class="btn btn-info btn-sm" @if ($proof_of_payment_old) data-fancybox="proof_of_payment" data-src="{{ asset('storage/' . $proof_of_payment_old) }}" @else disabled @endif>Pratinjau <i class="fa-regular fa-eye fa-fw ms-2"></i></button>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    @if ($auth->hasAnyRole('admin', 'ketua') && $payment->status == 'awaiting-confirmation')
                        <div class="col-12">
                            <div class="row g-2">
                                <div class="col-6">
                                    <button class="btn btn-label-danger btn-sm w-100" wire:click="$dispatch('openModal')">Tolak <i class="fa-solid fa-circle-xmark fa-fw ms-2"></i></button>
                                </div>
                                <div class="col-6">
                                    <button class="btn btn-success btn-sm w-100" wire:click="acceptPaymentConfirm()" wire:loading.attr="disabled">Terima <i class="fa-solid fa-circle-check fa-fw ms-2"></i></button>
                                </div>
                            </div>
                        </div>
                    @endif
                    @if ($auth->hasAnyRole('mahasiswa', 'dosen', 'umum') && (Carbon::now()->lt($payment->valid_until) || Carbon::now()->isSameDay($payment->valid_until)) && in_array($payment->status, ['unpaid', 'rejected']))
                        <div class="col-12">
                            <button class="btn btn-primary w-100 mt-1" wire:click="sendConfirmation()" @if (!$bank_id || !$account_number || !$sender_name || !$pay_date || !$proof_of_payment)  @endif wire:loading.attr="disabled">Kirim <i class="fa-regular fa-paper-plane fa-fw ms-2"></i></button>
                        </div>
                    @endif
                    @if ($payment->status == 'rejected')
                        <div class="col-12">
                            <div class="card">
                                <div class="card-body">
                                    <h5 class="mb-0">Keterangan Tolak</h5>
                                    <hr class="my-3">
                                    <p class="mb-0 text-danger">{{ $payment->description_declined }}</p>
                                </div>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        @endif
    </div>
</div>
@push('scripts')
    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js" defer></script>
    <script>
        $(document).ready(function() {
            Livewire.on("printInvoice", () => {
                window.open("{{ request()->getSchemeAndHttpHost() }}/cetak/invoice", "_blank");
            });
            Livewire.on("printReceipt", () => {
                window.open("{{ request()->getSchemeAndHttpHost() }}/cetak/kuitansi", "_blank");
            });
        });
    </script>
    <script>
        $(document).ready(function() {
            Livewire.on("openModal", () => {
                jQuery('#rejectModal').modal('show');

                $('#rejectModal').on('shown.bs.modal', function() {
                    $(this).find('[autofocus]').focus();
                });
            });
            Livewire.on("closeModal", () => {
                jQuery('#rejectModal').modal('hide');
                jQuery('#changePrice').modal('hide');
                jQuery('#changeDueDate').modal('hide');
                jQuery('#listPrice').modal('hide');
            });
        });
    </script>
    @if (!$is_use_payment_gateway)
        <script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.15.2/js/selectize.min.js" integrity="sha512-IOebNkvA/HZjMM7MxL0NYeLYEalloZ8ckak+NDtOViP7oiYzG5vn6WVXyrJDiJPhl4yRdmNAG49iuLmhkUdVsQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4/dist/fancybox.umd.min.js"></script>
    @else
        @if ($payment->status == 'unpaid')
            <script type="text/javascript">
                $(document).ready(function() {
                    Livewire.on("payWithMidtrans", () => {
                        window.snap.pay('{{ $snap_token }}', {
                            onSuccess: function(result) {
                                @this.processPaymentGateway('success');
                            },
                            onPending: function() {
                                @this.processPaymentGateway('pending');
                            },
                            onError: function() {
                                @this.processPaymentGateway('error');
                            },
                            onClose: function() {
                                @this.processPaymentGateway('pending');
                            }
                        });
                    });
                });
            </script>
        @endif
    @endif
@endpush