@extends('layouts.admin')

@section('title', 'Payment Receipt')

@section('content')
<div class="row g-3 mb-3">
    <div class="col-md-8">
        <h2 class="mb-2 text-body-emphasis">Payment Receipt</h2>
        <p class="text-body-tertiary lh-sm">Receipt for transaction #{{ $payment->transaction_id ?? 'TXN000001' }}</p>
    </div>
    <div class="col-md-4 d-flex justify-content-end">
        <div class="btn-group" role="group">
            <a href="{{ route('admin.payments.show', $payment->id ?? 1) }}" class="btn btn-phoenix-secondary">
                <span class="fas fa-arrow-left me-2"></span>Back to Payment
            </a>
            <button class="btn btn-phoenix-primary" onclick="window.print()">
                <span class="fas fa-print me-2"></span>Print Receipt
            </button>
            <button class="btn btn-phoenix-info dropdown-toggle" type="button" data-bs-toggle="dropdown">
                <span class="fas fa-download me-2"></span>Download
            </button>
            <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#" onclick="downloadPDF()"><span class="fas fa-file-pdf me-2"></span>PDF</a></li>
                <li><a class="dropdown-item" href="#" onclick="sendEmail()"><span class="fas fa-envelope me-2"></span>Email to Customer</a></li>
            </ul>
        </div>
    </div>
</div>

