@extends('layouts.homeapp')
@section('content')

{{--- ORDER EDIT ----}}

<!-- ======= Product View Section ======= -->
<section id="order" class="order mt-5">
  <div class="container">
    <div class="card card border-0">
      <div class="card-body">
        <div class="row">
          @foreach ($Products as $Product)
            <div class="col-lg-3 col-md-3 col-4">
              <div class="product_sec" data-toggle="modal" data-target=".bd-example-modal-lg" onclick="orderModelOpen('{{asset('storage/images/products/'.$Product->image)}}','{{ $Product->title}}',{{ $Product->id}})">
                @if(isset($Product->image))
                  <img class="order-img" src="{{asset('storage/images/products/'.$Product->image)}}" alt="avatar" id="imgImage"/>
                @else
                  <img src="{{asset('images/imgicon.png')}}" alt="avatar" width="100px" id="imgImage"/>
                @endif
                <h5 class="product_title">{{ $Product->title}}</h5>
              </div> 
            </div>
          @endforeach  
        </div>  
      </div>
    </div>
  </div>
</section><!-- End Product View Section -->

<!--======= Order Head Section=======-->
<section id="order-list" class="order-list">
  <div class="container">
    <div class="card border-brandcolor">
      <div class="card-header card-head-brand-bg">

        <div class="section-title pt-3" data-aos="fade-up">
          <h2>My Orders</h2>
        </div>

        <div class="row">
          <div class="col-lg-4 col-md-4 col-12">
          
            <h6 class="pull-left font-weight-bold">Order Number: {{$Order->id}}</h6>
          </div>
          <div class="col-lg-4 col-md-4 col-6">
            <h6 class="text-center">Status: {{$Order->status->title}}</h6>
          </div>
          <div class="col-lg-4 col-md-4 col-6">
            <h6 class="pull-right">Duration: {{$Order->duration->title}}</h6>
          </div> 
        </div>

      </div>

      <div class="card-body">
        <div class="table-responsive">
          <table id="servicelist" class="table table-borderless">
          <thead>
            <th scope="col">Product</th>
            <th scope="col">Services</th>
            <th scope="col">Quantity</th>
            <th scope="col">Amount</th>
            <th scope="col">Action</th>
          </thead>
          <tbody>
            @foreach($Order->order_products as $order_product)
              <tr><td>{{$order_product->product->title}}</td>
              <td>
              @php $Amount=0; @endphp
                @foreach($order_product->order_product_services as $order_product_services)
                  <span class="badge badge-primary mt-2">{{$order_product_services->product_service->servicetype->title}}</span>
                  @php $Amount+=$order_product_services->product_service->serviceprice; @endphp
                @endforeach
              </td>
              <td>{{$order_product->quantity}}</td>
              @php $Amount*=$order_product->quantity; @endphp
              <td>{{$Amount}}</td>
              <td><form method="POST" action="{{route('Reorderdestroy',$order_product->id)}}" Id="form-delete-{{$order_product->id}}">
                            @csrf
                            @method('delete')
                            <button type="button" class="btn btn-danger"  onclick="
                            event.preventDefault();
                            if(confirm('Are you sure delete this'))
                            {
                                document.getElementById('form-delete-{{$order_product->id}}').submit();
                            }"><i class="fas fa-trash"></i> Delete</button></form>
                        </td>      
              </tr>
            @endforeach
          </tbody>
          </table>
          </div>
      </div>
      <div class="card-footer card-foot-brand-bg">
        <form action="{{url('/placeOrder')}}" method="POST" enctype="multipart/form-data">
        @csrf
        <div class="form-row">
          <input type="hidden" name="orderID" value="{{$Order->id}}">
          <div class="form-group col-md-12">
            <label for="txtDecs">Description</label>
            <textarea class="form-control" id="txtDecs" name="text">{{$Order->text}}</textarea>
          </div>
          <div class="col-sm-3">
              @if($Order->image)
                <img src="{{asset('storage/images/order/image/'.$Order->image)}}" alt="defualt"  width="100px" id="imgImage1"/>
              @else
                <img src="{{asset('assets/images/imgicon.png')}}" alt="defualt"  width="100px" id="imgImage1"/>
              @endif
          </div>
          <div class="col-sm-3 form-group">
            <label for="fileIcon">Choose Image</label>
            <input type="file" class="form-control-file" name="image" id="fileIcon" onchange="
            var input=this;
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                var size=(Math.round(input.files[0].size/1024));
                if(size>1024)
                    {
                    alert('Please Upload file lesthan 1MB\nControl load time');
                    input.value='';
                    }
                else{
                    reader.onload = function (e) {
                    $('#imgImage1').attr('src', e.target.result); 
                    }
                    reader.readAsDataURL(input.files[0]);
                    }
                }">
          </div>
          <div class="col-sm-3">
            @if($Order->video)
                <video width="100px" height="100px" src="{{asset('storage/images/order/video/'.$Order->video)}}"></video>
            @else
              <img src="{{asset('assets/images/video-player.png')}}" alt="defualt"  width="100px" id="imgVideo"/>
            @endif
          </div>
          <div class="col-sm-3 form-group">
            <label for="videoIcon">Choose Video</label>
            <input type="file" class="form-control-file" name="video" id="videoIcon" onchange="
            var input=this;
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                var size=(Math.round(input.files[0].size/6000));
                if(size>6000)
                    {
                    alert('Please Upload file lesthan 5MB\nControl load time');
                    input.value='';
                    }
                
                }
                ">
          </div>
        </div>
          <button type="submit" class="btn btn-brandcolor pull-right" data-toggle="modal" data-target="#placeorderModal">Place Order</button>
        </form>  
      </div>  

    </div>
  </div>
