@extends('layouts.app')

@section('content')
    <div class="content-header">
        <h1>Store/Warehouse</h1>
        <ul>
            <li><a href="{{ route('store.create') }}">{{ _('Add New') }}</a></li>
        </ul>
    </div>
    <div class="content">
        <table id="myTable" class="table table-bordered table-striped table-hover">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Address</th>
                    <th>Contact Person</th>
                    <th>Contact Number</th>
                    <th>Actions</th>
        </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'
                    },
                    { // actions
                        data: 'id',
                        orderable: false,
                        // searchable: false,
                        render: function(data) {
                            return `<a href="/store/${data}/edit" ><i class="fa fa-edit"></i></a>\
                            <form method="POST" action="/settings/store/${data}" class="d-inline">\
                                @method('DELETE')\
                                @csrf\
                                <button type="submit" class="text-danger btn btn-xs btn-link"><i class="fa fa-trash"></i></button>\
                            </form>`
                        }

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