@php $title = __('External Payment Vouchers List'); @endphp

@extends('layouts.master', [
    $title
])

@section('content')

    <x-page-header
        :title="$title"
        :breadcrumbs="[
            ['name' => __('Home'), 'url' => route('dashboard.index')],
        ]"
    />

    <x-card :header="false" >
        <x-row>
            <x-col size="4">
                <div class="search-box me-2 mb-2 d-inline-block">
                    <div class="position-relative">
                        <x-form-input type="text" style="max-width: 300px; width: 300px;" class="f_search" placeholder="{{ __('Search') }}" />
                        <i class="bx bx-search-alt search-icon"></i>
                    </div>
                </div>
            </x-col>

            <x-col size="8">
                <div class="text-sm-end">
                    <x-link class="btn-danger destroy-selector d-none">{{ __('Delete selector') }}</x-link>
                </div>
            </x-col>
        </x-row>

        <x-data-table
            :columns="[
                ['label' => 'ID', 'width' => '40px'],
                ['label' => __('Voucher Number')],
                ['label' => __('Payee Name')],
                ['label' => __('Payment Method')],
                ['label' => __('Amount')],
                ['label' => __('Payment Date')],
                ['label' => __('Type')],
                ['label' => __('Audit Info')],
                ['label' => __('Status')],
                ['label' => __('Actions'), 'width' => '100px'],
            ]"
        />
    </x-card>

@endsection

@section('modals')

@endsection

@section('scripts')
    <script>
        $(document).ready(() => {
            let inputs = {
                search: $(".f_search"),
            };

            const table = initServerTable({
                order: [[1, 'desc']],
                locale: `{{ $locale }}`,
                ajax: {
                    url: '{{ route('accounting.payment-vouchers.yajra') }}',
                    type: 'GET',
                    data: data => {
                        data.search = inputs.search.val();
                        data.type = 'external';
                    },
                },
                columns: [
                    {data: 'checkbox', sortable: false, orderable: false},
                    {data: 'id'},
                    {data: 'voucher_number'},
                    {data: 'payee_name'},
                    {data: 'payment_method'},
                    {data: 'amount'},
                    {data: 'payment_date'},
                    {data: 'type'},
                    {data: 'audit_info'},
                    {data: 'status'},
                    {data: 'actions', sortable: false, orderable: false},
                ]
            });

            inputs.search.on("input", () => table.draw());
            table.draw();

            setInterval(() => {
                table.draw()
            }, 30000);

            let routes = {
                destroy: `{{ route_ID_('subscriptions.destroy') }}`,
                destroySelector: `{{ route_ID_('subscriptions.destroy-selector') }}`,
            };

            handleDelete(routes.destroy, table);
            handledestroySelector(routes.destroySelector, table);


        });

    </script>
@endsection
