@extends('web.layouts.layout')
@section('content')

    <style>
        @media print {
            .img img {
                width: 50px;
                height: 50px;
                object-fit: contain;
                border: 1px solid #9993;
                border-radius: 10px;
                padding: 5px;
            }
            #printButn{
                display: none !important;
            }
            .qr_box img {
                width: 100px;
                display: block;
                margin: auto;
                object-fit: contain;
            }
            .order-head .li {
                font-size: 10px;
            }
        }
    </style>
    <main>
        <!-- Start pg_header -->
    @include('web.pages.components.header.header')

    <!-- Start section -->
    <section class="order_det_pg section ">
        <div class="container">
            <div id="printable">
                <div class="order-details" >
                    <div class="row justify-content-center">
                        <div class="col-lg-10">
                            <div class="order-head">
                                <div class="row">
                                    <div class="col-lg-6">
                                        <p> {{__('web.order_id')}}   : <b>{{$order->id}}</b></p>
                                    </div>
                                    <div class="col-lg-6">
                                        <p> {{__('web.order_date')}}  : <b>{{$order->date}}</b></p>
                                    </div>
                                    <div class="col-lg-6">
                                        <p> {{__('web.order_status')}} :  <b>{{__('orders.statuses.'.$order->status)}}</b></p>
                                    </div>
                                    <div class="col-lg-6">
                                        <p>{{__('web.way_pay')}} :  <b>{{$order->way->currentDescription->title}}</b></p>
                                    </div>
                                    <div class="col-lg-6">
                                        <p> {{__('web.address_name')}}   :  <b> {{$order->address->name}}  </b></p>
                                    </div>
                                    <div class="col-lg-6">
                                        <p> {{__('web.address_details')}}   :  <b>{{$order->address->address}} </b></p>
                                    </div>


                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="order-body">
                        <div class="table_box mb-5 py-0">
                            <div class="table-responsive">
                                <table class="table table-bordered mb-0">
                                    <thead>
                                    <tr>
                                        <th scope="col">  {{__('web.product_image')}}  </th>
                                        <th scope="col">  {{__('web.product_name')}}  </th>
                                        <th scope="col">{{__('web.quantity')}}</th>
                                        <th scope="col"> {{__('web.cost')}} </th>
                                        <th scope="col"> {{__('web.rate')}}  </th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    @foreach($order->products as $row)
                                        <tr>
                                            <td>
                                                <div class="img">
                                                    <img src="{{asset($row->product->image)}}" alt="">
                                                </div>
                                            </td>
                                            <td>  {{$row->product->currentDescription->title}} @if($row->sub_attribute_id) - {{$row->mainAttr->currentDescription->title }} - {{$row->subAttr->currentDescription->title }} @endif  </td>
                                            <td>{{$row->count}}</td>
                                            <td>{{$row->total}} {{__('web.sar')}} </td>
                                            @if($row->product->canRate)
                                                <td>
                                                    <button type="button" onclick="rateProduct(this)" data-id="{{$row->product_id}}" class="small color-primary"  data-bs-toggle="modal" data-bs-target="#rateModal">
                                                        {{__('web.rate')}}
                                                    </button>
                                                </td>
                                            @else
                                                <td>
                                                </td>
                                            @endif
                                        </tr>
                                    @endforeach

                                    </tbody>
                                </table>
                            </div>
                        </div>

                    </div>

                </div>
                <div class="order_foot col-lg-10 mx-auto">
                    <div class="row justify-content-between">
                        <div class="col-lg-7">
                            <div class="pay_box">
                                <ul>
                                    <li>
                                        <span class="label"> {{__('web.total_products')}} </span>
                                        <span> <b class="color-primary">{{$order->total_products}}</b> <smal>{{__('web.sar')}} </smal></span>
                                    </li>
                                    @if($order->coupon_id)
                                        <li>
                                            <span class="label">{{__('web.discount')}}    </span>
                                            <span> <b class="color-primary">{{$order->discount}}</b> <smal>{{__('web.sar')}} </smal></span>
                                        </li>
                                    @endif
                                    <li>
                                        <span class="label"> {{__('web.total_tax')}}     </span>
                                        <span> <b class="color-primary">{{$order->total_tax}}</b> <smal>{{__('web.sar')}} </smal></span>
                                    </li>
                                    <li>
                                        <span class="label"> {{__('web.total_products_tax')}} </span>
                                        <span> <b class="color-primary">{{$order->total_products + $order->total_tax}}</b> <smal>{{__('web.sar')}} </smal></span>
                                    </li>

                                    @if($order->on_hand_cost)
                                    <li>
                                            <span class="label"> {{__('web.on_hand_cost')}}</span>
                                            <span> <b class="color-primary">{{$order->on_hand_cost}}</b> <smal>{{__('web.sar')}} </smal></span>
                                        </li>
                                    @endif
                                    <li>
                                        <span class="label"> {{__('web.shipping_cost')}} </span>
                                        <span> <b class="color-primary">{{$order->shipping_cost }}</b> <smal>{{__('web.sar')}} </smal></span>
                                    </li>
                                    <li>
                                        <span class="label">{{__('web.full_total')}}   </span>
                                        <span> <b class="color-primary">{{$order->total}}</b> <smal>{{__('web.sar')}} </smal></span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-lg-5">
                            <div class="qr_box">
                                <img src="{{asset($order->qr_image)}}" alt="" class="qr_img sec-img"/>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="text-center mt-5">
                    <a href="{{route('web.bill',$order->id)}}" class="butn primary_butn"> {{__('web.bill')}} </a>
                </div>
            </div>
        </div>
    </section>

