@extends('admin.layout.master')
@section('content')
    <style>
        .dataTables_length {
            display: none !important;
        }
    </style>


    <div class='bg-white rounded'>
        <div class="nav-scroller">
            <nav class="nav">
                <li class="nav-item d-flex align-items-center">
                    <a class='nav-link fw-bold text-primary' href="{{ url('/home') }}">{{ trans('project.home') }}</a>
                    <span class="bi bi-caret-right"></span>
                    <span class="mx-2"> {{ trans('project.Invoices') }} </span>
                </li>

                <li class="nav-item mx-auto me-2 d-flex align-items-center gap-2">
                    <label> {{ trans('admin.show') }} </label>
                    <select class="form-select form-select-sm" id="no_of_entries">
                        <option value="10" selected>10</option>
                        <option value="30">30</option>
                        <option value="50">50</option>
                        <option value="100">100</option>
                        <option value="200">200</option>
                        <option value="300">300</option>
                        <option value="400">400</option>
                        <option value="400">500</option>
                        <option value="-1">{{ trans('admin.all') }}</option>
                    </select>
                </li>
                <li class="nav-item me-2 d-flex align-items-center gap-2">

                </li>


                <li class="me-2">
                    <select id="invoice_type" class="form-select form-select-sm">
                        <option value=""> {{ trans('project.choose') }} </option>
                        <option value="0"> {{ trans('project.Main') }} </option>
                        <option value="1"> {{ trans('project.Simple') }} </option>
                        <option value="2"> {{ trans('project.Custom') }} </option>
                    </select>
                </li>

                <li class="nav-item me-2">
                    <input type="text" class="form-control form-control-sm" id="search_new"
                        placeholder="{{ trans('project.search') }}">
                </li>

                <li class="nav-item">
                    <a class="nav-link" data-bs-toggle="dropdown">
                        <b class="bi-box-arrow-up-right me-2"></b> {{ trans('admin.export') }}
                    </a>
                    <ul class="dropdown-menu">
                        <li>
                            <a class="dropdown-item" onclick="jQuery('.data-table').print()">
                                <i class="bi-printer mx-2"></i>
                                {{ __('admin.print') }}
                            </a>
                            <a class="dropdown-item"
                                onclick="exportTable('data-table', 'pdf', '{{ trans('project.invoices') }} 2024-10-18 02:31:25')">
                                <i class="bi bi-file-earmark-pdf mx-2"></i>
                                {{ __('admin.pdf') }}
                            </a>
                            <a class="dropdown-item"
                                onclick="exportTable('data-table', 'csv', '{{ trans('project.invoices') }} 2024-10-18 02:31:25')">
                                <i class="bi bi-file-spreadsheet mx-2"></i>
                                {{ __('admin.excel_csv') }}
                            </a>
                        </li>
                    </ul>
                </li>
            </nav>
        </div>
    </div>



    <main class="px-0 scroll-y">
        <!-- body content  -->
        <div class="card rounded border-0">
            <div class="card-body pt-0">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="table-responsive">
                            <table class="table w-100 table-sm table-hover mb-0 table-bordered data-table">
                                <thead class="bg-light">
                                    <tr>
                                        {{-- <th>{{ trans('project.id') }}</th> --}}
                                        <th class=''>{{ trans('#') }}</th>
                                        <th class=''>{{ trans('project.Invoice Type') }}</th>
                                        <th>{{ trans('project.Note') }}</th>
                                        <th>{{ trans('project.Amount') }}</th>
                                        <th class="text-end">{{ trans('project.actions') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <script type="text/javascript">
        var table = "";
        $(function() {
            table = $('.data-table').DataTable({
                processing: true,
                serverSide: true,
                "searching": false,
                "caseInsensitive": false,
                ajax: {
                    url: "{{ route('invoices') }}",
                    type: 'GET',
                    data: function(d) {
                        d.search_new = $('#search_new').val();
                        d.invoice_type = $('#invoice_type').val();
                        // console.log(d);
                    }
                },
                columns: [
                    {
                        data: 'invoice_no',
                        name: 'invoice_no',

                    },
                    {
                        data: 'invoice_type',
                        name: 'invoice_type',
                    },
                    {
                        data: 'note',
                        name: 'note',
                    },
                    {
                        data: 'amount',
                        name: 'amount',
                    },
                    {
                        data: 'action',
                        name: 'action',
                        class: 'no-print text-end',
                        orderable: false,
                        searchable: false,

                    },
                ],
                "lengthMenu": [
                    [10, 20, 50, 70, 100, 200, 300, 400, 500, -1],
                    [10, 20, 50, 70, 100, 200, 300, 400, 500, "All"]
                ]
            });

            $('body').on('change', '#no_of_entries', function(e) {
                $(".custom-select").html(`<option value='` + $(this).val() + `' selected></option>`)
                .change();

            });
        });
        $('body').on('change', '#invoice_type', function(e) {
            table.draw(true);
        });
        $('body').on('keyup', '#search_new', function(e) {
            table.draw(true);
        });

        $('body').on('click', '.clear', function(e) {
            $('#search_new').val("");
            $('#invoice_type').val("");
            table.draw(true);
        });
    </script>
    @include('project/invoices/script')
@endsection