@extends('layouts.userdashboard')
@section('content')

<div class="container-fluid">

    <div class="row">

        <div class="col-xl-12 col-lg-12">
            <div class="card shadow mb-4">
                <!-- Card Header - Dropdown -->

                <div class="card-body">
                    <div class=" pb-2">
                        <div class="inner-bg table-responsive">
                            <div class="element-title mb-2">
                                <h4 class="mb-4">Product Orders</h4>
                            </div>
                            <table class="cart-table table table-striped table-hover table-bordered" width="100%" id="example">
                                <thead class="table-dark">
                                    <tr>
                                        <th>Date</th>
                                        <th>Order ID</th>
                                        <th>Type Of Payment</th>
                                        <th>Items</th>
                                        <th>Details</th>
                                        <th>Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($orders as $order)
                                    <tr>
                                        <td>{{ date('d-m-Y H:m:s', strtotime($order->created_at)) }}</td>
                                        <td>{{ $order->order_no }}</td>
                                        <td>
                                            {{ $order->payment_type }}&nbsp;
                                            @if($order->payment_type == 'ONLINE')
                                            ({{ $order->is_paid ? 'Paid': 'Unpaid' }})
                                            @endif
                                        </td>
                                        <td>{{ $order->orderItems()->count() }}</td>
                                        <td>
                                            <a href="{{ route('user_order_detail', $order->id) }}" class="hedlogbtn border-0">View Details</a>
                                        </td>
                                        <td>
                                            @if($order->is_paid)
                                                @if ($order->order_status == 0)
                                                <span class="pending-btn">Pending</span>
                                                @elseif($order->order_status == 1)
                                                <span class="confirmed-btn">Confirm</span>

                                                {{-- <div style=" display: inline-flex; ">
                                                            <button href="#" class="sm-2" data-toggle="modal"
                                                                data-target="#exampleModalLong">Cancel
                                                                    Order</button>
                                                        </div> --}}
                                                @elseif($order->order_status == 2)
                                                <span class="dispatch-btn">Dispatch</span>
                                                @elseif($order->order_status == 3)
                                                <span class="deliverd-btn">Delivered</span>
                                                @elseif($order->order_status == 9)
                                                <span class="failed">Cancelled</span>
                                                @endif
                                            @else
                                                <span class="pending-btn">{{ $order->status }}</span>
                                                @if($order->status === 'FAILED' || $order->status === 'CANCELLED' )
                                                    <button class="btn btn-sm btn-primary" type="button" onclick="placeOrder('{{ $order->id }}')" >Repay</button>
                                                    @endif
                                            @endif
                                        </td>
                                    </tr>
                                    @empty
                                    <tr>
                                        <td colspan="5">No Orders yet...</td>
                                    </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>

                    </div>
                </div>
                <!-- Area -->

            </div>
        </div>

    </div>

    <!-- Content Row -->
</div>



@endsection

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

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.1/css/jquery.dataTables.css">

<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.1/js/jquery.dataTables.js" defer>
</script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/2.0.0/js/dataTables.buttons.min.js" defer></script>
<script type="text/javascript" charset="utf8" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js" defer></script>
<script type="text/javascript" charset="utf8" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js" defer></script>
<script type="text/javascript" charset="utf8" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js" defer></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/2.0.0/js/buttons.html5.min.js" defer></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/2.0.0/js/buttons.print.min.js" defer></script>

<script>
    $(document).ready(function() {
        $('#example').DataTable({
            dom: 'Bfrtip'
            , 'order': [
                [1, 'desc']
            , ], //or asc
            'columnDefs': [{
                'targets': 3
                , 'type': 'date-eu'
            , }]
            , buttons: [
                'excel'
            , ]
        , });
    });

