@extends('layouts.service-details-layout')

@section('more-styles')
    <link rel="stylesheet" href="{{ asset('css/pages/invoice-generator-wizard.css') }}">
    <link rel="stylesheet" href="{{ asset('css/pages/invoice-preview.css') }}">
@endsection

@section('content')
    <!-- Zero configuration table -->
    <div class="main-content-section" id="applicant-registration-wrapper">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div id="progressbar-wrapper">
                        @include('components.invoice_generation_progressbar')
                    </div>
                    <div class="card-header page-title-row">
                        <h2 class="page-title-secondary float-left">Preview Bill</h2>
                        <button class="btn btn-success float-right" onclick="BaseHelper.printTag('#invoice-block')">
                            <em class="icon ni ni-printer"></em>
                            Print
                        </button>
                    </div>
                    <div class="card-content collapse show">
                        <div class="card-body invoice-outer-wrapper" id="invoice-block">
                            <div class="invoice"><!-- .invoice-actions -->
                                <div class="invoice-wrap">
                                    <div class="invoice-brand text-center">
                                        <img src="{{ asset('images/ogun-state-logo-new.png') }}" alt="">
                                    </div>
                                    <div class="invoice-head">
                                        <div class="invoice-desc">
                                            <ul class="list-plain">
                                                <!-- <li class="invoice-id">Application No: #{{ $application->id }}</li> -->
                                                <li class="invoice-date">Date:<span>{{ $invoice->created_at->format('d M, Y') }}</span></li>
                                                <li>Service: {{ $invoice->service->name }}</li>
                                                @if($invoice->billing_address)
                                                <li>Address: {{ $invoice->billing_address }}</li>
                                                @endif
                                            </ul>
                                        </div>
                                        @php
                                            $ministryName = $invoice->ministryName();
                                            $ministryStringArray = splitByWords($ministryName, 4);
                                        @endphp
                                        <div class="invoice-contact">
                                            <h3 class="title">Bill</h3>
                                            <div class="invoice-contact-info">
                                                <p class="title">
                                                    @foreach($ministryStringArray as $text)
                                                        {{ $text }}@if($loop->remaining > 0) <br> @endif
                                                    @endforeach
                                                </p>
                                                <ul class="list-plain">
                                                    <li class="invoice-id">Payment Code: #{{ $invoice->payment_code }}</li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div><!-- .invoice-head -->
                                    <div class="invoice-bills">
                                        <div class="table-responsive">
                                            <table class="table table-light-gray">
                                                <thead>
                                                <tr>
                                                    <th>Description</th>
                                                    <th></th>
                                                    <th>Amount</th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                @foreach($demandNotices as $notice)
                                                    <tr>
                                                        <td>{{ $notice->item }}</td>
                                                        <td></td>
                                                        <td class="naira-prefix">{{ number_format($notice->amount, 2) }}</td>
                                                    </tr>
                                                @endforeach
                                                </tbody>
                                                <tfoot>
                                                    <tr class="total-amount-row">
                                                        <td></td>
                                                        <td class="text-right">Total Amount</td>
                                                        <td class="naira-prefix">{{ number_format($totalAmount, 2) }}</td>
                                                    </tr>
                                                </tfoot>
                                            </table>
                                        </div>
                                    </div><!-- .invoice-bills -->
                                    <div class="invoice-bottom">
                                        <div class="invoice-desc">
                                            <p class="title">Billed To</p>
                                            <a href="{{ route('applicant.details', $application->applicant_id) }}"><p class="invoice-billed-to">{{ $application->applicant->FullName }}</p></a>
                                            <div class="invoice-contact-info">
                                                <ul class="list-plain">
                                                    <li class="invoice-id">Bill Number: #{{ $invoice->id }}</li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="invoice-contact invoice-barcode">
                                            {!! QrCode::size(250)->generate(config('app.OGSG_GENERAL_PAYMENT_URL') . $invoice->payment_code); !!}
                                        </div>
                                    </div>
                                </div>

                            </div>
                            <div class="invoice-instructions">
                                <p>Make payment at www.pay.ogunstate.gov.ng or through banks and other OGSG approved payment channels. You will need the Payment Code on this bill to make payment</p>
                            </div>
                            <div class="invoice-footer">
                                <p>*For any clarifications, please email {{ config('app.contact.email') }} or call {{ config('app.contact.phone') }}. Thank you</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('more-scripts')
    <script>
        (function ($) {
            $('#fees-breakdown-form').submit(function (e) {
                e.preventDefault();
                if($(this).valid()){
                    this.submit();
                }
            });
        })(jQuery);
    </script>
@endsection