@extends('layouts.app')

@section('content')
    <div class="content-header">
        <p class="title">Sales Invoice</p>
        <ul>
            <li><a href="{{ route('invoice.create') }}">{{ _('Add New') }}</a></li>
        </ul>
    </div>
    <div class="content">
        <table id="myTable" class="table table-bordered table-striped table-hover">
            <thead>
                <tr>
                    <th>Quotation ID</th>
                    <th>Order Type</th>
                    <th>Customer</th>
                    <th>Total Qty</th>
                    <th>Total Amount</th>
                    <th>Quotation/Order From</th>
                    <th>Date</th>
                    <th>Sales Ledger</th>
                    <th>Status</th>
                    <th>Actions</th>
                </tr>
        </table>
    </div>
@endsection
@push('js')
    <script>
        $(function() {
            $("#myTable").DataTable({
                layout: {
                    topStart: {
                        buttons: [{
                            extend: 'colvis',
                            collectionLayout: 'fixed columns',
                            popoverTitle: 'Column visibility control'
                        }]
                    }
                },
                searching: false,
                responsive: true,
                paging: false,
                ajax: {
                    url: '/api/store',
                    dataSrc: 'data',
                },
                columns: [{
                        data: 'id'
                    },
                    {
                        data: 'name',

                    },
                    {
                        data: 'address'
                    },
                    {
                        data: 'contact_person'
                    },
                    {
                        data: 'contact_number'
                    },
                    {
                        data: 'name',

                    },
                    {
                        data: 'address'
                    },
                    {
                        data: 'contact_person'
                    },
                    {
                        data: 'contact_number'
                    },
                    { // actions
                        data: 'id',
                        orderable: false,
                        // searchable: false,
                        render: function(data) {
                            return `<a href="/store/${data}/edit" ><i class="fa fa-edit"></i></a>\
                            <a href="/store/${data}/delete" ><i class="fa fa-trash text-danger"></i></a>`
                        }

                    },
                ]
            });
        })
        // let table = new DataTable('#myTable', {
        //     responsive: true,
        //     paging: false,
        //     searching: false
        // });
    </script>
@endpush