@php
    use SimpleSoftwareIO\QrCode\Facades\QrCode;
@endphp
@extends(Auth::user()->extender())
@section('title'){{__('Print')}} {{ __('Invoice') }} @endsection
@section('content')




<style>
    #invoice-container {
        border: 1px solid #ccc;
        padding: 20px;
        width: 80%;
        margin: auto;
    }

    #print-button {
        text-align: right;
        margin-bottom: 20px;
    }

    #logo {
        text-align: center;
        margin-bottom: 20px;
    }
    #qr {
        text-align: center;
        margin-bottom: 20px;
    }

    #invoice-details {
        margin-bottom: 20px;
    }

    table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 20px;
    }

    th,
    td {
        border: 1px solid #ccc;
        padding: 10px;
        text-align: left;
    }
</style>


<div class="row">
    <div class="col-md-12">
        <div id="print-button">
            @php $this_user_id = json_decode($locate_purchase_trx->request)->user_id??2; @endphp

            <a href="{{route(Auth::user()->user_dashboard())}}"><button class="btn btn-primary">New
                    Topup</button></a>
                    
            <button class="btn btn-success" onclick="printDiv()">Print</button>
        </div>
        <div class="main-card mb-3 card">
            <div class="row justify-content-center text-center m-4">
                <div class="col-md-4">
                    <div class="d-flex align-items-center justify-content-center">
                        <!-- Added classes for margin and alignment -->
                        @if ($locate_purchase_trx->status == 'success')
                        <i class="fa fa-check-circle text-success fa-3x mr-2" aria-hidden="true"></i>
                        <!-- Increased icon size and added margin -->
                        @else
                        <i class="fa fa-times-circle text-danger fa-3x mr-2" aria-hidden="true"></i>
                        <!-- Increased icon size and added margin -->
                        @endif
                        <span class="h4">Transaction {{ucwords($locate_purchase_trx->status)}}!</span>
                        <!-- Increased text size -->
                    </div>
                </div>
            </div>





            <div style="background: #fff; color: #111; font-family: 'Roboto', Arial, Helvetica, sans-serif; font-size: 15px;" class="card-body">
                <div id="printableArea" class="row" style="margin:0;">
                    <div class="col-md-12" style="padding: 0;">
                        <div style="text-align:center; margin-bottom: 10px;">
                            <h1 style="font-weight: bold; letter-spacing: 2px; margin-bottom: 5px;">VivaPe</h1>
                            <h6 style="font-size: 16px; font-weight: 600; margin-bottom: 2px;">{{$locate_purchase_trx->wallet->user->name}} - {{$locate_purchase_trx->wallet->user->phone}}</h6>
                            <h3 style="font-size: 20px; font-weight: bold; margin-bottom: 10px;">Recharge Invoice</h3>
                        </div>
                        <table style="width:100%; border: none; color: #111;">
                            <tr>
                                <td style="font-weight:600; padding: 4px 0;">Time:</td>
                                <td style="padding: 4px 0;">{{$locate_purchase_trx->trx_time}}</td>
                            </tr>
                            <tr>
                                <td style="font-weight:600; padding: 4px 0;">Transaction ID:</td>
                                <td style="padding: 4px 0;">{{$locate_purchase_trx->transaction_id}}</td>
                            </tr>
                            <tr>
                                <td style="font-weight:600; padding: 4px 0;">Phone:</td>
                                <td style="padding: 4px 0;">{{$locate_purchase_trx->phone_number}}</td>
                            </tr>
                            <tr>
                                <td style="font-weight:600; padding: 4px 0;">Operator:</td>
                                <td style="padding: 4px 0;">{{$locate_purchase_trx->product->operator->name}}</td>
                            </tr>
                            <tr>
                                <td style="font-weight:600; padding: 4px 0;">Receiving:</td>
                                <td style="padding: 4px 0;">{{$locate_purchase_trx->product_country_currency}} {{$locate_purchase_trx->receiver_amount}}</td>
                            </tr>
                        </table>
                        <div style="border-top: 2px solid #111; margin: 12px 0;"></div>
                        <h2 style="font-size: 22px; font-weight: bold; color: #000; margin-bottom: 0;">
                            Total: {{$locate_purchase_trx->wallet_currency}} {{$locate_purchase_trx->selling_price_pyrwlt+$locate_purchase_trx->service_charge}}
                        </h2>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>



@include('admin.others.infyomincludes.printer_view_js')
@endsection