{{--
<div class="summary_box mt-4 mb-3 py-4" >

    <div class="collapse" id="collapseBill">
        <div class="data_middle pb-3  border-bottom mb-3 ">
            <div class="item d-flex align-items-center justify-content-between colorGray2">
                <span> {{__('web.total_products')}} </span>
                <span> {{number_format($total_products,2)}} <span class="icon-saudi_riyal"></span> </span>
            </div>
            <div class="item d-flex align-items-center justify-content-between colorGray2">
                <span> {{__('web.shipping_cost')}} </span>
                <span class="text-success "> {{ __('web.free') }} </span>
            </div>
            @if($discount != 0)
                <div class="item d-flex align-items-center justify-content-between main-color mt-2 colorGray2">
                    <span> {{__('web.discount_amount')}}  </span>
                    <span> {{number_format($discount,2)}} <span class="icon-saudi_riyal"></span> </span>
                </div>
            @endif
            <div class="item d-flex align-items-center justify-content-between main-color mt-2 colorGray2">
                <span> {{__('web.tax')}}  ({{$settings['tax_value']}}%)  </span>
                <span> {{number_format($total_tax,2)}} <span class="icon-saudi_riyal"></span> </span>
            </div>
        </div>
    </div>

    <div class="item d-flex align-items-center justify-content-between fs-5 color-primary fw-bold">
        <span> {{__('web.total_order')}}    </span>
        <span> {{ number_format($total,2) }} <span class="icon-saudi_riyal"></span> </span>
    </div>


</div>
<div class="copun_box d-flex align-items-center mt-3">
    <div class="form-group  ">
        <input class="form-control" name="coupon" onchange="calculate()" value="{{$request->coupon ?? ''}}" placeholder="{{ __('web.coupon') }}" type="text" />

        <span class="state">
            @if($request->coupon)

                @if($discount != 0)
                    <i class="fa-solid fa-circle-check text-success"></i>
                @else
                    <i class="fa-solid fa-circle-xmark text-danger"></i>
                @endif

            @endif
        </span>
    </div>

    <button type="button" class="apply_butn butn gray_butn color-primary "> {{ __('web.apply') }} </button>
</div>
<p id="discount_msg" style="color: {{$discount_color}}">{{$discount_msg}}
    @if($discount != 0)
        @if($discount_type == 'value') <span class="icon-saudi_riyal"></span> @else % @endif
    @endif
</p>
<!--<button class="collapse_bill_butn butn primary_border_butn" type="button" data-bs-toggle="collapse" data-bs-target="#collapseBill" aria-expanded="false" aria-controls="collapseBill">-->
<!--<i class="fa-solid fa-circle-chevron-up"></i> {{ __('web.bill_details') }}-->
<!--</button>-->

<button class="collapse_bill_butn butn primary_border_butn" type="button" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample" >
    <i class="fa-solid fa-circle-plus"></i> {{ __('web.order_details') }}
</button>

--}}



      <div class="offcanvas-body">
        @if(count($products))
            @foreach($products as $row)
                <div class="item_cart d-flex align-items-center justify-content-between">
                    <div class="d-flex align-items-center ">
                        <img src="{{ asset($row['product']->image) }}" class="cat" alt="">
                        <h6 class="prod_name ms-3 mb-0"> {{$row['product']->currentDescription->title}} </h6>
                    </div>
                    <div class="price d-flex fs-6 align-items-center">
                        <span class="current color-primary "> {{ $row['product']->price }} <span class="icon-saudi_riyal "></span> </span>
                        @if($row['product']->cost_discount)
                            <span class="prev colorGray2  lineThrough ms-3">
                                {{ $row['product']->cost }} <span class="icon-saudi_riyal "></span>
                            </span>
                        @endif
                    </div>
                </div>
            @endforeach
        @else
            @include('web.pages.components.not_found',['message'=>__('web.not_found_product_cart')])
        @endif
      </div>
      <div class="offcanvas-foot">
          <div class="summary_box pt-4 pb-2 px-4 ">
                <div class="data_middle pb-4  border-bottom mb-4">
                    <div class="item d-flex align-items-center justify-content-between">
                        <span> {{__('web.total_products')}}    </span>
                        <span> {{number_format($total_products,2)}} <span class="icon-saudi_riyal"></span> </span>
                    </div>
                    <div class="item d-flex align-items-center justify-content-between main-color mt-2">
                        <span> {{ __('web.shipping') }}  </span>
                        <span class="text-success "> {{ __('web.free') }} </span>
                    </div>
                    @if($discount != 0)
                        <div class="item d-flex align-items-center justify-content-between main-color mt-2">
                            <span> {{__('web.discount_amount')}}      </span>
                            <span class="  "> {{number_format($discount,2)}}  <span class="icon-saudi_riyal"></span> </span>
                        </div>
                    @endif
                    <div class="item d-flex align-items-center justify-content-between main-color mt-2">
                        <span> {{__('web.tax')}}  ({{$settings['tax_value']}}%)   </span>
                        <span class="  "> {{number_format($total_tax,2)}}  <span class="icon-saudi_riyal"></span> </span>
                    </div>



                </div>
        
                <div class="item d-flex align-items-center justify-content-between fs-6 pb-4 main-color fw-bold">
                    <span>{{__('web.total_order')}}    </span>
                    <span> {{ number_format($total,2) }} <span class="icon-saudi_riyal"></span> </span>
                </div>
            </div>
      </div>