@extends('layout')

@section('dashboard-content')

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

    <div style="margin-top: 20px; margin-bottom: 20px;">
      <h3 class="" style="display: inline-block; width: 200px;">Product Form</h3>
      <a href="{{ URL::to('products') }}" class="btn btn-primary" style="float:right; color: white; background-color: #9900CE; border-radius: 5px;
            padding: 10px; ">View Products</a>
    </div>

    @if(Session::get('success'))
    <div class="alert alert-success alert-dismissible fade show" role="alert" id="gone">
      <strong> {{ Session::get('success') }} </strong>
      <!-- <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button> -->
    </div>
    @endif

    @if(Session::get('failed'))
    <div class="alert alert-warning alert-dismissible fade show" role="alert" id="gone">
      <strong> {{ Session::get('failed') }} </strong>
      <!-- <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button> -->
    </div>
    @endif


    <form action="{{URL::to('add-product')}}" class="row g-3" method='post' enctype="multipart/form-data" id="dataform">
      @csrf


      <div class="form-group">
        <label for="exampleInputEmail1" class="form-label">Product Name*</label>
        <input type="text" class="form-control" id="id_amount" aria-describedby="emailHelp" placeholder="Enter Product Name" name="product" required>
      </div>

      <div class="form-group">
        <label for="exampleInputEmail1" class="form-label">Category Name*</label>
        <select class="drop-down related-post form-control select_department" name="category" id="select_department">
          <option value="">--Select Category--</option>
          @foreach($categories as $category)
          <option value="{{ $category->id}}"> {{ $category->category_name}}</option>
          @endforeach
        </select>
        <!-- <input type="text" class="form-control" id="id_amount" aria-describedby="emailHelp" placeholder="Enter Product Name" name="category" required> -->
      </div>


      <div class="form-group">
        <label for="exampleInputEmail1" class="form-label">Quantity/Tonne*</label>
        <input type="text" class="form-control" id="id_amount" aria-describedby="emailHelp" placeholder="Enter Quantity/Tonne" name="quantity" required>
      </div>

      <div class="form-group">
        <label for="exampleInputEmail1"> Description </label>
        <textarea id="editor1" name="description"></textarea>
      </div>

      <div class="form-group">
        <label for="exampleInputEmail1" class="form-label">Image</label>
        <input type="file" class="form-control" placeholder="Insert subject icon" name="image" onchange="loadPhoto(event)">
      </div>

      <div>

        <img id="photo" style="width: 100px; height: 100px; border-radius: 10px;  padding: 1px;" />

      </div>




      <div class="form-group" style="text-align: center;">
      <button type="submit" style="margin: auto; color: white; background-color: #9900CE; border-radius: 5px;
            padding: 10px; " id="btnsubmit">Save Product</button>
      </div>
    </form>
    <br><br>


  </div>
</div>


<script>
  function loadPhoto(event) {
    var reader = new FileReader();

    reader.onload = function() {

      var output = document.getElementById('photo');
      output.src = reader.result;
    };
    reader.readAsDataURL(event.target.files[0]);

  }
</script>

@stop