@extends('layouts.guest')
@section('title', $title)
@section('content')

<style>
/* Page background */
body {
    background-color: #f4f6f9; /* light gray */
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Container */
.invoice-container {
    max-width: 900px;
    margin: 40px auto;
    padding: 30px;
    background: #ffffff; /* keep the invoice card white */
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    color: #333;
}

/* Header */
.invoice-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid #eee;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.invoice-header img {
    max-width: 120px;
}

.invoice-header address {
    text-align: right;
    font-style: normal;
    line-height: 1.5;
}

/* Section titles */
.invoice-section h4 {
    font-size: 18px;
    margin-bottom: 10px;
    color: #3c8dbc;
}

/* Table styles */
.invoice-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.invoice-table td {
    padding: 10px 0;
    vertical-align: top;
}

.invoice-table tr:not(:last-child) td {
    border-bottom: 1px solid #eee;
}

/* Payment buttons */
.payment-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.payment-buttons form {
    flex: 1;
    min-width: 150px;
}

.payment-buttons button, 
.payment-buttons .razorpay-payment-button, 
.payment-buttons .stripe-button-el {
    width: 100%;
    padding: 12px;
    font-size: 16px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    background-color: #3c8dbc;
    color: #fff;
    transition: background 0.3s ease;
}

.payment-buttons button:hover, 
.payment-buttons .razorpay-payment-button:hover, 
.payment-buttons .stripe-button-el:hover {
    background-color: #337ab7;
}
 .payment-buttons {
        flex-direction: column;
    }
/* Paid status */
.status-paid {
    color: #28a745;
    font-weight: bold;
}

/* Responsive */
@media(max-width: 768px){
    .invoice-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .invoice-header address {
        text-align: center;
        margin-top: 15px;
    }

    .payment-buttons {
        flex-direction: column;
    }
}
</style>

<div class="invoice-container">
    <div class="invoice-header">
        @if(!empty($transaction->business->logo))
            <img src="{{ asset( 'uploads/business_logos/' . $transaction->business->logo ) }}" alt="Logo">
        @endif
        <address>
            <strong>{{ $transaction->business->name }}</strong><br>
            {{ $transaction->location->name ?? '' }}
            @if(!empty($transaction->location->landmark))
                <br>{{$transaction->location->landmark}}
            @endif
            @if(!empty($transaction->location->city) || !empty($transaction->location->state) || !empty($transaction->location->country))
                <br>{{implode(',', array_filter([$transaction->location->city, $transaction->location->state, $transaction->location->country]))}}
            @endif
            @if(!empty($transaction->business->tax_number_1))
                <br>{{$transaction->business->tax_label_1}}: {{$transaction->business->tax_number_1}}
            @endif
            @if(!empty($transaction->business->tax_number_2))
                <br>{{$transaction->business->tax_label_2}}: {{$transaction->business->tax_number_2}}
            @endif
            @if(!empty($transaction->location->mobile))
                <br>@lang('contact.mobile'): {{$transaction->location->mobile}}
            @endif
            @if(!empty($transaction->location->email))
                <br>@lang('business.email'): {{$transaction->location->email}}
            @endif
        </address>
    </div>

    <div class="invoice-section">
        <h4>@lang('lang_v1.payment_for_invoice_no'): {{$transaction->invoice_no}}</h4>
        <table class="invoice-table">
            <tr>
                <td><strong>@lang('contact.customer'):</strong><br>{!!$transaction->contact->contact_address!!}</td>
            </tr>
            <tr>
                <td><strong>@lang('sale.sale_date'):</strong> {{$date_formatted}}</td>
            </tr>
            <tr>
                <td><h4>@lang('sale.total_amount'): <span>{{$total_amount}}</span></h4></td>
            </tr>
            <tr>
                <td><h4>@lang('sale.total_paid'): <span>{{$total_paid}}</span></h4></td>
            </tr>
        </table>

        @if($transaction->payment_status != 'paid')
            <table class="invoice-table">
                <tr>
                    <td><h4>@lang('sale.total_payable'): <span>{{$total_payable_formatted}}</span></h4></td>
                </tr>
            </table>

            <div class="payment-buttons">
                <!-- Razorpay -->
                <form action="{{route('confirm_payment', ['id' => $transaction->id])}}" method="POST">
                    <input type="hidden" name="gateway" value="razorpay">
                    <script
                        src="https://checkout.razorpay.com/v1/checkout.js"
                        data-key="{{$pos_settings['razor_pay_key_id']}}"
                        data-amount="{{$total_payable*100}}"
                        data-buttontext="Pay with Razorpay"
                        data-name="{{$transaction->business->name}}"
                        data-theme.color="#3c8dbc">
                    </script>
                    {{ csrf_field() }}
                </form>

                <!-- Stripe -->
                @if(!empty($pos_settings['stripe_public_key']) && !empty($pos_settings['stripe_secret_key']))
                    @php $code = strtolower($business_details->currency_code); @endphp
                    <form action="{{route('confirm_payment', ['id' => $transaction->id])}}" method="POST">
                        {{ csrf_field() }}
                        <input type="hidden" name="gateway" value="stripe">
                        <script
                            src="https://checkout.stripe.com/checkout.js" class="stripe-button"
                            data-key="{{$pos_settings['stripe_public_key']}}"
                            data-amount="@if(in_array($code, ['bif','clp','djf','gnf','jpy','kmf','krw','mga','pyg','rwf','ugx','vnd','vuv','xaf','xof','xpf'])) {{$total_payable}} @else {{$total_payable*100}} @endif"
                            data-name="{{$transaction->business->name}}"
                            data-description="Pay with stripe"
                            data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
                            data-locale="auto"
                            data-currency="{{$code}}">
                        </script>
                    </form>
                @endif

                <!-- Qi -->
                @if(!empty($pos_settings['qi_terminal']) && !empty($pos_settings['qi_password']) && !empty($pos_settings['qi_terminal_url'])&& !empty($pos_settings['qi_username']))
                    <form action="{{route('confirm_payment', ['id' => $transaction->id])}}" method="POST">
                        {{ csrf_field() }}
                        <input type="hidden" name="gateway" value="qi">
                        <button type="submit">الدفع الالكتروني</button>
                    </form>
                @endif
            </div>
        @else
            <table class="invoice-table">
                <tr>
                    <td><h4>@lang('sale.payment_status'): <span class="status-paid">@lang('lang_v1.paid')</span></h4></td>
                </tr>
            </table>
        @endif
    </div>
</div>
@endsection
<script>
document.addEventListener('DOMContentLoaded', function () {
    @if (session()->has('status'))
        // Safely encode PHP values to JS to avoid quotes/syntax issues
        const _sw_status = {!! json_encode(session('status')['success'] ?? null) !!};
        const _sw_msg = {!! json_encode(session('status')['msg'] ?? '') !!};

        // If status is null/undefined treat it as success=false (optional)
        const icon = (_sw_status === true || _sw_status === '1' || _sw_status === 1) ? 'success' : 'error';

        if (_sw_msg) {
            Swal.fire({
                icon: icon,
                title: _sw_msg,
                timer: 4500,
                showConfirmButton: true
            });
        }
    @endif
});
</script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>