</main>

    <div class="modal  rateModal fade" id="rateModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                <div class="modal-body">
                    <div class="content text-center mt-4">
                        <h4 class="title text-dark mb-4"><b>  {{__('web.product_rate')}}  </b></h4>
                        <form method="post" action="{{route('web.rate')}}" onsubmit="formAction(this)">
                            @CSRF
                            <input type="hidden" name="product_id" id="product_id">
                            <div class="stars-content mb-5">
                                <div class="star-rating">
                                    <input type="radio" id="5-stars" name="rate" value="5" />
                                    <label for="5-stars" class="star"><i class="fas fa-star"></i></label>
                                    <input type="radio" id="4-stars" name="rate" value="4" />
                                    <label for="4-stars" class="star"><i class="fas fa-star"></i></label>
                                    <input type="radio" id="3-stars" name="rate" value="3" />
                                    <label for="3-stars" class="star"><i class="fas fa-star"></i></label>
                                    <input type="radio" id="2-stars" name="rate" value="2" />
                                    <label for="2-stars" class="star"><i class="fas fa-star"></i></label>
                                    <input type="radio" id="1-star" name="rate" value="1" />
                                    <label for="1-star" class="star"><i class="fas fa-star"></i></label>
                                </div>
                            </div>
                            <div class="form-group col-md-10 m-auto">
                                <h6 class="title mb-3"> {{__('web.write_your_comment')}}  </h6>
                                <textarea name="comment" class="form-control" placeholder="  {{__('web.write_here')}}  " rows="7"></textarea>
                            </div>
                            <div class="d-flex justify-content-center align-items-center justify-content-center mt-5 ">
                                <button type="button" class="butn btn-secondary  mx-1" data-bs-dismiss="modal">{{__('web.close')}}</button>
                                <button type="submit" class="butn primary_butn mx-1">{{__('web.send')}}</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('inject_js')
    <script>
        $(function() {
            $("#printable").find('#printButn').on('click', function() {
                $.print("#printable");
            });
        });
        function rateProduct(elem)
        {
            let id = $(elem).attr('data-id')
            $('#product_id').val(id)
        }
    </script>
@endsection
