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

@section('content')

    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>Loyalty Points
            <small>Manage Loyalty Points</small>
        </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">

        <div class="box">
            <div class="box-header">
                <h3 class="box-title">Manage Loyalty Points</h3>
                @can('loyalty.create')
                <div class="box-tools">
                    <button type="button" class="btn btn-block btn-primary btn-modal" data-toggle="modal"
                        data-target="#addLoyalty">
                        <i class="fa fa-plus"></i> @lang( 'messages.add' )</button>
                </div>
                @endcan
            </div>
            <div class="box-body">
                @can('loyalty.view')
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped" id="loyalty_table">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Customer ID</th>
                                    <th>Customer Name</th>
                                    <th>Type</th>
                                    <th>Points</th>
                                    <th>Status</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                @endcan
            </div>
        </div>

        {{-- Add Voucher Model --}}
        <div class="modal fade" id="addLoyalty" tabindex="-1" role="dialog"
            aria-labelledby="addLoyaltyTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="addVoucherLongTitle">Add Loyalty</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        {!! Form::open(['url' => action('LoyaltyController@store'), 'method' => 'post', 'id' => 'add_loyalty', 'enctype' => 'multipart/form-data']) !!}

                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="category">Customer</label>

                                <select class="form-control" name="customer_id" id="customer-dropdown-dd">
                                    <option value="" selected>Default</option>
                                    @foreach($customers as $customer)
                                        <option value="{{$customer->id}}">{{$customer->name}}</option>
                                    @endforeach

                                </select>
                            </div>
                        </div>

                        <!-- <div class="col-md-6">
                            <div class="form-group">
                                {!! Form::label('mobile', ' Mobile Number' . ':*') !!}
                                {!! Form::text('mobile', null, ['class' => 'form-control', 'required', 'placeholder' => 'Mobile Number']) !!}
                            </div>
                        </div> -->
                        <div class="col-md-6">
                            <div class="form-group">
                                {!! Form::label('type', __('Type') . ':*' ) !!}
                                <div class="input-group">
                                    <span class="input-group-addon">
                                        <i class="fa fa-info"></i>
                                    </span>
                                    {!! Form::select('type', ['fixed' => __('lang_v1.fixed'), 'percentage' => __('lang_v1.percentage')], null , ['class' => 'form-control','placeholder' => __('messages.please_select')]); !!}
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 amount-dive">
                            <div class="form-group">
                                {!! Form::label('amount', 'Amount' . ':*') !!}
                                {!! Form::number('amount', null, ['class' => 'form-control', 'placeholder' => 'Amount']) !!}
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                {!! Form::label('points', ' Points' . ':*') !!}
                                {!! Form::number('points', null, ['class' => 'form-control', 'required', 'placeholder' => 'Loyalty Points']) !!}
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12">
                                <button type="submit" class="btn btn-primary pull-right" id="add_loyalty_button">Add
                                    Loyalty</button>
                            </div>
                        </div>

                        {!! Form::close() !!}
                    </div>
                </div>
       
            </div>
        </div>
        {{-- End Add Voucher Model --}}
    </section>
    <!-- /.content -->

@endsection

@section('javascript')
    <script type="text/javascript">
        $( "#add_loyalty" ).validate({
        rules: {
            customer_id: {
            },
            points: {
                required: true,
                number: true,
            },
            expiryDate: {
                required: true,
            },
        }
    });
        
        //Roles table
        $(document).ready(function() {
            var users_table = $('#loyalty_table').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: '/loyalty',
                },
                columnDefs: [{
                    "targets": [6],
                    "orderable": false,
                    "searchable": false
                }],
                "columns": [{
                        "data": "id"
                    },
                    {
                        "data": "customer_id"
                    },
                    {
                        "data": "customer_name"
                    },
                    {
                        "data": "type"
                    },
                    {
                        "data": "points"
                    },
                    {
                        "data": "status",
                        render: function(data, type, row) {
                            if (row.status == 0) {
                                return '<div class="text-center" style="background-color:#dd4b39; color:white">Inactive</div>';
                            } else if (row.status == 1) {
                                return '<div class="text-center" style="background-color:#39db77; color:white">Available</div>';
                            } 
                        }
                    },
                    {
                        "data": "action"
                    },

                ]
            });
            $(document).on('click', 'button.delete_loyalty_button', function() {
                swal({
                    title: LANG.sure,
                    text: LANG.confirm_delete_user,
                    icon: "warning",
                    buttons: true,
                    dangerMode: true,
                }).then((willDelete) => {
                    if (willDelete) {
                        var href = $(this).data('href');
                        var data = $(this).serialize();
                        $.ajax({
                            method: "DELETE",
                            url: href,
                            dataType: "json",
                            data: data,
                            success: function(result) {
                                if (result.success == true) {
                                    toastr.success(result.msg);
                                    users_table.ajax.reload();
                                } else {
                                    toastr.error(result.msg);
                                }
                            }
                        });
                    }
                });
            });

            $(document).on('change', 'select#customer-dropdown-dd', function(){
                // if($('select#customer-dropdown-dd option:selected').text() == 'Default')
                // {
                //     $('.amount-dive').show();
                // }
                // else
                // {
                //     $('.amount-dive').hide();
                // }
            })

        });
    </script>


@endsection