@extends('layouts.main')

@push('styles')
    <link href="{{ asset('elite/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('/elite/bower_components/datatables/jquery.dataTables.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('elite/tables/css/buttons.dataTables.min.css') }}" rel="stylesheet" type="text/css" />
@endpush


@section('content')
    <div class="row bg-title">
        <div class="col-md-7">
            <h4>{{ __('payments.payments_voucher') }}</h4>
        </div>
        <div class="col-md-5">
            <ol class="breadcrumb">
                <li><a href="{{ route('home') }}"><i class="fa fa-home"></i> {{ __('payments.home') }}</a></li>
                <li><a href="{{ route('finance') }}"><i class="fa fa-money"></i> {{ __('payments.finance_home') }}</a></li>
                <li class="active"><i class="fa fa-credit-card"></i> {{ __('payments.payment_detail') }}</li>
            </ol>
        </div>
    </div>

    <div class="white-box">
        @include('flash::message')
        <div class="row">
            {{ Form::open(['method' => 'POST', 'route' => 'payments.print_payment_voucher_detail', 'id' =>'voucherPrint', 'target'=>'_blank']) }}
            <input type="hidden" name="payment" id="payment" value='{{  json_encode($payment, true) }}' />
            <input type="hidden" name="hospital_information" id="hospital_information" value='{{ json_encode($hospital_information, true) }}' />
            <input type="hidden" name="date" id="date" value='{{ $date  }}' />
            <input type="hidden" name="trans_id" id="trans_id" value='{{ $trans_id  }}' />
            <input type="hidden" name="memo" id="memo" value='{{ $memo }}' />
            <input type="hidden" name="expense_date" id="expense_date" value="{{ $expense_date }}" />
            <div class="col-md-12 pull-right text-right">
                <a href="{{ route('payments.new_payment') }}" class="nav-item btn btn-success" style="border-radius: 5px;"><i class="fa fa-plus"></i> <span style="margin-left: 5px">{{ __('payments.new_payment') }}</span></a>
                <button class="btn btn-rounded" style="background-color: #03C03C; color: white;" type='submit' id="print_btn"> <i class="fa fa-print"></i> {{ __('payments.print_payments_voucher') }}</button>
            </div>
            {{ Form::close() }}

        </div>

        <hr>

        <div class="table-responsive">
            <table id="table" class="table color-bordered-table success-bordered-table">
                <thead>
                <tr>
                    <th>{{ __('payments.item') }}</th>
                    <th>{{ __('payments.vendor') }}</th>
                    <th>{{ __('payments.item_memo') }}</th>
                    <th>{{ __('payments.quantity') }}</th>
                    <th>{{ __('payments.unit_cost') }}</th>
                    <th>{{ __('payments.amount') }}</th>
                </tr>
                </thead>
                <tbody>
                @php
                    $total = 0;
                @endphp

                @foreach( $payment as $item)
                    <tr>
                        <td>{{ get_name($item->item_id, 'id', 'name', 'payment_items') }}</td>
                        <td>{{ get_name($item->vendor, 'id', 'name', 'suppliers') }}</td>
                        <td>{{ $item->item_memo }}</td>
                        <td>{{ $item->quantity }}</td>
                        <td>{{ ugandan_shillings($item->unit_cost) }}</td>
                        <td>{{ ugandan_shillings($item->amount) }}</td>
                    </tr>
                    @php
                        $total += $item->amount;
                    @endphp

                @endforeach

                </tbody>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td><strong>{{ __('payments.total') }}</strong></td>
                    <td>{{ ugandan_shillings($total) }}</td>
                </tr>
            </table>

        </div>
    </div>
@endsection

@push('scripts')
    <!-- Date Picker Plugin JavaScript -->
    <script src="{{ asset('elite/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.js') }}"></script>
    <script src="{{ asset('elite/bower_components/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('elite/tables/js/dataTables.buttons.min.js') }}"></script>
    <script src="{{ asset('elite/tables/js/buttons.flash.min.js') }}"></script>
    <script src="{{ asset('elite/tables/js/jszip.min.js') }}"></script>
    <script src="{{ asset('elite/tables/js/pdfmake.min.js') }}"></script>
    <script src="{{ asset('elite/tables/js/vfs_fonts.js') }}"></script>
    <script src="{{ asset('elite/tables/js/buttons.html5.min.js') }}"></script>
    <script src="{{ asset('elite/tables/js/buttons.print.min.js') }}"></script>

    <script type="text/javascript">
        $('.table').DataTable({
            dom: 'Bfrtip',
            buttons: [
                'copy', 'csv', 'excel', 'pdf', 'print'
            ]
        });
    </script>
@endpush