@extends('layouts.app-admin')
@section('content')
<link rel="stylesheet" href="{{url('adminAssets/assets/libs/select2/select2.css')}}">
<link rel="stylesheet" href="{{url('adminAssets/assets/libs/perfect-scrollbar/perfect-scrollbar.css')}}">
    <link rel="stylesheet" href="{{url('adminAssets/assets/libs/bootstrap-tagsinput/bootstrap-tagsinput.css')}}">
    <link rel="stylesheet" href="{{url('adminAssets/assets/libs/bootstrap-multiselect/bootstrap-multiselect.css')}}">
    <script src="{{url('adminAssets/assets/js/ckeditor/ckeditor.js')}}"></script>
    <link href="{{url('adminAssets/assets/js/ckeditor/samples/sample.css')}}" rel="stylesheet">
<style>
   .default-style .select2-container--default .select2-selection--single{
        border-radius: 00;
    border: 0 solid rgba(24, 28, 33, 0.1);
    border-bottom: 1px solid #e7e8e8;
   }
    .default-style .select2-container--default .select2-selection--single .select2-selection__rendered{
    padding-left:0px;
    }
    .ck.ck-editor__main>.ck-editor__editable {
    height: 100px;
    border-color: var(--ck-color-base-border);
}
    .default-style .select2-container--default .select2-selection--multiple {
    border: none;
    border-bottom: 1px solid rgba(24,28,33,0.1);
    border-radius: 0;
}
    .input-group-text {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    padding: 0.375rem 0.75rem;
    margin-bottom: 0;
    font-size: 1rem;
    font-weight: 400;
    /* line-height: 1.5; */
    color: #495057;
    text-align: center;
    white-space: nowrap;
    background-color: #e9ecef;
}
</style>


