@extends('Frontend.layout.main')

@section('content')






@include('Frontend.inc.banners')
<div class="container">
    <div class="row">
        <div class="col-12">
            <div class="bannerTxt">
                <!-- <h1 class="stretched text-white">About Us</h1> -->
            </div>
        </div>
    </div>
</div>
</section>


<section class="moments-section py-5 mt-0 mt-md-4" data-aos="fade-up">
    <div class="container">

        <div class="row mb-4">
            <div class="col-12 text-center">
                <h4 class="stretched text-uppercase text-default">Make Payment</h4>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12 px-4">
            {{--

                <div class="row cart-table bg-lgray mob-hidden">
                    <div class="col-md-6 d-flex align-items-center">
                        <h6 class="bold">Product</h6>
                    </div>
                    <div class="col-md-2 cartQty">
                        <h6 class="bold">Quantity</h6>
                    </div>
                    <div class="col-md-2 text-right">
                        <h6 class="bold">Price</h6>
                    </div>
                    <div class="col-md-2 text-right">
                        <h6 class="bold">Amount</h6>
                    </div>
                </div>

                @php
                    $subtotal =0;
                    $offer =0

                @endphp

                @foreach($order_items as $list)
                    @php
                        if($list->size != 0){
                        $price = App\Http\Controllers\Frontend\CartController::getPrice($list->size);
                        }else{
                        $price =$list->default_price;
                        }
                    @endphp

                    <div class="row cart-table ">
                        <div class="col-md-6 cart-img order-md-1">
                            <img src="{{ env('ASSET_URL') }}storage/products/{{ $list->filename }}"
                                alt="{{ $list->title }}" class="img-fluid" />
                            <div>
                                <h6>{{ $list->title }}</h6>
                              
                            </div>
                        </div>
                        <div class="col-md-2 col-6 mt-2 mt-md-0 cartQty order-md-2">
                            <div class="input-group">
                                <span class="d-block d-md-none">Qty :</span>

                                <span>{{ $list->quantity }}</span>

                            </div>
                        </div>
                        <div class="col-md-2 col-6 mt-2 mt-md-0 text-center text-sm-right order-md-3">
                            <span class="d-inline-block d-md-none">Price :</span>

                            <span class="d-inline">AED &nbsp;{{ $price }}</span>
                        </div>
                        <div class="col-md-2 col-12 mt-2 mt-md-0 text-center text-sm-right order-md-4">
                            <span class="d-inline-block d-md-none">Amt :</span>
                            AED &nbsp;{{ $price * $list->quantity }}
                        </div>
                    </div>

                    @php
                        $rowtotal = $price * $list->quantity;
                        $subtotal =$subtotal+$rowtotal;
                    @endphp

                @endforeach










                <div class="row mb-1 mt-3">
                    <div class="col-md-5 offset-md-7 text-right">
                        Sub Total : <span class="totPrice"> AED {{ round($subtotal,2) }}</span>

                    </div>
                </div>
                @if($offer_availablity)
                    @php
                        $offer = $subtotal *0.15;
                    @endphp
                    <div class="row mb-1 mt-3">
                        <div class="col-md-5 offset-md-7 text-right">

                            First order offer (15%) : <span> - AED {{ round($offer,2) }}</span>

                        </div>
                    </div>
                @endif

                <div class="row mb-1">
                    <div class="col-md-5 offset-md-7 text-right">
                        @php
                            $vat =$subtotal *0.05;
                            $delivery_charges =$delivery_charges->delivery_charge;
                        @endphp
                        Delivery charge : <span class="totPrice"> AED {{ round($delivery_charges,2) }}</span>
                    </div>
                </div>
                <div class="row mb-1">
                    <div class="col-md-5 offset-md-7 text-right">


                        VAT (5%): <span class="totPrice"> AED {{ round($vat,2) }}</span>


                    </div>
                </div>
                <div class="row mb-1">
                    <div class="col-md-5 offset-md-7 text-right">
                        <b>Grand Total : <span class="totPrice"> AED
                                {{ round($subtotal +  $delivery_charges  + $vat - $offer,2) }}</span></b>
                    </div>
                </div>




                @if(!$offer_availablity)


                    <!-- promo code -->
                    <form action="{{ url('/add-discount-code') }}" method="post">

                        <div class="row mt-5">
                            <div class="col-12 col-md-4 ml-auto text-right">
                                @csrf
                                <input type="hidden" name="merchant_reference" id="payfort_merchant_reference"
                                    value="{{ $order_details->merchant_reference }}" />
                                <h6 class="mb-3"> A promotional code? <a id="js-apply-promo" href="#!"
                                        class="text-default">Add it here</a></h6>
                                <div id="js-promo-box" class="promo-box">
                                    <input type="text" class="form-control" id="discount-code" placeholder="Promotional Code ">
                                    <button type="submit" class="btn btn-primary w-100 mt-2" id="discount-btn">Apply</button>
                                    @if(isset($discount_error) && $discount_error )
                                        <span class="text-danger">Invalid promotional code </span>
                                    @endif
                                </div>
                            </div>
                        </div>
                        <!-- promo code ends -->
                    </form>

                @endif

                                --}}


                <div class="row mt-5 pt-4 border-top">
                    <div class="col-md-12 payOption">
                        <h4>Payment Options</h4>
                        <form>
                            <div class="radiobtn">
                                <input type="radio" id="cardPay" class="payment_mode" name="payment_mode" value="1"
                                    checked />
                                <label for="cardPay">Credit / Debit Card</label>
                            </div>

                            <div class="radiobtn">
                                <input type="radio" class="payment_mode" id="cOd" name="payment_mode" value="0" />
                                <label for="cOd">Cash On Delivery</label>
                            </div>

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




                <form name="paymentConfirm" id="cartConfirm" action="{{ url('/process') }}"
                    method="post" enctype="multipart/form-data">
                    @csrf
                    <div class="row mt-5">
                        <div class="col-md-12">
                            <h3 class="sub-header">Payment Details</h3>
                        </div>
                        <div class="col-md-6 my-1">
                            <input type="text" class="form-control" name="card_holder_name"
                                id="payfort_fort_mp2_card_holder_name" value="" required
                                placeholder="Card Holder's Name" maxlength="50">
                        </div>
                        <div class="col-md-6 my-1">
                            <input type="text" class="form-control" name="card_number" id="payfort_fort_mp2_card_number"
                                value="" required placeholder="Debit/Credit Card Number" maxlength="16">
                        </div>
                        <div class="col-md-6 my-1">
                            <div class="input-group">
                                <select class="custom-select" name="expiry_month" id="payfort_fort_mp2_expiry_month"
                                    required>
                                    <option value="">Expiry Month</option>
                                    <option value="01">Jan (01)</option>
                                    <option value="02">Feb (02)</option>
                                    <option value="03">Mar (03)</option>
                                    <option value="04">Apr (04)</option>
                                    <option value="05">May (05)</option>
                                    <option value="06">June (06)</option>
                                    <option value="07">July (07)</option>
                                    <option value="08">Aug (08)</option>
                                    <option value="09">Sep (09)</option>
                                    <option value="10">Oct (10)</option>
                                    <option value="11">Nov (11)</option>
                                    <option value="12">Dec (12)</option>
                                </select>
                            </div>

                        </div>
                        <div class="col-md-6 my-1">
                            <div class="input-group">
                                <select class="custom-select" name="expiry_year" id="payfort_fort_mp2_expiry_year"
                                    required>
                                    <option value="">Expiry Year</option>
                                    @php
                                        $today = getdate();
                                        $year_expire = array();
                                        for ($i = $today['year']; $i < $today['year'] + 11; $i++) {
                                            $year_expire[]=array( 'text'=> strftime('%Y', mktime(0, 0, 0, 1, 1, $i)),
                                            'value' => strftime('%y', mktime(0, 0, 0, 1, 1, $i))
                                            );
                                            }
                                    @endphp
                                    @foreach($year_expire  as $year)
                                        <option value={{ $year['value'] }}>
                                            {{ $year['text'] }}</option>
                                    @endforeach
                                </select>
                            </div>

                        </div>
                        <div class="col-md-6 my-1">
                            <input type="password" class="form-control" name="cvv" id="payfort_fort_mp2_cvv" value=""
                                required placeholder="Security Code" maxlength="4">
                        </div>
                    </div>
                    <div class="row justify-content-center my-5">
                        <div class="col-sm-6 col-md-3 form-group text-right">
                            <input type="hidden" name="merchant_reference" id="payfort_merchant_reference"
                                value="{{ $order_details->merchant_reference }}" />
                            <button type="button" id="btn_continue"
                                class="confirm-btn paymentConfirmBtn btn btn-primary pull-right">{{ __('Continue') }}</button>

                        </div>

                    </div>
                </form>

                <div class="row justify-content-center my-5">
                    <div class="col-sm-6 col-md-3 form-group text-right">
                        <form action="{{ url('/process/cod') }}" id="code-form" method="post">
                            <input type="hidden" name="merchant_reference" id="merchant_reference"
                                value="{{ $order_details->merchant_reference }}" />
                            <button type="submit" id="btn_continue_cod"
                                class="confirm-btn  btn btn-primary pull-right">{{ __('Continue') }}</button>
                        </form>
                    </div>

                </div>




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






    </div>
    </div>

    </div>
