@extends('admin.layouts.app')
@section('title','Update Product')
@section('content')
  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
       Update Product
      </h1>
      <ol class="breadcrumb">
        <li><a href="{{ url('admin/dashboard') }}"><i class="fa fa-dashboard"></i> Home</a></li>
        <li><a href="{{ url('admin/product') }}"><i class="fa fa-dashboard"></i> Product</a></li>
        <li class="active">Update Product</li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content">
      <div class="row">
         <div class="col-md-12">
          <div class="box">
            <div class="box-header with-border">
              <h3 class="box-title"><i class="fa fa-circle-o"></i>Update Product</h3>

              <div class="box-tools pull-right">
                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                </button>
               
              </div>
            </div>
      
      <!-- Info boxes -->
      <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-8">
         <form class="form-horizontal" action="{{ action('AdminController\ProductController@edit',[$product->id]) }}" method="post" id="add_form">
          @csrf
              <div class="box-body">
                <div class="form-group">
                  <label for="" class="col-sm-4 control-label">Service Name<span style="color: red;">*</span></label>

                  <div class="col-sm-8">
                    <select type="text" class="form-control service" id="service" name="service_id" required>
                      <option value="">Select</option>
                        @foreach($services as $service)
                       <option value="{{ $service->id ?? '' }}" @if($service->id == $product->service_id) selected @endif>{{ $service->name ?? '' }}</option>
                      @endforeach
                    </select>
                  </div>
                </div>
                <div class="form-group">
                  <label for="" class="col-sm-4 control-label">Sub Category Name<span style="color: red;">*</span></label>

                  <div class="col-sm-8">
                    <select type="text" class="form-control sub-category" id="sub-category" placeholder="Categories Name" name="sub_category_id" required>
                     @if($subCategories == '')

                     @else
                      <option value="">Select</option>
                        @foreach($subCategories as $subCategory) 
                       <option value="{{ $subCategory->id ?? '' }}" @if($subCategory->id == $product->sub_category_id) selected @endif>{{ $subCategory->name ?? '' }}</option>
                      @endforeach
                     @endif
                    </select>
                  </div>
                </div>
                <div class="form-group">
                  <label for="" class="col-sm-4 control-label">Product Title<span style="color: red;">*</span></label>

                  <div class="col-sm-8">
                    <input type="text" class="form-control" id="" placeholder="Product Title"  name="title" value="{{ $product->title ?? '' }}" required>
                  </div>
                </div>
                <!-- <div class="form-group">
                  <label for="" class="col-sm-4 control-label">Short Description</label>

                  <div class="col-sm-8">
                    <textarea type="text" class="form-control" id="" placeholder="Short Description" onkeypress="return alphaonly(event)" name="short_description" rows="3" required>{{ $product->short_description ?? '' }}</textarea>
                  </div>
                </div> -->
                <div class="form-group">
                  <label for="" class="col-sm-4 control-label">Description<span style="color: red;">*</span></label>

                  <div class="col-sm-8">
                    <textarea type="text" class="form-control" id="editor1" placeholder="Description" onkeypress="return alphaonly(event)" name="long_description" rows="6" required>{{ $product->long_description ?? '' }}</textarea>
                  </div>
                </div>
                  <div class="form-group">
                  <label for="" class="col-sm-4 control-label">Product Image<span style="color: red;">*</span></label>

                  <div class="col-sm-8">
                    <div class="row">
                      <div class="col-xs-10"> <input type="file" name="image[0][image_name]" class="form-control" id="" accept="image/jpg, image/jpeg, image/png"></div>
                      <div class="col-xs-2 text-right">
                         <button type="button" class="btn btn-success m-t-32 mr-2" id="edit_productimg"><i class="fa fa-plus"></i></button>
                      </div>
                    </div>
                   
                    <div class="editproductimgbox">
                      
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  <label for="" class="col-sm-4 control-label"></label>

                  <div class="col-sm-8">
                    <div class="row">
                      @php $count = 1;  @endphp
                      @foreach($product->productImage as $productImage)
                      <div class="editImgBox col-md-3 col-xs-4">
                      <input type="hidden" name="image[{{$count}}][image_id]" value="{{ $productImage->id }}">
                      <div class="imageBox">
                      <div class="" style="margin-top: 5px;">
                        <input type="hidden" name="image[{{$count}}][image_name]" value="{{ $productImage->image_name }}">
                        <img id="output_image" src="{{ asset($productImage->image_path) }}" style="width: 70px;height: 70px;"/>
                        <button type="button" class="btn btn-danger btn-xs pull-right remove" style="margin-right:15px; position: absolute; top: 0; right: -10px;">X</button>
                      </div>
                      <!-- <div class="col-xs-2"><button type="button" class="btn btn-danger pull-right remove" style="margin-right:15px;">X</button></div> -->
                      </div>
                      </div>
                      @php $count++;  @endphp
                      @endforeach
                    </div>
                    
                     
                  </div>
                </div> 
                <div class="editlocationbox">
                @if(!count($product->ourNetworks) > 0)
                <div class="form-group">
                  <label for="" class="col-sm-4 control-label">Network Location<span style="color: red;">*</span></label>
                  <div class="col-sm-8">
                    <div class="row">
                      <div class="col-xs-10"><input type="text" class="form-control" id="" placeholder="Enter Location" name="network[0][networks_location]" ></div>
                       <div class="col-xs-2"><button type="button" class="btn btn-success m-t-32 mr-2" id="edit_location"><i class="fa fa-plus"></i></button></div>
                    </div>
                    
                  </div>
                 
                </div>
                <div class="form-group">
                  <label for="" class="col-sm-4 control-label">Location Services<span style="color: red;">*</span></label>
                  <div class="col-sm-8">
                    <div title="ex.-Location One,Location Two,Location Three" ><i class="fa fa-question-circle" aria-hidden="true"></i></div>
                    <textarea rows="5" type="text" id="" class="form-control" id="" placeholder="Enter Location" name="network[0][networks]" ></textarea>
                  </div>
                </div>
                @else 
                  @php $count = 1;  @endphp
                  @foreach($product->ourNetworks as $ourNetworks)
                  <div class="editLocation">
                  <input type="hidden" name="network[{{$count}}][network_id]" value="{{ $ourNetworks->id }}">
                    <div class="editMoreLocationbox">
                   <div class="form-group">
                    <label for="" class="col-sm-4 control-label">Network Location<span style="color: red;">*</span></label>
                    <div class="col-sm-8">
                     <div class="row">
                      <div class="col-xs-10"><input type="text" class="form-control" id="" placeholder="Enter Location" name="network[{{$count}}][networks_location]" value="{{ $ourNetworks->networks_location }}" ></div>
                       <div class="col-xs-2">
                        <button type="button" class="btn btn-danger pull-right remove"><i class="fa fa-trash-o"></i></button>
                       </div>
                     </div>                    
                    </div>                 
                   </div>
                   <div class="form-group">
                     <label for="" class="col-sm-4 control-label">Location Services<span style="color: red;">*</span></label>
                     <div class="col-sm-8">
                      <div title="ex.-Location One,Location Two,Location Three" ><i class="fa fa-question-circle" aria-hidden="true"></i></div>
                       <textarea rows="5" type="text" class="form-control"  placeholder="Enter Location" name="network[{{$count}}][networks]"  >{{ $ourNetworks->networks }}</textarea>
                     </div>
                   </div>
                 </div>
                 </div>
                  @php $count++;  @endphp 
                  @endforeach
                @endif
              </div>
              <div class="editmorelocation"></div>
              <div class="row">
                 <div class="col-md-12 col-xs-12 text-right">
                  <button type="button" class="btn btn-success m-t-32 mr-2" id="edit_location" title="Add More Location"><i class="fa fa-plus"></i>
                  </button>
                </div>
              </div>
               
              </div>
              <!-- /.box-body -->
              <div class="box-footer text-right">
                <button type="button" data-dismiss="modal" class="btn btn-default">Cancel</button>
                <button type="submit" class="btn btn-main">Update</button>
              </div>
              <!-- /.box-footer -->
            </form>
      </div>
        <div class="col-md-2"></div>
      </div>
      </div>
      </div>
      </div>

  </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->
