@extends('layouts.master')
@section('content')

    @if(isset($invoice) && !empty($invoice))
        <div class="card p-1">
            <div class="card-header">
                <div class="row hide-btn">
                    <div class="col col-md-12">

                        <button class="btn btn-success btn-sm" onclick="printDiv('portrait')">
                            Print
                        </button>
                        <hr>
                    </div>
                </div>
            </div>
            <div class="card-body">

                <div class="col-md-12 table_content">


                    <!-- company details content -->
                    <div class="row mb-5">
                        <div class="col-md-12 mt-3">
                            <img src="{{asset('uploads/images/logo-white.jpg')}}" width="100px" height="100px" alt="">

                            <span style="font-size: 40px;font-weight:bold;">Jabalunnur Al-Jamiyatul Ishlamia</span>


                        </div>
                    </div>

                    <!-- customer details content -->
                    <div class="row mb-5">
                        
                        <table class="table">
                            <tbody>
                                <tr>
                                    <th>Name</th>
                                    <td>{{($student_details->first_name ?? "")." ".($student_details->last_name ?? "")}}</td>
                                    <th>Class (Section)</th>
                                    <td>Class 1 (A) </td>
                                </tr>

                                <tr>
                                    <th>Mobile Number</th>
                                    <td>{{$student_details->mobile_no ?? ""}}</td>
                                    <th>Roll Number</th>
                                    <td> {{$student_details->class_roll ?? ""}} </td>
                                </tr>
                                <tr>
                                    <th>Invoice No</th>
                                    <td>{{ $invoice->invoice_no ?? ''}}</td>
                                    <th>Invoice Date</th>
                                    <td>{{ $invoice->invoice_date ?? ""}}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <div class="row">
                        <div class="col-md-12">
                            <table class="table table-bordered mt-2 row_add sales_table">
                                <thead>
                                    <tr class="table-secondary">
                                        <th width="5%">SL</th>
                                        <th>Type</th>
                                        <th>Amount</th>
                                        <th>Discount</th>
                                    </tr>
                                </thead>
                                <tbody class="append_row">
                                    @foreach ($invoice_items as $key => $item)
                                        <tr>
                                            <td>{{++$key}}</td>
                                            <td>
                                                {{ $feeTypes[$item->fee_type_id] ?? ""}}
                                            </td>
                                            <td>
                                                {{ $item->amount ?? ""}} ৳
                                            </td>
                                            <td>
                                                {{ $item->discount ?? ""}} ৳
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="row mt-4">
                        <div class="col-md-4 d-flex">
                            <span class="mt-auto font-weight-bold h1">
                                {{-- Thank you! --}}
                            </span>
                        </div>
                        <div class="col-md-4">
                            {{-- <img src="{{asset('uploads/images/attar_lover_round_logo.jpeg')}}" width="180px" height="180px" alt=""> --}}
                        </div>
                        <div class="col-md-4">
                            <table class="table">
                                <tr>
                                    <td><b>Total Amount </b></td>
                                    <td><b>: {{$invoice->total_amount ?? ""}} ৳</b></td>
                                </tr>
                                <tr>
                                    <td><b>Total Discount</b></td>
                                    <td><b>: {{$invoice->total_discount ?? "0"}} ৳</b> </td>
                                </tr>
                                <tr>
                                    <td><b>Late Fine</b></td>
                                    <td><b>: {{$invoice->late_fine ?? "0"}} ৳</b> </td>
                                </tr>
                                <tr>
                                    <td><b>Final Amount</b></td>
                                    <td><b>: {{ ($invoice->total_amount + $invoice->late_fine) - $invoice->total_discount}}.00 ৳</b> </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12 text-right">
                            <img src="{{asset('signature/principal.jpg')}}" width="180px" height="60px" alt="">
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12 d-none" id="developed_by" style="bottom: 0;position:fixed;">
                            Developed By : Insaf Solution Ltd. (www.insafsolution.com).
                        </div>
                    </div>
                </div>
            </div>
        </div>

    @endif
@endsection


@section('scripts')
    <script>
        function printInv(){
            var element = document.getElementById("developed_by");

            element.classList.remove("d-none");
            setTimeout(function() {
                element.classList.add("d-none");
                window.print();
                window.close();
            }, 90);

        }
    </script>
@endsection



