@extends('layouts.app', ['page' => __('Products'), 'pageSlug' => 'products'])

@section('content')

<style>
    .card form label+.form-control {
    margin-bottom: 5px;
}
.image {
  border: 1px solid #e5e5e5;
}

input[type=file]::file-selector-button {
  background-color: #fff;
  color: #000;
  border: 0px;
  border-right: 1px solid #e5e5e5;
  padding: 10px 15px;
  margin-right: 20px;
  transition: .5s;
}

input[type=file]::file-selector-button:hover {
  background-color: #eee;
  border: 0px;
  border-right: 1px solid #e5e5e5;
}
    </style>
  
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="title">{{ __('Add Products') }}</h5>
                </div>
                <form method="post" action="{{route('products.productdatasave')}}" autocomplete="off" enctype="multipart/form-data">
                @csrf
                    <div class="card-body">
                         <div class="row"> 
                         <div class="col-md-6"> 

                            <div class="form-group">
                                <label>{{ __('Product Name') }}</label>
                                <input type="text" name="productname" id="productname" class="form-control" placeholder="{{ __('Product Name') }}" >
                                          @error('productname')
                                                <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                            @enderror
                            </div>
                          </div>
                          <div class="col-md-6">
                            <div class="form-group">
                                <label>{{ __('Price') }}</label>
                                <input type="number" name="price" value="0" id="price" class="form-control" placeholder="{{ __('Price') }}" >
                                         @error('price')
                                                <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                            @enderror
                            </div>
                            </div>
                          </div>
      
                            <div class="row"> 
                            <div class="col-md-6">
                            <div class="form-group">
                                <label>{{ __('Select Category') }}</label>
                                <select name="category" id="category" class="form-control">
                                    <option value="">Select</option>
                                    @foreach($categories as $Category)
                                    <option value="{{$Category->categoryname}}">{{$Category->categoryname}}</option>
                                    @endforeach
                                </select>
                                          @error('category')
                                                <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                            @enderror
                            </div>
                            </div>
                            <div class="col-md-6">
                            <div class="form-group">
                                <label>{{ __('Select SubcateGory') }}</label>
                                <select name="subcategory" id="subcategory" class="form-control">
                                    <option value="">Select</option>
                                    @foreach($sub_categories as $sub_category)
                                    <option>{{$sub_category->subcategoryname}}</option>
                                    @endforeach
                                </select>               
                                            @error('subcategory')
                                                <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                            @enderror
                            </div>
                            </div>
                            
                            </div>
               

                            <div class="row"> 
                            <div class="col-md-4">
                            <div class="form-group">
                                <label>{{ __('CGST') }}</label>
                                <input type="number" name="cgst" id="cgst" class="form-control" value="0" placeholder="{{ __('CGST') }}" >
                                         @error('cgst')
                                                <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                            @enderror
                            </div>
                            </div>
                          <div class="col-md-4">
                            <div class="form-group">
                                <label>{{ __('SGST') }}</label>
                                <input type="number" name="sgst" id="sgst" class="form-control" value="0" placeholder="{{ __('SGST') }}" >
                                          @error('sgst')
                                                <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                            @enderror
                            </div>
                            </div>

                            <div class="col-md-4">
                            <div class="form-group">
                                <label>{{ __('IGST') }}</label>
                                <input type="number" name="igst" id="igst" value="0" class="form-control" placeholder="{{ __('IGST') }}" >
                                        @error('igst')
                                                <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                            @enderror
                            </div>
                            </div>
                            </div>

                            <div class="row">
                            <div class="col-md-12">
                            <div class="form-group">
                                <label>{{ __('Description') }}</label>
                                <textarea class="form-control" id="description" name="description">

                                </textarea>
                                            @error('description')
                                                <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                            @enderror
                            </div>
                            </div>
                            </div>

                            <div class="row">
                            <div class="col-md-6">
                            <label>{{ __('Image') }}</label>
                            <div class="form-group image">
                                 
                                <input type="file" class="form-control" id="image" name="image">
                              
                                            @error('image')
                                                <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                            @enderror 
                                            <div>
                                
                            </div>
                            </div>
                            </div>
                    </div>
                    <div class="card-footer">
                        <button type="submit"  class="btn btn-fill btn-info">Add</button>
                    </div>
                </form>
            </div>

        
        </div>
       
    </div>
   

<!-- <script>
    function sendform_Data()
{
    alert("hi");
}
</script> -->
<script>
        let input = document.getElementById("inputTag");
        let imageName = document.getElementById("imageName")

        input.addEventListener("change", ()=>{
            let inputImage = document.querySelector("input[type=file]").files[0];

            imageName.innerText = inputImage.name;
        })

        
    </script>
    <script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>

    <script type="text/javascript">
        console.log("hi");
        $('#category').on('change', function() {
                    console.log("hi");
                    var categoryid=this.value;
                    console.log(category);
                    $.ajaxSetup({
                                        headers: {
                                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                        }
                                    });

                            $.ajax({
                                    url: "{{ route('categoryoptionval') }}" ,
                                    type: 'POST',
                                    data:{
                                        "categoryid":categoryid,
                                    },
                                    success:function(data)
                                    {
                                        var val=JSON.parse(data);
                                    }
                        });
                    });
        </script>


@endsection