@extends('pages.layout')
@section('title', 'Vendors')

@section('content')
    <style>
        .addvendors {
            display: flex;
            align-items: center;
            justify-content: space-between
        }
    </style>
    <div class="page-container">
        <div class="main-content">
            @include('pages.includes.messages')
            <div class="card">
                <div class="card-body">
                    <div class="addvendors">

                        <h4>Vendors Price History List</h4>



                    </div>
                    <input type="hidden" id="vendorCount" value="{{ $vendorCount }}">
                    <div class="addvendors" style="margin-top: 20px;">

                        <div class="m-t-25" style="width: 100%;">
                            <table id="datatable" class="table" data-page-length = "10">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Owner Name</th>
                                        <th>Sub Category</th>
                                        <th>Price</th>
                                        <th>Date</th>

                                    </tr>
                                </thead>
                                <tbody>
                            </table>
                            </tbody>
                            <div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endsection


    @section('js')
        <script src="{{ asset('assets/js/moment.js') }}"></script>
        <script src="{{ asset('assets/js/moment-timezone.js') }}"></script>

        <script>
            $(document).ready(function() {
                var vendor_id = $('#vendorCount').val();

                var table = $('#datatable').DataTable({
                    "processing": true,
                    "serverSide": true,
                    responsive: true,
                    pageLength: 25,
                    'order': [
                        [0, 'desc']
                    ],
                    language: {
                        search: "",
                        searchPlaceholder: "Search Here",
                    },
                    "ajax": {
                        "url": "{{ route('admin.vendors.view.daily.price.history.search') }}",
                        "type": "POST",
                        "headers": {
                            "X-CSRF-TOKEN": "{{ csrf_token() }}"
                        },
                        "data": function(d) {
                            d.vendor_id = vendor_id;
                        }
                    },
                    columns: [{
                            data: null,
                            orderable: false
                        },
                        {
                            data: 'vendor_id'
                        },
                        {
                            data: 'sub_category_id'
                        },


                        {
                            data: 'price'
                        },
                        {
                            data: 'created_at',
                            render: function(data, type, row) {
                                return moment(data).tz('Asia/Kolkata').format('DD-MM-YYYY | hh:mm A');
                            }
                        },
                    ],
                    createdRow: function(row, data, dataIndex) {
                        $('td:eq(0)', row).html(dataIndex + 1);
                    }
                });
            });
        </script>
    @endsection