@extends('admin.layouts.layout')

@section('content')

    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>

    <div class="container-fluid">
        <div class="row clearfix">
            <div class="col-lg-12">
                <div class="card">

                    <div class="body">

<div class="row">
<div class="col-md-4">

<div class="form-group">
<label>Start Date</label>
<input type="date"   id="transactionstartdate" class="changefiltertransaction form-control" name="transactionstartdate">
</div>

</div>
<div class="col-md-4">

        <div class="form-group">
            <label>End Date</label>
            <input type="date"   id="transactionenddate" class="changefiltertransaction form-control" name="transactionsenddate">
        </div>

    </div>
<div class="col-md-4">
    <div class="form-group">
        <label>Sales Type</label>
        <div class="multiselect_div">
            <select id="salestype-selection"   style="width:100%" class="select2 form-control changefiltertransaction">
                <option value="">Select Sales type</option>
                <option value="1">Client Order</option>
                <option value="2">Advertiser Advertisement </option>
                <option value="3">Client Advertisement </option>

            </select>
        </div>
    </div>
</div>
<div class="col-md-4">
        <div class="form-group">
            <label>User-Id</label>
            <div class="multiselect_div">
                <select id="usertype-selection"   style="width:100%" class="select2 form-control changefiltertransaction">
                    <option value="">Select User-Id</option>
@php
    $users=\App\Models\User::get();
@endphp
                    @foreach($users as $user)
                    <option  value="{{ $user->id }}">{{ $user->user_id }}-{{ $user->name  }}</option>
                    @endforeach
                </select>
            </div>
        </div>
    </div>
</div>

                        <br>
                        <br>

                        <div class="table-responsive check-all-parent">
                            <table class="table" id="list_table">
                                <thead>
                                <tr>
{{--                                    <th>S.no</th>--}}
                                    <th>Salesno</th>
                                    <th>User Id</th>
                                    <th>HSN Code</th>
                                    <th>Date</th>
                                    <th>Sales Type</th>
                                    <th>Grant Total</th>
                                </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <script>
        $(function () {
            let table =$('#list_table').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: '{{ route("admintransactionlist.index") }}',
                    type: 'GET',
                    data: function (d) {
                        d.transactionstartdate = $('#transactionstartdate').val();
                        d.transactionenddate = $('#transactionenddate').val();
                        d.salestypeselection = $('#salestype-selection').val();
                        d.usertypeselection = $('#usertype-selection').val();
                    }
                },
                columns: [
                    // {data: 'DT_RowIndex'},
                    {data: 'salesno'},
                    {data: 'userid'},
                    {data: 'hsncode'},
                    {data: 'date'},
                    {data: 'salestype'},
                    {data: 'granttotal',orderable: false, searchable: false}
                ]
            });

            $('.changefiltertransaction').change(function () {
                table.ajax.reload();
            });

        });
    </script>

@endsection