@extends('layouts.app')

@section('title')
    Student Receipt
@endsection

@push('custom-styles')
<style>
    @media print {
    print-area *{ /* can be whatever CSS selector you need */
        transform: scale(1000)
    }
}
</style>
@endpush

@section('content')
    <div class="page-content-wrapper">
        <div class="page-content">
            <div class="page-bar">
                <div class="page-title-breadcrumb">

                </div>
            </div>                          

            <div class="row">
                <div class="col-md-12">
                    <div style="display: flex;justify-content: right;" class="text-right">
                        <button onclick="printDiv('printableArea')" value="print a div!" class="btn btn-info btn-outline " type="button"> <span><i class="fa fa-print"></i> Print</span> </button>
                    </div>
                    <div id="printableArea" style="padding: 100px" class="white-box">
                        <h3><b>Receipt</b> <span class="pull-right">Receipt No: {{ $receipts[0]->receipt_no }}</span></h3>
                        <hr>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="pull-left">
                                    <address>
                                        <img src="{{ asset('/public/Images/'.$institution->institution_logo_path) }}" width="100px;" alt="logo" class="logo-default">
                                        <p class="text-muted m-l-5" >
                                            {{ $institution->institution_name }}, <br> {{ $institution->institution_address }} <br>
                                        </p>
                                    </address>
                                </div>
                                <div class="pull-right text-right">
                                    <address>
                                        <p class="addr-font-h3">To,</p>
                                        <p class="font-bold addr-font-h4">{{ $student->first_name }} {{ $student->last_name }}</p>
                                        <p class="text-muted m-l-30">
                                            {{ $student->address }}
                                        </p>
                                        <p class="m-t-30">
                                            <b>Receipt Date :</b> <i class="fa fa-calendar"></i> {{ date('d-m-Y') }}
                                        </p>
                                        <p>
                                            <b>Course :</b> {{ $student->program_name }}
                                        </p>
                                    </address>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="table-responsive m-t-40">
                                    <table class="table table-hover">
                                        <thead>
                                            <tr>
                                                <th class="text-center">#</th>
                                                <th class="text-right">Description/Narration</th>
                                                <th class="text-right">Amount</th>
                                            </tr>
                                        </thead>
                                       
                                        <tbody>                                        
                                           
                                            @foreach ($receipts as $receipt)
                                                <tr>
                                                    <td class="text-center">{{ $loop->index + 2 }}</td>
                                                    <td class="text-right">{{ $receipt->receipt_description }}</td>
                                                    <td class="text-right">K{{ number_format($receipt->receipt_amount) }}</td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                       
                                    </table>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="pull-right m-t-30 text-right">                                   
                                    <hr> 
                                    @foreach ($receipts as $receipt)                                   
                                        <h3><b>Total : </b>K{{ number_format($receipt->receipt_amount) }}</h3>
                                    @endforeach
                                </div>
                                <div class="clearfix"></div>
                                <hr>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
	<!-- end page content -->
<script>
    function printDiv(divName) {
        var printContents = document.getElementById(divName).innerHTML;        
        var originalContents = document.body.innerHTML;

        document.body.innerHTML = printContents;

        window.print();

        document.body.innerHTML = originalContents;
    }
</script>

@endsection