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

@php
    $account = app(\App\Models\BusinessAccounts::class);
    $serial = $voucher_series->getVoucherSeriesPublic();
@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) !!}
        }

        ul li {
            overflow-wrap: break-word;
        }
    </style>
@endsection

@section('script')
    @parent

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

            fireTrackingEvents('page_view',null, { voucherseries : item.series_id } );

            const helper = new PromoCardsContainer();
            el.off('click', 'button.promocard_cta').on('click', 'button.promocard_cta', function () {
                helper._doHandleCtaBtnClicked($(this), series);
            });

            if (item.flash_promo) {
                window.doCountDown(item.flash_promo, $('.section-header.flash').removeClass('d-none'));
            }
            if(window.HIDE_GRID_SPEND_AND_WIN_SERIES){
                if(window.GRID_SPEND_AND_WIN_SERIES.includes(voucherSeries.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($serial['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">
                    {!! nl2br($serial['title']) !!}
                </div>

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

                    @if( !empty($voucher_series['retail_stores']) && count($voucher_series['retail_stores']) == 1)
                        @php
                            $last = array_pop($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-tc">
                    {!! $serial['tc'] !!}
                </div>
            </div>
        </div>
    </div>
    --}}

    <div class="voucher-single-container section p-0">
        <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($serial['image']) }}')"></div>
                    <div class="imageblur-blur" style="background-image:url('{{ url($serial['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="d-none section-header flash mr-2 text-center flex-wrap justify-content-center mx-2 my-3">
                        <div class="d-inline-flex flex-wrap">
                            <div class="header">Flash Promos Ends in&nbsp;</div>
                        </div>
                        @component('components.countdown')
                        @endcomponent
                    </div>

                    <div class="p-3 p-md-4">

                        <p class="header mb-1">
                            {!! nl2br($serial['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($serial['expiry_date'])) }}</span>
                        </p>
                        
                        @if($serial['series_id'] != '1RID-022023-39')
                            <p class="promocard_copy_detail mb-1" id="vouchers_left" style="">
                                <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="arrow-circle-down" class="svg-inline--fa fa-arrow-circle-down fa-w-16 mr-1" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                    <path fill="currentColor" d="M504 256c0 137-111 248-248 248S8 393 8 256 119 8 256 8s248 111 248 248zm-143.6-28.9L288 302.6V120c0-13.3-10.7-24-24-24h-16c-13.3 0-24 10.7-24 24v182.6l-72.4-75.5c-9.3-9.7-24.8-9.9-34.3-.4l-10.9 11c-9.4 9.4-9.4 24.6 0 33.9L239 404.3c9.4 9.4 24.6 9.4 33.9 0l132.7-132.7c9.4-9.4 9.4-24.6 0-33.9l-10.9-11c-9.5-9.5-25-9.3-34.3.4z"></path>
                                </svg>
                                <span>{{ $serial['promo_left'] }} {{ __('label.left') }}</span>
                            </p>
                        @endif
                        
                        <div class="d-md-block w-100 mt-4 px-0">
                        @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 !--}}
                        @elseif(!$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_end_msg') !!}
                            </div>
                        @else
                            <div class="promocard_cta_container d-none">
                                <button class="promocard_cta w-100 claimable">{{ $placeholder ? '' : __('heading.button_claim') }}</button>
                            </div>
                            <div id="use_download_voucher" class="d-none mt-2">
                                For existing participants, <a href="{{ url()->current().'/use' }}" style="text-decoration: underline!important">click here</a>  to participate again
                            </div>
                        @endif
                        </div>
                    </div>


                </div>
            </div>
        </div>
    </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">
                {!! $serial['tc'] !!}
            </div>
        </div>
    </div>

    @component('components.digital_voucher.generic.voucher_register', [
        'account' => $account
    ])
    @endcomponent

@endsection