@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) !!}
        }

    </style>
@endsection

@section('script')
    @parent
    <script>
        var IS_VOUCHER_WALLET_PAGE = true;
        window.promocode_html = `{!! $promocode_html !!}`;
        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');

            const 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();
                }
            }
        };
    </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 class="row no-gutters">
            <div class="col-12">
                <img class="voucher_single-image" src='{{ url($voucher['voucher_series']['image']) }}' alt="">
            </div>
        </div>


        <div class="row no-gutters" style="margin-top: 10px;">
            <div class="col-12">
                <div class="promocard_cta_container d-none">
                    <button class="promocard_cta w-100 claimable">{{ $placeholder ? '' : __('heading.button_claim') }}</button>
                </div>

                <span style="float: right;">
                    <a href="{{ route('my') }}">
                        <img width="18" src="{{ asset('assets/images/add-voucher.svg') }}">
                        {{ __('heading.link_see_my_voucher') }}
                    </a>
                </span>
            </div>
        </div>


        <div class="row no-gutters">
            <div class="col-12 p-3">

                <div class="voucher_single-title">
                    {!!$voucher['voucher_series']['title']!!}
                </div>


                <div class="voucher_single-location" style="padding-top: 5px">
                    @if( !empty($voucher['voucher_series']['retail_stores']) && count($voucher['voucher_series']['retail_stores']) > 1)
                        <span>{{ __('label.msg_voucher_applicable_stores') }} {{$account['company_name']}}:</span>
                        @foreach($voucher['voucher_series']['retail_stores'] as $asset)
                            {{$asset['name']}}{{ $loop->last ? '.' : ',' }}
                        @endforeach
                    @endif


                    @if(!empty($voucher['voucher_series']['retail_stores']) && count($voucher['voucher_series']['retail_stores']) == 1)
                        @php
                            $last = array_pop($voucher['voucher_series']['retail_stores']);
                            if ($last) {
                                $asset_name = $last['name'];
                                $asset_address = $last['address'];
                            }
                        @endphp
                        <span>{{ __('label.msg_voucher_applicable_at') }} {{$asset_name}} {{$asset_address}} :</span>
                    @endif
                </div>
                <div class="voucher_single-expiry">{{ __('heading.label_valid_until', ['date' => date('Y-m-d', strtotime($voucher['use_by']))]) }} </div>
                <div class="voucher_single-tc">
                    {!! $voucher['voucher_series']['tc'] !!}
                </div>
            </div>
        </div>

    </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>

            <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>

                        @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>

                            <div class="d-md-block w-100 mt-4 px-0">
                                <div class="promocard_cta_container d-none">
                                    <button class="promocard_cta w-100 claimable">{{ $placeholder ? '' : __('heading.button_claim') }}</button>
                                </div>
                            </div>
                        @endif
                    </div>


                </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>

    @if(!$voucher_series->isLocationHideable())
        <div class="voucher-single-container section">
            <div class="p-4 m-0 col">
                <div class="mb-2 sub-header-title">
                    <label>{{ __('label.msg_voucher_applicable_at') }}</label>
                </div>
                <div class="small">
                    @php
                        $num_count = 0;
                    @endphp
                    @foreach ($voucher_series['retail_stores'] ?? [] as $retail)
                        <div>{{ ++$num_count }}.) {{ $retail['name'] }} {{ $retail['address'] }}</div>
                    @endforeach
                </div>
            </div>
        </div>
    @endif

    <div class="voucher-single-container section">
        <div class="p-4 m-0 col">
            <div class="mb-2 sub-header-title">
                <label>{{ __('label.term_and_condition') }}</label>
            </div>
            <div class="small">
                {!! $voucher_series['tc'] !!}
            </div>
        </div>
    </div>
@endsection