@extends('front.v2.partials.master')

@section('content')
    <div class="container my-4 __gift_card_view">
        @if (session('giftcard_order_message'))
            <div class="alert alert-success __gift_alert_message col-md-6">
                {{ session('giftcard_order_message') }}
            </div>
        @endif
        <div class="row">
            <div class="col-md-4 d-flex" style="place-items: center;">
                <div class="card-demo">
                    <img src="{!! asset('assets/images/gift-card-demo.jpg') !!}" style="width: 100%" alt="">
                </div>
            </div>
            <div class="col-md-8">
                <div class="alert alert-danger col-md-9" style="display: none" id="error_message"></div>
                {!! Form::open(['route' => 'front.v2.purchase-gift-card','method' => 'POST' ,'id' => 'ajaxSubmit' ,'data-login'=> 1]) !!}
                <div class="card_info">
                    <div class="gift_card_details ">
                        <div class="d-flex flex-column flex-md-row mt-2 mt-md-3">
                            {!! Form::label('card_amount',__('v2/front_site.gift_card_amount'),['class' => '' ,'style' => 'font-size: 16px;font-weight: 600;']) !!}
                            <div class="w-md-50">
                                {!! Form::number('card_amount','',['class' => 'form-control','placeholder' => __('v2/front_site.gift_card_amount') , 'required' => true]) !!}
                            </div>
                        </div>
                        <div class="d-none flex-column flex-md-row mt-2 mt-md-3 ">
                            {!! Form::label('delivery_type',__('v2/front_site.delivery'),['class' => '' ,'style' => 'font-size: 16px;font-weight: 600;']) !!}
                            <div class="w-md-50">
                                <div class="w-100">
                                    @if(function_exists('giftCardDeliveryType'))
                                        @foreach(giftCardDeliveryType() as $key => $de)
                                            <div class="__custom_radio __delivery_radio {!! $key == 1 ? 'checked-radio' :'' !!}" style="padding: 0px;">
                                                {!! Form::radio('card_delivery_type',$key,$key == 1 ? 1 : 0,['class' => 'd-radio-'.$key ]) !!}
                                                <p for="card_delivery_type_{!! $key !!}" style="padding: 8px 0px;margin:0px;">{!! ucfirst($de) !!}</p>
                                            </div>
                                        @endforeach
                                    @endif
                                </div>
                            </div>
                        </div>
                        <div class="d-flex flex-column flex-md-row mt-2 mt-md-3">
                            {!! Form::label('to_email',__('v2/front_site.to'),['class' => '']) !!}
                            <div class="w-md-50">
                                {!! Form::text('to_email','',['class' => 'form-control','placeholder' => __('v2/front_site.to_text'), 'required' => true]) !!}
                            </div>
                        </div>
                        <div class="d-flex flex-column flex-md-row mt-2 mt-md-3">
                            {!! Form::label('mesage',__('v2/front_site.message'),['class' => '']) !!}
                            <div class="w-md-50">
                                {!! Form::textarea('message',__('v2/front_site.default_message_text'),['class' => 'form-control' ,'size' =>'23x3']) !!}
                            </div>
                        </div>
                                                @if(isset($paymentMethodRes) && count($paymentMethodRes) > 0)
                        <div class="d-flex flex-column flex-md-row mt-2 mt-md-3">
                                                        {!! Form::label('payment_method',__('v2/front_site.payment_method'),['class' => '' ,'style' => 'font-size: 16px;font-weight: 600;overflow-wrap: anywhere;']) !!}
                            <div class="w-md-50">
                                    @foreach($paymentMethodRes as $key => $de)
                                        <div class="__payment_method {!! $de['slug'] == 'adyen' ? 'checked-radio' :'' !!} " style="justify-content: left;">
                                            {!! Form::radio('payment_method',$de['slug'],$de['slug'] == 'adyen' ? 1 : 0,['class' => ' __select_pay_method d-radio-'.$de['slug'],'data-pay-method' => $de['slug']]) !!}
                                            <div class="mx-1">
                                                <img src="{!! asset($de['image']) !!}" style="height:40px;display: none">
                                                <label for="payment_method_{!! $key !!}" class="mx-3 __select_pay_method" data-pay-method="{!! $de['slug'] !!}" style="text-align: left;width: auto;">{!! $de['name'] !!}</label>
                                            </div>
                                        </div>
                                        @if($de['slug'] == 'swish')
                                            <div class="__swish_phone" style="display: none">
                                                <div class="mb-4 swish_number mx-3">
                                                    {{ Form::text('swish_phone', null, ['class' => 'form-control _swish_phone','id'=>'swish_phone','placeholder'=>__('v2/front_site.enter')." ". __('v2/front_site.phone')]) }}
                                                    <input type="hidden" class="form-control _swish_dial_code" id="swish_dial_code" name="swish_dial_code" value="{!! currency('dial_code') ?? "+47" !!}">
                                                </div>
                                            </div>
                                        @endif
                                    @endforeach
                            </div>
                        </div>
                        @endif
                    </div>
                    @if($showButton)
                        <div class="shop-btn mt-3">
                            {!! Form::submit(__('v2/front_site.buy_gift_card'),['class' => 'btn','style' => '']) !!}
                        </div>
                    @endif
                </div>
            </div>
        </div>

    </div>
@endsection

@section('script')
    <script>
        $(document).on('click', '.__custom_radio', function() {
            const $radioButton = $(this).find('input[type="radio"]');
            const $parent = $(this).parent();
            // Remove checked-radio class from all elements in the group
            $parent.find('.__custom_radio').removeClass('checked-radio');

            // Add checked-radio class to the clicked element
            $(this).addClass('checked-radio');

            // Check the radio button
            $radioButton.prop('checked', true);

            // Additional logic based on the group's behavior
            if ($(this).hasClass('__amount_radio')) {
                const val = $radioButton.val();
                $('.__card_value').html("{!! currency() !!}" + val);
            }

            if ($(this).hasClass('__delivery_radio')) {
                $('.gift_card_details').toggle($radioButton.hasClass('d-radio-1'));
            }
        });

        $(document).on('click','.__select_pay_method',function(){
            let payMethod = $(this).data('pay-method');
           // $(this).parent().parent().find('input[name="payment_method"]').prop('checked',true);
            $(this).parent().closest('.__payment_method').find('input[name="payment_method"]').prop('checked',true);
            let style = (payMethod == 'swish') ? 'block' : 'none';
            $('.__swish_phone').css('display',style);
        });

    </script>
@endsection