</section><!-- End Order Head Section -->




<!-- ===== Services Modal ===== -->
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" style="top:50px;">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
    <form action="{{route('Reupdate',$Order->id)}}" method="POST">
    @csrf
    @method('post')
      <div class="modal-header">
        <!-- <div class="col-4">
          <img src="" alt="avatar" width="100px" id="imgModalImage" class="pull-left"/> 
          <span><h5 class="modal-title product_title" id="modalTitle">{{ $Product->title}}</h5></span>
        </div> -->
        <input type="hidden" name="productID" id="hdnProduct" value="{{$Product->id}}">
        <input type="hidden" name="orderID" value="{{$Order->id}}">
        <div class="table-responsive">
          <table>
            <tr>
              <td style="text-align: center;">
                <img src="" alt="avatar" width="100px" id="imgModalImage" class="pull-left"/>
                <h5 class="modal-title product_title" id="modalTitle">{{ $Product->title}}</h5>

              </td>
              <td>
                  <div class="form-group">
                    <label>Quantity</label>
                    <input type="number" class="form-control" id="numQuantity" name="quantity" aria-describedby="helpQuantity" placeholder="Choose quantity" value="1" min="1">
                  </div>
              </td>
            </tr>
          </table>
        </div>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="row" id="service_sec">
         
        </div> 
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="submit"  class="btn btn-brandcolor">Save</button>
      </div>
      <div id="serviceitems">
    
      </div>
      <div id="deleteserviceitems">
    
    </div>
    </form>
    </div>
  </div>
</div>
<!-- ===== End Services Modal ===== -->

<!-- Place Order Modal -->
<!-- <div class="modal fade" id="placeorderModal" tabindex="-1" role="dialog" aria-labelledby="placeorderModal" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Select duration for your order </h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="col-sm-6 form-group">
        <input type="hidden" name="orderID" value="{{$Order->id}}">
          <label for="cbDuration">Duration</label>
          <select class="form-control" id="cbDuration" name="duration_id">
             @foreach($Duration as $item)
             <option value="{{$item->id}}">{{$item->title}}</option> 
              @endforeach                
          </select>   
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <a href="{{route('myorders')}}"><button type="button" class="btn btn-brandcolor">Order Now</button></a>
      </div>
    </div>
  </div>
</div>===== End Place Order Modal ===== -->
</form>

<script>
  function orderModelOpen(ImageLink,Title,ProductID)
  {
    document.getElementById('hdnProduct').value=ProductID;
    document.getElementById('imgModalImage').src=ImageLink;
    document.getElementById('modalTitle').innerHTML=Title;
    $.ajax({
        url: '{{ url('ProductServices') }}',
        method: "get",
        data: {_token: '{{ csrf_token() }}',ProductID:ProductID},
                                success: function (response) { 
                                        // alert(response);                                                           
                                        // window.location.reload();
                                        // document.getElementById('ProductTotalAmount'+Product).innerHTML=response;
                                        document.getElementById('service_sec').innerHTML=response;
                                                                }
                        });     
  }

  

  function blurInput(div_btn,ProductServiceID) {

    var serviceitems = document.getElementById('serviceitems');
    var deleteserviceitems = document.getElementById('deleteserviceitems');
    
    if(div_btn.style.opacity == "0.3")
    {
      // div_btn.style.backgroundColor ="rgba(22,148,222,0.1)";
      div_btn.style.opacity ="1";
      //document.getElementById("s-title").style.color = "black";
      var btnremove = document.getElementById('service'+ProductServiceID);
      btnremove.remove();

    }
    else
    {
    div_btn.style.opacity ="0.3";
    
    //div_btn.toggleClass("hov_red");

    //document.getElementById("s-title").style.color = "white";
       serviceitems.innerHTML +='<input type="hidden" id="service'+ProductServiceID+'"  name="serviceItemId[]" value="'+ProductServiceID+'">';
    // InsertData(ProductServiceID);
    }
}

let tmpDates = new Array();
function InsertData(ProductServiceID)
{
    var rec= document.getElementById("tmpholidays");
    if(ProductServiceID!=="")
    {
        if(!tmpDates.includes(ProductServiceID))
        {      
            rec.innerHTML+='<tr><td><input type="text" name="txtNm[]" id="txtNm'+ProductServiceID+'"></td><td><input type="text" name="txtNr[]" id="txtNr'+ProductServiceID+'"><input type="hidden" name="Dt[]" value="'+Month+'-'+ProductServiceID+'"></td><td><button class="btn btn-sm btn-danger" name="btn1" id="tmpDate'+ProductServiceID+'" onclick="removetmpdate(this.id,'+ProductServiceID+')"><i class="fa fa-close"></i></button></td></tr>';
            //tmpDates.push(Date);
        }
    }
}

function removetmpdate(tmpDateID,removetmpdate)
{
   for( var i = 0; i < tmpDates.length; i++){ 
   if ( tmpDates[i] == Date) {
    // tmpDates[i]=0;
    tmpDates.splice(i, 1); 
 }
   }
   document.getElementById(tmpDateID).parentNode.parentNode.remove();
}

function addtmpDate()
{
        var rec= document.getElementById("tmpholidays");
        if(!rec.innerHTML=="")
        {
            frmTmpRegister.submit();
        }
}

</script>

@endsection