@extends('layouts.app')

@section('content')
<style>
    @media print {
        body * {
            visibility: hidden;
        }
        .receipt-container, .receipt-container * {
            visibility: visible;
        }
        .receipt-container {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
        }
        .no-print {
            display: none !important;
        }
        .page-break {
            page-break-after: always;
        }
        @page {
            size: A4;
            margin: 1cm;
        }
    }
    
    .receipt-wrapper {
        max-width: 800px;
        margin: 0 auto;
        background: white;
    }
    
    .receipt-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 30px;
        text-align: center;
        border-radius: 10px 10px 0 0;
    }
    
    .receipt-body {
        padding: 30px;
        border: 2px solid #667eea;
        border-top: none;
        border-radius: 0 0 10px 10px;
    }
    
    .info-table {
        width: 100%;
        margin-bottom: 20px;
    }
    
    .info-table td {
        padding: 10px;
        border-bottom: 1px solid #e9ecef;
    }
    
    .info-table td:first-child {
        font-weight: 600;
        color: #495057;
        width: 40%;
    }
    
    .amount-box {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 20px;
        border-radius: 10px;
        text-align: center;
        margin: 20px 0;
    }
    
    .stamp-box {
        border: 2px dashed #dee2e6;
        padding: 30px;
        text-align: center;
        margin-top: 30px;
        min-height: 100px;
        background-color: #f8f9fa;
    }
    
    .watermark {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(-45deg);
        font-size: 100px;
        opacity: 0.05;
        font-weight: bold;
        pointer-events: none;
    }
</style>