<!-- Receipt Container -->
<div class="row justify-content-center">
    <div class="col-lg-8">
        <div class="card" id="receipt-content">
            <div class="card-body p-5">
                <!-- Header -->
                <div class="row mb-4">
                    <div class="col-6">
                        <div class="d-flex align-items-center">
                            <div class="avatar avatar-xl me-3">
                                <div class="avatar-name rounded-circle bg-primary-subtle text-primary">
                                    <span class="fas fa-fist-raised fs-3"></span>
                                </div>
                            </div>
                            <div>
                                <h3 class="mb-0 text-primary">Phoenix Taekwondo</h3>
                                <p class="text-body-tertiary mb-0">Martial Arts Academy</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-6 text-end">
                        <h2 class="text-body-emphasis mb-1">RECEIPT</h2>
                        <p class="text-body-tertiary mb-0">#{{ $payment->transaction_id ?? 'TXN000001' }}</p>
                    </div>
                </div>

                <!-- Business Info -->
                <div class="row mb-4">
                    <div class="col-6">
                        <h6 class="text-body-emphasis mb-2">From:</h6>
                        <address class="text-body-tertiary mb-0">
                            <strong>Phoenix Taekwondo Academy</strong><br>
                            123 Martial Arts Street<br>
                            Phoenix, AZ 85001<br>
                            Phone: (555) 123-4567<br>
                            Email: info@phoenixtaekwondo.com
                        </address>
                    </div>
                    <div class="col-6">
                        <h6 class="text-body-emphasis mb-2">To:</h6>
                        <address class="text-body-tertiary mb-0">
                            <strong>{{ $payment->user->name ?? 'Customer Name' }}</strong><br>
                            {{ $payment->billing_address ?? 'Customer Address' }}<br>
                            Email: {{ $payment->user->email ?? 'customer@email.com' }}<br>
                            Phone: {{ $payment->user->phone ?? '(555) 000-0000' }}
                        </address>
                    </div>
                </div>

                <!-- Payment Details -->
                <div class="row mb-4">
                    <div class="col-6">
                        <div class="table-responsive">
                            <table class="table table-borderless">
                                <tr>
                                    <td class="text-body-tertiary ps-0">Payment Date:</td>
                                    <td class="text-body-emphasis">{{ $payment->created_at ? $payment->created_at->format('M d, Y') : 'N/A' }}</td>
                                </tr>
                                <tr>
                                    <td class="text-body-tertiary ps-0">Payment Method:</td>
                                    <td class="text-body-emphasis">{{ $payment->payment_method ?? 'Credit Card' }}</td>
                                </tr>
                                <tr>
                                    <td class="text-body-tertiary ps-0">Status:</td>
                                    <td>
                                        @if($payment->status == 'completed')
                                            <span class="badge badge-phoenix badge-phoenix-success">Completed</span>
                                        @elseif($payment->status == 'pending')
                                            <span class="badge badge-phoenix badge-phoenix-warning">Pending</span>
                                        @else
                                            <span class="badge badge-phoenix badge-phoenix-danger">Failed</span>
                                        @endif
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="table-responsive">
                            <table class="table table-borderless">
                                <tr>
                                    <td class="text-body-tertiary ps-0">Reference ID:</td>
                                    <td class="text-body-emphasis">{{ $payment->reference_id ?? 'REF' . str_pad($payment->id ?? 1, 6, '0', STR_PAD_LEFT) }}</td>
                                </tr>
                                <tr>
                                    <td class="text-body-tertiary ps-0">Payment For:</td>
                                    <td class="text-body-emphasis">{{ $payment->description ?? 'Monthly Membership' }}</td>
                                </tr>
                                <tr>
                                    <td class="text-body-tertiary ps-0">Due Date:</td>
                                    <td class="text-body-emphasis">{{ $payment->due_date ? $payment->due_date->format('M d, Y') : 'N/A' }}</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- Line Items -->
                <div class="table-responsive mb-4">
                    <table class="table table-striped">
                        <thead class="bg-body-secondary">
                            <tr>
                                <th class="border-0 text-body-emphasis">Description</th>
                                <th class="border-0 text-body-emphasis text-center">Qty</th>
                                <th class="border-0 text-body-emphasis text-center">Rate</th>
                                <th class="border-0 text-body-emphasis text-end">Amount</th>
                            </tr>
                        </thead>
                        <tbody>
                            @if(isset($payment->line_items) && $payment->line_items)
                                @foreach($payment->line_items as $item)
                                <tr>
                                    <td class="text-body">{{ $item['description'] ?? 'Service' }}</td>
                                    <td class="text-center text-body">{{ $item['quantity'] ?? '1' }}</td>
                                    <td class="text-center text-body">${{ number_format($item['rate'] ?? 0, 2) }}</td>
                                    <td class="text-end text-body">${{ number_format($item['amount'] ?? 0, 2) }}</td>
                                </tr>
                                @endforeach
                            @else
                            <tr>
                                <td class="text-body">{{ $payment->description ?? 'Monthly Membership Fee' }}</td>
                                <td class="text-center text-body">1</td>
                                <td class="text-center text-body">${{ number_format($payment->amount ?? 0, 2) }}</td>
                                <td class="text-end text-body">${{ number_format($payment->amount ?? 0, 2) }}</td>
                            </tr>
                            @endif
                        </tbody>
                    </table>
                </div>

                <!-- Totals -->
                <div class="row">
                    <div class="col-8"></div>
                    <div class="col-4">
                        <div class="table-responsive">
                            <table class="table table-borderless">
                                <tr>
                                    <td class="text-body-tertiary ps-0">Subtotal:</td>
                                    <td class="text-end text-body-emphasis">${{ number_format($payment->subtotal ?? $payment->amount ?? 0, 2) }}</td>
                                </tr>
                                @if(isset($payment->tax_amount) && $payment->tax_amount > 0)
                                <tr>
                                    <td class="text-body-tertiary ps-0">Tax ({{ $payment->tax_rate ?? '8.25' }}%):</td>
                                    <td class="text-end text-body-emphasis">${{ number_format($payment->tax_amount ?? 0, 2) }}</td>
                                </tr>
                                @endif
                                @if(isset($payment->discount_amount) && $payment->discount_amount > 0)
                                <tr>
                                    <td class="text-body-tertiary ps-0">Discount:</td>
                                    <td class="text-end text-success">-${{ number_format($payment->discount_amount ?? 0, 2) }}</td>
                                </tr>
                                @endif
                                <tr class="border-top">
                                    <td class="text-body-emphasis ps-0 fw-bold">Total:</td>
                                    <td class="text-end text-body-emphasis fw-bold fs-6">${{ number_format($payment->amount ?? 0, 2) }}</td>
                                </tr>
                                <tr>
                                    <td class="text-body-tertiary ps-0">Amount Paid:</td>
                                    <td class="text-end text-success fw-bold">${{ number_format($payment->amount ?? 0, 2) }}</td>
                                </tr>
                                <tr>
                                    <td class="text-body-tertiary ps-0">Balance Due:</td>
                                    <td class="text-end text-body-emphasis">$0.00</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- Payment Method Details -->
                @if($payment->payment_method && $payment->payment_method != 'cash')
                <div class="row mt-4">
                    <div class="col-12">
                        <div class="border-top pt-3">
                            <h6 class="text-body-emphasis mb-2">Payment Method Details</h6>
                            <div class="row">
                                <div class="col-6">
                                    <table class="table table-borderless table-sm">
                                        <tr>
                                            <td class="text-body-tertiary ps-0">Card Type:</td>
                                            <td class="text-body">{{ $payment->card_type ?? 'Visa' }}</td>
                                        </tr>
                                        <tr>
                                            <td class="text-body-tertiary ps-0">Card Number:</td>
                                            <td class="text-body">**** **** **** {{ $payment->last_four ?? '1234' }}</td>
                                        </tr>
                                    </table>
                                </div>
                                <div class="col-6">
                                    <table class="table table-borderless table-sm">
                                        <tr>
                                            <td class="text-body-tertiary ps-0">Authorization Code:</td>
                                            <td class="text-body">{{ $payment->auth_code ?? 'AUTH123456' }}</td>
                                        </tr>
                                        <tr>
                                            <td class="text-body-tertiary ps-0">Gateway:</td>
                                            <td class="text-body">{{ $payment->gateway ?? 'Stripe' }}</td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @endif

                <!-- Notes -->
                @if($payment->notes)
                <div class="row mt-4">
                    <div class="col-12">
                        <div class="border-top pt-3">
                            <h6 class="text-body-emphasis mb-2">Notes</h6>
                            <p class="text-body-tertiary">{{ $payment->notes }}</p>
                        </div>
                    </div>
                </div>
                @endif

                <!-- Footer -->
                <div class="row mt-4">
                    <div class="col-12">
                        <div class="border-top pt-3 text-center">
                            <p class="text-body-tertiary mb-1">Thank you for your payment!</p>
                            <p class="text-body-tertiary mb-0 fs-9">
                                This receipt was generated on {{ now()->format('M d, Y \a\t g:i A') }}
                            </p>
                            @if($payment->status == 'completed')
                            <div class="mt-3">
                                <div class="d-inline-flex align-items-center">
                                    <span class="fas fa-check-circle text-success me-2"></span>
                                    <span class="text-success fw-semibold">PAYMENT CONFIRMED</span>
                                </div>
                            </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Digital Signature (if needed) -->
        @if($payment->requires_signature ?? false)
        <div class="card mt-3">
            <div class="card-body">
                <h6 class="text-body-emphasis mb-3">Digital Signature</h6>
                <div class="row">
                    <div class="col-6">
                        <div class="border rounded p-3 text-center" style="min-height: 100px;">
                            @if($payment->customer_signature)
                                <img src="{{ $payment->customer_signature }}" alt="Customer Signature" class="img-fluid">
                            @else
                                <span class="text-body-tertiary">Customer Signature</span>
                            @endif
                        </div>
                        <p class="text-center text-body-tertiary mt-2 mb-0">Customer</p>
                    </div>
                    <div class="col-6">
                        <div class="border rounded p-3 text-center" style="min-height: 100px;">
                            @if($payment->admin_signature)
                                <img src="{{ $payment->admin_signature }}" alt="Admin Signature" class="img-fluid">
                            @else
                                <span class="text-body-tertiary">Administrative Signature</span>
                            @endif
                        </div>
                        <p class="text-center text-body-tertiary mt-2 mb-0">Phoenix Taekwondo</p>
                    </div>
                </div>
            </div>
        </div>
        @endif
    </div>
