@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="transaction">
    <div class="d-flex justify-content-center">
        <div id="transaction">
            @foreach ($transaction as $t)
                <div class="card card-transaction border-gray-400">
                    <div class="card-body">
                        <h5 class="text-primary fw-bold">{{ $t->number }}</h5>

                        <div class="row">
                            <div class="col-md-4 mb-3">
                                <small class="fw-bold">Tgl. Transaksi</small><br />
                                {{ Common::dateFormat($t->created_at, 'dd mmmm yyyy, hh:ii WIB') }}
                            </div>
                            <div class="col-md-4 mb-3">
                                <small><b>Paket</b></small><br />
                                {{ $t->package->name . ' - ' . ucfirst($t->package_time_name) }}
                            </div>
                            <div class="col-md-4 mb-3">
                                <small><b>Metode Pembayaran</b></small><br />
                                {{ $t->paymentMethod->name }}
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-8">
                                <table class="table-padding">
                                    <tr>
                                        <td style="width: 130px;">Harga</td>
                                        <td style="width: 30px;">Rp</td>
                                        <td class="text-end">{{ number_format($t->subtotal, 0, '', '.') }}</td>
                                    </tr>
                                    <tr>
                                        <td>Biaya Transaksi</td>
                                        <td>Rp</td>
                                        <td class="text-end">{{ number_format($t->fee, 0, '', '.') }}</td>
                                    </tr>
                                    <tr>
                                        <td class="fw-bold">Total</td>
                                        <td class="fw-bold">Rp</td>
                                        <td class="fw-bold text-end">{{ number_format($t->total, 0, '', '.') }}</td>
                                    </tr>
                                </table>
                            </div>
                            <div class="col-md-4">
                                <hr class="mt-0" />
                                {!! $t->status_badge !!}

                                @if ($t->status == 0)
                                    <div class="mt-3">
                                        <a href="{{ route('purchase.payment', $t->encrypted_id) }}" class="fw-bold text-success">
                                            <small><i class="fa-solid fa-money-check-alt text-center" style="width: 20px;"></i> &nbsp;Bayar Sekarang</small>
                                        </a>
                                    </div>
                                    <div class="mt-1">
                                        <a href="javascript:void(0)" class="fw-bold text-danger btn-delete" data-id="{{ $t->encrypted_id }}">
                                            <small><i class="fa-solid fa-trash-alt text-center" style="width: 20px;"></i> &nbsp;Hapus</small>
                                        </a>
                                    </div>
                                @elseif ($t->status == 1)
                                    <div class="mt-3">
                                        <small class="fw-bold">Tgl. Pembayaran</small><br />
                                        {{ Common::dateFormat($t->payment_date, 'dd mmmm yyyy, hh:ii WIB') }}
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach

            {{ $transaction->links() }}
        </div>
    </div>
</section>
@endsection

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

    .card-transaction {
        width: 700px;
        border: 0;
        border-radius: 20px;
    }
    .card-transaction .card-body {
        padding: 25px;
    }

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

@push('scripts')
<script>
$(document).ready(function() {
    $("#transaction").on("click", ".btn-delete", function() {
        let url = "{{ route('transaction.destroy', 0) }}"
        url = url.replace("0", $(this).data("id"))

        deleteConfirm(url, "reload")
    })
})
</script>
@endpush