@extends('layouts.adminapp')

@section('content')

<div class="card mb-4">
    <div class="card-header">
        <div class="d-flex">
            <div class="mr-auto p-2 align-self-center"><h4>Select Service</h4></div>
        </div>
    </div>
    <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 class="card mb-4">
    <div class="card-header card-head-brand-bg">

        <div class="section-title pt-3" data-aos="fade-up">
          <h4>My Orders</h4>
        </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('OrderProduct.destroy',$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('/adminOrder')}}" 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"></textarea>
        </div>
        <div class="col-sm-3">
            <img src="{{asset('assets/images/imgicon.png')}}" alt="defualt"  width="100px" id="imgImage1"/>
        </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">
            <img src="{{asset('assets/images/video-player.png')}}" alt="defualt"  width="100px" id="imgVideo"/>
        </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 class="col-sm-6 mt-5">
          <label>Order Date</label>
          <input type="date" name="orderdt" id="orderdt" required>
        </div>
        <div class="col-sm-6 mt-5">
          <label>Delivery Date</label>
          <input type="date" name="deliverydt" id="deliverydt" required>
        </div>
      </div>  
      <button type="submit" class="btn btn-brandcolor" style="float: right">Place Order</button>
      </form>
      </div>      
</div>

<!-- ===== 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('ServiceListupdate',$Order->id)}}" method="POST">
      @csrf
        <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="80px" id="imgModalImage" class="pull-left" style="padding: 10px 10px 0 10px;"/>
                  <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 ===== -->

  <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