@extends($data['layout'])

@section('title', 'Payment Details - ' . app_name())

@section('content')

<div class="row">
    <div class="col-md-12 mb-2 mt-3">
        <div id="main-banner-after-header"  class="bg-buttery-white align-items-center d-flex banner-3 justify-content-center">
        <h2 class="title category_detail_heading">
            PAYMENT DETAILS
        </h2>
        </div>
    </div>
</div>

@if($data['layout'] == 'frontend.layouts.app' )
    @include('includes.partials.bread-crumbs')
@endif

    <div class="container-fluid">
        {{-- <div class="row">
            <div class="col-md-12 mt-4 mb-2">
                <h1 class="title h1-tag">PAYMENT DETAILS</h1>
            </div>
        </div> --}}
        <div class="row">
            <div class="col-12 page-content mb-5">


                <div class="checkout-page paymeny-details">
                    <div class="row-40 @if(! App\Helpers\General\AMP::check()) row @endif">
                        <div class="col-lg-8 mb-20">
                            @include('includes.partials.messages')
                                            {!! Form::open(array('method' => 'POST', 'id' => 'frm_payment')) !!}

                                            {!! Form::hidden('order_id', $data['order']->id) !!}
                                            <h4 class="d-none">Credit Card Details</h4>
                                            <div class="mb-4 d-none"></div>
                                            <div class="accordion" id="accordion_payment">
                                                <div class="card">
                                                    <div class="card-header" id="acc_billing_address">
                                                        <h4 class="mb-0">
                                                            <a href="#" class="checkout-headers" data-toggle="collapse" data-target="#acc_body_billing_address" aria-expanded="true" aria-controls="collapseOne">
                                                                <i class="icon-money" aria-hidden="true"></i> BILLING ADDRESS
                                                            </a>
                                                        </h4>
                                                    </div>

                                                    <div id="acc_body_billing_address" aria-labelledby="acc_billing_address" data-parent="#accordion_payment">
                                                        <div class="card-body">
                                                            <div class="row">
                                                                <div class="col-md-12 col-12 mb--20 funkyradio">
                                                                    <div class="funkyradio-primary">
                                                                        {!! Form::checkbox('same_billing_info', true, $data['v_billing_details']['same_billing_info'], ['id' => 'same_billing_info']) !!}
                                                                        <label for="same_billing_info" class="mt-0 mb-2"><strong>Click here if your billing and shipping details are same.</strong></label>
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-12 col-12 mb--20">
                                                                    {!! Form::label('email', 'Email Address: *') !!}
                                                                    {!! Form::text('email', $data['v_billing_details']['email'], ['required' => 'required', 'type' => 'email', 'class' => 'text_input', 'placeholder' => 'Enter email address ...', 'id' => 'bl_email']) !!}
                                                                </div>

                                                                <div class="col-md-6 col-12 mb--20">
                                                                    {!! Form::label('first_name', 'First Name: *') !!}
                                                                    {!! Form::text('first_name', $data['v_billing_details']['first_name'],['required' => 'required', 'class'=>'text_input', 'placeholder'=>'Enter first name ...', 'id' => 'bl_first_name']) !!}
                                                                </div>

                                                                <div class="col-md-6 col-12 mb--20">
                                                                    {!! Form::label('last_name', 'Last Name: *') !!}
                                                                    {!! Form::text('last_name', $data['v_billing_details']['last_name'],['required' => 'required', 'class'=>'text_input', 'placeholder'=>'Enter last name ...', 'id' => 'bl_last_name']) !!}
                                                                </div>
                                                                <div class="col-12 mb--20">
                                                                    {!! Form::label('company', 'Company:') !!}
                                                                    {!! Form::text('company', $data['v_billing_details']['company'],['class'=>'text_input', 'placeholder'=>'Enter company name ...', 'id' => 'bl_company']) !!}
                                                                </div>

                                                                <div class="col-12 mb--20">
                                                                    <label for="address1">Address: *</label>
                                                                    {!! Form::text('address1', $data['v_billing_details']['address1'],['required' => 'required', 'class'=>'text_input', 'placeholder'=>'Enter address line 1...', 'id' => 'bl_address1']) !!}

                                                                    <div class="pt--10">{!! Form::text('address2', $data['v_billing_details']['address2'],['class'=>'text_input', 'placeholder'=>'Enter address line 2 ...', 'id' => 'bl_address2']) !!}</div>
                                                                </div>

                                                                <div class="col-12 col-12 mb--20">
                                                                    {!! Form::label('country', 'Country: *') !!}
                                                                    {!! Form::select('country', $data['countries'], $data['v_billing_details']['country'],['required' => 'required', 'class'=>'text_input', 'onchange="get_states(this.value);"', 'placeholder'=>'Select country ...', 'id' => 'bl_country']) !!}
                                                                </div>

                                                                <div class="col-md-6 col-12 mb--20">
                                                                    {!! Form::label('state', 'State: *') !!}
                                                                    <div id="div_state">

                                                                        @php
                                                                            $show_text_field = true;
                                                                            if(isset($data['address']))
                                                                            {
                                                                                if(is_numeric($data['address']->state))
                                                                                    $show_text_field = false;
                                                                            }
                                                                        @endphp

                                                                        @if($show_text_field)
                                                                            {!! Form::text('state', $data['v_billing_details']['state'], ['required' => 'required', 'class'=>'text_input', 'placeholder'=>'Enter state ...']) !!}
                                                                        @else
                                                                            {!! Form::select('state', $data['states'], $data['v_billing_details']['state'],['required' => 'required', 'class'=>'text_input', 'placeholder'=>'Enter state ...']) !!}
                                                                        @endif

                                                                    </div>
                                                                </div>

                                                                <div class="col-md-6 col-12 mb--20">
                                                                    {!! Form::label('city', 'City: *') !!}
                                                                    {!! Form::text('city', $data['v_billing_details']['city'],['required' => 'required', 'class'=>'text_input', 'placeholder'=>'Enter city ...', 'id' => 'bl_city']) !!}
                                                                </div>

                                                                <div class="col-md-6 col-12 mb--20">
                                                                    {!! Form::label('zip', 'Zip / Post Code: *') !!}
                                                                    {!! Form::text('zip', $data['v_billing_details']['zip'],['required' => 'required', 'maxlength' => '9', 'class'=>'text_input', 'placeholder'=>'Enter zip / post code ...', 'id' => 'bl_zip']) !!}
                                                                </div>

                                                                <div class="col-md-6 col-12 mb--20">
                                                                    {!! Form::label('phone', 'Phone: *') !!}
                                                                    {!! Form::text('phone', $data['v_billing_details']['phone'],['required' => 'required', 'class'=>'text_input', 'placeholder'=>'Enter phone ...', 'id' => 'bl_phone']) !!}
                                                                </div>

                                                                <div class="col-md-6 col-12 mb--20 mt-1">
                                                                    <button type="button" id="btn-billing-continue" class="button @if($data['layout'] == 'frontend.layouts.mobile' ) bg-black px-2 py-1 text-white mt-1 @endif">Continue</button>
                                                                </div>



                                                            </div>


                                                        </div>



                                                    </div>
                                                </div>






                                                <div class="card mt-2">
                                                    <div class="card-header" id="acc_card_details">
                                                        <h4 class="mb-0">
                                                            <a href="javascript:;" class="checkout-headers" data-toggle="collapse" data-target="#acc_body_card_details" aria-expanded="true" aria-controls="collapseTwo">
                                                                <i class="zmdi zmdi-card" aria-hidden="true"></i> CARD DETAILS
                                                            </a>
                                                        </h2>
                                                    </div>

                                                    <div id="acc_body_card_details" class="collapse" aria-labelledby="acc_card_details" data-parent="#accordion_payment">
                                                        <div class="card-body">
                                                            <div class="row">


                                                                <div class="col-md-12 col-12 mb-1">


                                                                    {!! Form::label('cc_number', 'Card Number:') !!}
                                                                    <div class="input-group">
                                                                        {!! Form::text('cc_number', null, ['maxlength' => 23, 'oninput' => 'this.value = this.value.replace(/[^0-9-]/g, "");', 'required' => 'required', 'class' => 'form-control left_payment_cart_icon', 'placeholder' => 'Card Number ...', 'id' => 'cc_number']) !!}
                                                                        <div class="input-group-append @if( App\Helpers\General\AMP::check()) mt-1 @endif">
                                                                            <div class="input-group-text payment_cart_icon"><i class="zmdi zmdi-card" id="fa_cc"></i></div>
                                                                        </div>
                                                                    </div>
                                                                    {!! Form::hidden('cc_type', null, ['id' => 'cc_type']) !!}


                                                                </div>


                                                                <div class="col-md-4 col-12">
                                                                    {!! Form::label('cc_month', 'Expiry Month:') !!}
                                                                    {!! Form::select('cc_month', $data['months'], null, ['required' => 'required', 'class'=>'text_input', 'placeholder'=>'Please Select ...']) !!}
                                                                </div>

                                                                <div class="col-md-4 col-12">
                                                                    {!! Form::label('cc_year', 'Expiry Year:') !!}
                                                                    {!! Form::select('cc_year', $data['years'], null, ['required' => 'required', 'class'=>'text_input', 'placeholder'=>'Please Select ...']) !!}
                                                                </div>

                                                                <div class="col-md-4 col-12">
                                                                    {!! Form::label('cc_cvv', 'CVC:') !!}
                                                                    {!! Form::text('cc_cvv', null, [
                                                                        'required' => 'required', 
                                                                        'class' => 'text_input', 
                                                                        'placeholder' => 'Enter CVC ...', 
                                                                        'maxlength' => 4, 
                                                                        'pattern' => '[0-9]*', 
                                                                        'inputmode' => 'numeric',
                                                                        'oninput' => 'this.value = this.value.replace(/[^0-9]/g, "");' // Regex to replace any non-numeric character
                                                                    ]) !!}                                                         
                                                                </div>

                                                                <div class="col-md-12 col-12">
                                                                    <div class="term-block m-2">
                                                                        {!! Form::checkbox('terms', true, 0, ['id' => 'terms']) !!}
                                                                        <label for="terms">&nbsp;I've read and accept the <a class="text-red" target="_blank" href="/t-terms-and-conditions.aspx">terms & conditions</a>.</label>
                                                                    </div>
                                                                    <button type="submit" class="btn btn-primary btn-block button_for_new_design mt-1" id="btn_place_order"  @if(session()->get('move_to') != 'acc_payment_form') disabled="disabled" @endif>PLACE ORDER</button>
                                                                </div>

                                                                <div class="col-md-12 col-12 text-center">
                                                                    <hr>
                                                                    <img src="{{asset('static/assets/images/authorize_net.webp')}}" alt="Secure Payments by Authorize.net" vspace="25" class="img-fluid">
                                                                </div>

                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                            </div>

                                            {!! Form::close() !!}

                        </div>




                        <div class="col-md-4 row @if( App\Helpers\General\AMP::check())mt-4 mx-1 @endif">
                            <div class="table-responsive customer_address_payment_detail card mt-10">
                                <h5 class="mt-3">SHIPPING ADDRESS</h5>
                                <table class="table table-hover">
                                    <tbody>
                                    @if($data['order']->customer_id > 0)
                                        <tr>
                                            <td width="70%">{{ \App\Models\Customer::getCustomerName($data['order']->customer_id) }}</td>
                                        </tr>
                                    @endif
                                    <tr>
                                        <td width="70%">{{ $data['order']->email ?? 'N/A' }}</td>
                                    </tr>
                                    <tr>
                                        <td>{{ $data['order']->first_name . ' ' . $data['order']->last_name }}</td>
                                    </tr>
                                    @if($data['order']->company)
                                        <tr>
                                            <td>{{ $data['order']->company ?? 'N/A' }}</td>
                                        </tr>
                                    @endif
                                    <tr>
                                        <td>
                                            {{ $data['order']->address1 }},

                                            @if($data['order']->address2)
                                                {{ $data['order']->address2 ?? 'N/A' }},
                                            @endif

                                            {{ $data['order']->city }}, {{ $data['order']->zip_code }}, @if(is_numeric($data['order']->state))
                                                {{ \App\Models\State::get_state_name($data['order']->state) }},
                                            @else
                                                {{ $data['order']->state }},
                                            @endif
                                            {{ \App\Models\Country::get_country_name($data['order']->country) }}

                                        </td>
                                    </tr>
                                    <tr>
                                        <td>{{ $data['order']->phone ?? 'N/A' }}</td>
                                    </tr>
                                    @if($data['order']->notes)
                                        <tr>
                                            <td>{{ $data['order']->notes ?? 'N/A' }}</td>
                                        </tr>
                                    @endif
                                    <tr>
                                        <td class="text-center"><a class="button" href="{{ route('frontend.checkout') }}">Change Address or Payment Method</a></td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>




                    </div>
                </div>


            </div>
        </div>
    </div>


    @push('after-scripts')
        <script src="static/assets/js/cleave.min.js"></script>
        @if($data['v_billing_details']['terms'])
            <script>
                activate_card_details();
                @if(is_numeric($data['v_billing_details']['state']))
                get_states({{ $data['v_billing_details']['country'] }}, {{ $data['v_billing_details']['state'] }});
                @endif
            </script>
        @endif
            
        <textarea id="s_shipping_address" class="d-none">{!! json_encode($data['v_shipping_details']) !!}</textarea>
    @endpush
@endsection