@php use Carbon\Carbon; @endphp
<div class="epinFormWrap row">
    <div class="purchaseDataDiv">
        <div class="col-md-12">
            <form action="{{ route(strtolower(getScope()).'.epin.action') }}" method="post"
                  class="epinForm row col-md-12">
                <input type="hidden" name="context" value="epinPurchase">
                <div class="initialPart">
                    <input type="hidden" name="action" value="add">
                    <div class="eachField row">
                        <div class="col-md-4">
                            <label>{{ _mt($moduleId,'Epin.Count') }}</label>
                        </div>
                        <div class="col-md-8">
                            <label class="mt-radio mt-radio-outline col-md-4">
                                <input type="radio" name="pinCount" id="pinCountSingle" value="single" checked
                                       class="pinCountTypeChange"> {{ _mt($moduleId,'Epin.Single') }}
                                <span></span>
                            </label>
                            <label class="mt-radio mt-radio-outline col-md-8">
                                <input type="radio" name="pinCount" id="pinCountMultiple" value="multiple"
                                       class="pinCountTypeChange"> {{ _mt($moduleId,'Epin.Multiple') }}
                                <span></span>
                            </label>
                        </div>
                    </div>
                    <div class="eachField row epinKeyDiv">
                        <div class="col-md-4">
                            <label>{{ _mt($moduleId,'Epin.Key') }}</label>
                        </div>
                        <div class="col-md-8">
                            <i data-style="contract" class="generateEpin fa fa-key ladda-button blue"></i>
                            <input type="text" class="epinInput" name="key" value=""
                                   placeholder="{{ _mt($moduleId,'Epin.Generate_with_left_button_or_enter_own') }}">
                        </div>
                    </div>
                    <div class="eachField row epinCountyDiv" style="display: none">
                        <div class="col-md-4">
                            <label>{{ _mt($moduleId,'Epin.Quantity') }}</label>
                        </div>
                        <div class="col-md-8">
                            <i data-style="contract" class="generateEpin fa fa-list ladda-button blue"></i>
                            <input type="number" name="pinQuantity" class="pinQuantity"
                                   value="1" title="{{ _mt($moduleId,'Epin.Enter_pin_count') }}">
                        </div>
                    </div>
                    <div class="eachField row">
                        <div class="col-md-4">
                            <label>{{ _mt($moduleId,'Epin.Amount') }} <span class="text-danger">*</span></label>
                        </div>
                        @if($epinConfigData->get('amount_type') == 'dynamic')
                            <div class="col-md-8">
                                <i class="fa fa-money"></i>
                                <input type="number" name="amount" min="1"
                                       placeholder="{{ _mt($moduleId,'Epin.E-pin_amount') }}" value="" class="amount"
                                       onkeypress="return event.charCode &gt;= 48 &amp;&amp; event.charCode &lt;= 57">
                            </div>
                        @else
                            <div class="col-md-8">
                                @if($epinConfigData->get('epin_amount'))
                                    <select name="amount" class="pinAmountSelector form-control">
                                        <option>{{ _mt($moduleId,'Epin.select_amount') }}</option>
                                        @foreach($epinConfigData->get('epin_amount') as $key => $pinAmount)
                                            <option value="{{ $key }}">{{ $pinAmount }}</option>
                                        @endforeach
                                    </select>
                                @else
                                    <span
                                        style="color: red">{{ _mt($moduleId,'Epin.please_add_default_epin_amounts_in_settings') }}</span>
                                @endif
                            </div>
                        @endif
                    </div>
                    <div class="eachField row">
                        <div class="col-md-4">
                            <label>{{ _mt($moduleId,'Epin.Valid_from') }}<span class="text-danger">*</span></label>
                        </div>
                        <div class="col-md-8">
                            <i class="fa fa-calendar"></i>
                            <input type="text" class="datePicker" placeholder="{{ _mt($moduleId,'Epin.Valid_from') }}"
                                   value="{{ date('Y/m/d') }}"
                                   name="valid_from">
                        </div>
                    </div>
                    <div class="eachField row">
                        <div class="col-md-4">
                            <label>{{ _mt($moduleId,'Epin.Valid_upto') }}</label>
                        </div>
                        <div class="col-md-8">
                            <i class="fa fa-calendar"></i>
                            <input type="text" class="datePicker" placeholder="{{ _mt($moduleId,'Epin.Valid_upto') }}"
                                   value="{{ date('Y/m/d', strtotime("+30 days")) }}" name="valid_upto" id="valid_upto">
                            <button type="button"
                                    class="btn btn-danger disableVaidUpto"> {{ _mt($moduleId,'Epin.Disable') }}</button>
                        </div>
                    </div>
                    <div class="eachField row">
                        <div class="col-md-4">
                            <label>{{ _mt($moduleId,'Epin.Assign_user') }}</label>
                        </div>
                        <div class="col-md-8">
                            <i class="fa fa-user"></i>
                            <input type="text" placeholder="{{ _mt($moduleId,'Epin.Assign_user') }}" value=""
                                   class="fetchUser">
                            <input type="hidden" name="user_id" value="">
                        </div>
                    </div>
                    <div class="eachField row">
                        <div class="col-md-4">
                            <label>{{ _mt($moduleId,'Epin.Transferable') }}</label>
                        </div>
                        <div class="col-md-8">
                            <label class="mt-checkbox mt-checkbox-outline">
                                <input type="checkbox" id="transferable" value="1" checked name="transferable">
                                ({{ _mt($moduleId,'Epin.Can_other_users_use_this_E-pin_for_their_purchases_?') }})
                                <span></span>
                            </label>
                            <span></span>
                        </div>
                    </div>
                    <div class="eachField row">
                        <div class="col-md-4">
                            <label>{{ _mt($moduleId,'Epin.Reusable') }} </label>
                        </div>
                        <div class="col-md-8">
                            <label class="mt-checkbox mt-checkbox-outline">
                                <input type="checkbox" id="reusable" value="1" checked name="reusable">
                                ({{ _mt($moduleId,'Epin.This_E-pin_can_be_used_for_multiple_purchases_Its_value_will_be_decreased_for_each_purchases') }}
                                )
                                <span></span>
                            </label>
                            <span></span>
                        </div>
                    </div>
                    <div class="eachField row">
                        <div class="col-md-4">
                            <button type="button" data-style="contract"
                                    class="btn primaryButton ladda-button validatePurchase">
                                <i class="fa fa-key"></i> {{ _mt($moduleId,'Epin.Continue') }}
                            </button>
                        </div>
                    </div>
                </div>
                <div class="paymentGatewaysWrapper"></div>
            </form>
        </div>
    </div>
    <div class="success col-md-12">
        <h2>
            <i class="fa fa-check"></i>{{ _mt($moduleId,'Epin.E-pin_generated') }}
        </h2>
        <div class="epinSuccessWrapper"></div>
    </div>
