@if(Auth::user()->userTypeId==1)
    @include('user-web.layouts.head')
    @include('user-web.layouts.header')
@else
    @include('business.layouts.head')
    @include('business.layouts.header')
@endif

<style>
        input[type="radio"] {
            display: none; /* Hide the default radio button */
        }
        label {
            background-color: #f8f9fa;
            border: 1px solid #ddd;
            border-radius: 4px;
            color: #333;
            padding: 10px 20px;
            margin: 5px;
            cursor: pointer;
            display: inline-block;
        }
        input[type="radio"]:checked + label {
            background-color: #e0e0e0;
            border-color: #ccc;
        }
        /* Hide the textarea initially */
        #other_reason {
            display: none;
            margin-top: 10px;
        }
    </style>
<div class="main-content">

    <section class="home">

        <div class="container">

            <div class="row">



                @if(Auth::user()->userTypeId==1)
                      @include('user-web.layouts.sidebar')
                @else
                      @include('business.layouts.sidebar')
                @endif

                <div class="col-lg-6 ">

                <a href="">

                    <div class="card order-card">
                        @if(\Illuminate\Support\Facades\File::exists(public_path($orderById->product->productImage[0]->imageUrl)))
                            <img src="{{ env('APPLICATION_URL') . $orderById->product->productImage[0]->imageUrl}}" class="card-img">
                        @else
                            <img src="http://hapiverse.com/ci_api/public/{{ $orderById->product->productImage[0]->imageUrl }}" class="card-img">
                        @endif


                        <div class="card-body">

                            <h5 class="card-title">{{$orderById->product->productName}}</h5>
                            <h5 class="card-title">${{$orderById->product->productPrice}}</h5>
                            <p class="card-text">

                                @if($orderById->orderStatus==0)

                                <span style="color: #ffa500;" class="margin-s">Pending</span>

                                @elseif($orderById->orderStatus==1)

                                <span style="color: #00a1ff;"  class="margin-s">Shipped</span>

                                @elseif($orderById->orderStatus==2)

                                <span style="color: #008000;" class="margin-s">Delivered</span>

                                @elseif($orderById->orderStatus==3)

                                <span style="color: #ff0000;" class="margin-s">Cancelled</span>

                                @endif

                                <br>

                                Address:<span>{{$orderById->shippingAddress}}</span>

                            </p>

                            <p class="card-text"><small class="text-muted">Id:{{$orderById->orderId}}</small></p>

                        </div>

                    </div>

                </a>

            </div>


            @if($orderById->orderStatus==0)
            <div class="col-lg-3">
                <div class="card">
                    <div class="card-body">

                            <h4 class="card-title">Help</h4>
                            <p class="card-text">Let us know the reason of cancelling this order?</p>
                            <div class="d-flex flex-wrap mb-3 gap-2">
                            <div>
                                <input type="radio" id="cancel_myself" class="reason-radio" name="reason" value="cancelling_myself">
                                <label for="cancel_myself">Cancelling my self</label>
                            </div>
                            <div>
                                <input type="radio" id="quantity_wrong" class="reason-radio" name="reason" value="quantity_wrong">
                                <label for="quantity_wrong">Quantity is wrong</label>
                            </div>
                            <div>
                                <input type="radio" id="order_mistake" class="reason-radio" name="reason" value="order_mistake">
                                <label for="order_mistake">Order placed by mistake</label>
                            </div>
                            <div>
                                <input type="radio" id="other" class="reason-radio" name="reason" value="other">
                                <label for="other">Other</label>
                            </div>
                            <div id="other_reason_container">
                                <textarea id="other_reason" placeholder="Please specify..."></textarea>
                            </div>
                            </div>
                            <div id="loader" style="display: none;">
                                <img src="{{asset('assets/img/gif/loader.gif')}}" alt="Loading...">
                            </div>
                            <div class="error_message" style="display: none;">
                                <span>Please select atleast one reason.</span>
                            </div>