@extends('staff::layouts.default')
@section('title',trans('admin_default.card_transaction'))

@section('breadcrumb')
<li class="active"><a href="#">{{trans('admin_default.card_transaction')}}</a></li>
@endsection

@section('content')
    <div class="message"></div>
    <div class="content-wrapper">
        <div class="panel panel-flat">
            <div class="panel-body">
                <div class="row" style="margin-bottom: 25px;">
                    <div class="col-lg-4"></div>
                    <div class="col-lg-8" style="padding-right: 38px;">
                        <div class="row">
                            <form action="{{ route("getCardTransaction") }}" method="get" id="advance-search">
                                <div class="col-lg-3">
                                    <div style="display: {{ request("period") == -1? "" : "none"  }}" id="number_of_month">
                                        <input type="number" class="form-control" placeholder="Duration(month)..." name="duration" value="{{ request("duration") }}"/>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <select class="form-control" name="period" id="period">
                                        <option value="1" {{ request("period") == 1 ? "selected" : "" }}>{{ trans("admin_default.this_month") }}</option>
                                        <option value="2" {{ request("period") == 2 ? "selected" : "" }}>{{ trans("admin_default.last_month") }}</option>
                                        <option value="3" {{ request("period") == 3 ? "selected" : "" }}>{{ trans("admin_default.last_6_months") }}</option>
                                        <option value="4" {{ request("period") == 4 ? "selected" : "" }}>{{ trans("admin_default.this_year") }}</option>
                                        <option value="5" {{ request("period") == 5 ? "selected" : "" }}>{{ trans("admin_default.last_year") }}</option>
                                        <option value="-1" {{ request("period") == -1 ? "selected" : "" }}>{{ trans("admin_default.custom") }}</option>
                                    </select>
                                </div>
                                <div class="col-lg-4">
                                    <select class="form-control" name="card_type" id="card_type">
                                        <option value="0" selected>{{trans('admin_default.select_drp')}}</option>
                                        @if($card_types->count())
                                            @foreach($card_types as $value)
                                                <option value="{{ $value->id }}" {{ request("card_type") == $value->id? "selected" : "" }}>{{ $value->type }}</option>
                                                @endforeach
                                            @endif
                                    </select>
                                </div>
                                <div class="col-lg-1">
                                    <button class="btn btn-sm btn-primary" id=""><i id="icon_filter" class="icon-filter3"></i>&nbsp;&nbsp;Filter</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                <table class="table table-bordered">
                    <tr>
                        <th width="40px">#</th>
                        <th width="20%">{{ trans("admin_default.customer") }}</th>
                        <th width="20px"></th>
                        <th>{{ trans("admin_default.card_name") }}</th>
                        <th>{{ trans("admin_default.card_type") }}</th>
                        <th>{{ trans("admin_default.membership_since") }}</th>
                        <th>{{ trans("admin_default.last_active") }}</th>
                        <th width="7%">{{ trans("admin_default.action") }}</th>
                    </tr>
                    @if(empty($data))
                        <tr>
                            <td colspan="8" class="text-center">{{ trans("admin_default.data_not_found") }}</td>
                        </tr>
                    @else
                        @foreach($data as $key => $value)
                            @if(count($value))
                                @php
                                    $src = "";
                                    if(isset($value[0]->thumb)) {
                                        $src = \Helper::setCustomerImageSrc('customer/', $value[0]->thumb);
                                    }
                                @endphp
                                    <tr>
                                        <td rowspan="{{ count($value) }}">
                                            <input type="checkbox" class="selected_row" value="{{ @$value[0]->customer_id }}">
                                        </td>
                                        <td rowspan="{{ count($value) }}">
                                            <img src="{{$src}}" class="img-rounded" style="width: 50px; height: auto;"/>&nbsp;&nbsp;&nbsp;&nbsp;
                                            <a href="{{url($shop_package . '/customer/detail/' . @$value[0]->customer_id)}}" class="btn-edit-new">
                                                {{ @$value[0]->name }}
                                            </a>
                                        </td>
                                        @foreach($value as $k => $card)
                                            @if($k == 0)
                                                <td class="text-center">
                                                    <input type="checkbox" name="{{ @$value[0]->customer_id }}[]" value="{{ $card->cc_id }}">
                                                </td>
                                                <td>
                                                    {{ $card->mc_title }} <br/>
                                                    {{ $card->mcard_number }}
                                                </td>
                                                <td>
                                                    {{ @$arr_card_types[$card->mc_card_type] }}
                                                </td>
                                                <td>
                                                    {{ date("d-M-Y", strtotime($card->cc_applied_date)) }}</td>
                                                <td>
                                                    {{ date("d-M-Y", strtotime($card->latest_purchase)) }}</td>
                                                </td>
                                                <td rowspan="{{ count($value) }}" class="text-center">
                                                    <ul class="icons-list">
                                                        <li class="dropdown">
                                                            <a href="javascript:void(0)" class="dropdown-toggle"
                                                               data-toggle="dropdown">
                                                                <i class="icon-menu9"></i>
                                                            </a>

                                                            <ul class="dropdown-menu dropdown-menu-right">
                                                                <li>
                                                                    <a  href="javascript:void(0)"
                                                                        class="btn-set-expired"
                                                                        value="{{ @$value[0]->customer_id }}">
                                                                        <i class="icon-database-time2 small-mrg-right"></i>
                                                                        {{trans('admin_default.set_expired')}}
                                                                    </a>
                                                                </li>
                                                            </ul>
                                                        </li>
                                                    </ul>
                                                </td>
                                            </tr>
                                            @else
                                                <tr>
                                                    <td><input type="checkbox" name="{{ @$value[0]->customer_id }}[]" value="{{ $card->cc_id }}"></td>
                                                    <td>
                                                        {!! @$card->mc_title . "<br/>" . $card->mcard_number !!}
                                                    </td>
                                                    <td>
                                                        {{ @$arr_card_types[$card->mc_card_type] }}
                                                    </td>
                                                    <td>
                                                        {{ date("d-M-Y", strtotime($card->cc_applied_date)) }}
                                                    </td>
                                                    <td>
                                                        {{ date("d-M-Y", strtotime($card->latest_purchase)) }}</td>
                                                    </td>
                                                </tr>
                                            @endif
                                        @endforeach
                            @endif
                        @endforeach
                    @endif
                </table>
                <div class="clearfix"></div>
                @if(!empty($previous_class) && !empty($next_class))
                    <!-- do not show pagination -->
                @else
                    <div class="col-sm-12 no-padding text-right">
                        <div class="pull-right">
                            <ul class="pagination">
                                <li class="{{$previous_class}}">
                                    <a href="{{$previous_url}}">« Previous</a>
                                </li>
                                <li class="{{$next_class}}">
                                    <a href="{{$next_url}}">Next »</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                @endif
            </div>
        </div>

    </div>
    <div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title text-danger">
                        <i class="icon-question3"></i>
                        Are you sure?
                    </h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    {{trans('admin_default.are_you_sure_you_want_to_set_expired_card'). "?"}}
                    <input type="hidden" name="customer_id"/>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-link" data-dismiss="modal">Close</button>
                    <a href="#" id="yes-confirm">
                        <button type="button" class="btn btn-primary">Yes</button>
                    </a>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')

    <script type="text/javascript">
        $(function () {
            $("#yes-confirm").click(function (event) {
                event.preventDefault();
                var customer_id = $("input[name='customer_id']").val();

                var selected = [];
                $("input[name='"+ customer_id +"[]']").each(function(){
                    if ($(this).is(":checked")) {
                        selected.push($(this).attr('value'));
                    }
                });

                if(selected.length <=0 ){
                    $(".message").html('<div class="alert alert-warning no-border">\n' +
                        '                    <a class="close" data-dismiss="alert">×</a>\n' +
                        '                <i class="icon-warning"></i> <strong>Warning: </strong> please select card before continue!\n' +
                        '                </div>');
                    $('.bd-example-modal-sm').modal('hide');
                    return false;
                }
                var url    = "{!! url($shop_package . '/customer/set-card-to-expired') !!}";
                $.ajax({
                    url     : url,
                    data    : { card_id:selected, customer_id:customer_id },
                    type    : 'POST',
                    beforeSend: function (request) {
                        return request.setRequestHeader('X-CSRF-Token', $("meta[name='csrf-token']").attr('content'));
                    },
                    success: function( response ){
                        if(response.success == false){
                            $(".message").html('<div class="alert alert-danger no-border">\n' +
                                '                    <a class="close" data-dismiss="alert">×</a>\n' +
                                '                <i class="icon-cross3"></i> <strong>Fail: </strong> '+ response.message +'!\n' +
                                '                </div>');
                            $('.bd-example-modal-sm');
                        }else{
                            $(".message").html('<div class="alert alert-success no-border">\n' +
                                '                    <a class="close" data-dismiss="alert">×</a>\n' +
                                '                <i class="icon-checkmark4"></i> <strong>Success: </strong> '+ response.message +'!\n' +
                                '                </div>');;
                            location.reload();
                        }
                        $('.bd-example-modal-sm').modal('hide');
                    },
                    error: function( err, msg ){
                        console.log(err);
                    }
                });
            });

            $(".btn-set-expired").click(function (event) {
                event.preventDefault();
                var customer_id = $(this).attr("value");
                var selected = [];
                $("input[name='"+ customer_id +"[]']").each(function(){
                    if ($(this).is(":checked")) {
                        selected.push($(this).attr('value'));
                    }
                });

                if(selected.length <= 0 ){
                    $(".message").html('<div class="alert alert-warning no-border">\n' +
                        '                    <a class="close" data-dismiss="alert">×</a>\n' +
                        '                <i class="icon-warning"></i> <strong>Warning: </strong> please select card before continue!\n' +
                        '                </div>');

                    $('.bd-example-modal-sm').modal('hide');
                    return false;
                }

                $(".message").html('');
                $("input[name='customer_id']").val(customer_id);
                $('.bd-example-modal-sm').modal('show');

            });


            $("#card_type").change(function (event) {
                event.preventDefault();
                $("#advance-search").submit();
            });


            $(".selected_row").change(function () {
                var value = $(this).attr("value");
                $("input[name='"+value+"[]']").prop('checked', $(this).is(':checked'));
            });

            $("#period").change(function (event) {
                event.preventDefault();
                if($(this).val() == -1){
                    $("#number_of_month").show();
                }else{
                    $("#number_of_month").val("");
                    $("#number_of_month").hide();
                    $("#advance-search").submit();
                }
            });

        });
        </script>

@endsection