@extends('dashboard.layout.layout')

@section('content')
<div class="card border-info">
    <div class="card-header header-elements-inline">
        <h5 class="card-title">{!! trans('dashboard.coupon.coupon') !!} : {{ $coupon->code }}</h5>
        <div class="header-elements">

        </div>
    </div>
    <div class="card-body">
        <div class="form-group">
            <div class="row">
                <label class="font-medium-1 col-md-2">{{ trans('dashboard.client.clients') }} </label>
                <div class="col-md-10">
                    {!! Form::select('client_list[]', $clients, $coupon->client_list, ['class' => 'select2-data-ajax form-control' , 'id' => 'select2-ajax' , 'multiple']) !!}
                </div>
            </div>
        </div>
        <div class="text-right">
        	<a onclick="sendCodeToClients()" class="btn btn-primary text-white"> {{ trans('dashboard.general.send') }} </a>
        </div>
    </div>
</div>
@endsection
@section('vendor_styles')
<link rel="stylesheet" type="text/css" href="{{ asset('dashboardAssets') }}/vendors/css/forms/select/select2.min.css">
@endsection
@section('vendor_scripts')
<script src="{{ asset('dashboardAssets') }}/vendors/js/forms/select/select2.full.min.js"></script>
@endsection
@section('page_scripts')

{{-- <script src="{{ asset('dashboardAssets') }}/js/scripts/forms/select/form-select2.js"></script> --}}


<script>
    // Loading remote data
    $(".select2-data-ajax").select2({
        dropdownAutoWidth: true,
        width: '100%',
        multiple: true,
        closeOnSelect: false,
        ajax: {
            url: "{{ LaravelLocalization::localizeUrl('dashboard/ajax/get_clients_to_send_coupon/'.$coupon->id) }}",
            dataType: 'json',
            delay: 250,
            data: function(params) {
                return {
                    query: params.term, // search term
                    page: params.page
                };
            },
            processResults: function(data, params) {
                // parse the results into the format expected by Select2
                // since we are using custom formatting functions we do not need to
                // alter the remote JSON data, except to indicate that infinite
                // scrolling can be used
                params.page = params.page || 1;
                var new_data = $.map(data.data, function(obj) {
                    obj.text = obj.text || obj.fullname;
                    return obj;
                });
                return {
                    results: new_data,
                    pagination: {
                        more: (params.page * data.per_page) < data.total
                    }
                };
            },
            cache: true
        },
        placeholder: 'Search for clients',
        escapeMarkup: function(markup) {
            return markup;
        }, // let our custom formatter work
        minimumInputLength: 1,
        templateResult: formatRepo,
        templateSelection: formatRepoSelection
    });

    function formatRepo(repo) {
        if (repo.loading) return repo.text;

        var markup = '<div class="select2-result-repository clearfix">' +
        '<div class="select2-result-repository__avatar"><img src="' + repo.avatar + '" style="width:40px; height:40px;" class="rounded"/></div>' +
        '<div class="select2-result-repository__meta">' +
        '<div class="select2-result-repository__title"> ' + repo.text + ' <i class="feather icon-user"></i></div>';

        markup += '<div class="select2-result-repository__statistics">' +
            '<div class="select2-result-repository__forks"> ' + repo.phone + ' <i class="feather icon-phone"></i></div>' +
            '</div>' +
            '</div></div>';

        return markup;
    }

    function formatRepoSelection(repo) {
        return repo.fullname || repo.text;
    }

    function sendCodeToClients() {
        var clients = $('#select2-ajax').val();
        $.ajax({
			url: "{{ LaravelLocalization::localizeUrl('dashboard/ajax/send_code_to_clients/'.$coupon->id) }}",
			method: "POST",
			dataType: "json",
            data:{client_list:clients,_token:'{{ csrf_token() }}'},
			success: function(data) {
				if (data['value'] == 1) {
					toastr.success(data.message, '', { "progressBar": true });
				}
			}
		});
    }
</script>
@endsection