@extends('layouts.'.getAppLayout(), ['title' => str_replace('<br>', ' ', $voucher['voucher_series']['title']) ])

@php
    $account = app(\App\Models\BusinessAccounts::class);
	$voucher_series = $voucher['voucher_series'];
    $promocode_value = $voucher['redeem_code'] ?? $voucher_series['promotion_mechanic_value'];
    $promocode_html = '<div class="form-group mb-0">
    <div class="input-group input-group-lg">
        <input class="bg-white border-right-0 border form-control" type="text" id="copyPromoMech" value="'.$promocode_value.'" onclick="copyInput(this)" readonly="">
        <div class="rounded-right input-group-append bg-white" onclick="copyInput(this)">
            <button class="btn btn-default border-left-0 border " type="button"><i class="fas fa-copy"></i></button>
        </div>
    </div>
    <div class="copy-txt d-none small default-font-color text-center"></div>
</div>';
@endphp

@section('style')
    @parent

    <style>
        {{-- #voucher_single .promocard_cta.claimable, --}}
        .voucher-single-container .promocard_cta.claimable, .section-header.flash, .section-header.flash .header {
            background: inherit;
        {!! extractCssBackgroundColor(config('digital_voucher.color_scheme_hex.btn_download'), true) !!}
        {!! extractCssFontColor(config('digital_voucher.color_scheme_hex.font.btn_download'), true) !!}
}

        {{--  #voucher_single .voucher_single-title, --}}
        .voucher-single-container .header {
        {!! extractCssFontColor(config('digital_voucher.color_scheme_hex.theme'), true) !!}
}

        .pool-vouchers-list .voucher-card {
            display: flex;
            flex-direction: column;
            justify-content: center;
            text-align: center;
            padding: 15px;
            background-color: #f9f9f9;
            border: 1px solid #ddd;
            margin-bottom: 20px;
        }

        .pool-voucher-single-container .sub-header-title {
            display: flex;
            justify-content: center;
        }
    </style>
@endsection

@section('script')
    @parent
    <script>
        var IS_VOUCHER_WALLET_PAGE = true;
        window.voucher= @json($voucher);
        {{--window.onload = () => {--}}
        {{--    const el = $('.voucher-single-container:first');--}}
        {{--    const series = '{{ $voucher['series_id'] }}';--}}
        {{--    const voucher_series = {!! json_encode($voucher_series) !!};--}}
        {{--    voucher_series.serial = voucher.serial--}}
        {{--    voucher_series.status = voucher.status--}}
        {{--    const item = PromoCardsContainer.Series_set[series] = voucher_series;--}}
        {{--    PromoCardsContainer.Series_elem[series] = el;--}}
        {{--    PromoCardsContainer.DoUpdateCtaBtnStatus(el, item);--}}
        {{--    el.find('.promocard_cta_container').removeClass('d-none');--}}

        {{--    window.helper = new PromoCardsContainer();--}}

        {{--    helper.setContainer(el).setDigitPinPopUpElem();--}}
        {{--    el.off('click', 'button.promocard_cta').on('click', 'button.promocard_cta', function () {--}}
        {{--        helper._doHandleCtaBtnClicked($(this), series);--}}
        {{--    });--}}


        {{--    if(window.HIDE_GRID_SPEND_AND_WIN_SERIES){--}}
        {{--        if(window.GRID_SPEND_AND_WIN_SERIES.includes(voucher.voucher_series.series_id)){--}}
        {{--            $('#vouchers_left').hide();--}}
        {{--        }--}}
        {{--    }--}}
        {{--};--}}

        $(document).ready(function() {
            const el = $('.voucher-single-container:first');
            const series = '{{ $voucher['series_id'] }}';
            const voucher_series = {!! json_encode($voucher_series) !!};
            voucher_series.serial = voucher.serial
            voucher_series.status = voucher.status
            const item = PromoCardsContainer.Series_set[series] = voucher_series;
            PromoCardsContainer.Series_elem[series] = el;
            PromoCardsContainer.DoUpdateCtaBtnStatus(el, item);
            el.find('.promocard_cta_container').removeClass('d-none');

            window.helper = new PromoCardsContainer();

            helper.setContainer(el).setDigitPinPopUpElem();
            el.off('click', 'button.promocard_cta').on('click', 'button.promocard_cta', function () {
                helper._doHandleCtaBtnClicked($(this), series);
            });


            if(window.HIDE_GRID_SPEND_AND_WIN_SERIES){
                if(window.GRID_SPEND_AND_WIN_SERIES.includes(voucher.voucher_series.series_id)){
                    $('#vouchers_left').hide();
                }
            }

            $('.btn-redeem-pool-reward').on('click', function(event) {
                var $this = $(this);
                var voucher = {!! json_encode($voucher) !!};
                $('#use_voucher-modal').data('voucherseries', voucher);
                event.preventDefault();
                var series_id = $(this).data('voucher');

                $('#msg-error-' + series_id).text("");
                $('#msg-success-' + series_id).text("");

                $.ajax({
                    url: AJAX_URL + 'download_pool/' + '{{$voucher['serial']}}',
                    type: 'POST',
                    data: {
                        voucher_series_id: series_id,
                    },
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function (response) {
                        if (response && response.voucher_series_data) {
                            PromoCardsContainer.Series_set[series_id] = response.voucher_series_data;
                            window.helper._doHandleCtaBtnClicked($this, series_id);
                        } else {
                            $('#msg-error-' + series_id).text("Failed to download the voucher.");
                        }
                    },
                    error: function (xhr) {
                        $('#msg-error-' + series_id).text("Error occurred while redeeming the voucher.");
                        console.error(xhr);
                    }
                });
            });
        });


    </script>
@endsection

@section('menu')
    @parent
@endsection

@section('content')

    <template class="d-none">
        @component('components.digital_voucher.generic.card.container')
        @endcomponent
    </template>


    <div id="voucher_single">
    </div>


    <div class="voucher-single-container section p-0" data-serial="{{ $voucher['serial'] }}">
        <div class="p-0 m-0 row">
            <div class="col-12 col-md-6 p-0">
                <div class="imageblur">
                    <div class="imageblur-main" style="background-image:url('{{ url($voucher['image_url'] ?? $voucher_series['image']) }}')"></div>
                    <div class="imageblur-blur" style="background-image:url('{{ url($voucher['image_url'] ?? $voucher_series['image']) }}')"></div>
                </div>
                <div class="pool-voucher-single-container section">
                    <div class="p-0 m-0 col">
                        <div class="mb-2 sub-header-title">
                            <label>{{ __('label.select_pool_voucher') }}</label>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-12 col-md-6 p-2 px-md-3 d-flex flex-column justify-content-center">
                <div class="w-100 d-flex flex-column justify-content-center right-panel-info">
                    <div class="p-3 p-md-4">

{{--                        <p class="header mb-1">--}}
{{--                            {!! nl2br($voucher_series['title']) !!}--}}
{{--                        </p>--}}

{{--                        <p class="promocard_copy_detail mb-1">--}}
{{--                            <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="calendar" class="svg-inline--fa fa-calendar fa-w-14 mr-1" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">--}}
{{--                                <path fill="currentColor" d="M12 192h424c6.6 0 12 5.4 12 12v260c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V204c0-6.6 5.4-12 12-12zm436-44v-36c0-26.5-21.5-48-48-48h-48V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H160V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H48C21.5 64 0 85.5 0 112v36c0 6.6 5.4 12 12 12h424c6.6 0 12-5.4 12-12z"></path>--}}
{{--                            </svg>--}}
{{--                            <span>{{ date('jS M Y', strtotime($voucher['use_by'])) }}</span>--}}
{{--                        </p>--}}

                        <div class="pool-vouchers-list row">
                            @if(is_array($pool_vouchers) && count($pool_vouchers) > 0)
                                @foreach ($pool_vouchers as $pool_voucher)
                                    <div class="col-12 col-md-6 p-2">
                                        <div class="voucher-card-container" id="voucher-card-{{ $pool_voucher['series_id'] }}">
                                            <div class="voucher-card">
                                                <img class="voucher_single-image" src="{{ url($pool_voucher['image']) }}" alt="{{ $pool_voucher['title'] }}">
                                                <div class="voucher_single-title" style="padding: 10px">{{ $pool_voucher['title'] }}</div>

                                                {{-- just to check the pool voucher status and display for easier view --}}
                                                {{-- <div>Status: {{ $pool_voucher['status'] }}</div> --}}
                                                {{-- <div>Series ID: {{ $pool_voucher['series_id'] }}</div> --}}

                                                <div id="msg-error-{{ $pool_voucher['series_id'] }}" class="msg-error text-danger"></div>
                                                <div id="msg-success-{{ $pool_voucher['series_id'] }}" class="msg-success text-success"></div>

                                                @if($pool_voucher['status'] == 'unuse' || $pool_voucher['status'] == 'active')
                                                    <div class="promocard_cta_container" style="">
                                                        <button class="btn btn-redeem-pool-reward btn-primary" data-voucher="{{ $pool_voucher['series_id'] }}">
                                                            {{ __('heading.use') }}
                                                        </button>
                                                    </div>
                                                @elseif($pool_voucher['status'] == 'expired')
                                                    <button class="btn btn-redeem-pool-reward btn-secondary" disabled>
                                                        {{ __('heading.button_voucher_expired') }}
                                                    </button>
                                                @elseif($pool_voucher['status'] == 'fully_used')
                                                    <button class="btn btn-redeem-pool-reward btn-secondary" disabled>
                                                        {{ __('heading.button_voucher_fully_used') }}
                                                    </button>
                                                @elseif($pool_voucher['status'] == 'fully_redeemed')
                                                    <button class="btn btn-redeem-pool-reward btn-secondary" disabled>
                                                    {{ __('heading.btn_fully_redeemed') }}
                                                    </button>
                                                @else
                                                    <button class="btn btn-redeem-pool-reward btn-secondary" disabled>
                                                        {{ __('heading.use_voucher_button_claimed') }}
                                                    </button>
                                                @endif
                                            </div>

                                            <div class="promocode_html d-none"></div>
                                        </div>
                                    </div>
                                @endforeach
                            @else
                                <p>No vouchers available</p>
                            @endif
                        </div>


                        @php $campaign_status = getCampaignStatus(); @endphp
                        @if(!$campaign_status['campaign_active'] && !$campaign_status['redeem_active'] )
                            <div class="bold px-3 py-3 text-center mx-auto mt-4 mb-4">
                                {!!   config( config('sys.config') . '.campaign_redeem_end_msg') !!}
                            </div>
                            {{--! campaign not active, rewards marketplace active !--}}
                        @else
                            <div class="promocode_html">
                                @if($voucher && $voucher['status']=='redeemed' && $voucher_series && $voucher_series['promotion_mechanic']==='unique_promo_code')
                                    {!! $promocode_html !!}
                                @endif
                            </div>
                        @endif
                    </div>


                </div>
            </div>

        @if($voucher_series['redemption_method'] == '13_digit_code')
            <div class="13_digit_container">
                @component('components.13DIGIT.use_voucher')
                @endcomponent
            </div>
        @else
            <div class="6_digit_container">
                @component('components.6DIGIT.digital_voucher_generic_use_voucher')
                @endcomponent
            </div>
        @endif
    </div>
    </div>

@endsection