@extends('layouts.app')
@section('title', 'Members')

@section('content')

<!-- Content Header (Page header) -->
<section class="content-header">
    <h1>@lang( 'Members' )</h1>
    <!-- <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> Level</a></li>
        <li class="active">Here</li>
    </ol> -->
</section>

<!-- Main content -->
<section class="content">
    @component('components.filters', ['title' => __('report.filters')])    
        <div class="col-md-3">
          <div class="form-group">
            {!! Form::label('workplace','Workplace :') !!}
              {!! Form::select('workplace[]', $workplace, null, ['class' => 'form-control select2 w-100', 'id' => 'workplace', 'style' => 'width: 100%;', 'multiple']) !!}
          </div>
        </div>
        <div class="col-md-3">
            <div class="form-group">
                {!! Form::label('sync_shopify','Sync Shopify :') !!}
                {!! Form::select('sync_shopify', ['' => 'All', '1' => 'Yes', '0' => 'No'], '', ['class' => 'form-control select2 w-100', 'style' => 'width: 100%;']) !!}
            </div>
        </div>
        <div class="col-md-3">
            <div class="form-group">
                {!! Form::label('date_range', __('report.date_range') . ':') !!}
                {!! Form::text('date_range', null, ['placeholder' => __('lang_v1.select_a_date_range'), 'class' => 'form-control', 'readonly']); !!}
            </div>
        </div>
    @endcomponent
    @component('components.widget', ['class' => 'box-primary', 'title' => __( 'Members' )])
        @can('membership.view')
            @slot('tool')
                <div class="box-tools">
                    <button type="button" class="btn btn-block btn-primary btn-modal" 
                        data-href="{{action([\App\Http\Controllers\ContactController::class, 'member_create'])}}" 
                        data-container=".member_modal">
                        <i class="fa fa-plus"></i> @lang( 'messages.add' )</button>
                </div>
                <div class="box-tools" style="margin-right: 10px;">
                    <a class="btn btn-block btn-primary" 
                        href="{{action([\App\Http\Controllers\ContactController::class, 'importMember'])}}">
                        <i class="fa fa-file-import"></i> @lang( 'lang_v1.import' )</a>
                </div>
            @endslot
        @endcan
        
        @can('membership.view')
            <table class="table table-bordered table-striped" id="member_table">
                <thead>
                    <tr>
                        <th><input type="checkbox" id="select-all-row" data-table-id="member_table"></th>
                        <th>Action</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Email</th>
                        <th>Phone</th>
                        <th>Workplace</th>
                        <th>From</th>
                        <th>Sync</th>
                        <th>Created At</th>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <td colspan="10">
                            <button type="button" class="btn btn-xs btn-primary" id="label-selected" onclick="syncShopifyModal(event)"> <i class="fa fa-sync"></i> Sync Shopify</button>                            
                        </td>
                    </tr>
                </tfoot>
            </table>
        @endcan
    @endcomponent

    <div class="modal fade member_modal" tabindex="-1" role="dialog" 
    	aria-labelledby="gridSystemModalLabel">
    </div>

    <div class="modal fade member_edit_modal" tabindex="-1" role="dialog" 
        aria-labelledby="gridSystemModalLabel">
    </div>

    <div class="modal fade sync_shopify_modal" tabindex="-1" role="dialog" aria-labelledby="syncShopifyLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title" id="syncShopifyLabel">Sync Shopify</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <form id="edit_seller_form">
                        <div class="modal-body">
                            <input type="hidden" id="seller_id" name="seller_id">
                            <div class="form-group">
                                {!! Form::label('store_shopify','Store Shopify :') !!}
                                {!! Form::select('store_shopify', $shopify_access, '', ['class' => 'form-control select2 w-100', 'style' => 'width: 100%;']) !!}
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-primary" onclick="sendToShopify(event)">Send</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