@endsection
@section('js')
  <script type="text/javascript">
    // script for dependent dropdown of state by country change 
  $(document).ready(function() { 
     $('.service').on('change', function() {         
      var serviceID = $(this).val(); 
      if(serviceID) {
        $.ajax({
         url: '{{ action("AdminController\SubCategoryController@subCategory") }}?service_id='+serviceID,
         type: "GET",
         data : {"_token":"{{ csrf_token() }}"},
         dataType: "json",
         success:function(data) {
          if(data){
           $('.sub-category').empty();
           $('.sub-category').focus;
           $('.sub-category').append('<option value="">Select</option>'); 
           $.each(data, function(key, value){                         
           $('.sub-category').append('<option value="'+ value.id +'">' + value.name + '</option>');
          });
          } else {
            $('.sub-category').empty();
          }
         }
        });
      } else {
        $('.sub-category').empty();
      }
     });
    });
</script>
<script type="text/javascript">
        var count =100;
        $(document).ready(function(){
            $('#edit_productimg').on('click', function(){
      
                var html = '<div class="row imagerow" style="margin-top:5px;"><div class="col-xs-10"><input type="file" name="image['+count+'][image_name]" id="" class="form-control" accept="image/jpg, image/jpeg, image/png" required></div><div class="col-xs-2"><button type="button" class="btn btn-danger pull-right remove"><i class="fa fa-trash-o"></i></button></div></div>';
                $('.editproductimgbox').append(html);
                count++;
            });
      $('.editproductimgbox').on('click','.remove',function() {
          $(this).closest(".imagerow").remove();
          });
        });
    </script>
      <script type="text/javascript">
        var count =100;
        $(document).ready(function(){
            $('#edit_location').on('click', function(){
      
                var html = '<div class="editlocationbox"><div class="form-group"><label for="" class="col-sm-3 control-label">Network Location<span style="color: red;">*</span></label><div class="col-sm-9"><div class="row"><div class="col-xs-10"><input type="text" class="form-control" id="" placeholder="Enter Location" name="network['+count+'][networks_location]" ></div><div class="col-xs-2"><button type="button" class="btn btn-danger pull-right remove"><i class="fa fa-trash-o"></i></button></div></div></div></div><div class="form-group"><label for=""class="col-sm-3 control-label">Location Services<span style="color: red;">*</span></label><div class="col-sm-9"><div title="ex.-Location One,Location Two,Location Three" ><i class="fa fa-question-circle" aria-hidden="true"></i></div><textarea rows="5" type="text" class="form-control" placeholder="Enter Location" name="network['+count+'][networks]" ></textarea></div></div></div>';
                $('.editmorelocation').append(html);
                count++;
            });
      $('.editmorelocation').on('click','.remove',function() {
          $(this).closest(".editlocationbox").remove();
          });
        });
    </script>
    <script type="text/javascript">
        $(document).ready(function(){
      // remove image box
      $('.editImgBox').on('click','.remove',function() {
          $(this).closest(".imageBox").remove();
          });
      // remove location box
      $('.editLocation').on('click','.remove',function() {
          $(this).closest(".editMoreLocationbox").remove();
          });
        });      
    </script>
        <script>
  $(function () {
    CKEDITOR.replace('editor1')
  })
</script>
@endsection