@extends('layouts.app')
@php
    $userID = auth()->user() ? auth()->user()->id : 1;
@endphp
@section('content')
    <section class="pt-lg-5 pt-md-5 mt-lg-5 mt-md-5 pb-0 cart-sec">
        <div class="container-fluid">
            <div class="row mx-lg-5 mt-lg-0  my-4">
                <div class="row">
                    <div class="bg-white p-3 mb-3 text-uppercase fw-bolder text-center">
                        <span class="pink-color h5 ">Order >  Detail >> Payment Method </span>
                    </div>
                    <div class="col-lg-8 col-sm-12 bg-white p-5">
                        <div class="row border p-2">
                            <div class="col-12">
                                <div class="row">
                                    <div class="col-2">
                                        <i class="far funfgfr fa-user"
                                           style="margin: 13px 0;font-size: 18px;font-weight: 800;"></i>
                                    </div>
                                    <div class="col-7">
                                        <p>
                                            {{ $address->firstname }} {{ $address->lastname }} ({{ $address->phone }})
                                        </p>
                                    </div>
                                    <div class="col-3">
                                        <a href="/select-address" class="pink-color">Change</a>
                                    </div>
                                    <hr>
                                </div>
                                <div class="row ">
                                    <div class="col-2">
                                        Ship to
                                    </div>
                                    <div class="col-7">
                                        {{ $address->address }},{{ $address->city }},{{ $address->state }}
                                        ,{{ $address->country }},{{ $address->pincode }}
                                    </div>
                                    <div class="col-3">
                                        <a href="/select-address" class="pink-color">Change</a>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div id="accordion" class="">
                            <div class="card" style="margin-top: 10px;">
                                <div class="card-header" id="headingOne">
                                    <h5 class="mb-0">
                                        <button class="btn btn-link" style="color: #a1c11f" data-toggle="collapse"
                                                data-target="#collapseOne" aria-expanded="true"
                                                aria-controls="collapseOne">
                                            <i class="fa fa-solid fa-angle-down"></i> Add Gift Card or Promo Code
                                        </button>
                                    </h5>
                                </div>

                                <div id="collapseOne" class="collapse fade" aria-labelledby="headingOne"
                                     data-parent="#accordion">
                                    <div class="card-body">
                                        <div class="row" style="margin-left: 40px;">
                                            <div class="col-5">
                                                <input type="text" class="form-control" name="promo_code"
                                                       id="promo_code" placeholder="Enter code"/>
                                            </div>
                                            <div class="col-3">
                                                <button type="button" class="checkout-btn text-center m-0 p-0"
                                                        id="code_apply" onclick="apply_code()">Apply
                                                </button>
                                            </div>
                                            <div class="col-4">
                                                <p style="color: red" id="promo_error"></p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div id="applied_div" class="d-none">
                            <div class="card">
                                <div class="row">
                                    <div class="col-8">
                                        <p id="promo_line" style="color: #a1c11f;margin-top:30px">Your Promo Code
                                            DISCOUNT30 is applied!!!</p>
                                    </div>
                                    <div class="col-4">
                                        <button class="checkout-btn text-center"
                                                style="background: #fffefe;border: 2px solid #334103;color: #334103 !important;font-weight: 800;"
                                                onclick="location.reload()">Remove
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row mt-3 mb-3 ">
                            <h5>Shipping method</h5>
                            <div class="col-12 border mt-2">
                                <div class="row mt-3">
                                    <div class="col-2">
                                        <input class="form-check-input " type="checkbox" value="{{ $address->id }}"
                                               checked name="address_radio" id="flexCheckChecked">
                                    </div>
                                    <div class="col-7">
                                        <p>Standard Shipping ( 1- {{$shipping->delivery_days ?? '7' }} business
                                            days)</p>
                                    </div>
                                    <div class="col-3">
                                        <p><i class="fas fa-rupee-sign"></i> <b>{{ $shipping->price ?? '100' }}</b></p>
                                    </div>
                                </div>
                            </div>
                        </div>


                        <!-- <div class="row mt-3 ">
    <h5>Payment</h5>
    <p class="info-pt">All transactions are secure and encrypted.</p>
    <div class="col-12 border mt-2">
    <div class="row mt-3">
          <div class="col-2">
          <input class="form-check-input " type="checkbox" value="{{ $address->id }}" checked name="address_radio" id="flexCheckChecked" onclick="radio_click(this)">
          </div>
          <div class="col-10 bg-white ">
            <img src="{{ asset('images/paytm.png') }}" width="50" height="50" >
      </div>
        </div>

    </div>

  </div> -->


                        <form id="contactForm">
                            <h5 class="">Payment Method</h5>
                            <div class="row border p-2">
                                <div class="col-12">
                                    <div class="row mt-2">
                                        <div class="col-2">
                                            <input class="form-check-input " type="radio" value="PAID" checked
                                                   name="payment_type" id="flexCheckChecked">
                                        </div>
                                        <div class="col-10">
                                            <p>Online</p>
                                        </div>
                                        <hr>
                                    </div>

                                    <div class="row ">
                                        <div class="col-2">
                                            <input class="form-check-input " type="radio" value="COD"
                                                   name="payment_type" id="flexCheckChecked">
                                        </div>
                                        <div class="col-10">
                                            <p>Cash On Delivery</p>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <h5 class="" style="margin-top: 10px;">Billing address</h5>
                            <div class="row border p-2 mt-2">
                                <div class="col-12">
                                    <div class="row mt-2">
                                        <div class="col-2">
                                            <input class="form-check-input " type="radio" value="1" checked
                                                   name="address_radio" id="flexCheckChecked"
                                                   onclick="radio_click(this)">
                                        </div>
                                        <div class="col-10">
                                            <p>Same as shipping address</p>
                                        </div>
                                        <hr>
                                    </div>
                                    <div class="row ">
                                        <div class="col-2">
                                            <input class="form-check-input " type="radio" value="2" name="address_radio"
                                                   id="flexCheckChecked" onclick="radio_click(this)">
                                        </div>
                                        <div class="col-10">
                                            <p>Use a different billing address</p>
                                        </div>
                                    </div>
                                </div>
                            </div>


                            <div class="d-none" id="address_div">
                                <div>
                                    <div class="row">
                                        <h5>Contact information</h5>
                                        <div class="col-md-12 col-lg-12 form-outline p-2">
                                            <label>Mobile No.<span style="color:red;">*</span></label>
                                            <input type="tel" name="phone" id="phone" placeholder="Mobile No."
                                                   class="form-control2">
                                        </div>
                                    </div>

                                    <div class="row mt-3">
                                        <h5>Billing Address</h5>
                                        <div class="col-md-12 col-lg-6 form-outline p-2">
                                            <label>First Name<span style="color:red;">*</span></label>
                                            <input type="text" name="first_name" id="first_name"
                                                   placeholder="First Name" class="form-control2">
                                        </div>

                                        <div class="col-md-12 col-lg-6 form-outline p-2">
                                            <label>Last Name<span style="color:red;">*</span></label>
                                            <input type="text" name="last_name" id="last_name" placeholder="Last Name"
                                                   class="form-control2">
                                        </div>

                                        <div class="col-md-12 col-lg-12 form-outline p-2">
                                            <label>Address<span style="color:red;">*</span></label>
                                            <input type="text" name="address" id="address" placeholder="Address"
                                                   class="form-control2">
                                        </div>

                                        <div class="col-md-12 col-lg-6 form-outline p-2">
                                            <label>Locality</label>
                                            <input type="text" name="locality" id="locality"
                                                   placeholder="Apartment, suite, etc. (optional)"
                                                   class="form-control2">
                                        </div>

                                        <div class="col-md-12 col-lg-6 form-outline p-2">
                                            <label>City<span style="color:red;">*</span></label>
                                            <input type="text" name="city" id="city" placeholder="City"
                                                   class="form-control2">
                                        </div>

                                        <div class="col-md-12 col-lg-4 form-outline p-2">
                                            <label>State<span style="color:red;">*</span></label>
                                            <input type="text" name="state" id="state" placeholder="State"
                                                   class="form-control2">
                                        </div>

                                        <div class="col-md-12 col-lg-4 form-outline p-2">
                                            <label>Country<span style="color:red;">*</span></label>
                                            <input type="text" name="country" id="country" placeholder="Country"
                                                   class="form-control2">
                                        </div>

                                        <div class="col-md-12 col-lg-4 form-outline p-2">
                                            <label>Zip<span style="color:red;">*</span></label>
                                            <input type="text" name="pincode" id="pincode" placeholder="Zip"
                                                   class="form-control2">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-6 text-end">
                                    <button type="button" class="checkout-btn text-center" onclick="order()"
                                            id="pay_now">PAY NOW
                                    </button>
                                </div>
                                <div class="col-6 text-end">
                                    <a href="{{ route('cart.index') }}" class="checkout-btn text-center"
                                       style="background: #fffefe;border: 2px solid #334103;color: #334103 !important;font-weight: 800;">Cancel</a>
                                </div>
                            </div>
                        </form>
                    </div>
                    <!-------------- section left end --------------------->
                                        <div class="col-lg-4">
                        <div class="p-4 sidebgdonta">
                            <div class="items" style="max-height: 70vh; overflow-x:hidden; overflow-y: auto;">
                                @foreach($order->orderItems as $orderItem)
                                    <div class="row p-2 mt-2">
                                        <div class="col-3">
                                            <img
                                                src="{{ asset('storage/'.$orderItem->item->image) }}"
                                                width="60" height="60" data-max-width="60" data-max-height="80"
                                                style="border-radius:5px;"></div>
                                        <div class="col-5">
                                            <p class="item-title ">{{ $orderItem->name }} </br><span
                                                    class="item-title text-white">QTY:<span>{{ $orderItem->qty }}</span></span>
                                            </p>
                                        </div>
                                        <div class="col-4 ">
                                            <p class="item-title"><i class="fas fa-rupee-sign"></i>
                                                <b>{{ $orderItem->price }}</b>
                                            </p>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                            <hr>
                            <div class="row p-1">
                                <div class="col-8">
                                    <p class="item-title">Subtotal</p>
                                </div>
                                <div class="col-4 ">
                                    <p class="item-title subtotal"><i
                                            class="fas fa-rupee-sign"></i><b>{{ $order->sub_total }}</b></p>
                                </div>
                                <div class="col-8">
                                    <p class="item-title ">Shipping</p>
                                </div>
                                <div class="col-4 "><i class="fas fa-rupee-sign"></i>
                                    <b>{{ $shipping->price ?? '100' }}</b>
                                </div>
                                <div class="col-8">
                                    <p class="item-title ">Delivery Days </p>
                                </div>
                                <div class="col-4 "><i class="fas fa-shipping-fast"></i>
                                    <b>{{ $shipping->delivery_days }}</b>
                                </div>
                            </div>
                            <hr>
                            <div class="row p-1">
                                <div class="col-8">
                                    <p class="item-title h3">Total</p>
                                </div>
                                <div class="col-4 ">
                                    <p class="item-title total"><i class="fas fa-rupee-sign"></i>
                                        <span class="h3">{{ $order->sub_total }}</span>
                                    </p>
                                </div>

                            </div>


                            <div class="row p-1 outl-bg">
                                <div class="col-12">
                                    <p class="item-title info-pt"> * Easy Return * Quality Gurantee *
                                        Secured Checkout</p>
                                </div>
                                <!-- <div class="col-4 "> <p class="item-title text-white info-pt">  </p></div>
                                    <div class="col-4 "> <p class="item-title text-white info-pt"> </p></div>  -->
                            </div>


                            <div class="row p-1  mt-4 mb-4 ">
                                <div class=" p-2 text-center">
                                    <div class="col-12">
                                        <p class="item-title text-white text-uppercase h6"> Express
                                            checkout</p>
                                    </div>
                                    <div class="col-12 bg-white ">
                                        <img src="{{ asset('images/paytm.png') }}" width="60" height="60">
                                        <img src="{{ asset('images/mastercard.png') }}" width="60" height="60">
                                        <img src="{{ asset('images/paypal.png') }}" width="60" height="60">
                                        <img src="{{ asset('images/visa.png') }}" width="60" height="60">
                                        <img src="{{ asset('images/applepay.png') }}" width="60" height="60">

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


                        </div>
                    </div>
                </div>
                <div id="your-modal-cod" class="modal">
                    <div class="modal-dialog modal-confirm">
                        <div class="modal-content">
                            <div class="modal-header">
                                {{-- <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> --}}
                            </div>
                            <div class="modal-body text-center">
                                <div class="modal-subheading text-center">
                                    <h4>Great!</h4>
                                </div>
                                <div class="modal-sub-heading text-center">
                                    <h5>Your order has been created successfully.</h5>
                                </div>
                                <div class="row text-center">
                                    <img class="img-fluid PreviewOrderImage" id="PreviewOrderImage" border="0"
                                         width="120"
                                         height="100" align="center" alt="image">
                                </div>
                                <div class="row text-center">
                                    <div class="ml-2 productname">
                                        <div>Order ID: <strong id="OrderID"></strong></div>
                                    </div>
                                </div>
                                <div class="row text-center">
                                    <div class="ml-5">
                                        <div class="price">Payment Mode: <a href="javascript:void(0);"
                                                                            id="payment_mode">COD</a></div>
                                    </div>
                                </div>
                                <div class="row text-center">
                                    <div class="ml-5">
                                        <div class="price">Total Amount: ₹<strong id="TotalAmount"></strong></div>
                                    </div>
                                </div>
                                <form action="{{route('user_dashboard')}}" method="GET" enctype="multipart/form-data">
                                    <button class="btn btn-success" type="submit"><span>View Your Order Details</span>
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>

                <div id="your-modal-razorpay" class="modal">
                    <div class="modal-dialog modal-confirm">
                        <div class="modal-content">
                            <div class="modal-header justify-content-center">
                                <!-- <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> -->
                            </div>

                            <div class="modal-body text-center">
                                <div class="modal-subheading text-center">
                                    <h4>Great!</h4>
                                </div>
                                <div class="modal-sub-heading text-center">
                                    <h5>Your order has been created successfully.</h5>
                                </div>
                                <div class="row text-center">
                                    <img class="img-fluid PreviewOrderImage" id="PreviewOrderImageRazorpay" border="0"
                                         width="100" height="100" align="center" alt="image">
                                </div>
                                <div class="row text-center">
                                    <div class="ml-2 productname">
                                        <div>Order ID: <strong id="OrderIDRazorpay"></strong></div>
                                    </div>
                                </div>
                                <div class="row text-center">
                                    <div class="ml-5">
                                        <div class="price">Payment Mode: <a href="javascript:void(0);">Online</a></div>
                                    </div>
                                </div>
                                <div class="row text-center">
                                    <div class="ml-5">
                                        <div class="price">Total Amount: ₹<strong id="TotalAmountRazorpay"></strong>
                                        </div>
                                    </div>
                                </div>
                                <div class="row text-center">
                                    <div class="ml-5">
                                        <div class="price"><small>Razorpay Payment ID: <span
                                                    id="razorpay_payment_id"></span></small></div>
                                        <div class="price"><small>Razorpay Order ID: <span
                                                    id="razorpay_order_id"></span></small></div>
                                    </div>
                                </div>
                                <form action="{{route('user_dashboard')}}" method="GET" enctype="multipart/form-data">
                                    <button class="btn btn-success" type="submit"><span>View Your Order Details</span>
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>

                <div id="promo-modal" class="modal fade">
                    <div class="modal-dialog modal-confirm">
                        <div class="modal-content">
                            <div class="modal-header justify-content-center">
                                <div class="icon-box">
                                    <i class="fas fa-check"></i>
                                </div>
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i
                                        class="fas fa-times"></i></button>
                            </div>
                            <div class="modal-body text-center">
                                <h4>Great!</h4>
                                <p>Your Promo Code is Applied Successfully.</p>
                                <button class="btn btn-success" data-dismiss="modal"><span>OK</span></button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

