@extends('layouts.backend.app')

@section('title')
  {{$title}}
@stop

@push('css')
<script src="{{asset('js/plugins/ckeditor/ckeditor.js')}}"></script>
<link rel="stylesheet" href="{{asset('css/select2.min.css')}} ">
@endpush

@section('content')
<form action="{{ route('admin.product.store') }}" method="POST" enctype="multipart/form-data">
    @csrf
    <div class="row">
        <div class="col-12">
            <div class="card mb-4 mt-4">
                <div class="card-header">
                  <i class="fas fa-chart-area mr-1"></i>Product Info
                </div>
                <div class="card-body">
                    
                    <div class="form-group row">
                        <label for="title" class="col-md-2 col-form-label">Title <i class="text-danger">*</i></label>
                        <div class="col-md-10">
                            <input name="title" type="text" required class="form-control" id="name" placeholder="Max 150 word." value="" >
                        </div>
                    </div>
        
                    <div class="form-group row">
                        <div class="col-md-2">
                          <label for="name">Eng</label>
                        </div>
                        <div class="col-md-10">
                            <input type="text" class="form-control" name="eng" value=""  placeholder="Max 200 word.">
                        </div>
                    </div>
        
                    <div class="form-group row">
                        <label for="title" class="col-md-2 col-form-label">Slug <i class="text-danger">*</i></label>
                        <div class="col-md-10">
                            <input name="slug" type="text" required class="form-control" id="name" placeholder="Max 150 word & must be unique." value="" >
                        </div>
                    </div>
        
                    <div class="form-group row">
                        <label for="Regular price" class="col-md-2 col-form-label">Regular price</label>
                        <div class="col-md-10">
                            <input name="regular_price" type="text" class="form-control" id="regular_price" placeholder="Only number" value="" >
                        </div>
                    </div>
        
                    <div class="form-group row">
                        <label for="firstname" class="col-md-2 col-form-label">Discount <i class="text-danger">*</i></label>
                        <div class="col-md-10">
                            <div class="input-group">
                                <input class="form-control" id="discount" type="text" pattern="[0-9]*\.?[0-9]*" title="Numbers only and dot" name="discount" value="0" required >
                                <div class="input-group-addon">%</div>
                            </div>
                        </div>
                    </div>
        
                    <div class="form-group row">
                        <label for="Sell price" class="col-md-2 col-form-label">Sell price <i class="text-danger">*</i></label>
                        <div class="col-md-10">
                            <input name="sell_price" required type="text" class="form-control" id="sell_price" placeholder="Only number" value="" >
                        </div>
                    </div>
        
                    <div class="form-group row">
                        <label for="Sell price" class="col-md-2 col-form-label">Advance <i class="text-danger">*</i></label>
                        <div class="col-md-10">
                            <input name="advance" required type="number" class="form-control" id="advance" placeholder="Only number" value="" >
                        </div>
                    </div>
        
                    <div class="form-group row">
                        <label for="Photo" class="col-md-2 col-form-label">Cover Photo (700x800px)</label>
                        <div class="col-md-10">
                            <input required type="file" name="cover_photo" >
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="Photo" class="col-md-2 col-form-label">More Photo (700x800px) </label>
                        <div class="col-md-10">
                            <input type="file" name="others_photo[]" multiple >
                        </div>
                    </div>
        
                    <div class="form-group">
                        <label>Short Description </label>
                        <textarea id="short_description" name="short_description" rows="7" class="form-control" placeholder="About Products"></textarea>
                    </div>
        
                    <div class="form-group">
                        <label>Product Description </label>
                        <textarea id="long_description" name="long_description" rows="7" class="form-control" placeholder="About Products"></textarea>
                    </div>
                </div>
            </div>
        
        </div>
        
        <div class="col-12">
            <div class="card mb-4 mt-4">
                <div class="card-header">
                  <i class="fas fa-chart-area mr-1"></i>More Info
                </div>
                <div class="card-body">
                    <div class="form-group row">
                        <label class="col-md-2 col-form-label">Category <i class="text-danger"> *</i> </label>
                        <div class="col-md-10">
                            <select required name="category_id" id="category_id" class="form-control select2">
                              <option value="">--None--</option>
                              @foreach ($categorys as $c_category)
                                <option value="{{$c_category->id}}">{{$c_category->serial}} {{$c_category->name}}</option>
                              @endforeach
                              
                            </select>
                        </div>
                    </div>
        
                    <div class="form-group row">
                        <label class="col-md-2 col-form-label">Brand</label>
                        <div class="col-md-10">
                            <select name="brand_id" id="brand_id" class="form-control select2">
                              <option value="">--None--</option>
                              @foreach ($brands as $c_brand)
                                <option value="{{$c_brand->id}}">{{$c_brand->name}}</option>
                              @endforeach
                              
                            </select>
                        </div>
                    </div>
        
                    <div class="form-group row">
                        <label for="Size" class="col-md-2 col-form-label">Size</label>
                        <div class="col-md-10">
                            <select name="size_id[]" data-placeholder="Select Size" class="form-control select2"  multiple style="width: 100%;" >
                                <option value="">Select One</option>
                              @foreach($size as $key=>$size)
                                <option value="{{$size->id}} ">{{$size->name}}</option>
                              @endforeach
                            </select>
                        </div>
                    </div>
        
                    <div class="form-group row">
                        <label for="Colour" class="col-md-2 col-form-label">Colours</label>
                        <div class="col-md-10">
                            <select name="colour_id[]" class="form-control select2" data-placeholder="Select Colours"  multiple style="width: 100%;" >
                                <option value="">Select One</option>
                              @foreach($colour as $key=>$colour)
                                <option value="{{$colour->id}} ">{{$colour->name}}</option>
                              @endforeach
                            </select>
                        </div>
                    </div>
                
                    <div class="form-group row">
                      <label class="col-md-2">Availability <i class="text-danger">*</i></label>
                      <div class="col-md-10">
                          <div class="form-check">
                              <label class="radio-inline">
                              <input type="radio" name="availability" value="In stock"  checked="checked" >Instock </label>
                              <label class="radio-inline">
                              <input type="radio" name="availability" value="Out of stock"  >Out of stock</label>
                          </div>
                      </div>
                    </div>
                    
                    <div class="form-group row">
                        <div class="col-md-2">
                          <label for="name">Allow</label>
                        </div>
                        <div class="col-md-10">
                            <input type="checkbox" name="featured" value="1">
                            <label> Featured</label><br>
                            <input type="checkbox" name="new" value="1">
                            <label> New</label><br>
                            <input type="checkbox" name="trending" value="1">
                            <label> Trending</label><br>
                            <input type="checkbox" name="best_seller" value="1">
                            <label> Best Seller</label><br>
                            <input type="checkbox" name="offer" value="1">
                            <label> Offer</label><br>
                        </div>
                    </div>
        
                    <div class="form-group row">
                      <label class="col-sm-3">Status <i class="text-danger">*</i></label>
                      <div class="col-md-10">
                          <div class="form-check">
                              <label class="radio-inline">
                              <input type="radio" name="status" value="Active"  checked="checked" >Active</label>
                              <label class="radio-inline">
                              <input type="radio" name="status" value="Inactive"  >Inactive</label>
                          </div>
                      </div>
                    </div>
                </div>
            </div>
        
            <div class="card mb-4 mt-4">
                <div class="card-header">
                  For Landing page ( Optional )
                </div>
                <div class="card-body">
                    <div class="form-group row">
                        <label for="Meta description" class="col-md-3 col-form-label">Page Heading </label>
                        <div class="col-md-9">
                            <textarea name="header_section" rows="5" class="form-control" placeholder="Header section content">
                            <h1>Lorem ipsum dolor sit amet consectetur <span>adipisicing</span> elit.</h1>
                            <h5>Saepe id fugiat, dolorum, consequatur, cupiditate fuga voluptas adipisci incidunt mollitia</h5>
                            <h6>aliquid quidem officia!</h6>
                            </textarea>
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="Meta description" class="col-md-3 col-form-label">Section two heding</label>
                        <div class="col-md-9">
                            <input type="text" name="section_two_head" class="form-control" placeholder="" value="">
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="Meta description" class="col-md-3 col-form-label">Section two content </label>
                        <div class="col-md-9">
                            <textarea name="section_two_conten" rows="5" class="form-control" placeholder="Second Section Content"></textarea>
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="Meta description" class="col-md-3 col-form-label">Section three heding</label>
                        <div class="col-md-9">
                            <input type="text" name="section_three_head" class="form-control" placeholder="" value="">
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="Meta description" class="col-md-3 col-form-label">Section three content </label>
                        <div class="col-md-9">
                            <textarea name="section_three_conten" rows="5" class="form-control" placeholder="Section three content"></textarea>
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="Meta description" class="col-md-3 col-form-label">Section four heding</label>
                        <div class="col-md-9">
                            <input type="text" name="section_four_head" class="form-control" placeholder="" value="">
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="Meta description" class="col-md-3 col-form-label">Section four content </label>
                        <div class="col-md-9">
                            <textarea name="section_four_conten" rows="5" class="form-control" placeholder="Section four content"></textarea>
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="Meta description" class="col-md-3 col-form-label">Video link</label>
                        <div class="col-md-9">
                            <input type="text" name="video" class="form-control" placeholder="Youtube video ID.">
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="Photo" class="col-md-3 col-form-label">Customer review screenshots ( Optional )</label>
                        <div class="col-md-9">
                            <input type="file" name="customer_review[]" multiple >
                        </div>
                    </div>

                </div>
            </div>

            <div class="card mb-4 mt-4">
                <div class="card-header">
                  <i class="fas fa-chart-area mr-1"></i>For S.E.O
                </div>
                <div class="card-body">
                    <div class="form-group row">
                        <label for="Meta description" class="col-md-2 col-form-label">Meta description </label>
                        <div class="col-md-10">
                            <textarea id="meta_description" name="meta_description" rows="5" class="form-control" placeholder="Meta description"></textarea>
                        </div>
                    </div>
        
                    <div class="form-group row">
                        <label for="Meta description" class="col-md-2 col-form-label">Meta Keyword </label>
                        <div class="col-md-10">
                            <textarea id="meta_keyword" name="meta_keyword" rows="3" class="form-control" placeholder="Meta Keyword"></textarea>
                        </div>
                    </div>
        
                    <div class="form-group">
                        <button type="submit" class="btn btn-success btn-xs">Submit</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
    
@endsection

@push('js')

<script>
    CKEDITOR.replace( 'short_description' );
    CKEDITOR.replace( 'long_description' );
    CKEDITOR.replace( 'section_two_conten' );
    CKEDITOR.replace( 'section_three_conten' );
    CKEDITOR.replace( 'section_four_conten' );
    $('.select2').select2()
</script>
<script src="{{ asset('js/discount.js') }}"></script>
<script src="{{asset('js/select2.full.min.js')}} "></script>
@endpush