@extends('advertiser.layout.app')

@section('advertiser_title', trans('landing.titles.payment'))

@section('advertiser_content')
@php($user = Auth::guard('web')->user())

@section('back_button')
<div class="right_wrapper">
    <div class="right_bar">
        <div class="right_back">
            <a href="{{ route('advertiser.content.confirmation', app()->getLocale()) }}" class="backBtn">{{ trans('landing.commen.backbtn') }}</a>
        </div>
    </div>
</div>
@stop
<!-- //CONTAINER START// -->
<div class="map_viewBg">
    <img src="{{ asset('advertiser_user/images/map_bg.jpg') }}" alt="map-bg">
</div>
<div class="sweet-overlay response_overlay" tabindex="-1" style="opacity: 1.23; display: none;"></div>
<div class="sweet-alert showSweetAlert visible alert-success alert-popup-wrapper animated fadeInDown response_message_alert" data-notify-position="top-center" style="display: none; margin: 0px auto; position: fixed; transition: all 0.5s ease-in-out 0s; z-index: 1031; top: 20px; left: 0px; right: 0px;">
    <div class="alert_msg_wrap">
        <h2>Success</h2>
        <p id="response_message"></p>
        {{-- <div class="sa-button-container">
            <button id="response_message_close" class="cancel dismiss-action active" tabindex="2" style="display: inline-block; box-shadow: none;">Dismiss</button>
        </div> --}}
    </div>
