@extends('pwa.template.app.main')

@section('script')
  <script>
    $('.dropify').dropify({
      tpl: {
        message: '<div class="dropify-message"><span class="file-icon" /></div>',
      }
    });
  </script>
  <script>
    tinymce.init({
      selector: 'textarea#myeditorinstance', // Replace this CSS selector to match the placeholder element for TinyMCE
      plugins: 'code table lists',
      toolbar: 'undo redo | blocks | bold italic | alignleft aligncenter alignright | indent outdent | bullist numlist | code | table'
    });
  </script>
@endsection
@section('app-content')
  <div class="container py-3">
    <form class="card px-3 py-4" method="POST" action="{{ route('buat-produk.create') }}" enctype="multipart/form-data">
      @csrf
      <h5 class="mb-4">Tambah Produk Baru</h5>
      <div class="mb-3">
        <label for="foto" class="form-label">Foto Produk</label>
        <input type="file" class="dropify" data-height="200" data-allowed-file-extensions="pdf png jpg jpeg" required
          name="foto" />
      </div>
      <div class="mb-3">
        <label for="nama" class="form-label">Nama Produk</label>
        <input type="text" class="form-control" name="nama" required id="nama"
          placeholder="Masukkan Nama Produk">
      </div>
      <div class="mb-3">
        <label for="harga" class="form-label">Harga</label>
        <input type="text" class="form-control" name="harga" required id="harga" placeholder="Example: 50000">
      </div>
      <div class="mb-3">
        <label for="satuan" class="form-label">Satuan</label>
        <select class="form-select" aria-label="Default select example" name="satuan" id="">
          <option selected disabled>Pilih Satuan</option>
          <option value="pcs">Pcs</option>
          <option value="pck">Pack</option>
        </select>
      </div>
      <div class="mb-3">
        <label for="stok" class="form-label">Stok</label>
        <input type="number" class="form-control" name="stok" required id="stok"
          placeholder="Masukkan Jumlah Stok">
      </div>
      <div class="mb-4">
        <label for="deskripsi" class="form-label">Deskripsi Produk</label>
        {{-- <textarea class="form-control" placeholder="Jelaskan Produk Anda Disini" id="floatingTextarea" name="deskripsi"
          style="height: 120px"></textarea> --}}
        <textarea id="myeditorinstance" class="form-control" placeholder="Jelaskan Produk Anda" name="deskripsi"></textarea>
      </div>
      <button type="submit" class="btn btn-primary">Simpan Produk</button>
    </form>
  </div>
@endsection