<!-- show.blade.php file backup code -->
@extends('layouts.master')
@section('content')
    @if(isset($invoice) && !empty($invoice))
    <div class="card p-1">
        <div class="card-header">
            <div class="row hide-btn">
                <div class="col col-md-12">
                    <button class="btn btn-success btn-sm" onclick="printInv()">Print</button>
                    <hr>
                </div>
            </div>
        </div>
        <div class="card-body">
            <div class="container-fluid p-0">
                <div class="row">
                    <div class="col-12">
                        <div class="invoice-container" id="invoice">
                            <div class="invoice-header">
                                <div class="row">
                                    <div class="col-3">
                                        <img src="{{ asset('uploads/images/logo-white.jpg') }}" width="100px" height="100px" alt="Logo">
                                    </div>
                                    <div class="col-9 text-left">
                                        <h2>Jabalunnur Al-Jamiyatul Ishlamia</h2>
                                        <h4>জাবালুন্নুর আল-জামিয়াতুল ইসলামিয়া</h4>
                                        <p>Address: Dhaka Mirpur 1, Block D, 1216, Bangladesh</p>
                                    </div>
                                </div>
                            </div>
                            <div class="invoice-body">
                                <div class="row">
                                    <div class="col-6">
                                        <h4>Bill To:</h4>
                                        <p>
                                            {{ $student_details->first_name ?? '' }} {{ $student_details->last_name ?? '' }}<br>
                                            {{ $student_details->mobile_no ?? '' }}<br>
                                            Class 1 (A)<br>
                                            Roll No: {{ $student_details->class_roll ?? '' }}
                                        </p>
                                    </div>
                                    <div class="col-6 text-right">
                                        <p>Invoice No: {{ $invoice->invoice_no ?? '' }} </p>
                                        <p>Invoice Date: {{ $invoice->invoice_date ?? '' }}</p>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12">
                                        <table class="table table-bordered">
                                            <thead>
                                                <tr>
                                                    <th>SL</th>
                                                    <th>Type</th>
                                                    <th>Amount</th>
                                                    <th>Discount</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($invoice_items as $key => $item)
                                                    <tr>
                                                        <td>{{ ++$key }}</td>
                                                        <td>{{ $feeTypes[$item->fee_type_id] ?? '' }}</td>
                                                        <td>{{ $item->amount ?? '' }} ৳</td>
                                                        <td>{{ $item->discount ?? '' }} ৳</td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-3 text-right">
                                        <img src="{{ asset('signature/principal.jpg') }}" width="180px" height="60px" alt="Signature">
                                    </div>
                                    <div class="col-9 text-right">
                                        <p>Total Amount: {{ $invoice->total_amount ?? '' }} ৳ </p>
                                        <p>Total Discount: {{ $invoice->total_discount ?? '0' }} ৳ </p>
                                        <p>Late Fine: {{ $invoice->late_fine ?? '0' }} ৳ </p>
                                        <p>Final Amount: {{ ($invoice->total_amount + $invoice->late_fine) - $invoice->total_discount }}.00 ৳</p>
                                    </div>
                                </div>
                            </div>
                            <div class="invoice-footer">
                                <div class="row">
                                    <div class="col-12 text-right">
                                        <p>Thank you for your payment.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif

    <style>
    .invoice-container {
        width: 100%;
        max-width: 210mm;
        margin: 0 auto;
        padding: 20px;
        border: 1px dotted #ccc;
        background-color: #fff;
    }

    .invoice-header, .invoice-footer {
        background-color: #f7f7f7;
        padding: 15px;
        border-bottom: 1px solid #ccc;
    }

    .invoice-header h2, .invoice-header h4, .invoice-footer p {
        margin: 0;
    }

    .invoice-body {
        padding: 20px;
    }

    .table-bordered th, .table-bordered td {
        border: 1px solid #ccc !important;
    }

    @media print {

        .invoice-container {
            margin: 0;
            border: none;
            background-color: #fff;
        }
        #invoice {
        padding: 20px;
    }
        @page {
            size: A5;
            margin: 0;
        }
        body {
            margin: 0;
        }
    }
    </style>
@endsection
@section('scripts')
@section('scripts')
    <script>
        function printInv() {
            var invoiceContent = document.getElementById('invoice').innerHTML;
            var originalContent = document.body.innerHTML;

            document.body.innerHTML = invoiceContent;
            window.print();
            document.body.innerHTML = originalContent;
            window.location.reload();  // Reload the page to reapply event listeners and JavaScript
        }
    </script>
@endsection