@php
use App\Models\ParameterDetail;
use App\Constants\PaymentMethod;
@endphp

@extends('layouts.frontend.index')
@section('title', $label)
@section('meta_title', $label , ' - ' . Config::get('app.name'))
@section('meta_description', Config::get('param.meta.description'))
@section('meta_keywords', Config::get('param.meta.keywords'))

@section('content')
<x-section-page :label="$label" />

<section class="purchase">
    <div class="d-flex justify-content-center">
        <div class="card card-container">
            <div class="card-body">
                <div class="row">
                    <div class="col-sm-6">
                        <h6><b>Pembayaran Online</b></h6>

                        <div class="clearfix">
                            <div class="float-start">
                                <h2 class="text-primary-dark">
                                    Rp. {{ number_format($transaction->total, 0, '', '.') }}
                                </h2>
                                <div class="d-none d-sm-block">
                                    <small class="text-muted">No. Transaksi : {{ $transaction->number }}</small>
                                </div>
                                <div class="d-block d-sm-none">
                                    <small class="text-muted">{{ $transaction->number }}</small>
                                </div>
                            </div>
                            <div class="float-end text-end">
                                <img src="{{ asset('images/payment/' . $transaction->paymentMethod->value2) }}" class="payment-method-logo" />
                                <div style="margin-top: 11px;">
                                    {!! $transaction->status_badge !!}
                                </div>
                            </div>
                        </div>
                        <hr />

                        @if ($transaction->payment_method == PaymentMethod::qris)
                            Scan <b>QR Code</b> berikut ini :<br />

                            <div class="p-3 my-3 text-center" style="background: #e6ebef;">
                                <img src="{{ $transaction->payment_code }}" class="img-fluid" style="width: 250px;" />
                            </div>

                            <div class="mb-3">
                                <a href="{{ route('transaction.download.qrcode', $transaction->encrypted_id) }}">
                                    <i class="fa-solid fa-arrow-alt-circle-down"></i> DOWNLOAD QR-CODE
                                </a>
                            </div>
                        @elseif ($transaction->payment_method == PaymentMethod::mandiri)
                            Kode Merchant :
                            <h2 class="text-secondary">
                                {{ $transaction->payment_code->merchant }}
                                <span style="font-size: 12px;">
                                    <a href="javascript:void(0)" class="btn-copy-number text-muted" data-clipboard-text="{{ $transaction->payment_code->merchant }}">
                                        <i class="fa-regular fa-clone"></i> Copy
                                    </a>
                                </span>
                            </h2>

                            <div class="clearfix">
                                <div class="float-start">

                                </div>
                                <div class="float-end text-end">

                                </div>
                            </div>
                            No. Virtual Account :
                            <h2 class="text-secondary">
                                {{ $transaction->payment_code->va }}
                                <span style="font-size: 12px;">
                                    <a href="javascript:void(0)" class="btn-copy-number text-muted" data-clipboard-text="{{ $transaction->payment_code->va }}">
                                        <b><small><i class="fa-regular fa-clone"></i> Copy</small></b>
                                    </a>
                                </span>
                            </h2>
                        @else
                            <div class="clearfix">
                                <div class="float-start">
                                    No. Virtual Account :
                                </div>
                                <div class="float-end text-end">
                                    <a href="javascript:void(0)" class="btn-copy-number" data-clipboard-text="{{ $transaction->payment_code }}">
                                        <b><small><i class="fa-regular fa-clone"></i> Copy Number</small></b>
                                    </a>
                                </div>
                            </div>
                            <h2 class="text-secondary">{{ $transaction->payment_code }}</h2>
                        @endif

                        <div class="mb-3">
                            <small>
                                Harap lakukan pembayaran sebelum
                                <b>{{ Common::dateFormat($transaction->payment_expire_at, 'dd mmmm yyyy, hh:ii WIB') }}</b>.<br />Terimakasih.
                            </small>
                        </div>

                        <span class="text-secondary"><i class="fa-solid fa-question-circle"></i> &nbsp;Cara Bayar</span>

                        <div class="accordion accordion-flush" id="accordion-howtopay">
                            @foreach ($howtopay as $index => $h)
                                <div class="accordion-item">
                                    <h2 class="accordion-header">
                                        <button class="accordion-button collapsed px-0" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapse-{{ $index }}" aria-expanded="false" aria-controls="flush-collapse-{{ $index }}">
                                            {{ $h->name }}
                                        </button>
                                    </h2>
                                    <div id="flush-collapse-{{ $index }}" class="accordion-collapse collapse" data-bs-parent="#accordion-howtopay">
                                        <div class="accordion-body">
                                            <ol style="margin-left: -25px;">
                                                @foreach ($h->steps as $s)
                                                    <li>{!! $s !!}</li>
                                                @endforeach
                                            </ol>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>

                        @if ($transaction->status == 0)
                            <div class="d-grid gap-2 mt-4">
                                <button type="button" id="btn-confirm" class="btn btn-primary btn-py">
                                    CEK STATUS PEMBAYARAN
                                </button>
                            </div>
                        @elseif ($transaction->status == 1)
                            <div class="alert alert-success mt-4">
                                <b><i class="fa-solid fa-check-circle"></i> &nbsp;Pembayaran Berhasil</b>
                                <div class="mt-1">
                                    Pembayaran Anda telah kami terima. Selamat bergabung bersama kami, Terimakasih.
                                </div>
                            </div>
                        @elseif ($transaction->status == 2)
                            <div class="alert alert-danger mt-4">
                                <b><i class="fa-solid fa-times-circle"></i> &nbsp;Pembayaran Gagal</b>
                                <div class="mt-1">
                                    Maaf, Transaksi Anda gagal dilakukan, silahkan untuk melakukan transaksi ulang. Terimakasih.
                                </div>
                            </div>
                        @elseif ($transaction->status == 3)
                            <div class="alert alert-danger mt-4">
                                <b><i class="fa-solid fa-times-circle"></i> &nbsp;Transaksi Kadaluarsa</b>
                                <div class="mt-1">
                                    Maaf, Transaksi Anda sudah kadaluarsa. silahkan untuk melakukan transaksi ulang. Terimakasih.
                                </div>
                            </div>
                        @elseif ($transaction->status == 4)
                            <div class="alert alert-info mt-4">
                                <b><i class="fa-solid fa-times-circle"></i> &nbsp;Transaksi Refund</b>
                                <div class="mt-1">
                                    Maaf, Transaksi Anda tidak dapat diproses. Kami akan mengembalikan uang Anda segera. Terimakasih.
                                </div>
                            </div>
                        @endif
                    </div>
                    <div class="col-sm-6">
                        <div class="card card-package-info shadow-sm" id="loading">
                            <div class="card-header text-center">
                                <b>.....</b>
                                <h4>
                                    .....
                                    <span style="font-size: 12px;">/ .....</span>
                                </h4>

                                <small>
                                    .....
                                </small>
                            </div>
                            <div class="card-body text-center">
                                <img src="{{ asset('images/loading.gif') }}" style="width: 50px;" />
                            </div>
                        </div>
                        <div class="card card-package-info shadow-sm" id="package">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@push('styles')
