@extends('layouts.admin')
@section('style')
{{--    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/dt-1.12.1/sl-1.4.0/datatables.min.css"/>--}}

    <link href="https://cdn.datatables.net/select/1.3.4/css/select.bootstrap4.css" rel="stylesheet" type="text/css" />

@endsection

@section('script')

{{--    <script type="text/javascript" src="https://cdn.datatables.net/v/bs4/dt-1.12.1/sl-1.4.0/datatables.min.js"></script>--}}

    <script charset="utf8" src="https://cdn.datatables.net/select/1.3.0/js/dataTables.select.min.js"></script>
{{--    <script src="https://cdn.datatables.net/select/1.3.0/js/dataTables.bootstrap4.min.js"></script>--}}
    @parent

    <script type="text/javascript">

        $(function(){
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                }
            });
            window.t = null;
            window.selected_users =[];
            let avail_vouchers = [];
            let selected_voucher;
            $('#store_name').select2({
                tags: true,
            });


            const format = 'YYYY-MM-DD';
            const last_yr = moment().subtract(1, 'year').format(format);
            const now =moment().format(format);
            const daterangeformat = {
                singleDatePicker: true,
                showDropdowns: true,
                locale: {format: format,cancelLabel: 'Clear'},
                autoApply: false,
                startDate: now,
                endDate: now,
                minDate: last_yr,
                maxDate: now,
            }
            $('#date_to').daterangepicker( daterangeformat);
            $('#date_from').daterangepicker( daterangeformat);
            $('#date_from, #date_to').on('apply.daterangepicker', function(ev, picker) {
                if (!picker.startDate.isValid() || !picker.endDate.isValid()) {
                    $(this).val('')
                }
                if( moment( $('#date_from').val() ) > moment($('#date_to').val() ) ){
                    makeToast('bg-danger', 'Invalid date range selection')
                    $(this).val('')
                }
                $(this).change();

            }).on('cancel.daterangepicker', function(ev, picker) {
                $(this).val('')
                $(this).change();
            }).val('')


            function clearSelectedUsers(){
                window.selected_users = [];
                $('tr.selected').trigger('click');
                $('.users-selected-count').text('0');
                $('.users-details').hide();
                $('#check-all').prop('checked', false);
            }

            function getVoucherSeriesList(){
                $.ajax({
                    "url" : window.location.origin + '/ajax/get_exclusive_vouchers?length=99',
                    "method": "GET",
                }).done(function (response) {
                    if(response.data.length > 0) {
                        getUserList();
                        avail_vouchers = response.data;
                        $('#voucher_convert').html('');
                        $.each(response.data, function(){
                            var newOption = new Option( `[${this.series_id}] ${this.title}`, this.series_id, false, false);
                            $('#voucher_convert').append(newOption);
                        })
                        $('#voucher_convert').val('');
                    }
                });
            }

            getVoucherSeriesList();

            function getUserList(){
                clearSelectedUsers();
                if(t){
                    t.rows().deselect();
                    t.ajax.reload();
                } else{
                    t =  $('#convert_vouchers_table').DataTable({
                        processing: true,
                        serverSide: true,
                        ajax: {
                            url: window.location.href,
                            data : function(d){
                                d.date_from = $('#date_from').val();
                                d.date_to = $('#date_to').val();
                                d.store_name = $('[name="store_name[]"]').val();
                                d.user_id = $('[name=user_id]').val();
                                d.min_spend = $('[name=min_spend]').val();
                                d.max_voucher_downloaded = $('[name=max_voucher_downloaded]').val();
                                d.min_assets = $('[name=min_assets]').val();
                            }
                        },
                        scrollX: true,
                        pageLength: 25,
                        lengthMenu: [[10, 25, 50, 100, 200, 500, -1], [10, 25, 50, 100, 200, 500, "All"]],
                        dom:
                            // "<'row p-2'<'#create_voucher.col-sm-6 mb-2 text-left'>>" +
                            "<'row px-2'<'#left-table.col-sm-6 d-flex justify-content-start align-items-center'><'#import_export.col-sm-6 text-left text-sm-right d-flex justify-content-end'lB>>" +
                            "<'row'<'col-sm-12 overflow-auto p-0'tr>>" +
                            "<'row p-2'<'col-sm-5'i><'col-sm-7'p>>",
                        buttons: [
                            {
                                extend: 'csv',
                                text: '<i class="fas fa-file-export"></i> Export CSV',
                                className: 'btn btn-sm btn-default ml-3'
                            }
                        ],
                        columns: [

                            {
                                data: '',
                                defaultContent: '0',
                                visible: false
                            },
                            {
                                data: '',
                                defaultContent: '',
                                orderable: false,
                                className: 'select-checkbox',
                                targets:   1
                            },
                            // {data: 'DT_RowIndex', name: 'DT_RowIndex', title:'No.',orderable: false},
                            {data: 'user_uid', name: 'user_uid',title:'User ID', orderable: false,},
                            {data: 'points', name: 'points', title: 'Points',},
                            {data: 'approved_assets', name: 'approved_assets', title: 'Approved Assets',orderable: true,},
                            {data: 'last_approved_upload', name: 'last_approved_upload', title: 'Last Approved Asset'},
                            {data: 'spend', name: 'spend', title: 'Total Spend',},
                            {data: 'merchants', name: 'merchants', title: 'Outlets', orderable: false,
                                render: function ( data, type, row ) {
                                    let html ='';
                                    $.each(data, function () {
                                        html+= `<span class="badge badge-secondary mr-1">${this.value}</span>`
                                    });
                                    return html
                                }
                            },
                            {data: 'products', name: 'products',  title: 'Products', orderable: false,
                                render: function ( data, type, row ) {
                                    let products = [];

                                    $.each(data, function (k,v) {
                                       if($.isArray(v)){
                                           $.each(v, function(k2,v2){
                                               if(!products.includes(v2.product)){
                                                   products.push(v2.product)
                                               }
                                           });
                                       } else {
                                           if(!products.includes(v.product)){
                                               products.push(v.product)
                                           }
                                       }
                                    });

                                    let html ='';
                                    $.each(products, function () {
                                        html+= `<span class="badge badge-secondary mr-1">${this}</span>`
                                    });
                                    return html
                                }
                            },
                            {data: 'vouchers_downloaded', name: 'vouchers_downloaded', title: 'Vouchers Downloaded'},
                            {data: 'voucher_series', name: 'voucher_series', title: 'Vouchers Series Downloaded',  orderable: false,
                                render: function ( data, type, row ) {
                                    let html ='';
                                    $.each(data, function (k,v) {
                                        html+= `<span class="badge badge-secondary mr-1">[${k}] ${v}</span>`
                                    });
                                    return html
                                }
                            },

                            // {
                            //     data: '',
                            //     defaultContent: '',
                            //     orderable: false,
                            //     render: function ( data, type, row ) {
                            //         return `<a data-id="${data}" data-row='${JSON.stringify(row)}' class="convert-btn btn btn-xs btn-info"><i class="fas fa-sync-alt"></i></a>`;
                            //     },
                            // }
                        ],
                        columnDefs: [{
                            targets: [0],
                            searchable: false,
                            orderable: false,
                            className: 'select-checkbox'
                        }],
                        select: {
                            style: 'multi',
                            // class: 'bootstrap4'
                        },
                        autoWidth: true

                    });
                }
                $('#left-table').append('<div class="ml-4 mb-2"><input type="checkbox" class="form-check-input" id="check-all"><label class="form-check-label mr-3" for="check-all">Select All</label> <span class="users-details" style="display:none"><b class="users-selected-count"></b> users selected</span></div> ');
                $('#check-all').off('change').on('change', function(e){
                    if ( $('#check-all').prop('checked') ){
                        t.rows().select();
                    } else{
                        t.rows().deselect();

                    }
                })

                t.off('select').on( 'select', function ( e, dt, type, indexes ) {
                    if ( type === 'row' ) {
                        $.each( t.rows( indexes ).data(), function(k,v){

                            const data = t.rows( indexes ).data()[k];


                            const check_limit = selected_voucher && selected_users.length > selected_voucher.redeem_left;
                            if(check_limit){
                                t.rows( indexes ).deselect();
                                makeToast('bg-danger', 'Redemption limit reached for this voucher');
                                return;
                            }
                            if (!selected_users.includes(data.user_id)) {
                                selected_users.push(data.user_id);
                            }

                            if(selected_users.length>0){
                                $('.users-details').show();
                                $('.users-selected-count').text(selected_users.length);
                            } else {
                                $('.users-details').hide();
                            }
                        })
                        if(selected_users.length === t.rows().data().length ){
                            $('#check-all').prop('checked',true);
                        }
                    }
                });

                t.off('deselect').on( 'deselect', function ( e, dt, type, indexes ) {
                    if ( type === 'row' ) {
                        $.each(t.rows(indexes).data(), function (k, v) {
                            const data = t.rows(indexes).data()[k];
                            if (selected_users.includes(data.user_id)) {
                                selected_users.splice(selected_users.indexOf(data.user_id), 1);
                            }
                            if (selected_users.length > 0) {
                                $('.users-details').show();
                                $('.users-selected-count').text(selected_users.length);
                            } else {
                                $('.users-details').hide();
                            }

                        })

                        if(selected_users.length !== t.rows().data().length ){
                            $('#check-all').prop('checked',false);
                        }
                    }
                });

                $('#btn-filter').off('click').on('click', function(e) {
                    e.preventDefault();
                    clearSelectedUsers();
                    t.draw();
                });
            }

            $('#btn-convert-voucher').on('click',function(e){
                const voucher_series_val = $('#voucher_convert').val();
                if(!voucher_series_val){
                    makeToast('bg-danger', 'Please select a voucher series to convert');
                    return;
                }
                if(selected_users.length < 1){
                    makeToast('bg-danger', 'Please select at least 1 user for the voucher conversion');
                    return;
                }

                const check_limit = selected_voucher && selected_users.length > selected_voucher.redeem_left;
                if(check_limit){
                    makeToast('bg-danger', 'Redemption limit reached for this voucher. Please deselect users to continue.');
                    return;
                }

                setButtonToLoading(e.currentTarget);
                const $modal_confirm = $('#modal_confirmation');
                $modal_confirm.find('.approval-confirm-voucher').text(`[${selected_voucher.series_id}] ${selected_voucher.title}`);
                $modal_confirm.find('.approval-confirm-count').text(selected_users.length);
                $modal_confirm.modal('show');

                $modal_confirm.find('.btn-confirm').off('click').on('click', function(evt){
                    let $btn = $(evt.currentTarget).addClass('disabled').prop('disabled', true);
                    let data = new FormData();
                    data.append('user_ids', selected_users);
                    $.ajax({
                        "url" : window.location.origin + '/ajax/download_batch/' + selected_voucher.series_id,
                        "method": "POST",
                        "data" : {'user_ids':selected_users},
                    })
                    .done(function (response) {
                        if(response.error){
                            makeToast('bg-danger', response.error);
                            return;
                        }
                        $.each(response.data, function(k,res){
                            if(res.error){
                                makeToast('bg-danger', res.error);
                            } else {
                                makeToast('bg-success', res.data);
                            }
                        })
                        getVoucherSeriesList();
                    })
                    .fail(()=>makeToast('bg-danger', 'Something went wrong'))
                    .always(()=> {$modal_confirm.modal('hide'); $btn.removeClass('disabled').prop('disabled', false);});
                });

            });

            $('#voucher_convert').on('change', function(e){
                const voucher_series_val = $('#voucher_convert').val();
                if(!voucher_series_val){
                    return
                }
                $.each(avail_vouchers, function(k,v){
                    if(voucher_series_val === v.series_id){
                        selected_voucher = v;
                    }
                });
                if(selected_voucher){
                    $('.voucher-details').show();
                } else {
                    $('.voucher-details').hide();
                }
                $('.vouchers-left').text(selected_voucher.redeem_left)
                $('.vouchers-edit').attr('href',window.location.origin+'/admin/view_voucher_series/'+selected_voucher.series_id)
                $('.voucher-points').text(selected_voucher.point_required)

                const check_limit = selected_voucher && selected_users.length > selected_voucher.redeem_left;
                if(check_limit){
                    makeToast('bg-danger', 'Redemption limit reached for this voucher. Please deselect users to continue.');
                }
            })

            $('#modal_confirmation').on('hidden.bs.modal', function(){
                resetLoadingButton();
                $('#modal_confirmation').find('.btn-confirm').off('click');
            });

        });
    </script>