</section>




@endsection

@section('script')
@if(isset($discount_error) && $discount_error )
    <script>

        $("#js-promo-box").fadeToggle();
        $("#discount-code").focus();


    </script>

@endif



<script>
    $("#js-apply-promo").on("click", function () {

        $("#js-promo-box").fadeToggle();

    })

</script>



<script type="text/javascript">
    $(document).ready(function () {




        var paymentMethod = "cc_merchantpage2";
        var baseurl = "{{ url('/') }}";
        //load merchant page iframe
        $('#code-form').hide();

        $('.payment_mode').change(function () {

            $('#cartConfirm').toggle();
            $('#code-form').toggle();
        })

        $('#btn_continue').click(function () {

            var pay_mode = $('.payment_mode').val();

            if (pay_mode == 1) {

                if (paymentMethod == 'cc_merchantpage2') {

                    var isValid = payfortFortMerchantPage2.validateCcForm();
                    if (isValid) {
                        getPaymentPage(paymentMethod, baseurl);
                    }
                }

            } else if (pay_mode == 0) {


            } else {

                alert('Please select a Payment Mode');
                e.preventDefault();
            }



        });
    });


    // $('#discount-btn').click(function (e) {



    //     var discount_code = $('#discount-code').val();
    //     discount_code = discount_code.trim();

    //     if (discount_code.length != 8) {


    //         alert('Invalid promotional Code')

    //         e.preventDefault();

    //     } else if (discount_code.substring(0, 3) != 'CJ-') {

    //         alert('Invalid promotional Code')
    //         e.preventDefault();

    //     }




    // });

</script>
@endsection