@extends('admin.layouts.app')
@section('page_tab_title' ,"Products") 
@section('css')
<style type="text/css">
  .auto_select_height {
    height: auto !important;
  }
  .lvc-logo-img {
    display: inline-block !important;
    margin: 0;
    width: 90px;
    height: 60px;
    object-fit: cover;
}
  .parent-gallery-img {
    position: relative;
    margin-right: 15px;
    display: inline-block;
    margin-top: 30px;
}
 .remove-image {
    position: absolute;
    right: -8px;
    top: -12px;
    background-color: #fff;
    display: block;
    padding: 3px;
    border-radius: 100%;
    width: 20px;
    height: 20px;
    font-size: 12px;
    text-align: center;
    box-shadow: 0 0 3px #999;
    line-height: 12px;
    z-index: 1;
}
</style>
@endsection
@section('content')
<section class="content">
  <div class="row">
    <div class="col-md-12">
      <div class="box box-success">
        <div class="box-header">
          <h1>@if(empty($product->id)) Create New Product @else Edit Product @endif </h1>
          <hr class="bdr-partition">
        </div>
        <form method="POST" id="create-product" class="form-horizontal" enctype="multipart/form-data" @if(empty($product->id)) action="{{ route('product.store') }}" @else action="{{ route('product.update', $product->id) }}" @endif >
          @csrf
          <div class="box-body">
            <div class="row">
              <div class="col-md-6">
                <div class="form-group">
                    <div class="col-sm-12">
                      <label class=" control-label">Name <span class="required_span">*</span></label>
                      <input type="text" name="name" maxlength="255"  class="form-control" value="{{$product->name ?? old('name') }}" placeholder="Product name" required>
                      @if ($errors->has('name'))
                      <span class="invalid-feedback text-danger" role="alert">
                        {{ $errors->first('name') }}
                      </span>
                      @endif

                    </div>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                      <div class="col-sm-12">
                        <label class="control-label">Code</label>
                        <input type="text" name="code" maxlength="255"  class="form-control" value="{{$product->code ?? old('code') }}" placeholder="Product code">
                        @if ($errors->has('code'))
                        <span class="invalid-feedback text-danger" role="alert">
                          {{ $errors->first('code') }}
                        </span>
                        @endif
                      </div>
                    </div>
                </div>
            </div>
            <div class="row">
              <div class="col-md-6">
                <div class="form-group">
                  <div class="col-sm-12">
                    <label class="control-label">Dosage</label>
                    <textarea name="description" class="form-control h-100 w-100" rows="10" placeholder="Product dosage ">{{$product->description ?? old('description') }}</textarea>
                    @if ($errors->has('description'))
                    <span class="invalid-feedback text-danger" role="alert">
                      {{ $errors->first('description') }}
                    </span>
                    @endif
                  </div>
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group">
                  <div class="col-sm-12">
                    <label class="control-label">Status</label>
                    <select name="status"  class="form-control">
                      <option value="active" @if($product->status == "active") selected @endif>Active</option>
                      <option value="inactive" @if($product->status == "inactive") selected @endif>Inactive</option>
                    </select>
                    @if ($errors->has('active'))
                      <span class="invalid-feedback text-danger" role="alert">
                        {{ $errors->first('active') }}
                      </span>
                    @endif
                  </div>
                </div>
              </div>
            </div>
             <div class="row">
             <div class="col-md-6">
                <div class="form-group">
                    <div class="col-sm-12">
                      <label class=" control-label">Price<span class="required_span">*</span></label>
                      <input type="text" name="price" maxlength="255"  class="form-control" value="{{$product->price ?? old('price') }}" placeholder="Price" required>
                      @if ($errors->has('price'))
                      <span class="invalid-feedback text-danger" role="alert">
                        {{ $errors->first('price') }}
                      </span>
                      @endif

                    </div>
                  </div>
                </div>
                <div class="col-md-6">
                <div class="form-group">
                    <div class="col-sm-12">
                      <label class=" control-label">Url</label>
                      <input type="url" name="url" data-parsley-type="url" maxlength="255"  class="form-control" value="{{$product->url ?? old('url') }}" placeholder="Url">
                      @if ($errors->has('url'))
                      <span class="invalid-feedback text-danger" role="alert">
                        {{ $errors->first('url') }}
                      </span>
                      @endif

                    </div>
                  </div>
                </div>
              <!-- <div class="col-md-6">
                <div class="form-group">
                    <div class="col-sm-12">
                      <label class=" control-label">Stock levels<span class="required_span">*</span></label>
                      <input type="text" name="available_qty" maxlength="255"  class="form-control" value="{{$product->available_qty ?? old('available_qty') }}" placeholder="Stock levels" required>
                      @if ($errors->has('available_qty'))
                      <span class="invalid-feedback text-danger" role="alert">
                        {{ $errors->first('available_qty') }}
                      </span>
                      @endif

                    </div>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                      <div class="col-sm-12">
                        <label class="control-label">Notify when stock levels at:</label>
                        <input type="text" name="product_notify_at" maxlength="255"  class="form-control" value="{{$product->product_notify_at ?? old('product_notify_at') }}" placeholder="Notify when stock levels at">
                        @if ($errors->has('product_notify_at'))
                        <span class="invalid-feedback text-danger" role="alert">
                          {{ $errors->first('product_notify_at') }}
                        </span>
                        @endif
                      </div>
                    </div>
                </div> -->
            </div>

            <div class="row">


              <div class="col-md-6">
               <label class="control-label" >Product Weight</label>
                <input type="text" name="product_weight" maxlength="255"  class="form-control" value="{{@$product->product_weight ?? old('product_weight') }}" placeholder="Product Weight" required>
                      @if ($errors->has('product_weight'))
                      <span class="invalid-feedback text-danger" role="alert">
                        {{ $errors->first('product_weight') }}
                      </span>
                      @endif
              </div>


              <div class="col-md-6">
               <label class="control-label" for="file">Images</label>
               <input  type="file"  accept="image/jpeg, image/png, image/gif," id="file" name="file" {{-- multiple="multiple" name="files[]" --}} />
                @if ($errors->has('file'))
                <span class="invalid-feedback text-danger" role="alert">
                  {{ $errors->first('file') }}
                </span>
                @endif
              </div>

              <!-- <div class="col-md-6">
                <div class="form-group">
                  <label class="control-label">Images</label>
                  <div class="file-upload">
                    <div class="file-select">
                      <div class="file-select-button" id="fileName">Choose File</div>
                      <div class="file-select-name" id="noFile">No file chosen...</div>
                      <input type="file" name="file" id="chooseFile" accept="image/*">
                    </div>
                  </div>
                  @if ($errors->has('file'))
                    <span class="invalid-feedback text-danger" role="alert">
                      {{ $errors->first('file') }}
                    </span>
                  @endif
                </div>
              </div> -->
            </div>
            <div class="row">
              <div class="col-md-12">
                @forelse ($product->images as $image)
                  <a  class="parent-gallery-img" href="javascript:void(0)" {{--href="{{asset('storage/'.$image->file)}}" data-lightbox="Product Image" data-title="Product Image"--}}>
                    <input type="hidden" name="files_ids[]" value="{{$image->id}}" />
                    <img  class="lvc-logo-img thumbnail" style="border:none" width="100" src="{{asset('storage/'.$image->file)}}" >
                    <span class="remove-image text-danger"> X </span>
                  </a>
                @empty
                @endforelse
              </div>
            </div>
          </div>
          <div class="button-area">
              <button type="submit" class="btn btn-info ">Submit</button>
              <a href="{{route('product.index')}}" class="btn btn-default">Cancel</a>
          </div>
        </form>
      </div>
    </div>
  </div>
</section>

<script type="text/javascript">
  $('#create-product').parsley();
  $(document).ready(function() {
    $(document).on('click','.remove-image',function(event){
       event.stopPropagation();
       $(this).parent('a').remove();
    });
  });
</script>
@endsection