@extends('layouts.app')

@section('content')
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    <div class="container">
        <div class="row margin-top-10">
            <div class="col-md-12">
                <form class="form-inline text-center" role="form" name="filterTransactions" id="filterTransactions"
                    method="POST">
                    {{ csrf_field() }}
                    <div class="form-group">
                        <label>Date Range:</label>
                        <div class="input-group">
                            <input type="text" name="range" class="range-picker" id="range">
                        </div>
                    </div>
                    <button type="submit" class="btn knowmad_btn_blue knowmad_btn" style="width:95px"
                        name="search">Search</button>
                </form>
            </div>
        </div>
        <div class="row margin-top-10">
            <div class="col-md-12">
                {!! $dataTable->table([
                    'id' => 'transactionTable',
                    'class' => 'table table-striped tableStyle no-bottom dt-responsive',
                ]) !!}
            </div>


        </div>
    </div>
@endsection

@push('footer_js')
    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
    <script>
        $('#filterTransactions').submit(function(e) {
            e.preventDefault();
            window.LaravelDataTables["transactionTable"].draw();
        });

        $('#transactionTable')
            .on('preXhr.dt', function(e, settings, data) {
                data.range = $('.range-picker').val();
            });
    </script>
    <script>
        $("#range").daterangepicker({
            startDate: moment().startOf("month"),
            endDate: moment().endOf("month")
        });
    </script>

    <script src="/js/buttons.server-side.js"></script>
    {!! $dataTable->scripts() !!}
@endpush