@push('css')
        <!-- Sweet Alert -->
        <link rel="stylesheet" type="text/css" href="{{ URL::asset('assets/libs/sweetalert2/sweetalert2.min.css')}}">
        <link rel="stylesheet" type="text/css" href="{{ URL::asset('assets/libs/bootstrap-datepicker/bootstrap-datepicker.min.css')}}">
        <link rel="stylesheet" type="text/css" href="{{ URL::asset('assets/libs/datatables/datatables.min.css')}}">
        <link rel="stylesheet" type="text/css" href="{{ URL::asset('assets/libs/sweetalert2/sweetalert2.min.css')}}">
        <style>
            .stylefortable {
                border: 1px solid black;
                border-collapse: collapse;
            }

            .styleforth {
                border: 1px solid black;
                border-collapse: collapse;
            }

            .stylefortd {
                border: 1px solid black;
                border-collapse: collapse;
            }

            .customer-payment-modal {
                position: relative;
                left: 87px;
            }
        </style>
@endpush
<div>
    <x-slot name="title">
        PAYMENT
    </x-slot>
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-sm-4">
                            <div class="search-box mr-2 mb-2 d-inline-block">
                                <div class="position-relative">
                                    <h4 class="card-title">Payment</h4>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-8">
                            <div class="text-sm-right">
                                <a href="{{route('transaction.customer-payment-report')}}"><button type="button" class="btn btn-success btn-rounded waves-effect waves-light mb-2 mr-2">Payment Report</button></a>
                            </div>
                        </div><!-- end col-->
                    </div><hr>
                    <form wire:submit.prevent="PaymentSave">
                    <div class="row">
                        <div class="col-lg-3">
                            <div class="form-group">
                                <label for="basicpill-firstname-input">Code</label>
                                <input class="form-control" type="text" wire:model.lazy="code" placeholder="Payment Code">
                                 @error('code') <span class="error">{{ $message }}</span> @enderror
                            </div>
                        </div>
                        <div class="col-lg-3">
                            <div class="form-group">
                                <label for="basicpill-firstname-input">Date</label>
                                <input id="date" type="date" class="form-control" wire:model.lazy="date" placeholder="Date">
                                @error('date') <span class="error">{{ $message }}</span> @enderror
                            </div>
                        </div>
                        <div class="col-lg-3">
                            <div class="form-group">
                                <label for="basicpill-firstname-input">Transaction ID</label>
                                <input class="form-control" type="text" wire:model.lazy="transaction_id" placeholder="Transaction ID">
                                 @error('transaction_id') <span class="error">{{ $message }}</span> @enderror
                            </div>
                        </div>
                        <div class="col-lg-3">
                            <div class="form-group">
                                <label class="control-label">Payment Method</label>
                                <select class="form-control" wire:model.lazy="payment_method_id" id="select2-dropdown">
                                    <option>Payment Method</option>
                                   @foreach ($payment_methods as $payment_method)
                                       <option value="{{ $payment_method->id }}">{{ $payment_method->name }}</option>
                                   @endforeach
                                </select>
                                @error('payment_method_id') <span class="error">{{ $message }}</span> @enderror
                            </div>
                        </div>

                        <div class="col-lg-3">
                            <div class="form-group">
                                <label class="control-label">Staff</label>
                                <select class="form-control" wire:model.lazy="contact_id" id="select2-dropdown">
                                    <option>Select Staff</option>
                                   @foreach ($contacts as $contact)
                                       <option value="{{ $contact->id }}">{{ $contact->first_name }} {{ $contact->last_name }}</option>
                                   @endforeach
                                </select>
                                @error('contact_id') <span class="error">{{ $message }}</span> @enderror
                            </div>
                        </div>

                        <div class="col-lg-3">
                            <div class="form-group">
                                <label class="control-label">Chart of Account</label>
                                <select class="form-control" wire:model.lazy="chart_of_account_id" id="select2-dropdown">
                                    <option>Select</option>
                                   @foreach ($chart_of_account as $chart_of_account)
                                       <option value="{{ $chart_of_account->id }}">{{ $chart_of_account->name }}</option>
                                   @endforeach
                                </select>
                                @error('chart_of_account_id') <span class="error">{{ $message }}</span> @enderror
                            </div>
                        </div>


                        <div class="col-lg-3">
                            <div class="form-group">
                                <label for="basicpill-firstname-input">Amount</label>
                                <input class="form-control" type="text" wire:model.lazy="amount" placeholder="Amount">
                                 @error('total_amount') <span class="error">{{ $message }}</span> @enderror
                            </div>
                        </div>
                        <div class="col-lg-3">
                            <div class="form-group">
                                <label for="basicpill-firstname-input">Receipt No</label>
                                <input class="form-control" type="text" wire:model.lazy="receipt_no" placeholder="Receipt No">
                            </div>
                        </div>
                        <div class="col-lg-3">
                            <div class="form-group">
                                <label for="basicpill-firstname-input">Note</label>
                                <input class="form-control" type="text" wire:model.lazy="note" placeholder="Note">
                            </div>
                        </div>

                        <div class="col-lg-12">
                            <div class="form-group">
                                <center><button type="submit" class="btn btn-primary">Submit</button></center>
                            </div>
                        </div>
                    </div>
                    </form>
                    <div wire:ignore class="table-responsive">
                        <table class="display table table-striped table-bordered" id="PaymentTable"
                            style="width:100%"></table>
                    </div>
                </div>
            </div>
        </div>

    </div>

     {{-- Start Invoice Modal --}}
     <div wire:ignore.self class="modal fade" id="InvoiceModal" tabindex="-1" role="dialog"
     aria-labelledby="myLargeModalLabel" aria-hidden="true">
     <div class="modal-dialog modal-lg">
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title" id="exampleModalLabel">Invoice</h5>
                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                     <span aria-hidden="true">&times;</span>
                 </button>
             </div>
             <div class="modal-body">
                 @if($transaction)
                 <div>
                     <x-slot name="title">PAYMENT RECEIPT</x-slot>
                     <x-slot name="header">PAYMENT RECEIPT</x-slot>

                     <center>
                         <table style="width:100%;">
                             <tr>
                                 <td style="width: 40px;height:50px;vertical-align: super;"
                                     class="customer-payment-modal" style="padding: 0px;margin: 0px;">
                                     <img src="@if ($companyInfo){{ asset('storage/photo/' . $companyInfo->logo) }}@endif"
                                         style="width: 40px;height: 40px;padding: 0px;margin: 0px;vertical-align: super;"
                                         alt="PaikariApp">
                                 </td>
                                 <td>
                                     <h3 style="text-align:center;margin:0px;">
                                        @if (isset($companyInfo)){{ $companyInfo->name }}@endif
                                     </h3>
                                     <p style="text-align:center;margin:0px;">Mobile:
                                        @if (isset($companyInfo)){{ $companyInfo->mobile }}@endif
                                     </p>
                                     <p style="text-align:center;margin:0px;">Telephone:
                                        @if (isset($companyInfo)){{ $companyInfo->phone }}@endif
                                     </p>
                                     <p style="text-align:center;margin:0px;">

                                     </p>
                                     <h4 style="text-align:center;">Payment Voucher</h4>
                                 </td>
                             </tr>
                         </table>
                     </center>
                     <center>
                         <table style="width:80%;">
                             <tr>
                                 <td>
                                     <p style="margin-top: 20px; font-weight:bold;">No. :@if($transaction) {{$transaction->code}} @endif
                                     <p style="font-weight:bold;">Dated :@if($transaction){{$transaction->date}}@endif</p>
                                 </td>
                                 <td></td>
                             </tr>
                         </table>

                         <table class="payment stylefortable" style="width:80%;">
                             <tr>
                                 <th class="styleforth">Particulars</th>
                                 <th class="styleforth">Amount</th>
                             </tr>

                             <tr>
                                <td class="stylefortd"> @if($transaction->Contact) {{$transaction->Contact->first_name}} {{$transaction->Contact->last_name}} @endif
                                    Cr
                                            <p class="ml-5">Agst Ref<strong>@if(isset($transaction)) ({{$transaction->transaction_id}}) @endif
                                            @if(isset($transaction)) {{$transaction->amount}} Dr @endif
                                            </strong>
                                    </p>
                                </td>
                                <td class="stylefortd">
                                    @if(isset($transaction->amount)){{$transaction->amount}}@endif
                                </td>
                             </tr>
                         </table>
                     </center>
                 </div>
                 @endif
             </div>
             <div class="modal-footer">
                 <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                @if($transaction)
                    <button type="submit" class="btn btn-dark"  wire:click="InvoicePrint({{$transaction->id}})">
                        Print
                    </button>
                @endif
             </div>
         </div>
     </div>
 </div>
 {{-- End Invoice Modal --}}
