@extends('layouts.master')

@section('page-title')
    {{ __('Bonuses') }}
@endsection

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

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

@section('content')
    <form js-container="#container-esa-money-drop" class="ajax-form form-campaigns-index"
        action="{{ route('esa.tools.render.money.drop.campaigns') }}">
        @csrf
        <div class="row">

            <div class="form-group col-lg-2">
                <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>{{ __('Campaign id:') }}</label>
                <input type="text" class="form-control" name="campaignid" placeholder="{{ __('Campaign id') }}" />
            </div>
            <div class="form-group col-lg-2">
                <label>{{ __('From:') }}</label>
                <input type="text" class="js-datepicker form-control" id="dateFrom"
                    placeholder="{{ __('yyyy') }}-mm-dd hh:mm" name="dateFrom" value="" autocomplete="off">
            </div>
            <div class="form-group col-lg-2">
                <label>{{ __('To:') }}</label>
                <input type="text" class="js-datepicker-to form-control" id="dateTo"
                    placeholder="{{ __('yyyy') }}-mm-dd hh:mm" name="dateTo" value="" autocomplete="off">
            </div>
            <div class="form-group col-lg-2">
                <label>{{ __('Name:') }}</label>
                <input type="text" class="form-control" name="name" placeholder="{{ __('Name or description') }}" />
            </div>
            <div class="form-group col-lg-2">
                <label>{{ __('Aggregator ID:') }}</label>
                <input type="text" class="form-control" name="userid" placeholder="{{ __('Aggregator ID') }}" />
            </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-lg-2 p-0 ml-2 mt-4 align-self-center">
                <button class="js-submit btn btn-primary waves-effect waves-light">{{ __('Search') }}</button>
            </div>

            @csrf

            <div class="mo-mb-2 col-lg-12">
                <a target="__blank" href="{{ route('esa.tools.create.money.drop.campaign', ['type' => 300]) }}"
                    class="btn btn-success">{{ __('Create Esa Money Drop Campaign') }}</a>
            </div>
        </div>
    </form>

    <div class="m-t-20 table-responsive" style="min-height:600px">
        <div id="container-esa-money-drop">
            @if (isset($campaigns))
                @include('partial.tables.esa-tools.campaigns.esa-money-drop-table')
            @endif
        </div>
    </div>

@endsection

@section('script')
    <script>
        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();
        });
        $(document).ready(function() {
        
            $(document).on("click",".js-elem-submit2",function(e) {


                e.preventDefault();
                var token = $('meta[name="csrf_token"]').attr('content');

                var campaign_id = $(this).attr('data-campaign_id');
                var url = $(this).attr('js-url');

                $.ajax({

                    data: {
                        "_token": token,
                        'campaign_id': campaign_id
                    },
                    type: 'GET',
                    url: url,
                    beforeSend: function() {
                        $("#loading").show();
                    },
                    success: function(response) {

                        if (response) {
                            var row = $('#row-container-' + response.campaign_id);
                            var button = row.find('.js-status-change');
                            var action_button = row.find('.action-button');
                            row.removeClass();
                            row.addClass(response.class);
                            button.removeClass();
                            button.addClass('js-elem-submit2 js-status-change btn btn-'+response.class+' btn-xs');
                            button.text(response.state);

                            if(response.state == 'running') {
                                var bgd_color = "#dff0d8";
                                action_button.text('View');
                            }else if(response.state == 'pending') {
                                var bgd_color = "#faf2cc";

                                action_button.text('Edit');

                            }else {
                                var bgd_color = "#FFFFFF";
                                action_button.text('View');
                            }

                            row.css("background-color", bgd_color);

                        }

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

            });
        });


        $('[data-toggle="tooltip"]').tooltip({
            boundary: 'window'
        })
    </script>
@endsection