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


@component(getPopupLayout(),  ['id' => 'use_voucher-modal'])
    <div id="voucher_variant-section">
        <h6 style="padding:10px;">{{ __('heading.select_variant_title') }}</h6>

        <div id="variant-options-container">
        </div>

        <button type="button" id="submit-variant-selection" class="btn btn-primary">
            {{ __('heading.submit_variant') }}
        </button>

        <small class="error text-danger" style="padding:10px"></small>
    </div>
<!-- 6 Digit Pin -->
<div class="voucher_usage-container dialog status-default">
    <ul class="m-0 text">
    </ul>
    <div id="voucher_usage">

        <h6 id="title">{{ __('heading.popup_insert_6_digit_pin_code')}}</h6>

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

{{--                        <div class="use_voucher-codes d-none">--}}
{{--                            <div class="use_voucher-barcode">--}}
{{--                                <img class="img-fluid" src="https://barcode.tec-it.com/barcode.ashx?data=ABC-abc-1234&code=Code128&dpi=96&dataseparator=" alt="">--}}
{{--                            </div>--}}
{{--                            <div class="use_voucher-digits">-</div>--}}
{{--                        </div>--}}


        <!-- <button id="voucher_usage-submit" class="btn" type="submit">Submit</button>-->

    </div>
</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" style="background: rgb( 0 0 0 / 25%); width: 75px; height: 75px;">
        <i class="fa fa-check"></i>
    </div>
    <div class="h4 mt-2 text-center">{{ __('heading.popup_title_complete')}}</div>
</div>

<div class="w-100 pb-1 text-center">
    <button type="button" class="btn btn-primary" id="use_voucher-modal-submit"
            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') }}
    </button>

    <a id="use_voucher-modal-next" role="button" data-slide="next"
       class="btn btn-primary" href="#voucher_usage-slider">{{ __('heading.btn_use_voucher_next') }}</a>

    <button type="button" class="btn btn-primary" 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" id="use_voucher-modal-close" data-dismiss="modal">
        {{ __('label.continue') }}
    </button>

    {{--<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>--}}
    {{--                <div id="upload-receipt">--}}
    {{--                    <input type="file" name="receipt" id="receipt" class="inputfile d-none" accept="image/*" capture="camera">--}}
    {{--                    <button type="button" for="receipt" class="btn btn-primary d-none" id="use_voucher-modal-upload-receipt"--}}
    {{--                            data-loading-text="<i class='fa fa-spinner fa-spin'></i> Submitting..." data-text="Submit">--}}
    {{--                        Upload Receipts Here--}}
    {{--                    </button>--}}
    {{--                </div>--}}
</div>
<div class="w-100 pb-4 default-font-color">
    <small class="error"></small>
</div>
@endcomponent



@component(getPopupLayout(),  ['id' => 'warning-modal'])

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

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

</div>
@endcomponent

@component(getPopupLayout(), ['id' => 'address-modal'])
    <div id="address-section">
        <h6 style="padding:10px;">Delivery Address</h6>

        <div id="variant-options-container">
            <form>
                <!-- Form Group for Street Address -->
                <div class="form-group mb-3">
                    <label for="street-address" style="text-align: left">Street Address</label>
                    <input type="text" class="form-control" id="street-address" placeholder="Street Address">
                </div>

                <div class="form-group mb-3">
                    <label for="floor-unit-number" style="text-align: left">Floor/Unit Number</label>
                    <input type="text" class="form-control" id="floor-unit-number" placeholder="Floor/Unit Number">
                </div>

                <!-- Form Group for City -->
                <div class="form-group mb-3">
                    <label for="city">City</label>
                    <input type="text" class="form-control" id="city" placeholder="City">
                </div>

                <!-- Form Group for State -->
                <div class="form-group mb-3">
                    <label for="state">State</label>
                    <input type="text" class="form-control" id="state" placeholder="State">
                </div>

                <!-- Form Group for Zip Code -->
                <div class="form-group mb-3">
                    <label for="zip-code">Zip Code</label>
                    <input type="text" class="form-control" id="zip-code" placeholder="Zip Code">
                </div>

                <!-- Form Group for Address Type -->
                <div class="form-group mb-3">
                    <label>Address Type</label>
                    <div>
                        <input type="radio" id="working-address" name="address-type" value="working">
                        <label for="working-address">Working</label>
                    </div>
                    <div>
                        <input type="radio" id="residential-address" name="address-type" value="residential" checked>
                        <label for="residential-address">Residential</label>
                    </div>
                </div>

                <button type="button" id="submit-address-btn" class="btn btn-primary">
                    Submit
                </button>
            </form>
        </div>
        <small class="error text-danger address-popup-errors" style="padding:10px"></small>
    </div>
@endcomponent