@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" value="" 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.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>
            <div class="filterRow row last">
                <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())
                    <table class="table table-bordered table-striped">
                        <thead>
                        <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>
                        </thead>
                        <tbody>
                        @foreach($epins as $key => $epin)
                            <tr>
                                <td>{{ $key + 1 }}</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>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                @else
                    <div class="noEpins">
                        <i class="fa fa-exclamation"></i>{{ _mt($moduleId,'Epin.No_E-pins_found') }}
                    </div>
                @endif
            </div>
        @endif
        <div class="row">
            <div class="col-md-12">
                {{ $epins->links() }}
            </div>
        </div>
    </div>
</div>
<script>"use strict";

    $(function () {

        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", 0) }}',
            to = '{{ $filter->get("amountTo", 1000) }}';

        $(".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
            });
        });

        $('.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');
    }

    $('.epinPurchaseDate').daterangepicker({
        locale: {
            format: 'YYYY-MM-DD'
        },
        startDate: '{{ $default_filter['startDate'] }}',
        endDate: '{{ $default_filter['endDate'] }}',
        autoApply: true,
        autoUpdateInput: true
    });

</script>