</section>
<!-- /.content -->
@stop
@section('javascript')
<script type="text/javascript">
$(document).ready( function(){
    var member_table = $('#member_table').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: '/members',
            data: function(d){
                d.workplace = $('#workplace').val();
                d.sync_shopify = $('#sync_shopify').val();
                d.date_range = $('#date_range').val();
            }
        },
        columns: [
            {
                data: null,
                orderable: false,
                searchable: false,
                render: function(data,type,row){
                    return '<input type="checkbox" class="row-select" value="'+(row.id ?? '')+'">';
                }
            },
            { data: 'member_actions', name: 'member_actions', defaultContent:'' },
            { data: 'first_name', name: 'first_name', defaultContent:'' },
            { data: 'last_name', name: 'last_name', defaultContent:'' },
            { data: 'email', name: 'email', defaultContent:'' },
            { data: 'phone', name: 'phone', defaultContent:'' },
            { data: 'school', name: 'school', defaultContent:'' },
            { data: 'from', name: 'from', defaultContent:'' },
            { data: 'sync_shopify', name: 'sync_shopify', defaultContent:'' },
            { data: 'created_at', name: 'created_at', defaultContent:'' },
        ],
        scrollX: true,
        scrollCollapse: true,
        order: [[1,'asc']],
    });

    $('#workplace, #sync_shopify').on('change', function() {
        member_table.ajax.reload(); // reload DataTable
    });

    $('#date_range').daterangepicker(
        dateRangeSettings,
        function (start, end) {
            $('#date_range').val(start.format(moment_date_format) + ' ~ ' + end.format(moment_date_format));
            member_table.ajax.reload();
        }
    );
    $('#date_range').on('cancel.daterangepicker', function(ev, picker) {
        $('#date_range').val('');
        member_table.ajax.reload();
    });

    $(document).on('click', '.delete_member_button', function(e){
         e.preventDefault();
        var href = $(this).data('href');

        swal({
            title: LANG.sure,
            text: 'Delete Member ?',
            icon: "warning",
            buttons: true,
            dangerMode: true,
        }).then((willDelete) => {
            if (willDelete) {
                $.ajax({
                    method: "DELETE",
                    url: href,
                    dataType: "json",
                    data: {
                        _token: $('meta[name="csrf-token"]').attr('content')
                    },
                    beforeSend: function() {
                        $('#pos-loader').css('display', 'inline-flex')
                    },
                    success: function(result){
                        $('#pos-loader').css('display', 'none')
                        if(result.success == true){
                            toastr.success(result.msg);
                            $('#member_table').DataTable().ajax.reload();
                        } else {
                            toastr.error(result.msg);
                        }
                    }
                });
            }
        });
    });

    $('div.member_modal').on('show.bs.modal', function () {
        $('.start-date-picker').datepicker({
            autoclose: true,
        });
        $('#unlimited').on('change', function() {
            if ($(this).is(':checked')) {
                $('#limit').prop('readonly', true);
                $('#limit').val('')
            } else {
                $('#limit').prop('readonly', false);
            }
        });
        $('#sync_shopify_checkbox').on('change', function() {
            if ($(this).is(':checked')) {
                $('#sync_shopify').removeClass('hide');
            } else {
                $('#sync_shopify').addClass('hide');
            }
        });
    })

    $('div.member_edit_modal').on('show.bs.modal', function () {
        $('.start-date-picker').datepicker({
            autoclose: true,
        });
        $('#unlimited').on('change', function() {
            if ($(this).is(':checked')) {
                $('#limit').prop('readonly', true);
                $('#limit').val('')
            } else {
                $('#limit').prop('readonly', false);
            }
        });
        $('#sync_shopify_checkbox').on('change', function() {
            if ($(this).is(':checked')) {
                $('#sync_shopify').removeClass('hide');
            } else {
                $('#sync_shopify').addClass('hide');
            }
        });
    })

});
function syncShopifyModal() {
    var selected_rows = getSelectedRows();   
    if(selected_rows.length > 0) {
        $('.sync_shopify_modal').modal('show')
    } else {
        $('input#selected_products').val('');
        swal('@lang("lang_v1.no_row_selected")');
    }        
}

function sendToShopify(e) {
    e.preventDefault();
    var selected_rows = getSelectedRows();
    $.ajax({
        url: '/members/send-to-shopify',
        method: 'POST',
        data: {
            selected_rows: selected_rows,
            store: $('#store_shopify').val()
        },
        dataType: 'json',
        beforeSend: function() {
            $('#pos-loader').css('display', 'inline-flex')                
        },
        success: function(result) {
            $('#pos-loader').css('display', 'none')
            // console.log(result);
            if(result == 0) {
                swal({
                    title: 'Information',
                    text: result.msg,
                    icon: 'info',
                    // buttons: false,
                })            
            } else {
                $('.sync_shopify_modal').modal('hide');
                swal({
                    title: 'Successfully',
                    text: result.msg,
                    icon: 'success',
                    // buttons: false,
                })
                member_table.ajax.reload();
            }
        },
     }).fail(function(xhr, status, q) {
        $('#pos-loader').css('display', 'none')
        // alert(xhr.responseText)            
        swal({
            title: 'Information',
            text: xhr.responseText,
            icon: 'info',
            // buttons: false,
        })
    });
}
</script>
@endsection