Current File : //home/tradevaly/public_html/resources/views/user/pages/repeater.php
@extends('user.layouts.app')

@push('style')

@endpush

@section('content')
<div class="container-fluid">
  <div class="row">
    <div class="col-md-6">
      <div class="card">
        <div class="card-header card-header-icon card-header-info">
          <div class="card-icon">
            <i class="material-icons">add_task</i>
          </div>
          <h4 class="card-title">ADD NEW PRODUCT
          </h4>
        </div>
        <div class="card-body">
          <form action="{{url('user/products/add')}}" method="POST" enctype="multipart/form-data">@csrf
            <div class="row">
              <div class="col-md-6 col-sm-6">
                <h4 class="title">Product Image</h4>
                <div class="fileinput fileinput-new text-center" data-provides="fileinput">
                  <div class="fileinput-new thumbnail">
                    <img src="{{asset('assets/backend/img/image_placeholder.jpg')}}" alt="NO image avialable">
                  </div>
                  <div class="fileinput-preview fileinput-exists thumbnail"></div>
                  <div>
                    <span class="btn btn-info btn-round btn-file">
                      <span class="fileinput-new">Select image</span>
                      <span class="fileinput-exists">Change</span>
                      <input type="file" name="image" />
                    </span>
                    <a href="#pablo" class="btn btn-danger btn-round fileinput-exists" data-dismiss="fileinput"><i class="fa fa-times"></i> Remove</a>
                  </div>
                </div>
              </div>
            </div>
            
           
            
            <div class="row">
              <div class="col-md-6">
                <div class="form-group">
                  <label class="bmd-label-floating">Product Name</label>
                  <input type="text" name="title" class="form-control" required>
                </div>
              </div>
              
              
              
              
            <div class="col-md-6">
                <div class="form-group">
                        <select class="form-control" name="category_id">
                            <option disabled selected>Select Category</option>
                            @foreach ($caegories as $category)
                            <option value="{{$category->id}}">{{$category->name}}</option>
                            @endforeach
                        </select>
                </div>
            </div>
            
            
            
             <div class="col-md-6">
                <div class="form-group">
                    <label class="bmd-label-floating"></label>
                    <select class="form-control" name="sub_id" required>
                     <option value="">Select Sub Category</option>
                     </select>
                  </div>
            </div>
            
             <div class="col-md-6">
                <div class="form-group">
                    <label class="bmd-label-floating"></label>
              <select class="form-control" name="child_id">
                    <option value="">Select Child Category</option>
                  </select>
                  </div>
            </div>
            
            
                 <div class="col-md-6">
                    <div class="form-group">
                  <select class="form-control"  name="tags[]" multiple>
                        <option disabled selected>Select Tags</option>
                        @foreach ($tags as $category)
                        <option value="{{$category->name}}">{{$category->name}}</option>
                        @endforeach
                      </select>
                </div>
                </div>
            
            
            <div class="col-md-6">
                <div class="form-group">
                  <label class="bmd-label-floating">Youtube Video Url</label>
                  <input type="text" name="video" class="form-control" required>
                </div>
              </div>
            
            
            
             <div class="col-md-6">
                <div class="form-group">
                  <label class="bmd-label-floating">Process Time</label>
                  <input type="text" name="processing_time" class="form-control" required>
                </div>
              </div>
            
            
            <div class="col-md-6">
                <div class="form-group">
                  <label class="bmd-label-floating">Port</label>
                  <input type="text" name="port" class="form-control" required>
                </div>
              </div>
              
                <div class="col-md-6">
                <div class="form-group">
                  <label class="bmd-label-floating">Unit</label>
                  <input type="text" name="unit" class="form-control" required>
                </div>
              </div>
              
              
              <div class="col-md-6">
                <div class="form-group">
                  <label class="bmd-label-floating">Supply Ability</label>
                  <input type="text" name="supply_ability" class="form-control" required>
                </div>
              </div>
              
        
            
            <div class="col-md-6">
                    <div class="form-group">
                  <select class="form-control" name="payment_method">
                        <option disabled selected>Payment Method</option>
                        @foreach ($method as $category)
                        <option value="{{$category->name}}">{{$category->name}}</option>
                        @endforeach
                      </select>
                </div>
                </div>
            
            
             <div class="col-md-6">
                <div class="form-group">
                  <label class="bmd-label-floating">Origin</label>
                  <input type="text" name="origin" class="form-control" required>
                </div>
              </div>
            
             <div class="col-md-6">
                <div class="form-group">
                  <label class="bmd-label-floating">Location</label>
                  <input type="text" name="location" class="form-control" required>
                </div>
              </div>
              
              
               <div class="col-md-6">
                <div class="form-group">
                  <label class="bmd-label-floating">Currency</label>
                  <input type="text" name="currency" class="form-control" required>
                </div>
              </div>
              
              
               <div class="col-md-6">
                <div class="form-group">
                  <label class="bmd-label-floating">Stock</label>
                  <input type="text" name="stock" class="form-control" required>
                </div>
              </div>
              
              
               <div class="col-md-6 mb-5">
                <div class="form-group">
                  <h3 class="mb-3">Enter Description</h3>
                  <textarea  id="editor" name="des" class="form-control mb-5" placeholder="Enter Details"></textarea>
                </div>
              </div>
              
             <div class="col-md-12 mb-5">
            <div class="input-group hdtuto control-group lst increment" >
                      <input type="file" name="thumb[]" class="myfrm form-control">
              <div class="input-group-btn"> 
                <button class="btn btn-success" type="button"><i class="fldemo glyphicon glyphicon-plus"></i>Add</button>
              </div>
            </div>
            
            
            <div class="clone hide">
              <div class="hdtuto control-group lst input-group" style="margin-top:10px" id="cloning">
                  <input type="file" name="thumb[]" class="myfrm form-control">
               
                <div class="input-group-btn"> 
                  <button class="btn btn-danger" type="button"><i class="fldemo glyphicon glyphicon-remove"></i> Remove</button>
                </div>
              </div>
            </div>
            
            
            
            </div>
            </div>
            <button type="submit" class="btn btn-info pull-right">Upload</button>
            <div class="clearfix"></div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection

@section('script')
<script>
$(document).ready(function() {
      $(".btn-success").click(function(){ 
          var lsthmtl = $(".clone").html();
          $(".increment").after(lsthmtl);
      });
       $("body").on("click",".btn-danger",function(){ 
          $(this).parents("#cloning").remove();
      });
    });
    
    
    
    
    
    
    $(document).on('change', '[name=category_id]', function() {
            var child_id = $(this).val();
            get_cat(child_id);
        });
        
        
        function get_cat(child_id) {
            $('[name="sub_id"]').html("");
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url: "{{ route('ajax.cat')}}",
                type: 'POST',
                data: {
                    sub_id  : child_id
                },
                success: function (response) {
                    var obj = JSON.parse(response);
                    if(obj != '') {
                        $('[name="sub_id"]').html(obj);
                    }
                }
            });
        }
        
        
        
        
        
        
        
        $(document).on('change', '[name=sub_id]', function() {
            var child_id = $(this).val();
            get_child(child_id);
        });
        
        
        function get_child(child_id) {
            $('[name="child_id"]').html("");
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url: "{{ route('ajax.subcat')}}",
                type: 'POST',
                data: {
                    sub_id  : child_id
                },
                success: function (response) {
                    var obj = JSON.parse(response);
                    if(obj != '') {
                        $('[name="child_id"]').html(obj);
                    }
                }
            });
        }
        
        
        
        
</script>
@endsection