@extends('backend.layouts.app')
@section('content')
<div class="row">
    <div class="col-md-12 col-12">
        <div class="alert alert-info"><strong>Important Note!</strong> The report is Fully updated every 24 hours!</div>
    </div>
</div>
<h1 class="page-header mb-4">
    @lang('messages.revenue.revenue_list') 
    <div class="float-right" style="width: 35%;">
        <div class="row">
            <label for="bs-rangepicker-range" class="col-md-3">Ranges :</label>
            <div class="col-md-9">
                <div class="input-group" id="default-daterange">
                    <input type="text" name="bs-rangepicker-range" id="bs-rangepicker-range" class="form-control" value="">
                    <span class="input-group-append">
                    <span class="input-group-text"><i class="fa fa-calendar"></i></span>
                    </span>
                </div>
            </div>
        </div>
    </div>
</h1>
<div class="panel panel-inverse">
    <div class="panel-heading">
        <h4 class="panel-title">@lang('messages.revenue.revenue_list')</h4>
        <div class="panel-heading-btn">
            <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></a>
            <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-success reload" data-id="dataTableRevenueList"><i class="fa fa-redo"></i></a>
            <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-warning" data-click="panel-collapse"><i class="fa fa-minus"></i></a>
            <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-danger" data-click="panel-remove"><i class="fa fa-times"></i></a>
        </div>
    </div>
    <div class="panel-body">
        <table class="datatables-menus table" id="dataTableRevenueList">
            <thead>
                <tr>
                    <th>@lang('messages.revenue.sr_no')</th>
                    <th>@lang('messages.revenue.date')</th>
                    <th>@lang('messages.revenue.conversion')</th>
                    <th>@lang('messages.revenue.revenue')</th>
                </tr>
            </thead>
            <tbody>
                <!-- Table body content goes here -->
            </tbody>
        </table>
    </div>
</div>

<!-- / Content -->
@endsection

@section('footer_scripts')
<script>
    $(document).ready(function() {
        var urlData = "{{ route('revenue.index') }}";
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        var tableRevenue = $("#dataTableRevenueList").DataTable({
            processing: true,
            serverSide: true,
            order: [[0, 'desc']],
            ajax: urlData,
            columns: [
                {data: "DT_RowIndex", name: "id"},
                {data: "created_at"},
                {data: "conversion"},
                {data: "revenue"},
            ],
            columnDefs: [
                {
                    target: [{{$target}}],
                    visible: false
                }
            ]
        });

        $("#bs-rangepicker-range").on("change", function() {
            var date = $(this).val();
            tableRevenue.ajax.url( urlData+'?date_range='+date ).load();
        });
    });
</script>
@endsection