</div>
@push('scripts')
        <!-- Plugins js -->
        <script src="{{ URL::asset('assets/libs/datatables/datatables.min.js')}}"></script>
        <script src="{{ URL::asset('assets/libs/jszip/jszip.min.js')}}"></script>
        <script src="{{ URL::asset('assets/libs/pdfmake/pdfmake.min.js')}}"></script>

        <!-- Init js-->
        <script src="{{ URL::asset('assets/js/pages/datatables.init.js')}}"></script>

        <!-- Sweet Alerts js -->
        <script src="{{ URL::asset('assets/libs/sweetalert2/sweetalert2.min.js')}}"></script>

        <!-- Sweet alert init js -->
        <script src="{{ URL::asset('assets/js/pages/sweet-alerts.init.js')}}"></script>
<script>
    function callInvoice(id) {
            @this.call('InvoiceModal', id);
        }
        function callEdit(id) {
            @this.call('PaymentEdit', id);
        }
        function callDelete(id) {
            @this.call('PaymentDelete', id);
        }

   $(document).ready(function() {
    var datatable = $('#PaymentTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ route('data.payment-table') }}",
        columns: [{
                title: 'SL',
                data: 'id'
            },
            {
                title: 'Code',
                data: 'code',
                name: 'code'
            },
            {
                title: 'Purpose',
                data: 'chart_of_account_id',
                name: 'chart_of_account_id'
            },
            {
                title: 'Payment Method',
                data: 'payment_method_id',
                name: 'payment_method_id'
            },

            {
                title: 'Amount',
                data: 'amount',
                name: 'amount'
            },

            {
                title: 'Staff',
                data: 'contact_id',
                name: 'contact_id'
            },

            {
                title: 'Date',
                data: 'date',
                name: 'date'
            },
            {
                title: 'Amount',
                data: 'amount',
                name: 'amount'
            },
            {
                title: 'Note',
                data: 'note',
                name: 'note'
            },
            {
                title: 'Action',
                data: 'action',
                name: 'action'
            },
        ]
    });

    window.livewire.on('success', message => {
        datatable.draw(true);
  });
});
</script>

@endpush