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

 <main>
        <!-- ----------  inner header ----------- -->   
        
        @include('web.pages.components.headerNav')
        
        <!-- ---------- privacy_page_section page ----------- -->   
        <section class="cart_page section_padding bg-light">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="row justify-content-center">
                            <div class="col-lg-12">
                                <div class="subscribe_price_table mt-5 wh_card">
                                    <div class="price_table_head bg-light rounded-3 p-4">
                                        <div class="row">
                                            <div class="col-lg-6">
                                                <h6> <span> {{__('web.order_id')}} : </span> <strong> {{$order->id}} </strong> </h6>
                                            </div>
                                            <div class="col-lg-6">
                                                <h6> <span> {{__('web.order_date')}} : </span> <strong> {{date('Y/m/d',strtotime($order->created_at))}} </strong> </h6>
                                            </div>
                                            <div class="col-lg-6">
                                                <h6> <span> {{__('web.order_status')}}  : </span> <strong> {{__('web.'.$order->type)}} </strong> </h6>
                                            </div>
                                            <div class="col-lg-6">
                                                <h6> <span> {{__('web.pay_type')}}  : </span> <strong> {{$pay_type}} </strong> </h6>
                                            </div>
                                            <div class="col-lg-6">
                                                <h6> <span> {{__('web.delivery_type')}} : </span> <strong> {{__('web.'.$order->delivery_type)}} </strong> </h6>
                                            </div>
                                            <div class="col-lg-6">
                                                <h6> <span> {{__('web.location_selected')}} : </span> <strong>  {{$order->address->city->descriptions()->name}} <a href="#" class="mainColor ms-2" data-bs-toggle="modal" data-bs-target="#mapModal"> مشاهدة على الخريطة </a> </strong> </h6>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="cart_table">
                                        <div class="table-responsive">
                                            <table class="table">
                                                <thead>
                                                  <tr>
                                                    <th scope="col">#</th>
                                                    <th scope="col">{{__('web.product_image')}}</th>
                                                    <th scope="col">{{__('web.product_name')}}</th>
                                                    <th scope="col">{{__('web.quantity')}}</th>
                                                    <th scope="col">{{__('web.notes')}}</th>
                                                    <th scope="col">{{__('web.cost')}}</th>
                                                  </tr>
                                                </thead>
                                                <tbody>
                                                @foreach($products as $key=>$row)
                                                  <tr>
                                                    <th scope="row">{{$key+1}}</th>
                                                    <td>
                                                        <img src="{{asset($row->product->firstImage())}}" alt="" class="img_prod">
                                                    </td>
                                                    <td>
                                                        <strong> {{$row->product->descriptions()->name}} </strong>
                                                    </td>
                                                    <td>
                                                        <p> {{$row->count}} </p>
                                                    </td>
                                                    <td>
                                                        <p> {{$row->notes}} </p>
                                                    </td>
                                                    <td>
                                                        <p> {{$row->cost}} {{__('web.sar')}} </p>
                                                    </td>
                                                  </tr>
                                                @endforeach
                                                </tbody>
                                              </table>
                                        </div>
                                    </div>
                                    <div class="price_table_body border-1 border-top">
                                        <ul>
                                            <li>
                                                <p> {{__('web.total_before_tax')}}  </p>
                                                <span class="line"></span>
                                                <strong> {{$order->cost_products}} {{__('web.sar')}} </strong>
                                            </li>
                                            <li>
                                                <p> {{__('web.tax_cost')}}  </p>
                                                <span class="line"></span>
                                                <strong> {{$order->tax}} {{__('web.sar')}} </strong>
                                            </li>
                                            @if(!is_null($order->cobon_id))
                                            <li>
                                                <p> {{__('web.cobon_val')}}  </p>
                                                <span class="line"></span>
                                                <strong> {{$order->cobon_val}} {{__('web.sar')}} </strong>
                                            </li>
                                            @endif
                                        </ul>
                                    </div>
                                    <div class="price_table_foot py-3 rounded-3">
                                        <ul>
                                            <li>
                                                <p> {{__('web.total')}} </p>
                                                <span class="line"></span>
                                                <strong> {{$order->total}}  {{__('web.sar')}} </strong>
                                            </li>
                                            @if($order->status == 'points')
                                            <li>
                                                <p>  {{__('web.total_points')}}</p>
                                                <span class="line"></span>
                                                <strong> {{$order->points}}  {{__('web.points')}} </strong>
                                            </li>
                                             
                                            @endif
                                        </ul>
                                    </div>
                                </div>
                                <div class="text-center mt-5">
                                    <a href="#0" class="butn d-print-none" id="print_btn"> 
                                        <span> {{__('web.print_pill')}} </span>    
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>
   <div class="modal editProfModal fade" id="mapModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel"> {{__('web.delivery_address')}} </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="row col-md-12 m-auto">
                            <div class="col-md-12 mt-4">
                            <iframe
                            src="https://maps.google.com/maps?q={{$order->address->latlng}}&hl=en-US&amp;z=14&amp;ie=UTF8&amp;iwloc=B&amp;output=embed"
                            width="100%" height="400" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
                            </div>
                        </div>
                    </form>
                </div>
              
            </div>
        </div>
    </div>

@push('js')

    <script src="{{url('')}}/assets/web/js/printThis.js"></script>
<script>
    $('#print_btn').on("click", function() {
        $('.cart_page').printThis({
            importCSS: true,
            importStyle: true,//thrown in for extra measure
        });
    });
</script>
    
@endpush

@stop