@extends('adminlayout.dashadmin')
<!-- 'adminlayout.admin'
 --> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

@section('content')
 
<style >
	/*.dashboard [class^="col-"] {
  padding-right: 2px!important;
}*/
</style>

<!-- Content Wrapper Start -->
<div class="content-wrapper" ng-controller="PurchaseController">
<section class="content-header" style="float:right;">
   <a class="btn btn-lg btn-info" data-toggle="modal" data-target="#add_battery_in_store">
    Product Catalog
    </a>
   <a class="btn btn-lg btn-info" data-toggle="modal" data-target="#add_Modal_catalog_in_store">
   Model Catalog
    </a>
   
             
  </section>
  <br><br>
<section class="content">

     
        <div class="box box-info collapsed-box">
      <div class="box-header with-border">
        <h3 class="box-title">
          <span class="fa fa-fw fa-plus"></span> add part accessories For Online Sell </h3>
        <button type="button" class="btn btn-box-tool add-new-btn" data-widget="collapse" data-collapse="true">
          <i class="fa fa-plus"></i>
        </button>
      </div>
      
     <form method="post" action="{{ route('save_part_accessories')}}" enctype="multipart/form-data">
            @csrf
            <div class="container">
                <div class="col-sm-12">
                    <div class="col-sm-3">
                        <div class="form-group ">
                            <label for="exampleInputEmail1">Item Name(model Name)</label>
                            <input type="text" name="item" class="form-control" value="{{ old('item') }}"placeholder="Item Name ...">
                            <span class="text-danger">@if ($errors->has('item')){{ $errors->first('item') }}@endif</span>
                        </div>
                    </div>
                  <div class="col-sm-3">
                      <div class="form-group ">
                        <label for="item_warranty">Product Type</label>
                        <select id="productCatalog" class="form-control" name="p_id" onchange="fetchModelCatalogs()">
                            <option value="">Select Product</option>
                            @foreach($ProductCatalogs as $productCatalog)
                                <option value="{{ $productCatalog->id }}">{{ $productCatalog->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
               <div class="col-sm-3">
                      <div class="form-group ">
                        <label for="item_warranty">Product Model</label>
                        <select id="modelCatalog" class="form-control" name="m_id">
                            <option value="">Select Model</option>
                        </select>
                    </div>
                </div>

 

                   <div class="col-sm-3">
                      <div class="form-group ">
                        <label for="item_warranty">Warranty</label>
                        
                        <select name="warranty" class="form-control">
                          <option value="0">Select</option>
                          <option value="0">No Warranty</option>
                          <option value="6">6 Month</option>
                          <option value="12">12 Month</option>
                          <option value="18">18 Month</option>
                          <option value="24">24 Month</option>
                          <option value="36">36 Month</option>
                        </select>
                        <span class="text-danger">@if ($errors->has('warranty')){{ $errors->first('warranty') }}@endif</span>
                      </div>
                    </div>     
                    
                    
                    
                    <div class="col-sm-3">
                      <div class="form-group margin-top">
                        <label for="item_color">Color </label>                           
                        <select name="color" class="form-control">
                          <option  value="">Select ...</option>
                          @foreach($colors as $color)
                          <option value="{{$color}}">{{$color}}</option>
                          @endforeach
                                      
                        </select>
                        <span class="text-danger">@if ($errors->has('color')){{ $errors->first('color') }}@endif</span>
                      </div>
                    </div>
        
                    
                    <div class="col-sm-3">
                        <div class="form-group ">
                            <label for="exampleInputEmail1">Price</label>
                            <input type="nubmer" name="price" class="form-control" value="{{ old('price') }}"placeholder="Enter subdealer price..">
                            <span class="text-danger">@if ($errors->has('price')){{ $errors->first('price') }}@endif</span>
                        </div>
                    </div>
                   

                  
                    
                    
                    <div class="col-sm-3">
                        <div class="form-group ">
                           <label for="status">Tax Rate(%)</label>
                             <select name="tax" class="form-control">
                                 <option value="" selected disabled> -- Select Option -- </option>
                                 <option value="0">0%</option>
                                 <option value="5">5%</option>
                                 <option value="9">9%</option>
                                 <option value="18">18%</option>
                                 <option value="28">28%</option>
                                 
                             </select>
                            
                            <span class="text-danger">@if ($errors->has('tax')){{ $errors->first('tax') }}@endif</span>
                        </div>
                    </div>
                    
                    <div class="col-sm-3">
                        <div class="form-group ">
                             <label for="exampleInputEmail1">Product Image</label>
                            <input type="file" name="image" class="form-control" value="{{ old('image') }}">
                            <span class="text-danger">@if ($errors->has('image')){{ $errors->first('image') }}@endif</span>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="form-group ">
                           <label for="status">Status</label>
							 <select name="status" class="form-control">							  
							    <option value="1">Active</option>
								 <option value="0">Inactive</option>
							 </select>
                            
                            <span class="text-danger">@if ($errors->has('status')){{ $errors->first('status') }}@endif</span>
                        </div>
                    </div>
                    
					 
                   <div class="col-sm-6">
                        <div class="form-group ">
                            <label for="description">Description</label>
                            <textarea type="text" name="description" class="form-control">{{ old('description') }}</textarea> 
                            <span class="text-danger">@if ($errors->has('description')){{ $errors->first('description') }}@endif</span>
                        </div>
                    </div>
                    
                    
                    <div class="col-sm-6">
                        <div class="form-group margin-top">
                             <label>Gallery Images</label>
                                        <div class="row after-add-more">
                                            <div class="col-7 col-sm-7">
                                               <br>
                                                <input type="file" name="gimage[]" class="form-control upload-zone small bg-lighter dropzone dz-clickable" />
                                            </div>
                                            <div class="col-5 col-sm-5 change">
                                                <br>
                                                <a class="btn btn-success add-more">+ Add More</a>

                                            </div>

                                        </div>
                                        @error('documents')
                                            <p class="text-danger">{{ $message }}</p>
                                        @enderror
                        </div>
                    </div> 
                            <div class="col-sm-6">
                            <div class="form-group margin-top">
                                <label>Add new Featres</label>
                                <div class="row add-field">
                                    <div class="col-7 col-sm-7">
                                        <br>
                                        <input type="text" name="features[]" class="form-control small bg-lighter" />
                                    </div>
                                    <div class="col-5 col-sm-5 cut">
                                        <br>
                                        <!-- Changed the class to id -->
                                        <a id="add-field" class="btn btn-success">+ Add More</a>
                                    </div>
                                </div>
                                @error('documents')
                                    <p class="text-danger">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>

                
                         
												
						
					    </div>	
					    <div class="col-12 col-sm-12 text-center" >
						<div class="form-group margin-top">
						   <button type="submit" class="btn btn-primary margin-top">Submit</button>
						</div>
                       </div>				
				    </div> 
					
					
					
                    </div>
                    
                </div>
            </div>
         </form>
              
    </div>   
   
  </section>
  <!-- Content End -->
</div>
<!-- Content Wrapper End -->

@endsection

 
<style>
.boxheading
{
	background: #e4f1ff;
    display: flex;
    height: 37px;
    padding: 0 0 0 12px;   
    justify-content: space-between;
}
</style>
<script> 
  
 
  
    function getPostOffice(m_pincode) {
        //var pin_select = ('#pinaddress').val();
        $.ajax({
            type: "GET",
            url: "https://api.postalpincode.in/pincode/" + m_pincode,
            dataType: 'json',
            success: function(response) {
                console.log(response);
                var option = '';
                if (response[0].Status == "Success") {
                    var PostOffice = response[0].PostOffice;
                    var len = PostOffice.length;
                    option += '<option value="" selected disabled> -- Select Option -- </option>';
                    for (let index = 0; index < PostOffice.length; index++) {
                        option += "<option value='" + PostOffice[index].Name + "'>" + PostOffice[index].Name + ", " + PostOffice[index].District + ", " + PostOffice[index].State + "</option>";
                    }
                    $('#pin_error').html("");
                    $('#post_office').html(option);

                    $("#post_office").on("click", function() {

                    });
                    document.getElementById('post_office').click();

                } else {
                    $('#pin_error').html(response[0].Message);
                    $('#post_office').html("");
                }
            }
        });
    }

    function changeAddress() {
        var pin             = $('#pin').val();
        var post_office     = $('#post_office').val();
        $.ajax({
            type: "GET",
            url: "https://api.postalpincode.in/pincode/" + pin,
            dataType: 'json',
            success: function(response) {
                console.log(response);
                var pin_select_status = 0;
                var option = '';
                if (response[0].Status == "Success") {
                    var PostOffice = response[0].PostOffice;
                    option += '<option value="" selected disabled> -- Select Option -- </option>';
                    for (let index = 0; index < PostOffice.length; index++) {
                        if (post_office == PostOffice[index].Name) {
                            pin_select_status   = 1;
                            $('#city').val(PostOffice[index].District);
                            $('#state').val(PostOffice[index].State);
                            $('#country').val(PostOffice[index].Country);
                        }
                        option += "<option value='" + PostOffice[index].Name + "'>" + PostOffice[index].Name + ", " + PostOffice[index].District + ", " + PostOffice[index].State + "</option>";
                    }
                    if (pin_select_status == 0) {
                        $('#pin_error').html("Error Please re-select address.");
                        $('#post_office').html(option);
                    } else {
                        $('#pin_error').html('');
                    }
                } else {
                    $('#pin_error').html(response[0].Message);
                    $('#post_office').html('');
                }
            }
        });
    }

   
</script>

<script>
    // alert(document.cookie);
    getLocation();
    function getLocation() {
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
      } else { 
        alert("Geolocation is not supported by this browser.");
      }
    }
    
    function showPosition(position) {
        
      document.getElementById("latitude").value=position.coords.latitude;
      document.getElementById("longitude").value=position.coords.longitude;
      sessionStorage.setItem("latitude", position.coords.latitude);
      sessionStorage.setItem("longitude", position.coords.longitude);
    }
    </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">

 $(document).ready(function() {
        $("body").on("click", ".add-more", function() {
            var html = $(".after-add-more").first().clone();

            //  $(html).find(".change").prepend("<label for=''>&nbsp;</label><br/><a class='btn btn-danger remove'>- Remove</a>");

            $(html).find(".change").html(" <br> <a class='btn btn-danger remove'>- Remove</a>");


            $(".after-add-more").last().after(html);



        });

        $("body").on("click", ".remove", function() {
            $(this).parents(".after-add-more").remove();
        });
    });
</script>
<script>
                    $(document).ready(function() {
                        // Changed the selector from class '.add-more' to id '#add-field'
                        $("body").on("click", "#add-field", function() {
                            var html = $(".add-field").first().clone();

                            $(html).find(".cut").html("<br><a class='btn btn-danger remove'>- Remove</a>");

                            $(".add-field").last().after(html);
                        });

                        $("body").on("click", ".remove", function() {
                            $(this).parents(".add-field").remove();
                        });
                    });
                </script>
                <script type="text/javascript">
                    function fetchModelCatalogs() {
                        var catalogId = $('#productCatalog').val();
                        if (catalogId) {
                            $.ajax({
                                url: '/admin/get-model-catalogs/' + catalogId,
                                type: 'GET',
                                dataType: 'json',
                                success: function(data) {
                                    $('#modelCatalog').empty();
                                    $('#modelCatalog').append('<option value="">Select Model</option>');
                                    $.each(data, function(key, model) {
                                        $('#modelCatalog').append('<option value="' + model.id + '">' + model.name + '</option>');
                                    });
                                }
                            });
                        } else {
                            $('#modelCatalog').empty();
                            $('#modelCatalog').append('<option value="">Select Model</option>');
                        }
                    }
                </script>


       <!-- catalog product Modal -->
         <div class="modal fade" id="add_battery_in_store" tabindex="-1" role="dialog" aria-labelledby="add_productLabel" aria-hidden="true">
           
          <div class="modal-dialog" role="document">
              <div class="modal-content">
                 <form id="form-purchase" class="form-horizontal" action="{{ route('save_product_catalog')}}" method="post" enctype="multipart/form-data">
            @csrf
                <div class="modal-header">
                  <h5 class="modal-title" id="add_productLabel">New Shop Category</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="row">
                    <div class=" col-sm-6 col-md-6 ">
                    <label for="cat_name" class="control-label">
                    Category Name<i class="required">*</i>
                    </label>
                    <input type="text" class="form-control" id="name" name="name" autocomplete="off" placeholder="Type name" required>
                    
                  </div>
                  <div class=" col-sm-6 col-md-6 ">
                    <label for="pan" class="control-label">
                     Category Slug<i class="required">*</i>
                    </label>
                    <input type="text" class="form-control" id="slug" name="slug" autocomplete="off" placeholder="Type slug" required>

                     <span class="text-danger"></span>
                   
                   </div>
                   
                 </div>
               
                </div>
                <div class="modal-footer" style="text-align: center;">
                  <button class="btn btn-lg btn-info" name="submit" data-loading-text="Processing...">
                    <i class="fa fa-fw fa-save"></i>
                      Submit        </button>
                </div>
               </form>

                <div style="padding: 5px;">
                <table id="supplier-supplier-list" class="table table-bordered table-striped table-hover dataTable" role="grid" aria-describedby="supplier-supplier-list_info" style="width: 100%;">
                    <thead>
                        <tr class="bg-gray">
                            <th class="text-center">S.N.</th>
                            <th class="text-center">Product Category</th>
                            <th class="text-right">slug</th>
                           
                            <th class="text-right">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                                               @foreach($ProductCatalogs as $cat)

                          <tr>
                           <td>{{$i}}</td>
                            <td>{{$cat->name}}</td>
                            <td class="text-right">{{$cat->slug}}</td>
                            
                             <td class="text-right"><a href="{{route('edit_shop_category',[$cat->id])}}" class="btn btn-primary"> Edit</a>
                            <a href="{{route('delete_product_catalog',[$cat->id])}}" class="btn btn-danger delete-list" onclick="return confirm('Are you sure you want to delete this item?');"> Delete</a></td>
                        </tr>
                                                @endforeach
                                            </tbody>
                </table>
               
                     
                          </div>
              </div>
            </div>
       
           <br>

            

          </div>



<!--Modal_catalog  Modal -->
          <div class="modal fade" id="add_Modal_catalog_in_store" tabindex="-1" role="dialog" aria-labelledby="add_productLabel" aria-hidden="true">
           
          <div class="modal-dialog" role="document">
              <div class="modal-content">
                 <form id="form-purchase" class="form-horizontal" action="{{ route('save_model_catalog')}}" method="post" enctype="multipart/form-data">
            @csrf
                <div class="modal-header">
                  <h5 class="modal-title" id="add_productLabel">New Modal Catalog</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="row col-md-12">
                    <div class="col-sm-4 col-md-4">
                      <div class="form-group margin-top">
                        <label for="item_color">Color </label>                           
                        <select name="pid" class="form-control">
                          <option  value="">... Select ...</option>
                          @foreach($ProductCatalogs as $p_catalog)
                          <option value="{{$p_catalog->id}}">{{$p_catalog->name}}</option>
                          @endforeach
                                      
                        </select>
                        <span class="text-danger">@if ($errors->has('item_color')){{ $errors->first('item_color') }}@endif</span>
                      </div>
                    </div>
                    <div class="col-sm-4 col-md-4">
                    <label for="cat_name" class="control-label">
                    Modal Name<i class="required">*</i>
                    </label>
                    <input type="text" class="form-control" id="name" name="name" autocomplete="off" placeholder="Type name" required>
                    
                  </div>
                  <div class="col-sm-4 col-md-4">
                    <label for="pan" class="control-label">
                     Modal Slug<i class="required">*</i>
                    </label>
                    <input type="text" class="form-control" id="slug" name="slug" autocomplete="off" placeholder="Type slug" required>

                     <span class="text-danger"></span>
                   
                   </div>
                   
                 </div>
               
                </div>
                <div class="modal-footer" style="text-align: center;">
                  <button class="btn btn-lg btn-info" name="submit" data-loading-text="Processing...">
                    <i class="fa fa-fw fa-save"></i>
                      Submit        </button>
                </div>
               </form>

                <div style="padding: 5px;">
                <table id="supplier-supplier-list" class="table table-bordered table-striped table-hover dataTable" role="grid" aria-describedby="supplier-supplier-list_info" style="width: 100%;">
                    <thead>
                        <tr class="bg-gray">
                            <th class="text-center">S.N.</th>
                            <th class="text-center">Product Category</th>
                            <th class="text-right">slug</th>
                           
                            <th class="text-right">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                                               @foreach($ModelCatalogs as $cat)

                          <tr>
                           <td>{{$i}}</td>
                            <td>{{$cat->product_name}}</td>
                            <td class="text-right">{{$cat->model_name}}</td>
                            
                             <td class="text-right">
                                {{--<a href="{{route('delete_model_catalog',[$cat->id])}}" class="btn btn-primary"> Edit</a>--}}
                            <a href="{{route('delete_model_catalog',[$cat->id])}}" class="btn btn-danger delete-list" onclick="return confirm('Are you sure you want to delete this item?');"> Delete</a></td>
                        </tr>
                                                @endforeach
                                            </tbody>
                </table>
               
                     
                          </div>
              </div>
            </div>
       
           <br>

            

          </div>