@extends('backend.layouts.app')
@section('content')
<div class="container">
    <div class="card shadow-sm">
        <div class="card-header d-flex justify-content-between align-items-center bg-success text-white" style="background:linear-gradient(135deg, #4599cd, #267bbd);">
            <h5 class="mb-0">Income Invoice</h5>
            <button id="printBtn" class="btn btn-light btn-sm">
                <i class="fas fa-print me-1"></i> Print
            </button>
        </div>

        <div class="card-body" id="printable_area">
            <!-- Your income details table exactly as before -->
            <table class="table table-bordered">
                <tbody>
                    <tr>
                        <th width="30%">Income Type</th>
                        <td>{{ $income->incomeType->name ?? '-' }}</td>
                    </tr>
                    <tr>
                        <th>Title</th>
                        <td>{{ $income->title }}</td>
                    </tr>
                    <tr>
                        <th>Amount</th>
                        <td><strong>{{ number_format($income->amount, 2) }}</strong></td>
                    </tr>
                    <tr>
                        <th>Income Date</th>
                        <td>{{ $income->income_date ? \Carbon\Carbon::parse($income->income_date)->format('d M, Y') : '-' }}</td>
                    </tr>
                    <tr>
                        <th>Payment Date</th>
                        <td>{{ $income->payment_date ? \Carbon\Carbon::parse($income->payment_date)->format('d M, Y') : '-' }}</td>
                    </tr>
                    <tr>
                        <th>Payment Type</th>
                        <td>{{ ucfirst(str_replace('_', ' ', $income->payment_type)) ?? '-' }}</td>
                    </tr>
                    <tr>
                        <th>Transaction No</th>
                        <td>{{ $income->transaction_no ?? '-' }}</td>
                    </tr>
                    <tr>
                        <th>Account</th>
                        <td>
                            @if ($income->account)
                                @if ($income->account->type == 'Mobile Bank')
                                    {{ $income->account->company_name }} ({{ $income->account->mobile_number }})
                                @else
                                    {{ $income->account->bank_name }} - {{ $income->account->account_number }}
                                @endif
                            @else
                                -
                            @endif
                        </td>
                    </tr>
                    <tr>
                        <th>Received By</th>
                        <td>{{ $income->received_by ?? '-' }}</td>
                    </tr>
                    <tr>
                        <th>Received Date</th>
                        <td>{{ $income->received_date ? \Carbon\Carbon::parse($income->received_date)->format('d M, Y') : '-' }}</td>
                    </tr>
                    <tr>
                        <th>Payment Remark</th>
                        <td>{{ $income->payment_remark ?? '-' }}</td>
                    </tr>
                    <tr>
                        <th>Description</th>
                        <td>{{ $income->description ?? '-' }}</td>
                    </tr>
                </tbody>
            </table>

            <div class="text-end mt-3">
                <small class="text-muted">Generated on: {{ now()->format('d M, Y h:i A') }}</small>
            </div>
        </div>
    </div>
</div>
@endsection

@push('script')
<script>
    $(document).ready(function(){
        $('#printBtn').click(function() {
            var printContents = $('#printable_area').html();
            var originalContents = $('body').html();

            $('body').html(printContents);
            window.print();

            // Restore original content after printing
            $('body').html(originalContents);
            location.reload(); // optional to reset page state
        });
    });
</script>

<style>
    @media print {
        body * {
            visibility: hidden;
        }

        #printable_area, #printable_area * {
            visibility: visible;
        }

        #printable_area {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
        }
    }
</style>
@endpush