@extends('layouts.app')
@section('title', $pay_type)
@php
    $api_key = env('GOOGLE_MAP_API_KEY');
@endphp
@if (!empty($api_key))
    @section('css')
        @include('contact.partials.google_map_styles')
    @endsection
@endif
@section('content')
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1 class="tw-text-xl md:tw-text-3xl tw-font-bold tw-text-black"> {{$pay_type}}</h1>
    </section>

    <!-- Main content -->
    <section class="content">
        @component('components.widget', [
            'class' => 'box-primary',
            'title' => '',
        ])
           
            <div class="box-tools">
                <a class="tw-dw-btn tw-bg-gradient-to-r tw-from-indigo-600 tw-to-blue-500 tw-font-bold tw-text-white tw-border-none tw-rounded-full btn-modal"
                    data-href="{{ action([\App\Http\Controllers\TransactionPaymentController::class, 'create'], ['type' => $type]) }}"
                    data-container=".payment_modal">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                    stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                    class="icon icon-tabler icons-tabler-outline icon-tabler-plus">
                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                    <path d="M12 5l0 14" />
                    <path d="M5 12l14 0" />
                    </svg> @lang('messages.add')
                </a>
            </div>
            <br>
            
            <div class="table-responsive">
                <table class="table table-bordered table-stripe" id="payment_table">
                    <thead>
                        <tr>
                            <th>@lang('lang.'.$type)</th>
                            <th>@lang('messages.date')</th>
                            <!-- <th>@lang('purchase.ref_no')</th> -->
                            <th>@lang('purchase.amount')</th>
                            <th>@lang('purchase.payment_method')</th>
                            <th>@lang('purchase.payment_note')</th>
                            @if($accounts_enabled)
                            <th>@lang('lang_v1.payment_account')</th>
                            @endif
                            <th class="no-print">@lang('messages.actions')</th>
                        </tr>
                    </thead>
                    <tbody>
                        
                    </tbody>
                </table>
            </div>
        @endcomponent
    </section>
    <!-- /.content -->
    <div class="modal fade payment_modal" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel"></div>
    <div class="modal fade edit_payment_modal" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel"></div>
    <section class="invoice print_section" id="receipt_section"> </section> 
@stop
@section('javascript')
    <script src="{{ asset('js/payment.js?v=' . time()) }}"></script>
    <script>
        payment_table = $('#payment_table').DataTable({
	        processing: true,
	        serverSide: true,
            stateSave: true,
	        aaSorting: [[1, 'desc']],
	        ajax: {
	            url: '{{action([\App\Http\Controllers\TransactionPaymentController::class, 'index'])}}',
	            "data": function (d) {
                    d.type = '{{$type}}';
                },
	        },
	        columnDefs: [
	            {
	                targets: [1, 3],
	                orderable: false,
	                searchable: false,
	            },
	        ],
	        columns: [
	            { data: 'contact_name', name: 'contacts.name', searchable: true, orderable: false},
                { data: 'date', name: 'date', searchable: false, orderable: false},
                // { data: 'payment_ref_no', name: 'payment_ref_no', searchable: true, orderable: false},
                { data: 'amount', name: 'amount', searchable: false, orderable: false},
                { data: 'payment_types', name: 'payment_types', searchable: false, orderable: false},
                { data: 'note', name: 'note', searchable: false, orderable: false},
                @if($accounts_enabled)
                { data: 'payment_account', name: 'payment_account', searchable: false, orderable: false},
                @endif
                { data: 'action', name: 'action', searchable: false, orderable: false},
	        ],
	        fnDrawCallback: function(oSettings) {
	            __currency_convert_recursively($('#payment_table'));
	        }
	    });

    </script>
@endsection