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

    <!-- Main content -->
    <section class="content">
          <div class="row">
         <div class="col-md-12">
          <div class="box collapsed-box">
            <div class="box-header with-border">
              <h3 class="box-title">Add Product</h3>

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

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

                  <div class="col-sm-9">
                    <!-- <input type="text" class="form-control" id="" placeholder="Sub Categories Name" name="name" required> -->
                    <select type="text" class="form-control" id="sub-category" placeholder="Sub Categories Name" name="sub_category_id" required>

                    </select>
                  </div>
                </div>
                <div class="form-group">
                  <label for="" class="col-sm-3 control-label">Product Title<span style="color: red;">*</span></label>

                  <div class="col-sm-9">
                    <input type="text" class="form-control" id="" placeholder="Product Title"  name="title" required>
                  </div>
                </div>
                <!-- <div class="form-group">
                  <label for="" class="col-sm-3 control-label">Short Description</label>

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

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

                  <div class="col-sm-9">
                    <div class="row">
                      <div class="col-md-10 col-xs-10"> <input type="file" name="image[0][image_name]" class="form-control" id="" required accept="image/jpg, image/jpeg, image/png"></div>
                      <div class="col-md-2 col-xs-2 text-right">
                         <button type="button" class="btn btn-success m-t-32 mr-2" id="add_productimg"><i class="fa fa-plus"></i></button>
                      </div>
                    </div>
                   
                    <div class="productimgbox">
                      
                    </div>
                  </div>
                </div>
                <div class="locationbox">
                <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-md-12 col-xs-12"> <input type="text" class="form-control" id="" placeholder="Enter Location" name="network[0][networks_location]" ></div>
                      <!-- <div class="col-md-2 col-xs-2 text-right"><button type="button" class="btn btn-success m-t-32 mr-2" id="add_location"><i class="fa fa-plus"></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" id="" placeholder="Enter Location Services" name="network[0][networks]"></textarea>
                  </div>
                </div>
              </div>
              <div class="morelocation"></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="add_location"><i class="fa fa-plus"></i></button></div></div>
                <!--<div class="form-group">
                  <label for="" class="col-sm-3 control-label"></label>

                  <div class="col-sm-9">
                    
                     <img id="output_image" src="{{ asset('admin') }}/dist/img/placeholder/download.png" style="width: 200px;height: 200px;"/>
                  </div>
                </div> -->
              </div>
              <!-- /.box-body -->
              <div class="box-footer text-right">
                <button type="reset" class="btn btn-default">Reset</button>
                <button type="submit" class="btn btn-main">Submit</button>
              </div>
              <!-- /.box-footer -->
            </form>
        </div>
        <div class="col-md-2"></div>
      </div>
      </div>
</div>
            </div>
            </div>
      <!-- /.row -->
 <div class="row">
         <div class="col-md-12">
          <div class="box">
            <div class="box-header with-border">
              <h3 class="box-title">Product List</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>
          
            <!-- /.box-header -->
            <div class="box-body">
              <div class="table-responsive">
              <table id="example1" class="table table-bordered table-striped">
                <thead>
                <tr>
                  <th>S.No</th>
                  <th>Service</th>
                  <th>Sub Category</th>
                  <th>Product Name</th>
                  <th>Status</th>
                  <th>Action</th>
                </tr>
                </thead>
                <tbody>
                @php $sr = 1 @endphp
                @foreach($products as $product)
                <tr>
                  <td>{{ $sr++ }}</td>
                  <td> {{ $product->service->name ?? '' }} </td>
                  <td> {{ $product->subCategory->name ?? '' }} </td>
                  <td> {{ $product->title ?? '' }} </td>
                  <td> 
                    @if($product->status == 1)
                      <button class="btn btn-success btn-xs">Active</button>
                    @else
                      <button class="btn btn-danger btn-xs">Deactive</button>
                    @endif

                  </td>
                  <td>
                    <div style="width: 160px;">
                    <a type="button" href="{{ action('AdminController\ProductController@update', [$product->id]) }}" class="btn btn-primary btn-xs" ><i class="fa fa-edit"></i></a><!-- 
                    <button type="button" href="#" data-href="{{ action('AdminController\ProductController@update', [$product->id]) }}" class="btn btn-primary btn-xs edit_model" data-toggle="modal" data-target="edit_model"  data-container=".edit_model"><i class="fa fa-edit"></i></button> -->

                    <button type="button" href="{{ action('AdminController\ProductController@delete', [$product->id]) }}" class="btn btn-danger btn-xs" id="delete"><i class="fa fa-trash-o"></i></button>
                    <a class="btn btn-primary btn-xs edit_model" href="#" data-href="{{ action('AdminController\ProductController@view', [$product->id]) }}" title="Product Detail" data-toggle="modal" data-target="edit_model"  data-container=".edit_model"><i class="fa fa-eye" aria-hidden="true" ></i></a>
                    <a 
                      type="button" 
                       @if($product->status == 1)
                        id="deactivate"
                        class="btn btn-danger btn-xs" 
                       @else
                        id="activate"
                        class="btn btn-success btn-xs" 
                       @endif
                      href="{{ action('AdminController\ProductController@status', [$product->id]) }}" 
                    >
                     @if($product->status == 1)
                      Deactivate 
                     @else
                      Activate
                     @endif                       
                    </a>
                  </div>
                  </td>
                </tr>
                @endforeach                
              </tbody>
              </table>
            </div>
            </div>
            </div>
            </div>
            
            <!-- /.box-body -->
  </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(){
            $('#add_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>';
                $('.productimgbox').append(html);
                count++;
            });
      $('.productimgbox').on('click','.remove',function() {
          $(this).closest(".imagerow").remove();
          });
        });
    </script>
        <script type="text/javascript">
        var count =100;
        $(document).ready(function(){
            $('#add_location').on('click', function(){
      
                var html = '<div class="locationbox"><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]" 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></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 Services" name="network['+count+'][networks]" required></textarea></div></div></div>';
                $('.morelocation').append(html);
                count++;
            });
      $('.morelocation').on('click','.remove',function() {
          $(this).closest(".locationbox").remove();
          });
        });
    </script>
        <script>
  $(function () {
    CKEDITOR.replace('editor1')
  })
</script>

@endsection