</div>
<!-- //CONTAINER START// -->
<div class="container">
    <div class="cloud_content">
        @if(!empty($message))
        <div class="cld_cale_duration">
            <div class="cld_dura_wrn">
                <i class="wrng_icon"></i>
                <span class="wrng_txt">{{ $message }}</span>
            </div>
        </div>    
        @endif 
        <form role="form" id="gatawayForm" method="POST" action="#">
            <input type="hidden" name="card_holder_name" value="">
            <input type="hidden" name="card_number" value="">
            <input type="hidden" name="card_security_code" value="">
            <input type="hidden" name="expiry_date" value="">
        </form>
        @php($total_price = intval(str_replace(',', '', $total_price)))
        <form novalidate method="POST" id="paymentsForm" action="{{ url(app()->getLocale().'/ajaxGetFormData') }}">
            @csrf
            
            <input name="email" type="hidden" value="{{ $user->email }}"/>      
            <input name="total_price" type="hidden" value="{{ $total_price }}"/>      
            <input name="currency_code" type="hidden" value="{{ $currency_code }}"/>      
            <input name="total_slots" type="hidden" value="{{ $total_slots }}"/>    
            <input name="title" type="hidden" value="{{ $title }}"/>    

            <div class="map_view_cldBox">
                <div class="cld_sum_wrap cld_pay_wrap">
                    <div class="cld_pay_contBox">
                        <div class="cld_formBox">
                            <div class="row m_0">
                                <div class="col-md-12">
                                    <ul class="cld_payCard">
                                        <li class="payList pay_mada">
                                            <a href="#">
                                                <img src="{{ asset('advertiser_user/images/cards/mada@3x.png') }}" alt="pay mada" />
                                            </a>
                                        </li>
                                        <li class="payList pay_mada">
                                            <a href="#">
                                                <img src="{{ asset('advertiser_user/images/cards/apple_pay@3x.png') }}" alt="pay applepay" />
                                            </a>
                                        </li>
                                        <li class="payList pay_mada">
                                            <a href="#">
                                                <img src="{{ asset('advertiser_user/images/cards/visa@3x.png') }}" alt="pay visa" />
                                            </a>
                                        </li>
                                        <li class="payList pay_mada">
                                            <a href="#">
                                                <img src="{{ asset('advertiser_user/images/cards/master_card@3x.png') }}" alt="pay mastercard" />
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="row m_0">
                                <div class="col-md-12">
                                    <div class="group lbl_cardNumber">
                                        <input type="text" id="cardnumber" name="cardnumber" class="input_field" placeholder="xxxx xxxx xxxx xxxx" required>
                                        <span class="highlight"></span>
                                        <span class="bar"></span>
                                        <label>{{ trans('payment.payment_page.card_number') }}</label>
                                        <span class="cardnumber_error error_field_message" style="display: none">{{ trans('user.validation.field_required') }}</span>
                                    </div>
                                    
                                </div>
                            </div>
                            <div class="row m_0">
                                <div class="col-md-12">
                                    <div class="group lbl_cardName">
                                        <input type="text" id="ccname" name="ccname" class="input_field"  placeholder="{{ trans('payment.payment_page.holder_name') }}" required>
                                        <span class="highlight"></span>
                                        <span class="bar"></span>
                                        <label>{{ trans('payment.payment_page.holder_name') }}</label>
                                        <span class="ccname_error error_field_message" style="display: none">{{ trans('user.validation.field_required') }}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="row m_0">
                                <div class="col-md-6">
                                    <div class="group lbl_cardExp">
                                        <input type="text" id="cc-exp" name="cc-exp" class="input_field"  placeholder="10/25" required>
                                        <span class="highlight"></span>
                                        <span class="bar"></span>
                                        <label>{{ trans('payment.payment_page.expires') }}</label>
                                        <span class="cc-exp_error error_field_message" style="display: none">{{ trans('user.validation.field_required') }}</span>
                                        
                                        
                                    </div>
                                </div>
                                
                                <div class="col-md-6">
                                    <div class="group lbl_cardCvv">
                                        <input type="password" id="cvc" name="cvc" class="input_field" placeholder="123" required>
                                        <span class="highlight"></span>
                                        <span class="bar"></span>
                                        <label>{{ trans('payment.payment_page.cvv') }}</label>
                                        <span class="cvc_error error_field_message" style="display: none">{{ trans('user.validation.field_required') }}</span>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <span class="valid_card_error" style="display: none">{{ trans('payment.error_message.card_error') }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="cld_select_wrap">
                <div class="select_container">
                    <div class="cld_select_screen">
                        <div class="cld_stDuration">
                            <div class="cld_stHead">
                                <h3>{{ trans('payment.payment_page.checkout') }}</h3>
                            </div>
                            
                            <div class="cld_stBody">
                                <div class="cld_payDts_list">
                                    <div class="cld_stDts-camp cld_stDetails cld_payDetails">
                                        <span class="left-cont">{{ trans('payment.payment_page.total') }}</span>
                                        <input type="hidden" value="{{ $total_price }}" name="price">
                                        <input type="hidden" value="{{ $currency_code }}" name="currency_code">

                                        <span class="right-cont">{{ $currency_code }} {{ number_format($total_price, 2) }} </span>
                                    </div>
                                </div>
                                <div class="cld_button cld_ftBtn">
                                    <button class="btn button btn_pay active" type="submit" value="">{{ trans('payment.payment_page.pay') }}</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<!-- //CONTAINER END// -->

@stop

@section('advertiser_styles')
<link href="{{ asset('advertiser_user/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet">
<style>
    /* .cld_cale_duration {
        max-width: 580px;
        margin: 0 auto;
        top: 0;
    }
    .map_view_cldBox .cld_sum_wrap {
        margin: 20px auto;
    } */
    /* @media (min-width: 767px) {
        .alert {width: 485px !important;}
    } */
    .valid_card_error {
        color: #dc3545;
        font-weight: bold;
        float: left;
        width: 100%;
        text-align: center;
        top: 15px;
        position: relative;
        
    }
    .response_message_alert {
        z-index: 99999 !important;
    }
    .error_field_message {
        color: #dc3545;
        font-size: 13px;
        padding: 0px 0px;
        line-height: 22px;
        font-weight: 700;

    }
    #busyloading {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 100;
        width: 100vw;
        height: 100vh;
        background-color: rgba(192, 192, 192, 0.5);
        /* background-image: url(../images/busyloading.gif); */
        background-repeat: no-repeat;
        background-position: center;
        z-index: 99999 !important;
    }
    .error_field {
        border: 1px solid red !important;
    }
    input:placeholder-shown {
        /* display: none; */
    }
    [placeholder]:focus::-webkit-input-placeholder {
        color: #ababab;
    }
    [placeholder]:focus:-ms-input-placeholder {
        color: #ababab;
    }

    ::-webkit-input-placeholder { /* Edge */
        color: transparent;
    }

    :-ms-input-placeholder { /* Internet Explorer 10-11 */
        color: transparent;
    }

    ::placeholder {
        color: transparent;
    }
</style>
@stop

@section('advertiser_js')
@include('advertiser.modules.home.js.payment')
@stop