{{-- <link rel="stylesheet" href="{{ mix('css/4DIGIT-style.css') }}"> --}}

@section('script')
    @parent

    <script>
        var TXT_TRX_AMT = '{{ addslashes(__('label.placeholder_transaction_amount')) }}';
        var TXT_TRX_PREFIX = '{{ addslashes(__('label.placeholder_transaction_prefix')) }}';
        var TXT_STEP_PROCEED_REDEMPTION = '{{ addslashes(__('label.msg_step_proceed_complete_redemption')) }}';
        var TXT_STEP_TO_USE_PROMO_CODE = '{{ addslashes(__('label.msg_step_to_use_promo_code')) }}';
    </script>
@endsection

<div class="modal" status="default" id="use_voucher-modal" tabindex="-1" role="dialog" aria-labelledby="digitPopup"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header col-center">
                <div class="small "></div>
                <h4 id="redemption_title" class="modal-title font-weight-bold text-center px-3">{{ __('heading.title_redeem_voucher') }}</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
           </div>
            <div class="modal-body">
{{--                <div class="pin-container text-center info status-default">--}}
{{--                    <label class="pin-container-label w-auto">{{ __('label.6_digit_pin') }}:</label>--}}
{{--                    <label class="pin-container-value"></label>--}}
{{--                </div>--}}

                <!-- 6 Digit Pin -->
                <div class="voucher_usage-container dialog status-default">
                    <ul class="m-0 text"></ul>

                    <div id="voucher_usage">

                        <h6 id="redemption_subtitle" class="text-center" style="color:unset">{{ __('heading.popup_insert_6_digit_pin_code')}}</h6>

                        @include('components.main.6-digit-pin', ['id'=>'code'])

{{--                        <div class="form-row col-center w-100" id="code">--}}
{{--                            @for($i=1; $i<=6; ++ $i) --}}
{{--                            <div class="form-group">--}}
{{--                                <input class="form-control voucher_usage-input" name="digit[]" data-index='{{ $i }}'--}}
{{--                                    type="text" pattern="\d*" maxlength="1" inputmode="numeric" autocomplete="off">--}}
{{--                            </div>--}}
{{--                            @endfor--}}

{{--                            <div class="form-group err-display">--}}
{{--                                <input class="form-control voucher_usage-input" name="code" disabled--}}
{{--                                    type="hidden" pattern="\d*" maxlength="1" inputmode="numeric">--}}
{{--                                <small class="error"></small>--}}
{{--                            </div>--}}
{{--                        </div>                   --}}

                        {{--
                        <div class="form-group w-100">
                            <input type="numeric" pattern="\d*(.\d*)?" class="form-control voucher_usage-input w-100" name="transaction_amount"
                                style="margin-top: -15px;"
                                autocomplete="off"
                                placeholder="{{ __('label.placeholder_transaction_amount') }}">
                            <small class="error"></small>
                        </div>
                        --}}

                    </div>

{{--                    <label class="text-center form-check-label">--}}
{{--                        {{ __('label.msg_redeem_voucher') }}--}}
{{--                    </label>--}}
                </div>

                 <!-- Promo Slider -->
                 <div class="voucher_usage-container dialog status-claimed">
                    <!-- title -->
                    <div class="text-center px-2" id="promo_mech_title">{{ __('heading.popup_title_redeem')}}</div>
                    <!-- slider -->
                    <div id="voucher_usage-slider" class="carousel slide" data-ride="carousel"  data-interval="false" wrap="false">
                        <ol class="carousel-indicators my-3">
                            <!-- li appended after ajax -->
                            <span class="carousel-progress"></span>
                        </ol>
                        <div class="carousel-inner">
                            <!-- carousel item appended after ajax -->
                            <a class="carousel-control-prev d-none" href="#voucher_usage-slider" role="button" data-slide="prev">
                                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                <span class="sr-only">{{ __('label.slider_previous') }}</span>
                            </a>
                            <a class="carousel-control-next" href="#voucher_usage-slider" role="button" data-slide="next">
                                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                <span class="sr-only">{{ __('label.slider_next') }}</span>
                            </a>
                        </div>
                    </div>
                </div>


                <div class="voucher_usage-container dialog status-complete py-3">
                    <div class="align-items-center d-flex h1 justify-content-center mx-auto rounded-circle text-center p-2" style="background: rgb( 0 0 0 / 25%) !important;">
                        <i class="fa fa-check"></i>
                    </div>
                    <div class="h4 mt-2 text-center">{{ __('heading.popup_title_complete')}}</div>
                </div>

            </div>

            <div class="modal-footer pb-4">
                <button type="button" class="btn btn-primary font-weight-bold" id="use_voucher-modal-submit-generic"
                    data-loading-text="<i class='fa fa-spinner fa-spin'></i> Submitting..."
                    data-text="{{ __('heading.btn_use_voucher_form_click_to_redeem_voucher') }}">
                    {{ __('heading.btn_use_voucher_form_click_to_redeem_voucher_generic') }}
                </button>
                <button type="button" class="btn btn-primary font-weight-bold" id="use_voucher-modal-finish"
                    data-loading-text="<i class='fa fa-spinner fa-spin'></i> Submitting..."
                    data-text="{{ __('heading.btn_use_voucher_form_click_to_finish_redemption') }}">
                    {{ __('heading.btn_use_voucher_form_click_to_finish_redemption') }}
                </button>
                <button type="button" class="btn btn-primary font-weight-bold" id="use_voucher-modal-close" data-dismiss="modal">
                    {{ __('label.continue') }}
                </button>
                <div class="w-100 default-font-color">
                    <small class="error"></small>
                </div>
            </div>
            <small id="voucher-id" class="d-block position-absolute small text-sm-center font-color"
                   style="bottom: 0.5rem; left: 50%; transform: translate(-50%,0%); opacity:0.5"></small>

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

<div class="modal" id="warning-modal" tabindex="-1" role="dialog" aria-labelledby="warningPopup" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" 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>
            </div>
            <div class="modal-body">

                <div class="voucher_usage-container dialog status-default">
                    <div id="voucher_usage">
                        {{ __('heading.popup_warning_close') }}
                    </div>
                </div>
            </div>


            <div class="modal-footer py-4">
                <button type="button" class="btn btn-primary" id="use_voucher-modal-close" data-dismiss="modal">
                    {{ __('label.continue') }}
                </button>

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