<!-- [ content ] Start -->
<!-- [ content ] Start -->
<div class="container-fluid flex-grow-1 container-p-y">
        <h4 class="font-weight-bold py-3 mb-0">Add Product</h4>
        <div class="text-muted small mt-0 mb-4 d-block breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{route('admin.dashboard')}}"><i class="feather icon-home"></i></a></li>
                <li class="breadcrumb-item">Products</li>
                <li class="breadcrumb-item active">Add Product</li>
            </ol>
        </div>

        <div class="card mb-4">
            <h6 class="card-header bg-dark text-white">Product
            <a href="{{url('admin/product')}}" class="btn btn-success btn-sm  btn-round float-right" ><i class="feather icon-list"></i> List Product</a>

            </h6>
            <div class="card-body">

                <form class="form-horizontal form-label-left" action="{{ url('admin/product') }}" method="post" enctype="multipart/form-data">
                    {!! csrf_field() !!}
                    <div class="form-row">
                    <div class="form-group col-md-6">
                           <label class="form-label">Category <span class="error">*</span></label>
                           <select class="form-control select2" name="category" required>
                               <option value="">Select Category</option>
                               @foreach($category as $cat_val)
                               <option value="{{$cat_val->id}}">{{$cat_val->title}}</option>
                               @endforeach
                           </select>
                           <div class="clearfix"></div>
                           @error('category')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                       </div>
                       <div class="form-group col-md-6">
                           <label class="form-label">Brand <span class="error">*</span></label>
                           <select class="form-control select2" name="brand" required>
                               <option value="">Select Brand</option>
                               @foreach($brand as $bd_val)
                               <option value="{{$bd_val->id}}">{{$bd_val->title}}</option>
                               @endforeach
                           </select>
                           <div class="clearfix"></div>
                           @error('brand')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                       </div>
                       
                     
                        <div class="form-group col-md-6">
                            <label class="form-label">Title <span class="error">*</span></label>
                            <input type="text" class="form-control" placeholder="Enter Title" name="title" onkeyup="slug_url(this.value,'title_slug')" required>
                            <div class="clearfix"></div>
                            @error('title')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>      
                         
                        <div class="form-group col-md-3">
                            <label class="form-label">URL Slug <span class="error">*</span></label>                          
                            <input type="text" class="form-control " name="title_slug" placeholder="Enter Uniqe URL Slug." id="title_slug" required>
                            <div class="clearfix"></div>
                            @error('title_slug')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>   
                        <div class="form-group col-md-3">
                            <label class="form-label">Product Code <span class="error">*</span></label>
                            <input type="text" class="form-control" placeholder="Enter Product Code" name="product_code"  required>

                            <div class="clearfix"></div>
                            @error('product_code')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>               
                        <div class="form-group col-md-6">
                            <label class="form-label">Product Price <span class="error">*</span></label>
                            <input type="text" class="form-control" name="price" value="" id="mrp-price" style="  width: 90%;  display: inline-block;    "  oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');" required >
                            <div class="input-group-prepend" style="  width: 10%;  display: inline-block;     float: right;">
                                    <span class="input-group-text" id="basic-addon1" style="padding-left: 20px;">£</span>
                                </div>
                            <div class="clearfix"></div>
                            @error('price')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>       
                        <div class="form-group col-md-6">
                            <label class="form-label">Discount Price <span class="error"></span></label>
                          
                            <input type="text" class="form-control pro-price" name="discount_price" value="" id="pro-price" style="  width: 90%;  display: inline-block;    " oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');">
                            <div class="input-group-prepend" style="  width: 10%;  display: inline-block;     float: right;">
                                    <span class="input-group-text" id="basic-addon1" style="padding-left: 20px;">£</span>
                                </div>
                            <div class="clearfix"></div>
                            <span class="pro-price11" role="alert" style="color: #ff0000;"></span>
                         
                        </div>  
                        <!-- <div class="form-group col-md-6" id="Getcolor">
                            <label class="form-label">Choose Color </label>
                            <select class="form-control select2" name="color[]" multiple>
                                 <option value="">Select Color</option> 
                                @foreach($color as $cl_val)                                
                               <option value="{{$cl_val->id}}">{{$cl_val->title}}</option>
                               @endforeach
                                                           
                                
                            </select>

                            <div class="clearfix"></div>
                           
                        </div>          
                        <div class="form-group col-md-6" id="Getcolor">
                            <label class="form-label">Choose Size </label>
                            <select class="form-control select2" name="size[]" multiple>
                                <option value="">Select Size</option>  
                                <option value="XS">XS</option> 
                                <option value="S">S</option> 
                                <option value="M">M</option> 
                                <option value="L">L</option> 
                                <option value="XL">XL</option>  
                            </select>

                            <div class="clearfix"></div>
                           
                        </div>      -->

                        <div class="form-group col-md-6">
                           <label class="form-label"> Seasonal <span class="error"></span></label>
                           <select class="form-control select2" name="seasonal">       
                           <option value="">Choose Seasonal</option>                       
                               @foreach($seasonal as $ses_val)
                               <option value="{{$ses_val->id}}">{{$ses_val->title}}</option>
                               @endforeach
                           </select>
                           <div class="clearfix"></div>
                       </div>
                       <div class="form-group col-md-6">
                           <label class="form-label"> Shop By Theme <span class="error"></span></label>
                           <select class="form-control select2" name="shopbytheme"> 
                           <option value="">Choose Shop By Theme</option>   
                              <optgroup label="Clothing">                            
                               @foreach($shopbythemeClothing as $sbt_val)
                               <option value="{{$sbt_val->id}}">{{$sbt_val->title}}</option>
                               @endforeach
                                </optgroup>
                                <optgroup label="Footwear">                            
                               @foreach($shopbythemeFootwear as $sbt_val)
                               <option value="{{$sbt_val->id}}">{{$sbt_val->title}}</option>
                               @endforeach
                                </optgroup>
                           </select>
                           <div class="clearfix"></div>
                       </div>
                       
                       <div class="form-group col-md-4">
                           <label class="form-label"> Sales <span class="error"></span></label>
                           <select class="form-control" name="sales">                              
                               <option value="0">Disable</option>
                               <option value="1">Enable</option>
                           </select>
                           <div class="clearfix"></div>
                       </div>
                       <div class="form-group col-md-4">
                           <label class="form-label"> Latest Additions <span class="error"></span></label>
                           <select class="form-control" name="additions">                              
                               <option value="0">Disable</option>
                               <option value="1">Enable</option>
                           </select>
                           <div class="clearfix"></div>
                       </div>
                       <div class="form-group col-md-4">
                           <label class="form-label"> Gifts <span class="error"></span></label>
                           <select class="form-control" name="gifts">                              
                               <option value="0">Disable</option>
                               <option value="1">Enable</option>
                           </select>                          

                           <div class="clearfix"></div>
                       </div>
                    
                       <div class="form-group col-md-6">
                            <label class="form-label">Main Product Upload Image <span class="error">*</span></label>
                            <input type="file" class="form-control" placeholder="Upload Image" name="main_img" accept="image/x-png,image/jpeg" >
                            <div class="clearfix"></div>
                            @error('main_img')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                        <div class="form-group col-md-6">
                            <label class="form-label">Mulutple Product Upload Image <span class="error"></span></label>
                            <input type="file" class="form-control" placeholder="Upload Image" name="img[]" accept="image/x-png,image/jpeg" multiple>
                            <div class="clearfix"></div>
                            @error('img')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                       
                        
                        <div class="form-group col-md-6">
                            <label class="form-label">Product Qty <span class="error">*</span></label>
                            <input type="text" class="form-control" placeholder="Enter Stock" name="stock"  oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');" required>
                            <div class="clearfix"></div>
                            @error('stock')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>     
                        <div class="form-group col-md-6">
                           <label class="form-label">Status <span class="error">*</span></label>
                           <select class="form-control" name="status">
                               <option value="active">Active</option>
                               <option value="inactive">In-Active</option>
                           </select>
                           <div class="clearfix"></div>
                       </div>     
                      
                        <div class="form-group col-md-12">
                            <label class="form-label">Description <span class="error"></span></label>
                            <textarea  name="description" rows="10" id="editor1">{{old('description')}}</textarea>
                            <div class="clearfix"></div>
                            @error('description')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                    
                     
                       
                     
                      
                   </div>      
                            
                    
                    <button type="submit" class="btn btn-primary">Submit</button>
                </form>
            </div>
        </div>
    </div>
    <!-- [ content ] End -->
<!-- [ content ] End -->
@endsection


@section('script')
<script src="{{asset('adminAssets/assets/libs/bootstrap-select/bootstrap-select.js')}}"></script>
    <script src="{{asset('adminAssets/assets/libs/bootstrap-multiselect/bootstrap-multiselect.js')}}"></script>
    <script src="{{asset('adminAssets/assets/libs/select2/select2.js')}}"></script>
    
 

    <script src="{{url('adminAssets/assets/js/demo.js')}}"></script>
    <script src="{{url('adminAssets/assets/js/pages/forms_selects.js')}}"></script>
    <script src="{{url('adminAssets/assets/js/multiple_editor.js')}}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>
<script>   
    //setup CSRF token for ajax forms
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
$('.pro-price').keyup(function(e){
             var mrp=$('#mrp-price').val();            
             var price=$(this).val();            
            // var discount=parseInt(price)/parseInt(mrp)*100;
            var discount=parseInt(mrp)-parseInt(price);
             $('.total_discount').val(discount);  
        if (parseInt($(this).val()) < parseInt(mrp)) {              
             $('.pro-price11').html('');                
        }else{           
            $('.pro-price11').html('Price should be less than to MRP');  
            
        }
    });
    $(".select2").select2();
    </script> 
@endsection