@extends('layouts.master')

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

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

@section('sub-menu'){{ __('Affiliates') }}@endsection

@section('css')
<link href="/plugins/jquery-treetable/css/jquery.treetable.css" rel="stylesheet" type="text/css" />
@endsection

@section('content')
<div id="affiliates-container">
    @include('partial.payment.affiliates')
</div>
@endsection



@section('script')
<script src="/plugins/jquery-treetable/jquery.treetable.js"></script>
<script src="/assets/js/pages/affiliates.js?{{ rand(1, 10000) }}"></script>

<script>
    $(document).ready(function () {
        Affiliates.initialize();
    });

    $(document).on('show.bs.modal', '#agent-to-agent, #create-to-agent', function (e) {
        $('.from-affil-id, .to-affil-id, .js-choose-parent').select2({
            templateResult: function (data, container) {
                if (data.element) {
                    $(container).addClass($(data.element).attr("class"));
                }
                    return data.text;
                },
                multiple: false,
                placeholder: '  -- Please select -- ',
                theme: 'bootstrap4',


            });
    });


</script>

<script>
    $(document).on('click', '.js-change-affiliate-status', function () {
            var id = $(this).attr('data-id');
            var trElem = $(this).closest('tr');
            var btn = $(this).closest('a');
            var status = $(this).attr('data-status');
            var url = $(this).attr('data-href');
            var username = $(this).attr('data-name');
            var parent_username = $(this).attr('data-parent-name');
            var status_text = status == 'enable' ? "{{ __('Are you sure you want to enable affiliate') }}  "+username + "?"
                                                 : "{{ __('Are you sure you want to disable affiliate') }} "+username + "?";
            Swal.fire({

                //one line title cant work because of translating
                //title: "{{ __('Are you sure you want to') }} "+ (status == "enable" ? '{{__("enable")}} ' : 'disable ') + '{{ __("affiliate")}} ' + ""+username+"?<br/>{{ __(' ( parent affiliate: ') }} " +parent_username+")",
                title: parent_username != '' ? status_text + "<br/>{{ __('( parent affiliate: ') }} " +parent_username+ " )" : status_text,

                text: "",
                type: "warning",
                customClass: 'swal-wide',
                showCancelButton: true,
                confirmButtonColor: "#02a499",
                cancelButtonColor: "#ec4561",
                cancelButtonText : "{{ __('Cancel') }}",
                confirmButtonText: status == 'enable' ? "{{ __('Enable') }}" : "{{ __('Disable') }}"
              }).then(function (result) {
                if (result.value) {

                    $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        }
                    });

                    $.ajax({
                        data: {"_token": "{{ csrf_token() }}"},
                        type: 'POST',
                        url: url,
                        success: function (response) {

                            var message = "{{ __('Affiliate')}} "+username;
                            parent_username != '' ? message = message + "{{ __('( parent affiliate: ') }} " +parent_username+ " )" : message = message;

                            if (response.success){

                                if(status == "enable") {

                                    Swal.fire("{{  __('Enabled!') }}", message+" {{ __('is successfully enabled') }}", "success");
                                    trElem.removeClass('danger');
                                    btn.removeClass('btn-success').addClass('btn-danger');
                                    btn.text("{{ __('Disable') }}");
                                    $('.js-change-affiliate-status').attr('data-status', 'disable');


                                }else {
                                    Swal.fire("{{  __('Disabled!') }}", message+" {{ __('is successfully disabled') }}", "success");
                                    trElem.addClass('danger');
                                    btn.removeClass('btn-danger').addClass('btn-success');
                                    btn.text("{{ __('Enable') }}");
                                    $('.js-change-affiliate-status').attr('data-status', 'enable');

                                }
                            }
                            else {
                                Swal.fire("Error!", "Error occured.", "error");
                            }
                        },
                        error: function (request, status, error) {
                            Swal.fire("Error!", "Error occured.", "error");
                            console.log(request.responseText);
                        }
                    });
                }
            });
        });

        $(document).on('change', '.from-affil-id', function() {

            $('.to-affil-id').find('option').remove();

            $('.to-affiliate-row').removeClass('d-none');

            var bo_user_affil_id = $('input[name=current-bo-user-affilid]').val();
            var selected_affil_id = this.value;
            var url = $(this).attr('data-href');

            $.ajax({
                data: {
                    "_token": "{{ csrf_token() }}",
                    'selected_affil_id' : selected_affil_id,
                    'bo_user_affil_id' : bo_user_affil_id
                },

                type: 'POST',
                url: url,
                success: function (response) {

                    var mySelect = $('.to-affil-id');
                    $.each(response, function(id, response) {

                        //build a tree
                        var sort_key = response.sortkey;
                        var sort_key_split = sort_key.split("-");
                        var count_elements = sort_key_split.length;
                        var dash = "";

                        if(selected_affil_id != response.affilid) {
                            switch(count_elements) {
                                case 1:
                                    var option = "<option class='ml-0 pt-1 pb-1'></option>";
                                    break;
                                case 2:
                                    var option = "<option class='ml-2 pt-1 pb-1'></option>";
                                    break;
                                case 3:
                                    var option = "<option class='ml-3 pt-1 pb-1 ddl-tree-border'></option>";
                                    dash = "----";
                                    break;
                                case 4:
                                    var option = "<option class='ml-4 pt-1 pb-1 ddl-tree-border'></option>";
                                    dash = "--------";
                                    break;
                                default :
                                var option = "<option class='ml-5 pt-1 pb-1 ddl-tree-border'></option>";
                                dash = "---------";

                            }

                            mySelect.append(
                                $(option).val(response.affilid).html(dash + response.name)
                            );
                        }
                    });
                }
            });

        });
</script>


@endsection