@extends('frontend.layout.app')

@section('content')

<section class="pt-4 mb-4">
    <div class="container">
        <div class="row">
            <div class="col-lg-3 text-center ">
                <h1 class="fw-600 h4">Home/My Orders</h1>
            </div>
            <div class="col-lg-9">
                <ul class="breadcrumb bg-transparent p-0 justify-content-center justify-content-lg-end">
                    <li class="breadcrumb-item opacity-50">
                        <a class="text-reset" href="{{ route('home') }}">Home</a>
                    </li>
                    <li class="text-dark fw-600 breadcrumb-item">
                        <a class="text-reset" href="">Orders</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</section>

<div class="py-3 py-md-5 bg-light">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="shopping-cart">

                        <div class="cart-header d-none d-sm-none d-mb-block d-lg-block">
                            <div class="row">
                                <div class="col-md-2">
                                    <h4 style="font-weight: bold">Order Code</h4>
                                </div>
                                <div class="col-md-1">
                                    <h4 style="font-weight: bold">No Of Products</h4>
                                </div>
                                <div class="col-md-2">
                                    <h4 style="font-weight: bold">Price</h4>
                                </div>
                                <div class="col-md-2">
                                    <h4 style="font-weight: bold">Order Date</h4>
                                </div>
                                <div class="col-md-2">
                                    <h4 style="font-weight: bold">Order Status</h4>
                                </div>
                                <div class="col-md-2">
                                    <h4 style="font-weight: bold">Payment Status</h4>
                                </div>
                                <div class="col-md-1">
                                    <h4 style="font-weight: bold">Action</h4>
                                </div>
                            </div>
                        </div>
                       
                       @forelse($myorder as $key => $order)
                       @php
                                       // $product = \App\Models\Product::find($order['product_id']);
                       @endphp 
                       <div class="cart-item borderlist">
                            <div class="row">
                                 <div class="col-md-2 my-auto">
                                    <label class="ordercode">{{  $order['code']}}  </label>
                                 </div>
                                 <div class="col-md-1 my-auto">
                                    <label class="ordercode"> {{ count($order->orderDetails->where('order_id', $order['id'])) }}  </label>
                                 </div>

                                 <div class="col-md-2 my-auto">
                                    <label class="price">Rs:{{ number_format($order['grand_total'],2) }}/-  </label>
                                </div>

                                <div class="col-md-2 col-4 my-auto">
                                    <div class="Date">
                                    <label class="Date">{{date('d-m-Y', strtotime($order['date'])) }}  </label>
                                    </div>
                                </div>
                                <div class="col-md-2 col-4 my-auto">
                                      <label class="price">{{ $order['delivery_status'] }}  </label>
                                </div>
                                <div class="col-md-2 col-4 my-auto">
                                      <label class="price">{{ $order['payment_status'] }}  </label>
                                </div>
                                
                                <div class="col-md-1 col-4 my-auto">

                            
                                <div class="dropdown">
                              <button class="btn button1 fa fa-ellipsis-v dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> </button>

                               

                                <ul class="dropdown-menu dropdown-menu-end">
                                  <li>
                                        <a class="dropdown-item" href="{{ route('myOrder_detail',$order['id']) }}" >
                                            <i class="fa fa-eye  pr-2"
                                                aria-hidden="true"></i> @lang('View')
                                        </a>
                                   </li>
                                  
                                  @if($order['delivery_status']=="pending" || $order['delivery_status']=="confirmed" )
                                   <li>
                                        <a class="dropdown-item" href="" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="{{ $order['id'] }}">
                                            <i class="fa fa-close text-danger pr-2"
                                                aria-hidden="true"></i> @lang('cancel')
                                        </a>
                                   </li>
                                   @endif
                                      @if($order['delivery_status']=="Delivered" )
                                      @if($numberOfDays<=15)
                                    <li>
                                    <a class="dropdown-item" href="{{ route('order_return',$order['id']) }}">
                                            <i class="bi bi-arrow-return-left text-success pr-2"
                                               aria-hidden="true"></i> @lang('Return')
                                        </a>
                                    </li>
                                    @endif
                                    @endif
                                 </ul>
                                 </div>


                            
                                   
                                </div>



                            </div>
                        </div>
                        @empty
                        <div class="cart-item borderlist">
                            <div class="row">
                                <div class="col-md-12 my-auto" style="text-align: center;">
                                  <span >No Record Found</span>     
                                 </div>
                            </div>
                        </div>
                        @endforelse
                        
                        
                    </div>
                   
                    
                </div>
            </div> 
        </div>
</div>

 
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalLabel">New message</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form  class="form-default" data-toggle="validator"  role="form" id="reasion-form" action="{{ route('cancel_order') }}" method="post">
          @csrf
          <div class="mb-3">
            <input type="text" class="form-control" id="order_id" name="order_id" value="">
          </div>
          <div class="mb-3">
            <label for="message-text" class="col-form-label">Reasion:</label>
            <textarea class="form-control" id="reasion" name="reasion"></textarea>
          </div>
          <button type="submit" class="btn button1">Cancel Order</button>
        </form>
      </div>
      <div class="modal-footer">
        
      </div>
    </div>
  </div>
</div>





@endsection

@push('script')
<script>
   
   $(document).on('click', '.dropdown-toggle', function (e) {
    alert("The span element was clicked.");
  
     });



window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

</script>
<script>
const exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', event => {
  // Button that triggered the modal
  const button = event.relatedTarget
  // Extract info from data-bs-* attributes
  const recipient = button.getAttribute('data-bs-whatever')
  // If necessary, you could initiate an AJAX request here
  // and then do the updating in a callback.
  //
  // Update the modal's content.
  const modalTitle = exampleModal.querySelector('.modal-title')
  const modalBodyInput = exampleModal.querySelector('.modal-body input')
  document.getElementById("order_id").value=recipient
 
  modalTitle.textContent = `Cancel Order`
  modalBodyInput.value = recipient
})




</script>
@endpush