<style>
    .purchase {
        background-color: #deedfa;
    }

    .purchase .card-container {
        border: 0;
        border-radius: 20px;
        width: 900px;
        padding: 15px;
    }

    .card-package {
        text-align : center;
        border: 1px solid #eeeeee;
        color: #697179;
    }
    .card-package.active {
        border: 1px solid var(--blue);
        color: #212529;
    }
    .card-package:hover:not(.active) {
        cursor: pointer;
        color: #212529;
        border: 1px solid #b9b9b9;
    }

    .card-package-info {
        border: 1px solid #eeeeee;
    }
    .card-package-info small {
        font-size: 12px;
    }
    .card-package-info td {
        font-size: 14px;
        padding-top: 8px;
        padding-bottom: 8px;
        border-bottom: 1px dashed #cdd5df;
    }
    .card-package-info .card-header {
        border: 0;
    }

    .card-method-payment {
        padding: 0 1.2rem;
        border: 1px solid #eeeeee;
    }

    .btn-group .btn {
        font-weight: normal;
    }

    .payment-method-logo {
        height: 45px;
    }

    .accordion-button:not(.collapsed) {
        background-color: transparent;
        border-bottom: 1px solid #ccc;
    }
    .accordion-button:focus {
        box-shadow: none;
    }

    @media (max-width: 576px) {
        .payment-method-logo {
            height: 30px;
        }
    }

    @media (max-width: 768px) {
        .purchase .card-container {
            width: 100%;
        }
    }
</style>
@endpush

@push('scripts')
<script src="{{ asset('js/clipboard.min.js') }}"></script>

<script>
let package_id = "{{ $transaction->package->id }}"
let package_time = "{{ $transaction->package_time }}"

$(document).ready(function() {
    getPackage()

    const clipboard = new ClipboardJS(".btn-copy-number")

    clipboard.on("success", function(e) {
        $(e.trigger).html(`<b><small><i class="fa-solid fa-check-circle"></i> Copied</small></b>`)

        setTimeout(function(){
            $(e.trigger).html(`<b><small><i class="fa-regular fa-clone"></i> Copy Number</small></b>`)
        }, 1000)
    })

    $("#btn-confirm").click(function() {
        window.location.reload()
    })
})

function getPackage()
{
    const formData = {id: package_id, time: package_time}

    $("#package").hide()
    $("#loading").show()

    $.ajax({
        type: "POST",
        url: "{{ route('purchase.get.package') }}",
        data: formData,
        dataType: "json",
        success: function (response) {
            $("#loading").hide()
            $("#package").html(response.data.package).show()
            $("#package").find("h4").hide()
        },
        error: function (xhr, ajaxOptions, thrownError) {
            ajaxError(xhr.status)
        }
    })
}
</script>
@endpush