@extends('layouts.app')

@section('sidebar')
    @include('sidebar')
@stop

@section('content')
<div class="m-subheader">
    <div class="d-flex align-items-center">
        <div class="mr-auto">
            <h3 class="m-subheader__title">Bonus Request</h3>
        </div>
        <div>
            <span class="m-subheader__daterange pull-right" id="daterangepicker">
                <span class="m-subheader__daterange-label">
                    <span class="m-subheader__daterange-title"></span>
                    <span class="m-subheader__daterange-date m--font-brand"></span>
                </span>
                <a href="#" class="btn btn-sm btn-brand m-btn m-btn--icon m-btn--icon-only m-btn--custom m-btn--pill">
                    <i class="la la-angle-down"></i>
                </a>
            </span>
        </div>
    </div>
</div>

<div class="m-content">
    <div class="m-portlet m-portlet--full-height">
        <div class="m-portlet__head">
            <div class="m-portlet__head-caption">
                <div class="m-portlet__head-title">
                    <h3 class="m-portlet__head-text">Bonus Request</h3>
                </div>
            </div>
        </div>

        <div class="m-portlet__body">
            @if(Session::has('success'))
                <div class="alert alert-success">
                    {!! Session::get('success') !!}
                </div>
            @endif

            <!-- Search Filters -->
            <form class="m-form m-form--fit m--margin-bottom-20" onsubmit="return false;">
                <div class="row m--margin-bottom-20">
                    <div class="col-lg-3 m--margin-bottom-10-tablet-and-mobile">
                        <label>Search:</label>
                        <input type="text" class="form-control m-input" placeholder="Search" id="general-search">
                    </div>

                    <div class="col-lg-2 m--margin-bottom-10-tablet-and-mobile">
                        <label>Status:</label>
                        <div class="m-form__control">
                            <select class="form-control m-input" id="search-status">
                                <option value="">All</option>
                                <option value="Pending">Pending</option>
                                <option value="Accepted">Accepted</option>
                                <option value="Rejected">Rejected</option>
                            </select>
                        </div>
                    </div>

                    <div class="col-lg-3 m--margin-bottom-10-tablet-and-mobile">
                        <br>
                        <a href="javascript:void(0)" id="search-datatable" class="btn btn-brand m-btn m-btn--icon" style="margin-top: 9px;">
                            <span><i class="fas fa-search"></i><span>Search</span></span>
                        </a>
                    </div>
                </div>
            </form>
            <!-- Search End -->

            <table class="m_datatable table table-striped- table-bordered table-hover table-checkable" id="bonus-list">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Email Id.</th>
                        <th>Account No</th>
                        <th>Amount</th>
                        <th>Status</th>
                        <th>Percentage(%)</th>
                        <th>Date</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>
@endsection

@section('script')
{{ Html::script('custom/datatables/datatables.bundle.js') }}
{{ Html::script('custom/eModal/eModal.js') }}
<script type="text/javascript">
    var table, startDateDataTable, endDateDataTable;

    (function ($) {
        $(document).ready(function () {

            /** ------------------------------
             *  Initialize DataTable
             * ------------------------------ */
            table = $('#bonus-list').DataTable({
                responsive: true,
                searchDelay: 500,
                processing: true,
                serverSide: true,
                oLanguage: {
                    sProcessing: '<div class="m-loader m-loader--brand m-loader--left"><span>Please wait...</span></div>',
                },
                ajax: {
                    url: base_url + "/transactions/bonusrequestDatatable",
                    type: "GET",
                    data: function (d) {
                        d.startDate = startDateDataTable;
                        d.endDate = endDateDataTable;
                        d.status = $('#search-status').val();
                    }
                },
                order: [[6, "desc"]],
                dom: "<'row'<'col-sm-12'tr>>" +
                     "<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'p>>",
                columns: [
                    { data: 'id', name: 'id', searchable: false, visible: false },
                    { data: 'name', name: 'name' },
                    { data: 'email', name: 'email' },
                    { data: 'ac_no', name: 'ac_no' },
                    { data: 'amount', name: 'amount' },
                    { data: 'status', name: 'status' },
                    { data: 'percentage', name: 'percentage' },
                    { data: 'created_at', name: 'created_at' },
                    { data: 'action', name: 'action', searchable: false },
                ]
            });

            /** ------------------------------
             *  Search Handlers
             * ------------------------------ */
           $('#search-datatable').click(function () {
                let searchText = $('#general-search').val();
                let status = $('#search-status').val();
            
                table.search(searchText);
                table.column(5).search(status);
                table.draw();
            });

            // Enter key triggers search
            $("#general-search").on("keyup", function (e) {
                if (e.keyCode === 13) {
                    $('#search-datatable').click();
                }
            });

            // Status filter
            $('#search-status').on('change', function () {
                $('#search-datatable').click();
            });

            /** ------------------------------
             *  Date Range Picker
             * ------------------------------ */
            var start = moment().subtract(29, 'days');
            var end = moment();

            function cb(start, end) {
                $('#daterangepicker span').html(start.format('YYYY-MM-DD') + ' - ' + end.format('YYYY-MM-DD'));
            }

            $('#daterangepicker').daterangepicker({
                startDate: start,
                endDate: end,
                ranges: {
                    'Today': [moment(), moment()],
                    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                    'This Month': [moment().startOf('month'), moment().endOf('month')],
                    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
                }
            }, cb);

            cb(start, end);

            $('#daterangepicker').on('apply.daterangepicker', function (ev, picker) {
                startDateDataTable = picker.startDate.format('YYYY-MM-DD');
                endDateDataTable = picker.endDate.format('YYYY-MM-DD');
                table.draw();
            });

        });
    })(jQuery);
</script>

<script>
    /** ------------------------------
     *  Bonus Request Details (Modal)
     * ------------------------------ */
    $(document).on('click', '.bonus-request-details', function (e) {
        var id = $(this).attr('data-id');
        var url = base_url + "/bonusrequest/bonusrequestdetail/" + id;
        var options = {
            url: url,
            title: 'Bonus Request Detail',
            size: 'md', // sm, lg, md
            buttons: [
                { text: 'Cancel', style: 'btn btn-secondary', close: true },
                { text: 'Submit', style: 'btn btn-primary', close: false, click: saveDetail }
            ]
        };
        eModal.ajax(options);
    });

    function saveDetail() {
        $('#bonus-request-form').submit();
    }
</script>
@endsection