@extends('layouts.admin.app')
@section('content')
    <div class="content-wrapper">
        <section class="content-header bg-white form-group p-3 p-md-4">
            <div class="row">
                <div class="col text-center text-sm-left">
                    <h3 class="text-primary text-md text-uppercase">
                        <img src="{{ asset('images/category-icon.png') }}" class="heading-desk align-middle" alt="">
                        Product Add
                    </h3>
                </div>
            </div>
            <div class="clearfix"></div>
        </section>
        <section class="content">
            <div class="row">
                <div class="col-lg-12">
                    <form method="POST" name="productForm" id="productForm" action="{{ route('admin.products.store') }}" enctype="multipart/form-data">
                        @csrf
                        <div class="bg-white p-3 p-md-4 shadow">
                             <div class="row form-group pb-sm-2 align-items-center">
                                <div class="col-md-3 col-sm-4">
                                    <label for="date" class="mb-1 mb-sm-0 font-size-15"> Category Name <span class="error">*</span>:</label>
                                </div>
                                <div class="col-md-9 col-sm-8">
                                   <select class="form-control" name="category_name">
                                    <option value=""> Category Name</option>
                                    @foreach($category  as $keycategory =>$value_category)
                                    <option value="{{$value_category->id}}">{{$value_category->category_name}}</option>
                                    @endforeach
                                   
                                   </select>
                                </div>
                            </div>
                            <div class="row form-group pb-sm-2 align-items-center">
                                <div class="col-md-3 col-sm-4">
                                    <label for="date" class="mb-1 mb-sm-0 font-size-15"> Products Name <span class="error">*</span>:</label>
                                </div>
                                <div class="col-md-9 col-sm-8">
                                    <input class="form-control" placeholder="Product Name" type="text" name="product_name" id="product_name">
                                </div>
                            </div>
                           
                          

                            <div class="row form-group pb-sm-2 align-items-center">
                                <div class="col-md-3 col-sm-4">
                                    <label for="cash" class="mb-1 mb-sm-0 font-size-15">Product Image <span class="error">*</span>:</label>
                                </div>
                                <div class="col-md-9 col-sm-8">
                                <input class="form-control" type="file" name="product_img" id="product_img">
                            </div>
                            </div>

                            <div class="row form-group pb-sm-2 align-items-center">
                                <div class="col-md-3 col-sm-4">
                                    <label for="cash" class="mb-1 mb-sm-0 font-size-15">Product Description <span class="error">*</span>:</label>
                                </div>
                                <div class="col-md-9 col-sm-8">
                                    <textarea id="product_detail" class="form-control" name="product_detail"></textarea>
                                </div>
                            </div>
                             

                           
                            <div class="row form-group pb-sm-2 align-items-center">
                                <div class="col-md-3 col-sm-4">
                                    <label for="date" class="mb-1 mb-sm-0 font-size-15"> Warrenty Days <span class="error">*</span>:</label>
                                </div>
                                <div class="col-md-9 col-sm-8">
                                    <input class="form-control" placeholder="Warrenty Days" type="text" name="warrenty_days" id="warrenty_days">
                                </div>
                            </div>
                            <div class="row form-group pb-sm-2 align-items-center">
                                <div class="col-md-3 col-sm-4">
                                    <label for="date" class="mb-1 mb-sm-0 font-size-15"> Warrenty ON/OFF <span class="error">*</span>:</label>
                                </div>
                                <div class="col-md-9 col-sm-8">
                                   <select onchange="warrenty_check()" class="form-control" name="warrenty_option" id="warrenty_option">
                                    <option value="1">Yes</option>
                                    <option value="2">No</option>
                                   </select>
                                </div>
                            </div>

                            <span id="warrenty_renewal">
                            <div class="row form-group pb-sm-2 align-items-center">
                                <div class="col-md-3 col-sm-4">
                                    <label for="date" class="mb-1 mb-sm-0 font-size-15"> Warrenty Renewal amount <span class="error">*</span>:</label>
                                </div>
                                <div class="col-md-9 col-sm-8">
                                    <input class="form-control" placeholder="Warrenty Amount" type="text" name="warrenty_amount" id="warrenty_amount">
                                </div>
                            </div>
                            <div class="row form-group pb-sm-2 align-items-center">
                                <div class="col-md-3 col-sm-4">
                                    <label for="date" class="mb-1 mb-sm-0 font-size-15"> Warrenty Renewal Days <span class="error">*</span>:</label>
                                </div>
                                <div class="col-md-9 col-sm-8">
                                    <input class="form-control" placeholder="Warrenty Renewal Days" type="text" name="warrenty_renewal_days" id="warrenty_renewal_days">
                                </div>
                            </div>
                            </span>
                             <div class="row form-group pb-sm-2 align-items-center">
                                    <div class="col-md-3 col-sm-4">
                                        <label for="post_content" class="mb-1 mb-sm-0 font-size-15">To Know More <span class="error"></span>:</label>
                                    </div>
                                    <div class="col-md-9 col-sm-8">
                                        <input class="form-control" placeholder="Bio Plus Product Link" type="text" name="live_product_link" id="live_product_link">
                                        
                                    </div>
                                </div>

                                <div class="row form-group pb-sm-2 align-items-center">
                                    <div class="col-md-3 col-sm-4">
                                        <label for="post_content" class="mb-1 mb-sm-0 font-size-15">Product Video <span class="error"></span>:</label>
                                    </div>
                                    <div class="col-md-9 col-sm-8">
                                        <input class="form-control" placeholder="Bio Plus Product video" type="text" name="live_product_video" id="live_product_video">
                                        
                                    </div>
                                </div>

                                <div class="row form-group pb-sm-2 align-items-center">
                                    <div class="col-md-3 col-sm-4">
                                        <label for="post_content" class="mb-1 mb-sm-0 font-size-15">Product Type <span class="error">*</span>:</label>
                                    </div>
                                    <div class="col-md-9 col-sm-8">
                                        <select class="form-control" name="installation_product" id="installation_product">
                                            <option value="0">Normal Product</option>
                                            <option value="1">Install Product</option>
                                        </select>
                                        
                                    </div>
                                </div>

                              <!--  <div class="row form-group pb-sm-2 align-items-center">
        
             
    <div class="col-md-3 col-sm-4">
                                    <label for="date" class="mb-1 mb-sm-0 font-size-15"> Attribute <span class="error">*</span>:</label>
                                </div>
                                <div class="col-md-9 col-sm-8">
        <input type="text" name="field_name[]" value=""/>
        <a href="javascript:void(0);" class="add_button" title="Add field"><button class=" btn btn-primary" style=" margin:5px;">Add More Field</button></a>
    </div>
    </div>
    <div class="input_field_wrapper"></div> -->


                           <div class="row align-items-center mt-4 mb-3 pt-2 pt-sm-0">
                                <div class="col-md-3 col-sm-4"></div>
                                <div class="col-md-9 col-sm-8 text-center text-sm-left">
                                    <a href="{{ route('admin.products.index') }}" class="btn btn-danger text-uppercase px-4 py-2 font-weight-bold mr-3">
                                        <span class="py-1 d-block">
                                            <i class="fa fa-long-arrow-left mr-2" aria-hidden="true"></i>Back
                                        </span>
                                    </a>
                                    <button type="submit" class="btn btn-primary text-uppercase px-4 py-2 font-weight-bold">
                                        <span class="py-1 d-block">Submit</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </section>
    </div>
    @section('admin-js')
        <script type="text/javascript" src="{{ asset('js/adminjs/products.js') }}"></script>




        <script>
$(document).ready(function(){
    var maxField = 10; //Input fields increment limitation
    var addButton = $('.add_button'); //Add button selector
    var wrapper = $('.field_wrapper'); //Input field wrapper
    var fieldHTML = '<div><input type="text" name="field_name[]" value=""/><a href="javascript:void(0);" class="remove_button"><img src="images/remove-icon.png"/></a></div>'; //New input field html 
    var x = 1; //Initial field counter is 1
    
    // Once add button is clicked
    $(addButton).click(function(){
        //Check maximum number of input fields
        if(x < maxField){ 
            x++; //Increase field counter
            $(wrapper).append(fieldHTML); //Add field html
        }else{
            alert('A maximum of '+maxField+' fields are allowed to be added. ');
        }
    });
    
    // Once remove button is clicked
    $(wrapper).on('click', '.remove_button', function(e){
        e.preventDefault();
        $(this).parent('div').remove(); //Remove field html
        x--; //Decrease field counter
    });
});
</script>
      
    @endsection
@endsection