@extends('layouts.master')

@section('title', 'Invoices')

@push('styles')
    <link rel="stylesheet" href="{{asset('backend/css/pages-css/setting-page.css')}}">
@endpush
@section("content")

    <div class="card">
        <div class="card-body">
            <div id="custom_toolbar" class="float-right">
                @can('invoice-export')
                <div class="dropdown" data-toggle="tooltip" data-placement="bottom" title="Export data">
                    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton"
                            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i
                            class="bi bi-download"></i> {{ __('Export') }}</button>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                        <a class="dropdown-item d-block" href="javascript:void(0)" onclick="exportTasks('invoices',['counter','purchase_by','purchase_date','name', 'price', 'tax', 'value'],'csv', ['{{$id}}'])">CSV</a>
                        <a class="dropdown-item d-block" href="javascript:void(0)" onclick="exportTasks('invoices',['counter','purchase_by','purchase_date','name', 'price', 'tax', 'value'],'zip', ['{{$id}}'])">ZIP</a>
                    </div>
                </div>
                @endcan
            </div>

            <table class="table table-bordered" id="bstable" table-for="invoice"
                   data-show-button-text="true" data-show-search-clear-button="true" data-toggle="table"
                   data-ajax="ajaxRequestPurchaseInvoice" data-side-pagination="server" data-pagination="true"
                   data-total-field="count" data-data-field="items" data-show-columns="true"
                   data-show-toggle="false" data-show-export="false" data-filter-control="true"
                   data-show-columns-toggle-all="false" data-toolbar="#custom_toolbar"
                   data-icons="icons" data-icons-prefix="bi" data-silent-sort="false"
                   data-export-options='{"fileName": "{{ config('app.name') . ' - Purchase Invoices - ' . date('d/m/Y-H:m:s') }}"}' data-loading-template="DataTaleLoadingTemplate" data-search-on-enter-key="true">
                    <thead>
                    <tr>
                        <th data-field="counter" data-sortable="false">{{ __('#') }}</th>
                        <th data-field="purchase_by" data-filter-control="input"  data-filter-control-placeholder="Purchase By">{{__('Purchase By')}}</th>
                        <th data-field="purchase_date" data-filter-control="input"  data-filter-control-placeholder="Purchase Date">{{__('Purchase Date')}}</th>
                        <th data-field="name" data-sortable="false" data-filter-control="false" data-filter-control-placeholder="Package Name">{{__('Package Name')}}</th>
                        <th data-field="price" data-filter-control="input" data-filter-control-placeholder="Price">{{__(' Price')}}</th>
                        <th data-field="tax" data-filter-control="input"  data-filter-control-placeholder="Tax">{{__('Tax')}}</th>
                        <th data-field="value" data-filter-control="input"  data-filter-control-placeholder="Price">{{__('Total Price')}}</th>
                        <th data-field="action">{{__('Action')}}</th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
        </div>
    </div>


@endsection

@push('scripts')
    <script>
        let id = "{{$id}}"
        function ajaxRequestPurchaseInvoice(params) {
            //
            let url = baseURL + "admin/purchase/invoice/data-table/"+id
            $('.filter-control input.search-input').prop('readonly', true);
            $.get(url + '?' + $.param(params.data)).then(function (res) {
                $('.filter-control input.search-input').prop('readonly', false);
                params.success(res)
            })
        }
    </script>
@endpush