@if(!$orders->isEmpty())
@foreach ($orders as $order)
@if(!$order->orderdetail->isEmpty())
<div class="card mt-3">
    <div class="card-header p-2">
        <div class="row">
            <div class="col-md-2">
                <label><b>Order Date</b></label>
                <p>{{ date('M d, Y',strtotime($order->orderdate)) }} as {{ date('h:i A',strtotime($order->orderdate)) }}
                </p>
            </div>
            <div class="col-md-6">
                <label><b>Order Number</b></label><br>
                <a href="{{ route('order-detail',$order->orderid) }}" class="text-decoration-none fw-bold" aria-label="">#{{ $order->orderid }}</a>
            </div>
            <div class="col-md-4">
                <label><b>Total</b></label>
                <p>${{ $order->paymentamount }}</p>
            </div>
        </div>
    </div>
    @foreach ($order->orderdetail as $orderdetail)
    <div class="card-body mt-2">

        <div class="row g-0">
            <div class="col-md-2 text-center">
                <img src="https://s3.us-central-1.wasabisys.com/partswarehouse/photos/{{ $orderdetail->productcode }}-1.jpg"
                    class="img-fluid rounded-start" alt="..." width="100%" style="width: 130px;">
            </div>
            <div class="col-md-9">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-8">
                            <h5 class="card-title">{{ (!empty($orderdetail->pin->Name))?$orderdetail->pin->Name:$orderdetail->productcode." Part" }}
                            </h5>
                            <h6 class="card-text">Model: {{ $orderdetail->productcode }}</h6>
                            <h6 class="card-text mb-2">Price: <span
                                    class="text-primary">${{ $orderdetail->totalprice }}</span></h6>
                        </div>

                        <div class="col-md-4">
                            @if(!empty($order->ordertracking->trackingnumber))
                            <span class="badge bg-info text-dark me-2">Shipped</span>
                            @else
                            <span class="badge bg-info text-dark me-2">{{ $order->orderstatus }}</span>
                            @endif
                            @if(empty($orderdetail->review))
                                <a class="mr-2 fw-bold " onclick="writereviewLink(this)" data-productcode="{{ $orderdetail->productcode }}" data-partname="{{ (!empty($orderdetail->pin->Name))?$orderdetail->pin->Name:$orderdetail->productcode.' Part'}}"  aria-label="WRITE A PRODUCT REVIEW"  style="cursor: pointer;" >WRITE A PRODUCT REVIEW</a>
                            @endif

                        </div>

                    </div>
                </div>

            </div>

        </div>

    </div>
    @endforeach

</div>
@endif
@endforeach
@else
<p>Your order history is empty.</p>
@endif


<div class="modal fade" id="productReviewModal" tabindex="-1" aria-labelledby="productReviewModalLabel" aria-hidden="true">
    <div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
        <h5 class="modal-title" id="productReviewModalLabel">Product Review</h5>
        <button aria-labelledby="..." type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
            <form id="Productreview" action="{{ route('part-details-review-add-process') }}"
            method="post">
            @csrf

            <input aria-labelledby="PartsWarehouse" type="hidden"  name="productcode" id="productcode">
            <input aria-labelledby="PartsWarehouse" type="hidden"  name="part_name" id="part_name">

            <div class="form-group">
                <div class="mb-3">
                    <span class="field-label-info"></span>
                        <label for="title" class="col-form-label">Review</label>

                        <input aria-labelledby="PartsWarehouse" type="hidden" id="product_review" name="product_review" value="" required="required">

                        <h2 class="bold rating-header" style="">

                        </h2>
                        <button aria-labelledby="..." type="button" class="btnrating btn btn-secondary btn-sm" data-attr="1" id="rating-star-1">
                            <i class="fa fa-star" aria-hidden="true"></i>
                        </button>
                        <button aria-labelledby="..." type="button" class="btnrating btn btn-secondary btn-sm" data-attr="2" id="rating-star-2">
                            <i class="fa fa-star" aria-hidden="true"></i>
                        </button>
                        <button aria-labelledby="..." type="button" class="btnrating btn btn-secondary btn-sm" data-attr="3" id="rating-star-3">
                            <i class="fa fa-star" aria-hidden="true"></i>
                        </button>
                        <button aria-labelledby="..." type="button" class="btnrating btn btn-secondary btn-sm" data-attr="4" id="rating-star-4">
                            <i class="fa fa-star" aria-hidden="true"></i>
                        </button>
                        <button aria-labelledby="..." type="button" class="btnrating btn btn-secondary btn-sm" data-attr="5" id="rating-star-5">
                            <i class="fa fa-star" aria-hidden="true"></i>
                        </button>

                  </div>
            </div>

                <div class="form-group">
                    <div class="mb-3">
                        <label for="title" class="col-form-label">Title</label>
                        <input aria-labelledby="PartsWarehouse" type="text" class="form-control" id="title" name="title">
                      </div>
                </div>

                <div class="form-group">
                    <div class="mb-3">
                    <label for="message-text" class="col-form-label">Description</label>
                    <textarea class="form-control" id="message-text" name="description"></textarea>
                    </div>
                </div>
                <div class="form-group">
                    <div class="mb-3">
                       <label for="message-text" class="col-form-label">This form is for product reviews only. For customer support please contact us at 866-243-2721 or email at <a href="mailto:info@partswarehouse.com">info@partswarehouse.com.</a></label>
                    </div>
               </div>
                <div class="form-group">
                    <div class="modal-footer">
                        <button aria-labelledby="..." type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button aria-labelledby="..." type="submit" class="btn btn-primary">Save</button>
                    </div>
                </div>

              </form>
        </div>

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


    <script>
        jQuery(document).ready(function($){

        $(".btnrating").on('click',(function(e) {

        var previous_value = $("#product_review").val();

        var selected_value = $(this).attr("data-attr");
        $("#product_review").val(selected_value);

        $(".selected-rating").empty();
        $(".selected-rating").html(selected_value);

        for (i = 1; i <= selected_value; ++i) {
        $("#rating-star-"+i).toggleClass('btn-warning');
        $("#rating-star-"+i).toggleClass('btn-default');
        }

        for (ix = 1; ix <= previous_value; ++ix) {
        $("#rating-star-"+ix).toggleClass('btn-warning');
        $("#rating-star-"+ix).toggleClass('btn-default');
        }

        }));

        });

    </script>

    <script>

        function writereviewLink(t){
            $('#productReviewModal').modal('show');
            $('#productcode').val($(t).attr('data-productcode'));
            $('#part_name').val($(t).attr('data-partname'));
        }

    </script>