@extends('admin/layout')
@section('page_title','Products')
@section('product_select','active')
@section('content')

<!-- Content Header (Page header) -->
<section class="content-header">
  <h1>
    Products
    <small>Add</small>
  </h1>
  <ol class="breadcrumb">
    <li><a href="javascript:void(0)"><i class="fa fa-dashboard"></i>Dashboard</a></li>
    <li class="active">Products</li>
  </ol>
</section>


<section class="content">
  <!-- Info boxes -->
  <div class="row">

    <div class="col-md-12">
      <div class="success_message"></div>
      <div class="box box-warning">
        <div class="box-header with-border">
            <div class="d-flex justify-content-end text-right">
                <a href="{{url('admin/products')}}" class="btn btn-danger"><i class="fa fa-arrow-circle-left "></i>&nbsp;&nbsp;Back</a>
            </div>
        </div>
        <div class="box-body">
          <div class="col-md-12">
            @if (session()->has('add_msg'))
            <div class="alert alert-success alert-dismissible">
                <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                <strong>{{session()->get('add_msg')}}</strong>
              </div>
            @endif
            <form action="{{url('admin/products/store')}}" method="POST" enctype="multipart/form-data">
              @csrf
              <div class="form-group">
                <label for="">Product Name <span class="text-red">*</span></label>
                <input type="text" name="name" id="name" class="name form-control"
                  placeholder="Please Enter Name" value="{{old('name')}}">
                  <p class="text-red">@error('name')  {{$message}} @enderror</p>
              </div>
              <div class="form-group">
                <label for="">Product Category <span class="text-red">*</span></label>
                <select name="cat_id" id="cat_id" class="cat_id form-control">
                  <option value="">Select Category</option>
                  @foreach ($category as $opt)
                  <option value="{{$opt->id}}">{{$opt->cat_name}}</option>
                  @endforeach 
                </select>
                <p class="text-red">@error('cat_id')  {{$message}} @enderror</p>
              </div>
              <div class="form-group">
                <label for="">Brand <span class="text-red">*</span></label>
                <select name="brand_id" id="brand_id" class="brand_id form-control">
                  <option value="">Select Brand</option>
                    @foreach ($brands as $opt)
                    <option value="{{$opt->id}}">{{$opt->brand_name ?? ''}}</option>
                    @endforeach 
                </select>
                <p class="text-red">@error('brand_id')  {{$message}} @enderror</p>
              </div>
              
              <div class="form-group">
                <label for="">Origin <span class="text-red">*</span></label>
                <input type="text" name="origin" class="form-control"
                  placeholder="Please Enter origin" value="{{old('origin')}}">
                  <p class="text-red">@error('origin')  {{$message}} @enderror</p>
              </div>
              
              <div class="form-group">
                <label for="">Company <span class="text-red"></span></label>
                <select name="company_id" id="company_id" class="company_id form-control">
                  <option value="">Select Company</option>
                  @foreach ($companies as $opt)
                    <option value="{{$opt->id}}">{{$opt->company_name ?? ''}}</option>
                    @endforeach 
                </select>
                <p class="text-red">@error('company_id')  {{$message}} @enderror</p>
              </div>
              
                <div class="form-group">
                <label for="">Unit <span class="text-red">*</span></label>
                <input type="text" name="unit" class="form-control"
                  placeholder="Please Enter unit" value="{{old('unit')}}">
                  <p class="text-red">@error('unit')  {{$message}} @enderror</p>
              </div>
              <div class="form-group">
                <label for="">Price <span class="text-red">*</span></label>
                <input type="text" name="price" class="form-control"
                  placeholder="Please Enter Price" value="{{old('price')}}">
                  <p class="text-red">@error('price')  {{$message}} @enderror</p>
              </div>
              <div class="form-group">
                <label for="">Image <span class="text-red">*</span></label>
                <input type="file" name="image" class="form-control"
                  >
                  <p class="text-red">@error('image')  {{$message}} @enderror</p>
              </div>
              <div class="form-group">
                <label for="">Button Link <span class="text-red">*</span></label>
                <input type="text" name="btn_link" class="form-control"
                  placeholder="https://www.google.com/" value="{{old('btn_link')}}">
                  <p class="text-red">@error('btn_link')  {{$message}} @enderror</p>
              </div>
              <div class="form-group">
                <label for="">Description <span class="text-red"></span></label>
                <textarea name="desc" id=""></textarea>
              </div>
              
            <div class="form-group">
                <label for="">Specification <span class="text-red"></span></label><br/>
                <textarea name="specification" id="specification" class="form-control"></textarea>
              </div>
              
              <div class="form-group">
                <label for="is_featured">Mark As Featured Product <span class="text-red"></span></label><br/>
                <input type="checkbox" name="is_featured" id="is_featured">
              </div>
              
              <button class="btn btn-info" type="submit">SAVE</button>
            </form>
          </div>
        </div>
        <!-- /.box-body -->
      </div>
    </div>

  </div>
  <!-- /.row -->
</section>

@endsection


@section('styles')
  <!-- Select2 -->
  <style>
      .select2-container .select2-selection--single{
            box-sizing: border-box;
            cursor: pointer;
            display: block;
            height: 35px;
            user-select: none;
            -webkit-user-select: none;
            background: #fff !important;
            box-shadow: 5px 5px 12px #fdfd;
            border: 1px solid #cbc8cbed;
            vertical-align: middle;
            line-height: 35px;
            padding: 0px 5px;
        }
        
        .select2-container .select2-selection--multiple{
            background: #fff !important;
            box-shadow: 5px 5px 12px #fdfd;
            border: 1px solid #cbc8cbed;
        }
        
        .select2-results {
            display: block;
            min-height: max-content;
            max-height: 300px;
            overflow-y: auto;
        }

  </style>
@endsection

@section('scripts')
<script src="{{asset('backend_assets/bower_components/select2/dist/js/select2.full.min.js')}}"></script>
<script>
    CKEDITOR.replace('desc')
</script>
<script>
    $(document).ready(function(){
        
        init();
        
    })
    
  
    function init(){
        $('#company_id').select2({
            theme: 'bootstrap4'
        }).val(null).trigger("change");  

        $('#cat_id').select2({
            theme: 'bootstrap4'
        }).val(null).trigger("change");
        
        $('#brand_id').select2({
            theme: 'bootstrap4'
        }).val(null).trigger("change");
    }
 
</script>
@endsection