@extends('layouts.master')

@section('page-title')
    {{ __('Money Drop Report') }}
@endsection

@section('menu')
    {{ __('Bonuses') }}
@endsection

@section('sub-menu')
    {{ __('Money Drop Report') }}
@endsection

@section('content')
    <div class="tab-content">

        <div class="tab-pane active" id="money-drop-report-form">
            <div class="bs-example">
                <form js-container="#container-money-drop-report" js-callbacks="initializeDatepicker" method="POST"
                    action="{{ route('esa.tools.money.drop.campaigns.report.render') }}">
                    @csrf
                    <div class="row">
                        <div class="form-group col-lg-1">
                            <label>{{ __('Show per page:') }}</label>
                            {!! Form::select('perPage', Config::get('globalvar.perpage'), null, ['class' => 'form-control']) !!}
                        </div>
                        <div class="form-group col-lg-2">
                            <label>{{ __('Select Partners:') }}</label>

                            <select class="form-control partner_select_edit_campaign multiple_partner_select js-select2"
                                multiple="multiple" name="partner_select[]">
                                @foreach ($partnerSelect as $partner)
                                    <option value="{{ $partner->id }}">
                                        {{ $partner->description }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="form-group col-lg-2">
                            <label>{{ __('Select Skins:') }}</label>
                            <select class="form-control select-skin js-select2" multiple="multiple" id="mySelect2"
                                name="skin_ids[]" disabled>
                            </select>
                        </div>

                        <div class="form-group col-md-3">
                            <label for="game_category">{{ __('From - To') }}</label>
                            <input type="text" name="daterange" class="form-control js-datepicker-range-md"
                                value="{{ Request::get('daterange') }}" autocomplete="off">
                        </div>

                        <div class="form-group col-md-2">
                            <label>{{ __('Select Campaign:') }}</label>
                            <select class="form-control" name="campaign_id">
                                <option value="">{{ __('None') }}</option>

                                @foreach ($campaigns as $campaign)
                                    <option value="{{ $campaign['id'] }}"
                                        {{ $campaign['id'] == $campaign_id ? 'selected' : '' }}>
                                        {{ $campaign['name'] }}</option>
                                @endforeach
                            </select>
                        </div>


                        <div class="form-group col-1">
                            <label for="user_id">{{ __('Aggregator ID:') }}</label>
                            <input type="text" class="form-control" id="user_id" name="user_id"
                                value="{{ Request::get('user_id') }}">
                        </div>
                        <div class="form-group col-1">
                            <label for="casino_id">{{ __('External ID:') }}</label>
                            <input type="text" class="form-control" id="casino_id" name="casino_id"
                                value="{{ Request::get('casino_id') }}">
                        </div>

                        <div class="form-group col-1">
                            <label for="affiliate">{{ __('Username:') }}</label>
                            <input type="text" class="form-control" id="username" name="username"
                                value="{{ Request::get('username') }}">
                        </div>

                        <div class="form-group col-1 mb-0 pr-1 d-flex align-items-center">
                            <input type="checkbox" class="form-check-input" name="summarized">
                            <label class="form-check-label" for="summarized">{{ __('Summarized') }}</label>
                        </div>

                        <div class="form-group col-md-1 mb-0 align-self-center text-center">
                            <button type="submit"
                                class="js-submit btn btn-primary waves-effect waves-light">{{ __('Search') }}</button>
                        </div>
                        <div class="table-responsive">
                            <div id="container-money-drop-report">
                                @if (isset($campaign_report))
                                    @include ($view)
                                @endif
                            </div>
                        </div>
                    </div>
                </form>

            </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="/assets/js/reports.js"></script>

    <script>
        $(document).ready(function() {
            initializeDatepickerRange();
            Reports.initialize({
                first_range_days_before: 2
            });



            $('.js-datepicker-range-md').attr("placeholder", "Choose Range");
            $('.js-datepicker-range-md').daterangepicker({
                "showDropdowns": true,
                // timePicker: true,
                autoApply: true,
                autoUpdateInput: false,

                ranges: {

                    'Today': [moment().startOf('day'), moment().endOf('day')],
                    'Yesterday': [moment().startOf('day').subtract(1, 'days'), moment().endOf('day')
                        .subtract(1, 'days')
                    ],
                    'Last 7 Days': [moment().startOf('day').subtract(6, 'days'), moment().endOf('day')],
                    'Last 30 Days': [moment().startOf('day').subtract(29, 'days'), moment().endOf('day')],
                    'This Month': [moment().startOf('month'), moment().endOf('day')],
                    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1,
                        'month').endOf('month')]
                },
                alwaysShowCalendars: true,
                opens: "center",
                locale: {
                    format: 'YYYY-MM-DD HH:mm:ss',
                    cancelLabel: 'Clear'

                },
            });

            $('.js-datepicker-range-md').on('apply.daterangepicker', function(ev, picker) {
                $(this).val(picker.startDate.format('YYYY-MM-DD HH:mm:ss') + ' - ' + picker.endDate.format('YYYY-MM-DD HH:mm:ss'));
            });

        });

        function setSkins() {
            var partners_ids = $(".multiple_partner_select").val();
            var token = $('meta[name="csrf_token"]').attr('content');


            $.ajax({

                data: {
                    "_token": token,
                    'partners_ids': partners_ids
                },
                type: 'GET',
                url: "/bonuses/partner-skins",
                beforeSend: function() {
                    $("#loading").show();
                },
                success: function(response) {

                    if (response) {

                        var mySelect = $('.select-skin');

                        mySelect.find('option').remove()
                        //mySelect.append(`<option value='-1'>All</option>`)
                        if (partners_ids.length > 0) {


                            $.each(response, function(key, value) {
                                mySelect.append(
                                    `<option value='${value.skinid}' selected>${value.name}</option>`
                                )
                                // mySelect.val(value.skinid);

                            });
                        }


                        if (partners_ids.length > 0) {
                            mySelect.prop("disabled", false);
                            $("#submit-campaign").removeAttr('disabled');
                        } else {
                            mySelect.prop("disabled", true);
                            $("#submit-campaign").attr('disabled', 'disabled');
                        }
                    }

                },
                complete: function() {
                    $("#loading").hide();
                }
            });
        }

        $(".multiple_partner_select").on("change", function() {
            setSkins();
        });
    </script>
@endsection