</div>
<script type="text/javascript">
    $(function () {

        const originalValidUpto = $('#valid_upto').val();
        $('#valid_upto').data('original', originalValidUpto);

        $('.datePicker').datepicker({
            format: 'yyyy/mm/dd',
            startDate: '-3d'
        });
        window.paymentSuccessCallback = function (response) {
            var epinData = response.result['epinData'];
            epinData.forEach(function (each) {
                let epinHtml = '<div class="epinWrapper col-md-4">\n' +
                    '            <div class="epinInner">\n' +
                    '                <h3 class="epinKey"><i class="fa fa-key"></i><span>' + each.key + '</span></h3>\n' +
                    '                <span class="epinAmount">{{ currencySymbol() }}' + each.balance + '</span>\n' +
                    '                <div class="epinButtons">\n' +
                    '                    <button class="btn btn-outline blue metaInfo">\n' +
                    '                        <i class="fa fa-info"></i>\n' +
                    '                    </button>\n' +
                    '                </div>\n' +
                    '                <div class="epinMeta">\n' +
                    '                    <div class="assignedTo">\n' +
                    '                        <i class="fa fa-user"></i>\n' +
                    '                        Assigned to :\n' +
                    '                        <span>' + each.user['username'] + '</span>\n' +
                    '                    </div>\n' +
                    '                    <div class="validFrom">\n' +
                    '                        <i class="fa fa-calendar-check-o"></i>\n' +
                    '                        Valid from :\n' +
                    '                        <span>' + each.valid_from +
                    '                    </div>\n' +
                    '                    <div class="validUpto">\n' +
                    '                        <i class="fa fa-calendar-times-o"></i>\n' +
                    '                        Valid upto :\n' +
                    '                        <span>' + each.valid_upto + '</span>\n' +
                    '                    </div>\n' +
                    '                </div>\n' +
                    '            </div>\n' +
                    '        </div>';
                $('.epinSuccessWrapper').append(epinHtml);
            });


            $('form.epinForm').hide();
            $('.success').show();
        };

        setupAjaxFill();
        Ladda.bind('.ladda-button');

        $('.disableVaidUpto').click(function () {
            if (!$(this).hasClass('active')) {
                $(this).addClass('active');
                $('#valid_upto').val('0000/00/00').prop('disabled', true);
                $(this).html('Enable').removeClass("btn-danger").addClass("btn-primary");
            } else {
                $(this).removeClass('active');
                $('#valid_upto').val($('#valid_upto').data('original')).prop('disabled', false);
                $(this).html('Disable').removeClass("btn-primary").addClass("btn-danger");
            }
        });

        $('#pinCountSingle').click(function () {
            $('.epinKeyDiv').show();
            $('.epinCountyDiv').hide();
            $('#amount-error').hide()
        });

        $('#pinCountMultiple').click(function () {
            $('.epinKeyDiv').hide();
            $('.epinCountyDiv').show();
            $('#amount-error').hide()
        });

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

    });

    $('body')
        .off('click', '.generateEpin')
        .on('click', '.generateEpin', function () {
            var options = {action: 'keyGenerate'};
            var me = $(this);
            var callBack = function (response) {
                me.next('input[name="key"]').val(response);
            };
            fireEpinAction(options, callBack);
        });

    //Ajax user fetch function

    function setupAjaxFill() {
        //Ajax fetch
        var selectedCallback = function (target, id, name) {
            target.val(name).siblings('[name="user_id"]').val(id);
        };

        var options = {
            target: '.fetchUser',
            route: '{{ route("user.api") }}',
            action: 'getUsersByMemberId',
            name: 'member_id',
            dropDownTopOffset: 5,
            selectedCallback: selectedCallback
        };
        $('.fetchUser').ajaxFetch(options);
    }

    var form = $('.epinForm');
    var error1 = $('.alert-danger', form);
    var success1 = $('.alert-success', form);

    $.validator.addMethod('ajaxValidate', function (value, element, param) {
        var isValid = !$(element).parent().hasClass('ajaxValidationError');
        return isValid; // return bool here if valid or not.
    }, function (param, element) {
        return $(element).siblings('.help-block-error').text();
    });

    var validator = form.validate({
        errorElement: 'span', //default input error message container
        errorClass: 'help-block help-block-error', // default input error message class
        focusInvalid: false, // do not focus the last invalid input
        ignore: "", // validate all fields including form hidden input
        rules: {
            'pinCount': {
                required: true,
                ajaxValidate: true,
            },
            'key': {
                required: function (element) {
                    return document.getElementsByName("pinCount") == "single";
                },
                ajaxValidate: true,
            },
            'amount': {
                required: true,
                number: true,
                ajaxValidate: true,
            },
            'pinQuantity': {
                number: true,
                ajaxValidate: true,
            },
        },
        messages: {
            'pinCount': {
                required: "{{ _mt($moduleId,'Epin.Please_set_epin_count') }}",
            },
            'key': {
                required: "{{ _mt($moduleId,'Epin.Please_enter_key') }}",
            },
            'amount': {
                required: "{{ _mt($moduleId,'Epin.Please_enter_amount') }}",
                number: "{{ _mt($moduleId,'Epin.Please_enter_valid_amount') }}",
            },
            'pinQuantity': {
                number: "{{ _mt($moduleId,'Epin.Please_enter_valid_count') }}",
            },
        },

        errorPlacement: function (error, element) {
            if (element.is(':checkbox')) {
                error.insertAfter(element.closest(".md-checkbox-list, .md-checkbox-inline, .checkbox-list, .checkbox-inline"));
            } else if (element.is(':radio')) {
                error.insertAfter(element.closest(".md-radio-list, .md-radio-inline, .radio-list,.radio-inline"));
            } else {
                error.insertAfter(element); // for other inputs, just perform default behavior
            }
        },

        highlight: function (element) { // hightlight error inputs
            $(element)
                .closest('.form-group').addClass('has-error'); // set error class to the control group
        },

        unhighlight: function (element) { // revert the change done by hightlight
            $(element)
                .closest('.form-group').removeClass('has-error'); // set error class to the control group
        },

        success: function (label) {
            label
                .closest('.form-group').removeClass('has-error'); // set success class to the control group
        },
    });

    //Registration request

    $('.epinFormWrap .validatePurchase').click(function () {

        $('.ajaxValidationError').removeClass('ajaxValidationError');

        var successCallBack = function (response) {
            $('.purchaseDataDiv .initialPart').hide();
            loadGateways();
        };

        if (!form.valid()) {
            Ladda.stopAll();
            return false;
        }

        var failCallBack = function (response) {
            Ladda.stopAll();
            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);
                }
            }

            var errors = response.responseJSON;
            for (var key in errors) {
                var elemKey = key;
                $('.epinForm [name="' + elemKey + '"]').parent().addClass('ajaxValidationError');
                var errorOption = {};
                errorOption[elemKey] = errors[key];
                validator.showErrors(errorOption);
            }
        };

        var options = {
            form: form,
            actionUrl: "{{ scopeRoute('epin.purchase.validate') }}",
            successCallBack: successCallBack,
            failCallBack: failCallBack
        };
        sendForm(options);
    });

    $('.printEpin').click(function () {
        var id = $("#print").val();
        $.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 loadGateways() {
        return $.post("{{ scopeRoute('getGateways') }}", {'context': 'epinPurchase'}, function (response) {
            window.targetForm = $('.epinForm');
            $('.paymentGatewaysWrapper').html(response);
        });
    }

    function copyToClipboard(id) {
        document.getElementById(id).select();
        document.execCommand('copy');
    }
</script>
<style>
    form.epinForm {
        max-width: 100% !important;
    }
</style>