@php use Carbon\Carbon; @endphp
<div class="modal fade" id="editEpins" role="dialog" aria-labelledby="editEpinLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="editEpinLabel">{{ _mt($moduleId,'Epin.Edit_E-pin') }}</h4>
            </div>
            <div class="modal-body editEpinModal">

            </div>
        </div>
    </div>
</div>
<div class="epinManageWrapper">
    <div class="epinSectionHead">
        <form class="filters">
            <div class="filterRow row">
                <div class="eachFilter col-md-4">
                    <div class="filterTitle col-md-4">
                        <label>{{ _mt($moduleId,'Epin.date') }}</label>
                    </div>
                    <div class="filterInner col-md-8">
                        <span class="ico"><i class="fa fa-calendar-o"></i></span>
                        <input type="text" class="epinPurchaseDate" name="filter[date]"
                               style="font-size: 12px;">
                    </div>
                </div>
                <div class="eachFilter col-md-4">
                    <div class="filterTitle col-md-4">
                        <label>{{ _mt($moduleId,'Epin.Valid_upto') }}</label>
                    </div>
                    <div class="filterInner col-md-8">
                        <span class="ico"><i class="fa fa-calendar-o"></i></span>
                        <input type="text" value="{{ $filter->get('validUpto') }}" class="datePicker"
                               placeholder="{{ _mt($moduleId,'Epin.Valid_upto') }}" name="filter[valid_upto]">
                    </div>
                </div>
                <div class="eachFilter col-md-4">
                    <div class="filterTitle col-md-4">
                        <label>{{ _mt($moduleId,'Epin.User_filter') }}</label>
                    </div>
                    <div class="filterInner col-md-8">
                        <span class="ico"><i class="icon-user"></i></span>
                        <input type="text" value="" class="fetchUser userFiller"
                               placeholder="{{ $filter->get('member_id', _mt($moduleId,'Epin.Select_user')) }}">
                        <input type="hidden" class="userId" value="{{ $filter->get('user_id') }}"
                               name="filter[user_id]" id="user_id">
                    </div>
                </div>
            </div>
            <div class="filterRow row last">
                <div class="eachFilter col-md-4">
                    <div class="filterTitle col-md-4">
                        <label>{{ _mt($moduleId,'Epin.Price_range') }}</label>
                    </div>
                    <div class="filterInner col-md-8">
                        <input type="text" class="amountRange" value="">
                        <div class="extra-controls">
                            <input type="hidden" name="filter[amountFrom]" value="{{ $filter->get('amountFrom') }}"
                                   class="js-input-from">
                            <input type="hidden" name="filter[amountTo]" value="{{ $filter->get('amountTo') }}"
                                   class="js-input-to">
                        </div>
                    </div>
                </div>
                <div class="eachFilter col-md-4">
                    <div class="filterTitle col-md-4">
                        <label>{{ _mt($moduleId,'Epin.Status') }}</label>
                    </div>
                    <div class="filterInner col-md-8">
                        <select name="filter[status]" class="status">
                            <option>{{ _mt($moduleId,'Epin.All') }}</option>
                            <option
                                value="1" {{ $filter->get('status') == 1?'selected':'' }}>{{ _mt($moduleId,'Epin.Active') }}</option>
                            <option
                                value="2" {{ $filter->get('status') == 2?'selected':'' }}>{{ _mt($moduleId,'Epin.Inactive') }}</option>
                            <option
                                value="3" {{ $filter->get('status') == 3?'selected':'' }}>{{ _mt($moduleId,'Epin.Expired') }}</option>
                        </select>
                    </div>
                </div>
                <div class="eachFilter col-md-4">
                    <button type="button" class="filterMe btn primaryButton ladda-button" data-style="contract">
                        <i class="fa fa-filter"></i> {{ _mt($moduleId,'Epin.Filter') }}
                    </button>
                    <button type="button" class="resetMe btn secondaryButton ladda-button" data-style="contract">
                        <i class="fa fa-refresh"></i> {{ _mt($moduleId,'Epin.reset') }}
                    </button>

                </div>
            </div>
        </form>
        <div class="switchView">
            <span data-type="list" class="@if($view == 'list') active @endif list"><i class="fa fa-list"></i></span>
            <span data-type="grid" class="@if($view == 'grid') active @endif grid"><i class="fa fa-th"></i></span>
        </div>
    </div>
    <div class="epinSectionBody">
        @if($view == 'grid')
            <div class="epinGrid">
                @forelse($epins->chunk(3) as $row)
                    <div class="epinRow row">
                        @foreach($row as $epin)
                            <div class="epinOuter col-md-4">
                                <div class="epinWrapper">
                                    <div class="epinInner">
                                        <h3 class="epinKey"><i class="fa fa-key"></i><span>{{ $epin->key  }}</span></h3>
                                        <span class="epinAmount">{{ currency($epin->balance)  }}</span>
                                        <div class="epinButtons">
                                            <button class="btn btn-outline blue metaInfo">
                                                <i class="fa fa-info"></i>
                                            </button>
                                        </div>
                                        <div class="epinMeta">
                                            <div class="assignedTo">
                                                <i class="fa fa-user"></i>
                                                {{ _mt($moduleId,'Epin.Assigned_to') }} :
                                                <span>{{ $epin->user?$epin->user->username: _mt($moduleId,'Epin.No_body')  }}</span>
                                            </div>
                                            <div class="validFrom">
                                                <i class="fa fa-calendar-check-o"></i>
                                                {{ _mt($moduleId,'Epin.Valid_from') }} :
                                                <span>{{ $epin->valid_from?: _mt($moduleId,'Epin.Not_set')  }}</span>
                                            </div>
                                            <div class="validUpto">
                                                <i class="fa fa-calendar-times-o"></i>
                                                {{ _mt($moduleId,'Epin.Valid_upto') }} :
                                                <span>{{ $epin->valid_upto?: _mt($moduleId,'Epin.Not_set')  }}</span>
                                            </div>
                                            {{--                                            <div class="maxUse">--}}
                                            {{--                                                <i class="fa fa-flag-o"></i>--}}
                                            {{--                                                {{ _mt($moduleId,'Epin.Max_use') }} :--}}
                                            {{--                                                <span>{{ $epin->max_use?: _mt($moduleId,'Epin.Unlimited') }}</span>--}}
                                            {{--                                            </div>--}}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @empty
                    <div class="noEpins">
                        <i class="fa fa-exclamation"></i>{{ _mt($moduleId,'Epin.No_E-pins_found') }}
                    </div>
                @endforelse
            </div>
        @else
            <div class="epinTable">
                @if($epins->count())
                    <div class="table-scrollable">
                        <table class="table table-striped table-bordered table-hover">
                            <thead>
                                <tr>
                                    <th>{{ _mt($moduleId,'Epin.sl_no') }}</th>
                                    <th>{{ _mt($moduleId,'Epin.Key') }}</th>
                                    <th>{{ _mt($moduleId,'Epin.Amount') }}</th>
                                    <th>{{ _mt($moduleId,'Epin.Balance') }}</th>
                                    <th>{{ _mt($moduleId,'Epin.User') }}</th>
                                    <th>{{ _mt($moduleId,'Epin.Valid_From') }}</th>
                                    <th>{{ _mt($moduleId,'Epin.Valid_upto') }}</th>
                                    <th>{{ _mt($moduleId,'Epin.Created') }}</th>
                                    <th>{{ _mt($moduleId,'Epin.Usable') }}</th>
                                    <th>{{ _mt($moduleId,'Epin.Action') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                            @foreach($epins as $epin)
                                <tr>
                                    <td>{{ ($epins->currentPage() * $epins->perPage()) - $epins->perPage() + $loop->iteration }}</td>
                                    <td class="key">{{ $epin->key }}</td>
                                    <td>{{ currency($epin->amount) }}</td>
                                    <td>
                                        {{ currency($epin->balance) }}
                                    </td>
                                    <td>
                                        {{ $epin->user?$epin->user->member_id: _mt($moduleId,'Epin.Unassigned') }}
                                    </td>
                                    <td>{{ $epin->valid_from? date('Y/m/d', strtotime($epin->valid_from)) : _mt($moduleId,'Epin.Unlimited') }}</td>
                                    <td>{{ $epin->valid_upto? date('Y/m/d', strtotime($epin->valid_upto)) : _mt($moduleId,'Epin.Unlimited') }}</td>
                                    <td>{{ date('Y/m/d', strtotime($epin->created_at)) }}</td>
                                    <td>
                                        @if((int)$epin->balance == 0 || $epin->status == 0 || $epin->valid_upto < Carbon::now()->format('Y-m-d') )
                                            <span>{{ _mt($moduleId, 'Epin.no') }}</span>
                                        @else
                                            <span>{{ _mt($moduleId, 'Epin.yes') }}</span>
                                        @endif
                                    </td>
                                    <td class="dropdown">
                                        @if($epin->balance == $epin->amount )
                                            <button type="button" class="editEpin btn ladda-button"
                                                    data-style="contract" data-id="{{$epin->id}}"><i><span
                                                        class="fa fa-edit"></span></i>
                                            </button>
                                            @if($epin->status)
                                                <button type="button" class="changeStatus btn ladda-button"
                                                        data-style="contract" data-id="{{$epin->id}}">
                                                    <i><span class="fa fa-close"></span></i>
                                                </button>
                                            @else
                                                <button type="button" class="changeStatus btn ladda-button"
                                                        data-style="contract" data-id="{{$epin->id}}">
                                                    <i><span class="fa fa-check"></span></i>
                                                </button>
                                            @endif
                                            <button type="button" class="deleteEpin btn ladda-button"
                                                    data-style="contract" data-id="{{$epin->id}}"><i><span
                                                        class="fa fa-trash"></span></i>
                                            </button>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                        @else
                            <div class="noEpins">
                                <i class="fa fa-exclamation"></i>{{ _mt($moduleId,'Epin.No_E-pins_found') }}
                            </div>
                        @endif
                    </div>
            </div>
        @endif
        <div class="row">
            <div class="col-md-12">
                {{ $epins->links() }}
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        $('.epinPurchaseDate').daterangepicker({
            locale: {
                format: 'YYYY-MM-DD'
            },
            startDate: '{{ $default_filter['startDate'] }}',
            endDate: '{{ $default_filter['endDate'] }}',
            autoApply: true,
            autoUpdateInput: true
        });
        setupAjaxFill($('.fetchUser'));

        /*   $('.editable').editable({
               url: '/post',
           });*/
        Ladda.bind('.ladda-button');

        $('.datePicker').datepicker({
            format: 'yyyy/mm/dd'
        });

        $('.status').select2({
            width: '100%',
        });

        var $range = $(".amountRange"),
            $inputFrom = $(".js-input-from"),
            $inputTo = $(".js-input-to"),
            instance,
            min = '{{ $minAmount }}',
            max = '{{ $maxAmount }}',
            from = '{{ $filter->get("amountFrom", $minAmount) }}',
            to = '{{ $filter->get("amountTo", $maxAmount) }}';

        $(".amountRange").ionRangeSlider({
            type: "double",
            min: min,
            max: max,
            grid: true,
            from: from,
            to: to,
            onStart: updateInputs,
            onChange: updateInputs
        });

        instance = $range.data("ionRangeSlider");

        function updateInputs(data) {
            from = data.from;
            to = data.to;

            $inputFrom.prop("value", from);
            $inputTo.prop("value", to);
        }

        $inputFrom.on("input", function () {
            var val = $(this).prop("value");

            // validate
            if (val < min) {
                val = min;
            } else if (val > to) {
                val = to;
            }

            instance.update({
                from: val
            });
        });

    });

    function setupAjaxFill(target) {
        //User fetcher
        var selectedCallback = function (target, id, name) {

            $('.userFiller').val(name);
            $('#user_id').val(id);

        };
        var options = {
            target: target,
            route: '{{ route("user.api") }}',
            action: 'getUsersByMemberId',
            name: 'member_id',
            selectedCallback: selectedCallback,
            clearCallback: function (element) {
                element.siblings('input[name="filters[user_id]"]').val('')
            }
        };
        $(target).ajaxFetch(options);
    }

    $('.deleteEpin').click(function () {
        var id = $(this).attr('data-id');
        var options = {'action': 'delete', 'id': id};
        var successCallback = function (response) {
            toastr.success("{{_mt($moduleId,'Epin.Epin_Deleted_successfully') }}");
            reloadEpinResponse('{{route(strtolower(getScope()).'.epin.unit') }}?page={{ $epins->currentPage() }}');
        };
        var failCallback = function (response) {
            if (response.responseJSON && response.responseJSON.errors && Object.keys(response.responseJSON.errors).length > 0) {
                let errorMessage = response.responseJSON.errors;
                if (errorMessage === "You can't manage modules in demo mode") {
                    toastr.error(errorMessage);
                }
            } else {
                toastr.warning("{{_mt($moduleId,'Epin.Error_on_epin_deletion') }}");
            }
            reloadEpinResponse('{{route(strtolower(getScope()).'.epin.unit') }}?page={{ $epins->currentPage() }}');
        };

        fireEpinAction(options, successCallback, failCallback);
    });

    $('.editEpin').click(function () {
        var id = $(this).data('id');
        $.post('{{ route(strtolower(getScope()).'.epin.edit') }}', {'id': id}, function (response) {
            $('.editEpinModal').html(response);
            $('#editEpins').modal('show');
            Ladda.stopAll();
        });
    });

    $('.changeStatus').click(function () {
        var id = $(this).data('id');
        $.post("{{ scopeRoute('epin.changeStatus') }}", {'id': id}, function (response) {
            toastr.success('{{ _mt($moduleId, 'Epin.epin_status_changed_successfully') }}');
            refreshEpinLeaf($('.eachNavWrap[data-unit="manage"]'));
        }).fail(function (response) {
            Ladda.stopAll();
            toastr.error(response.responseJSON.errors);
        });
    });

    $('.print').click(function () {
        var id = $(this).data('id');
        $.post('{{ scopeRoute('epin.print') }}', {epinId: id}, function (response) {
            var HTML = response;

            var WindowObject = window.open("", "PrintWindow", "width=750,height=650,top=50,left=50,toolbars=no,scrollbars=yes,status=no,resizable=yes");
            WindowObject.document.writeln(HTML);
            WindowObject.document.close();
            WindowObject.focus();
            WindowObject.print();
            WindowObject.close();
        });
    });

    function copyToClipboard(id) {
        document.getElementById(id).select();
        document.execCommand('copy');
    }


</script>