@extends('layouts.master')

@section('css')
    {{-- <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.1.0/css/buttons.dataTables.min.css"> --}}
@endsection

@section('page-title')
    @lang('Balances Snapshot')
@endsection

@section('menu')
    @lang('Financial')
@endsection

@section('sub-menu')
    @lang('Balances Snapshot')
@endsection


@section('content')
    <div class="tab-content">
        <div class="tab-pane active">
            <div class="bs-example">
                <form
                    class="ajax-form form-balance"
                    method="POST"
                    action="{{ route('financial.real-bonus-snapshot-report.render') }}"
                    js-container="#container-financial-balance"
                    js-callbacks="initializeDataTables">
                    @csrf
                    <div class="row">
{{--                        <div class="form-group col-md-1">--}}
{{--                            <label>{{ __('Per Page:') }}</label>--}}
{{--                            <select class="form-control" name="perPage">--}}
{{--                                @foreach(config('globalvar.perpage') as $key => $page)--}}
{{--                                    <option value="{{ $key }}">--}}
{{--                                        {{ $page }}--}}
{{--                                    </option>--}}
{{--                                @endforeach--}}
{{--                            </select>--}}
{{--                        </div>--}}

                        <div class="form-group col-md-3">
                            <label>{{ __('Partner:') }}</label>
                            <select class="form-control" name="partner_select">
                                <option value="-1">{{ __('All') }}</option>
                                @foreach($partners as $partner)
                                    <option value="{{ $partner->id }}">
                                        {{ $partner->description }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="form-group col-md-3">
                            <label>{{ __('Skin:') }}</label>
                            <select class="form-control select-skin js-select2" multiple="multiple" name="skin_select[]" disabled>
                                <option value="-1">{{ __('All') }}</option>
                            </select>
                        </div>

{{--                        <div class="form-group col-md-2">--}}
{{--                            <label for="aggregator_id">--}}
{{--                                {{ __('Aggregator ID') }}--}}
{{--                            </label>--}}
{{--                            <input class="form-control" type="text" name="aggregator_id">--}}
{{--                        </div>--}}

{{--                        <div class="form-group col-md-2">--}}
{{--                            <label for="external_id">--}}
{{--                                {{ __('External ID') }}--}}
{{--                            </label>--}}
{{--                            <input class="form-control" type="text" name="external_id">--}}
{{--                        </div>--}}

                        <div class="form-group col-md-2">
                            <label for="Date">
                                {{ __('Date Start') }} <span class="text-danger">*</span>
                            </label>
                            <input type="text" name="date_start" class="form-control single-date" autocomplete="off">
                        </div>
                        <div class="form-group col-md-2">
                            <label for="Date">
                                {{ __('Date End') }} <span class="text-danger">*</span>
                            </label>
                            <input type="text" name="date_end" class="form-control single-date" autocomplete="off">
                        </div>

{{--                        <div class="form-group col-md-1">--}}
{{--                            <label>{{ __('Show By:') }}</label>--}}
{{--                            <select class="form-control" name="show_by">--}}
{{--                                <option value="1" selected="selected">--}}
{{--                                    {{ __('Summary') }}--}}
{{--                                </option>--}}
{{--                                <option value="2">--}}
{{--                                    {{ __('User') }}--}}
{{--                                </option>--}}
{{--                            </select>--}}
{{--                        </div>--}}
                        <div class="form-group col-md-2 align-self-center text-center mt-4">
                            <button type="submit" class="js-submit btn btn-primary waves-effect waves-light btn-block">
                                {{ __('Search') }}
                            </button>
                        </div>
                    </div>
                </form>

                <div class="table-responsive" style = "overflow-x: hidden !important ">
                    <div id="container-financial-balance">
                        @include('financial.real-bonus-balance.render')
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <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 type="text/javascript" src="https://cdn.datatables.net/buttons/2.1.0/js/dataTables.buttons.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/2.1.0/js/buttons.html5.min.js"></script>
    <script type="text/javascript" src="/assets/js/reports.js"></script>

    <script>
        $(document).ready(function () {
            //cusing problem on Campaign Summary Report
            //initializeDatepickerRange();

            let currentToday = new Date();

            $('.single-date').daterangepicker({
                locale: {
                    format: 'YYYY-MM-DD',
                },
                singleDatePicker: true,
                showDropdowns: true,
                startDate: currentToday
            });
            Reports.initialize({first_range_days_before: 2});
        });
    </script>
@endsection