@endSection


@section('content')

    @component('admin.components.tabs')

        @php $form = config('admin.convert_vouchers_filter') @endphp
        <div class="container-fluid">
            <div class="row pt-4 px-4">

                <div class="accordion w-100 overflow-hidden" id="accordionExample">
                    <div class="card border shadow-none card-light">
                        <div class="card-header border-0 p-2" id="headingOne">
                            <button class="btn btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                Additional Filters
                            </button>

                        </div>

                        <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
                            <div class="card-body row p-3 align-items-baseline">

                                @php $id = 'user_id'; $hasError = $errors->has($id) @endphp
                                @component('admin.components.form_field', [ 'class'=> 'col-6 col-sm-4', 'label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                                    <input id="{{$id}}" name="{{$id}}" class="filter-input form-control" placeholder="{{$form[$id]['placeholder']}}" style="width: 100%;"/>
                                @endcomponent

                                @php $id = 'date_from'; $hasError = $errors->has($id) @endphp
                                @component('admin.components.form_field', [ 'class'=> 'col-6 col-sm-4', 'label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                                    <input id="{{$id}}" name="{{$id}}" class="filter-input form-control" placeholder="{{$form[$id]['placeholder']}}" value="" style="width: 100%;"/>
                                @endcomponent

                                @php $id = 'date_to'; $hasError = $errors->has($id) @endphp
                                @component('admin.components.form_field', [ 'class'=> 'col-6 col-sm-4', 'label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                                    <input id="{{$id}}" name="{{$id}}" class="filter-input form-control" placeholder="{{$form[$id]['placeholder']}}" value="" style="width: 100%;"/>
                                @endcomponent

                                @php $id = 'store_name'; $hasError = $errors->has($id) @endphp
                                @component('admin.components.form_field', [ 'class'=> 'col-6 col-sm-3', 'label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                                    <select id="{{$id}}" name="{{$id}}[]" class="filter-input form-control select2 {{$errors->has($id) ? 'is-invalid':'select2bs4'}}"
                                            multiple="multiple" data-placeholder="{{$form[$id]['placeholder']}}" style="width: 100%;">
                                        @if($form[$id]['input'])
                                            @foreach($form[$id]['input'] as $value => $label)
                                                <option value="{{$value }}" {{ in_array( $value , $form[$id]['value'])?'selected':'' }}>{{ $label }}</option>
                                            @endforeach
                                        @endif
                                        @if($asset_array)
                                            @foreach($asset_array as $key => $assets)
                                                <optgroup label="{{$stores[$key]['name']}}">
                                                    @foreach($assets as $key => $asset)
                                                        @if( $asset['status'] == 'active' || $asset['active'] == 'active')
                                                            <option value="{{ $asset['id'] }}">{{ $asset['name'] }}</option>
                                                        @endif
                                                    @endforeach
                                                </optgroup>
                                            @endforeach
                                        @endif
                                    </select>
                                @endcomponent


                                @php $id = 'min_assets'; $hasError = $errors->has($id) @endphp
                                @component('admin.components.form_field', [ 'class'=> 'col-6 col-sm-3', 'label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                                    <input name="{{$id}}" class="filter-input form-control" placeholder="{{$form[$id]['placeholder']}}" style="width: 100%;"/>
                                @endcomponent

                                @php $id = 'min_spend'; $hasError = $errors->has($id) @endphp
                                @component('admin.components.form_field', [ 'class'=> 'col-6 col-sm-3', 'label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                                    <input name="{{$id}}" class="filter-input form-control" placeholder="{{$form[$id]['placeholder']}}" style="width: 100%;"/>
                                @endcomponent

                                @php $id = 'max_voucher_downloaded'; $hasError = $errors->has($id) @endphp
                                @component('admin.components.form_field', [ 'class'=> 'col-6 col-sm-3', 'label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                                    <input name="{{$id}}" class="filter-input form-control" placeholder="{{$form[$id]['placeholder']}}" style="width: 100%;"/>
                                @endcomponent

                                <div class="col-12 d-flex align-self-center justify-content-start">
                                    <a href="javascript:void(0)" id="btn-filter" class="btn btn-info">Filter Users</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row pt-2 pb-4 px-3 border-bottom mb-3">

                @php $id = 'voucher_convert'; $hasError = $errors->has($id) @endphp
                @component('admin.components.form_field', [ 'class'=> 'col-12 mb-2', 'label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                    <div class="input-group">
                        <select id="{{$id}}" name="{{$id}}[]" class="filter-input form-control select2 {{$errors->has($id) ? 'is-invalid':'select2bs4'}}"
                                 data-placeholder="{{$form[$id]['placeholder']}}">
                        </select>
                        <div class="input-group-append">
                            <a href="javascript:void(0)" id="btn-convert-voucher" class="btn btn-info d-flex align-items-center px-3"><i class="fas fa-sync-alt mr-1"></i>Convert</a>
                        </div>
                    </div>
                @endcomponent

                <div class="col-12">
                    <span class="voucher-details" style="display:none"><b class="vouchers-left"></b> voucher(s) left <a href="" class="vouchers-edit px-1 link-muted"><i class="fas fa-edit"></i></a> | <b class="voucher-points"></b> point(s) <a href="{{route('admin.settings.marketplace')}}" class="px-1 link-muted"><i class="fas fa-edit"></i></a><br/></span>
                </div>
            </div>

            <div class="row">
                <div class="col-12">
                    <table id="convert_vouchers_table" class="table table-bordered table-hover dataTable"></table>
                </div>
            </div>
        </div>

    @endcomponent

    @component('components.utility.modal_confirmation')
        @slot('slot_header')
            <span>Confirm <span class="approval-confirm-status text-capitalize"></span></span>
        @endslot
        @slot('slot_body_info')
            Are you sure to convert the voucher <br><span class="approval-confirm-voucher text-bold"></span><br/>for <span class="approval-confirm-count text-bold"></span> user(s)?
        @endslot
    @endcomponent

@endsection