<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <!-- Action Buttons (No Print) -->
            <div class="no-print mb-4 text-center">
                <a href="{{route('payments.edit', $transaction->student_id)}}" class="btn btn-secondary btn-lg me-2">
                    <i class="bi bi-arrow-left"></i> Back to Payments
                </a>
                <button onclick="window.print()" class="btn btn-primary btn-lg">
                    <i class="bi bi-printer"></i> Print Receipt
                </button>
            </div>

            <!-- Receipt Container -->
            <div class="receipt-container">
                <div class="receipt-wrapper shadow-lg">
                    <div class="watermark">PAID</div>
                    
                    <!-- Header -->
                    <div class="receipt-header">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                @if(file_exists(public_path('loggo.png')))
                                    <img src="{{asset('loggo.png')}}" alt="Logo" style="height: 60px;">
                                @endif
                            </div>
                            <div class="text-center flex-grow-1">
                                <h2 class="mb-0">PAYMENT RECEIPT</h2>
                                <p class="mb-0">Madrasa Ma Ahad Ul Quran</p>
                            </div>
                            <div style="width: 60px;"></div>
                        </div>
                        <hr class="my-3 bg-white">
                        <div class="row">
                            <div class="col-md-6 text-start">
                                <small>Receipt No:</small><br>
                                <strong class="fs-5">{{$transaction->transaction_number}}</strong>
                            </div>
                            <div class="col-md-6 text-end">
                                <small>Date:</small><br>
                                <strong class="fs-5">{{$transaction->transaction_date->format('d M, Y')}}</strong>
                            </div>
                        </div>
                    </div>

                    <!-- Body -->
                    <div class="receipt-body position-relative">
                        
                        <!-- Student Information -->
                        <h5 class="border-bottom pb-2 mb-3">
                            <i class="bi bi-person-circle text-primary"></i> Student Information
                        </h5>
                        <table class="info-table">
                            <tr>
                                <td><i class="bi bi-person"></i> Student Name</td>
                                <td>{{$transaction->student->first_name}} {{$transaction->student->last_name}}</td>
                            </tr>
                            <tr>
                                <td><i class="bi bi-card-text"></i> ID Card Number</td>
                                <td>{{$transaction->promotion->id_card_number ?? 'N/A'}}</td>
                            </tr>
                            <tr>
                                <td><i class="bi bi-book"></i> Class</td>
                                <td>{{$transaction->promotion->schoolClass->class_name ?? 'N/A'}}</td>
                            </tr>
                            <tr>
                                <td><i class="bi bi-diagram-3"></i> Section</td>
                                <td>{{$transaction->promotion->section->section_name ?? 'N/A'}}</td>
                            </tr>
                            <tr>
                                <td><i class="bi bi-calendar-event"></i> Session</td>
                                <td>{{$transaction->promotion->schoolSession->session_name ?? 'N/A'}}</td>
                            </tr>
                        </table>

                        <!-- Payment Details -->
                        <h5 class="border-bottom pb-2 mb-3 mt-4">
                            <i class="bi bi-cash-coin text-success"></i> Payment Details
                        </h5>
                        <table class="info-table">
                            <tr>
                                <td><i class="bi bi-tag"></i> Payment Type</td>
                                <td>
                                    <span class="badge bg-primary">
                                        {{$transaction->getTransactionTypeName()}}
                                    </span>
                                </td>
                            </tr>
                            <tr>
                                <td><i class="bi bi-credit-card"></i> Payment Method</td>
                                <td>
                                    <span class="badge bg-info">
                                        {{$transaction->getPaymentMethodName()}}
                                    </span>
                                </td>
                            </tr>
                            <tr>
                                <td><i class="bi bi-calendar-date"></i> Payment Date</td>
                                <td>{{$transaction->transaction_date->format('l, d F Y')}}</td>
                            </tr>
                            @if($transaction->receivedByUser)
                            <tr>
                                <td><i class="bi bi-person-check"></i> Received By</td>
                                <td>{{$transaction->receivedByUser->first_name}} {{$transaction->receivedByUser->last_name}}</td>
                            </tr>
                            @endif
                            @if($transaction->remarks)
                            <tr>
                                <td><i class="bi bi-chat-left-text"></i> Remarks</td>
                                <td>{{$transaction->remarks}}</td>
                            </tr>
                            @endif
                        </table>

                        <!-- Amount Box -->
                        <div class="amount-box">
                            <small class="opacity-75">AMOUNT PAID</small>
                            <h1 class="mb-0 mt-2">Rs. {{number_format($transaction->amount_paid, 2)}}</h1>
                            <small class="opacity-75">Pakistani Rupees</small>
                        </div>

                        <!-- Balance Information -->
                        @if($transaction->paymentProfile)
                        <div class="alert alert-light border mt-3">
                            <div class="row text-center">
                                <div class="col-md-4">
                                    <small class="text-muted">Total Owed</small>
                                    <div class="fs-5 fw-bold">Rs. {{number_format($transaction->paymentProfile->total_amount_owed, 2)}}</div>
                                </div>
                                <div class="col-md-4">
                                    <small class="text-muted">Total Paid</small>
                                    <div class="fs-5 fw-bold text-success">Rs. {{number_format($transaction->paymentProfile->total_amount_paid, 2)}}</div>
                                </div>
                                <div class="col-md-4">
                                    <small class="text-muted">Balance Remaining</small>
                                    <div class="fs-5 fw-bold {{$transaction->paymentProfile->balance_remaining > 0 ? 'text-danger' : 'text-success'}}">
                                        Rs. {{number_format($transaction->paymentProfile->balance_remaining, 2)}}
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endif

                        <!-- Stamp/Signature Box -->
                        <div class="stamp-box">
                            <div class="row">
                                <div class="col-6 text-center border-end">
                                    <p class="mb-4">Received By</p>
                                    <div style="height: 40px;"></div>
                                    <p class="mb-0 border-top pt-2 d-inline-block px-4">Signature & Stamp</p>
                                </div>
                                <div class="col-6 text-center">
                                    <p class="mb-4">Verified By</p>
                                    <div style="height: 40px;"></div>
                                    <p class="mb-0 border-top pt-2 d-inline-block px-4">Authorized Signature</p>
                                </div>
                            </div>
                        </div>

                        <!-- Footer -->
                        <div class="text-center mt-4 pt-3 border-top">
                            <small class="text-muted">
                                <i class="bi bi-info-circle"></i> 
                                This is a computer-generated receipt and is valid without signature.<br>
                                For queries, please contact the administration office.
                            </small>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Back Button (No Print) -->
            <div class="no-print text-center my-4">
                <a href="{{route('payments.list')}}" class="btn btn-outline-secondary">
                    <i class="bi bi-list"></i> View All Payments
                </a>
                <a href="{{route('student.profile.show', $transaction->student_id)}}" class="btn btn-outline-primary">
                    <i class="bi bi-person"></i> View Student Profile
                </a>
            </div>
        </div>
    </div>
</div>

<script>
    // Initialize tooltips
    document.addEventListener('DOMContentLoaded', function() {
        // Auto-print if coming from payment submission (optional)
        // Uncomment the line below if you want auto-print
        // setTimeout(function() { window.print(); }, 500);
    });
</script>
@endsection