</script>
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
<script>
    function placeOrder(orderID) {
        // Display loading spinner
        loading(true);
        const csrfToken = '{{ csrf_token() }}';

        // Make an AJAX request to process the order
        $.ajax({
            type: "POST",
            url: '{{route('order.repay')}}',
            data: {
                "_token": csrfToken,
                "order_id": orderID
            },
            headers: {
                'X-CSRF-TOKEN': csrfToken
            },
            success: function(data) {
                // Parse the JSON response
                const response = JSON.parse(data);

                // Hide loading spinner
                loading(false);

                // Check if the order processing was successful
                if (response.new.code !== 1) {
                    alert(response.new.message ?? 'Something went wrong while generating the order.');
                }

                // Check payment type
                if (response.new.order.payment_type === 'COD') {
                    alert("It is COD");
                    return;
                    // Display COD order details
                    displayCODOrderDetails(response.new.order);
                } else {
                    // Display Razorpay payment form
                    displayRazorpayForm(response.new);
                }
            },
            complete: function() {},
            error: function() {
                // Hide loading spinner and enable the "Pay Now" button
                loading(false);
                alert("Something went wrong.");
            }
        });
    }

    function displayCODOrderDetails(order) {
        // Display COD order details in a modal
        $('#PreviewOrderImage').attr('src', window.location.origin + '/new-assets/img/gallery/LOGO-CV1.png');
        $('#OrderID').html(order.id);
        $('#TotalAmount').html(order.amount);

        // Show COD modal
        showCODModal();

        // Redirect to the home page after 5 seconds
        setTimeout(() => {
            window.location.href = '/';
        }, 5000);
    }

    function displayRazorpayForm(orderDetails) {
        console.log(orderDetails);
        const billingName = orderDetails.billing.name;
        const billingPhone = orderDetails.billing.phone;
        const billingEmail = orderDetails.billing.email;
        const billingAddress = orderDetails.billing.address;

        const options = {
            "key": "rzp_live_vxksC1Hf5WWTAF", // Enter the Key ID generated from the Dashboard  rzp_test_6H6AUtBZCXyatL
            "amount": orderDetails.order.amount * 100, // Amount is in currency subunits. Default currency is INR. Hence, 50000 refers to 50000 paise
            "currency": "INR",
            "name": "Discount Store",
            "description": "Order #" + orderDetails.order.id,
            "image": window.location.origin + "/new-assets/img/gallery/LOGO-CV1.png",
            "order_id": orderDetails.orderId, // This is a sample Order ID. Pass the id obtained in the response of Step 1
            "callback_url": '{{route("update_order_status")}}?order_id=' + orderDetails.order.id,
            "handler": function (response) {
                console.log("Handler Response", response);

                // Make a new AJAX request to update order status
                $.ajax({
                    method: "POST",
                    url: '{{route("update_order_status")}}',
                    datatype: 'json',
                    data: {
                        "_token": "{{ csrf_token() }}",
                        "order_id": orderDetails.order.id,
                        "TotalAmount": orderDetails.order.amount,
                        "razorpay_payment_id": response.razorpay_payment_id,
                        "razorpay_order_id": response.razorpay_order_id,
                        "razorpay_signature": response.razorpay_signature,
                    },
                    success: function (data) {
                        window.location.reload();
                    },
                    complete: function() {},
                    error: function() {
                        alert('Something went wrong while updating order status.');
                    }
                });
            },
            'prefill': {
                'name': billingName,
                'email': billingEmail,
                'contact': billingPhone,
            },
            "notes": {
                "address": billingAddress,
                "merchant_order_id": orderDetails.order.id,
            },
            "theme": {
                "color": "#110f02",
            },
            "modal": {
                "backdrop": 'static',
                "keyboard": false,
                "ondismiss": function() {
                    fetch('/cancel/' + orderDetails.order.id, {
                        method: 'POST'
                        , headers: {
                            'Content-Type': 'application/json'
                            ,
                        }
                        , body: JSON.stringify({
                            "_token": "{{ csrf_token() }}",
                            "_method": "PUT"
                        })
                    }).then(response => {
                        window.location.reload();
                    });
                }
            }
        };

        // Create a new Razorpay instance
        const rzp = new Razorpay(options);

        // Open Razorpay payment form
        rzp.open();

        // Handle payment failure
        rzp.on('payment.failed', function(response) {
            console.log("Payment Failed", response);
            alert('Payment failed');

            // Update order status to 'Failed'
            updateOrderStatus(orderDetails.order.id, orderDetails.order.amount, 'Failed');
        });

        // Handle payment success
        rzp.on('payment.success', function(response) {
            console.log("Payment Success", response);

            // Update order status and display success modal
            updateOrderStatusAndShowSuccessModal(orderDetails, response);
        });
    }

    function updateOrderStatus(orderID, totalAmount, status) {
        // Make an AJAX request to update order status
        $.ajax({
            method: "POST",
            url: '{{route("update_order_status")}}',
            datatype: 'json',
            data: {
                "_token": "{{ csrf_token() }}",
                "order_id": orderID,
                "TotalAmount": totalAmount,
                "status": status
            },
            success: function(data) {
                // Handle success (optional)
            },
            complete: function() {},
            error: function() {
                alert('Something went wrong while updating order status.');
            }
        });
    }

    function updateOrderStatusAndShowSuccessModal(orderDetails, razorpayResponse) {
        // Update order status
        updateOrderStatus(
            orderDetails.order.id,
            orderDetails.order.amount,
            'Success'
        );

        // Display success modal
        $('#PreviewOrderImageRazorpay').attr("src", window.location.origin + '/new-assets/img/gallery/LOGO-CV1.png');
        $('#OrderIDRazorpay').html(orderDetails.order.order_no);
        $('#TotalAmountRazorpay').html(orderDetails.order.amount);
        $('#razorpay_payment_id').html(razorpayResponse.razorpay_payment_id);
        $('#razorpay_order_id').html(razorpayResponse.razorpay_order_id);

        // Show Razorpay modal
        $('#your-modal-razorpay').modal({
            backdrop: 'static',
            keyboard: false
        });

        // Display COD details modal
        showCODModal();

        // Redirect to the home page after 2 seconds
        setTimeout(() => {
            window.location.href = '/';
        }, 2000);
    }

    function showCODModal() {
        // Display COD modal
        document.getElementById('your-modal-cod').classList.add('modal-show');
        document.body.style.overflow = 'hidden';

        // Make body overflow hidden
        setTimeout(() => {
            window.location.href = '/';
        }, 2000);
    }

</script>