</div>
@endsection

@section('styles')
<style>
@media print {
    .btn, .breadcrumb, .card-header, .sidebar, .navbar {
        display: none !important;
    }
    
    .card {
        border: none !important;
        box-shadow: none !important;
    }
    
    body {
        background: white !important;
    }
    
    .col-lg-8 {
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
}

.receipt-logo {
    max-width: 150px;
}

.digital-signature {
    border: 2px dashed #dee2e6;
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
@endsection

@section('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>

<script>
function downloadPDF() {
    const element = document.getElementById('receipt-content');
    const opt = {
        margin: 1,
        filename: 'receipt-{{ $payment->transaction_id ?? "TXN000001" }}.pdf',
        image: { type: 'jpeg', quality: 0.98 },
        html2canvas: { scale: 2 },
        jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
    };

    // Generate PDF
    html2canvas(element).then(canvas => {
        const imgData = canvas.toDataURL('image/png');
        const pdf = new jsPDF();
        const imgWidth = 210;
        const pageHeight = 295;
        const imgHeight = (canvas.height * imgWidth) / canvas.width;
        let heightLeft = imgHeight;
        let position = 0;

        pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
        heightLeft -= pageHeight;

        while (heightLeft >= 0) {
            position = heightLeft - imgHeight;
            pdf.addPage();
            pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
            heightLeft -= pageHeight;
        }

        pdf.save('receipt-{{ $payment->transaction_id ?? "TXN000001" }}.pdf');
    });
}

function sendEmail() {
    if (confirm('Send receipt to customer email?')) {
        fetch(`/admin/payments/{{ $payment->id ?? 1 }}/send-receipt`, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Content-Type': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert('Receipt sent successfully!');
            } else {
                alert('Error sending receipt');
            }
        });
    }
}

// Auto-print functionality (if needed)
function autoPrint() {
    window.print();
}

// Make receipt responsive for mobile
function adjustForMobile() {
    if (window.innerWidth < 768) {
        document.querySelectorAll('.col-6').forEach(col => {
            col.className = 'col-12';
        });
    }
}

// Call on page load
document.addEventListener('DOMContentLoaded', adjustForMobile);
window.addEventListener('resize', adjustForMobile);
</script>
@endsection