@endsection

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<script src="https://checkout.razorpay.com/v1/checkout.js"></script>

<script>
    function apply_code() {
        loading(true);

        document.getElementById('code_apply').disabled = true;
        var code = document.getElementById('promo_code').value;

        if (code == '') {
            loading(false);
            $('#promo_error').text('Please Fill out promo code !!!');
            document.getElementById('code_apply').disabled = false;
        } else {

            $.ajax({
                type: 'Post',
                url: '{{route('apply.coupon')}}',
                datatype: 'json',
                data: {
                    '_token': "{{ csrf_token() }}",
                    'code': code,
                },
                success: function(data) {
                    const obj = JSON.parse(data);

                    if (obj.new.code == 0) {
                        loading(false);
                        $('#promo_error').text('This Promo Code is not valid !!!');
                    } else if (obj.new.code == 2) {
                        loading(false);
                        $('#promo_error').text('This Promo Code is valid on above Rs.' + obj.new.limit);
                    } else {
                        loading(false);
                        $('#promo-modal').modal({
                            backdrop: 'static',
                            keyboard: false,
                        });
                        //  $('#item-price').text(obj.new.total);
                        const oldSubtotal = document.querySelector('.item-title.subtotal').textContent;

                        const changes = parseInt(oldSubtotal) - obj.new.total;

                        const oldTotal = document.querySelector('.item-title.total').textContent;
                        const newTotal = oldTotal - changes;

                        document.querySelector(
                            '.item-title.total').innerHTML = `<i class="fas fa-rupee-sign"></i><span class="h3">${newTotal.toFixed(
                            2)}</span>`;
                        const subtotalElement = document.querySelector('.item-title.subtotal');

                        subtotalElement.parentElement.insertAdjacentHTML('afterend',
                            `<div class="col-8"><p class="item-title">Discount</p></div><div class="col-4 "><p class="item-title discount" style="font-size:clamp(.9rem, 1rem, 33%);"><i class="fas fa-rupee-sign"></i><b>-${changes.toFixed(
                                2)}</b></p></div>`);

                        document.getElementById('accordion').classList.add('d-none');
                        document.getElementById('applied_div').classList.remove('d-none');
                        $('#promo_line').text('Your Promo Code ' + code + ' is applied!!!');

                    }

                },
                complete: function() {
                },
                error: function() {
                },
            });

        }
    }

    function order() {
        loading(true);
        document.getElementById('pay_now').disabled = true;
        $.ajax({
            type: 'Get',
            url: '{{route('orders.payment', $order)}}',
            datatype: 'json',
            data: $('#contactForm').serialize(),
            cache: false,
            processData: false,
            contentType: false,
            success: function(data) {
                const obj = JSON.parse(data);
                console.log(obj);
                loading(false);
                if (obj.new.order.payment_type === 'COD') {

                    $('#PreviewOrderImage').attr('src', window.location.origin + '/new-assets/img/gallery/LOGO-CV1.png');
                    $('#OrderID').empty().html(obj.new.order.id);
                    $('#TotalAmount').empty().html(obj.new.order.amount);

                    document.getElementById('your-modal-cod').classList.add('modal-show');
                    // $('#your-modal-cod').modal({
                    //     backdrop: 'static',
                    //     keyboard: false
                    // });

                } else {
                    var options = {
                        'key': 'rzp_live_vxksC1Hf5WWTAF', // Enter the Key ID generated from the Dashboard  rzp_test_6H6AUtBZCXyatL
                        'amount': obj.new.order.amount * 100, // Amount is in currency subunits. Default currency is <i class="fas fa-rupee-sign"></i> Hence, 50000 refers to 50000 paise
                        'currency': 'INR',
                        'name': 'Discount Store',
                        'description': 'Razorpay Transaction',
                        'image': window.location.origin + '/new-assets/img/gallery/LOGO-CV1.png',
                        'order_id': obj.new.orderId, //This is a sample Order ID. Pass the `id` obtained in the response of Step 1
                        'callback_url': 'https://www.discountprice.store/user_order_list',
                        'handler': function(response) {
                            $.ajaxSetup({
                                headers: {
                                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                                },
                            });
                            $.ajax({
                                type: 'POST',
                                url: '{{route('update_order_status')}}',
                                datatype: 'json',
                                data: {
                                    '_token': "{{ csrf_token() }}",
                                    'OrderID': obj.new.order.id,
                                    'TotalAmount': obj.new.order.amount,
                                    'razorpay_payment_id': response.razorpay_payment_id,
                                    'razorpay_order_id': response.razorpay_order_id,
                                    'razorpay_signature': response.razorpay_signature,
                                },
                                success: function(data) {
                                    // alert('jhvjkvkj');
                                    $('#PreviewOrderImageRazorpay').
                                        attr('src', window.location.origin + '/new-assets/img/gallery/LOGO-CV1.png');
                                    $('#OrderIDRazorpay').empty().html(obj.new.order.order_no);
                                    $('#TotalAmountRazorpay').empty().html(obj.new.order.amount);
                                    $('#razorpay_payment_id').empty().html(response.razorpay_payment_id);
                                    $('#razorpay_order_id').empty().html(response.razorpay_order_id);

                                    //  document.getElementById('your-modal-razorpay').classList.add('modal-show');
                                    $('#your-modal-razorpay').modal({
                                        backdrop: 'static',
                                        keyboard: false,
                                    });

                                    $('#PreviewOrderImage').attr('src', window.location.origin + '/new-assets/img/gallery/LOGO-CV1.png');
                                    $('#OrderID').empty().html(obj.new.order.id);
                                    $('#TotalAmount').empty().html(obj.new.order.amount);
                                    document.getElementById('payment_mode').innerText = 'Online';

                                    document.getElementById('your-modal-cod').classList.add('modal-show');
                                },
                                complete: function() {
                                },
                                error: function() {
                                },
                            });
                        },
                        'prefill': {
                            'name': '',
                            'email': '',
                            'contact': '',
                        },
                        'notes': {
                            'address': '',
                        },
                        'theme': {
                            'color': '#e54033',
                        },
                        'modal': {
                            'backdrop': 'static',
                            'keyboard': false,
                            'ondismiss': function() {
                                window.location.replace(window.location.origin + '/');
                            },
                        },
                    };
                    var rzp1 = new Razorpay(options);
                    rzp1.on('payment.failed', function(response) {
                        alert('failed');
                        $.ajax({
                            type: 'POST',
                            url: '{{route('update_order_status')}}',
                            datatype: 'json',
                            data: {
                                '_token': "{{ csrf_token() }}",
                                'OrderID': obj.new.order.id,
                                'TotalAmount': obj.new.order.amount,
                                'status': 'Failed',
                            },
                            success: function(data) {
                                // alert('PAYMENT SUCCESS');

                            },
                            complete: function() {
                            },
                            error: function() {
                            },
                        });
                    });
                    rzp1.open();
                }

            },
            complete: function() {
            },
            error: function() {
            },
        });

    }

    $(document).ready(function() {

        $('#add_address').click(function() {
            document.getElementById('address_div').classList.remove('d-none');
            document.getElementById('add_address').classList.add('d-none');
        });
    });

    function radio_click(element) {

        if (element.value == 1) {
            if (element.checked) {
                document.getElementById('address_div').classList.add('d-none');
            }
        }
        if (element.value == 2) {
            if (element.checked) {
                document.getElementById('address_div').classList.remove('d-none');
            }
        }
    }
</script>