@extends('dashboard.layouts.main')

@section('container')
    <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
        <h1 class="h2">Produk Olahan</h1>
    </div>

    <div class="col-lg-8">
        <form method="post" action="{{ url('') }}/produkOlahans" class="mb-5" enctype="multipart/form-data">
            @csrf
            <div class="mb-3">
                <label for="nm_barang" class="form-label">Nama Barang</label>
                <input type="text" class="form-control @error('nm_barang') is-invalid @enderror" id="nm_barang" name="nm_barang" required autofocus value="{{ old('nm_barang') }}">
                @error('nm_barang')
                    <div class="invalid-feedback">
                        {{ $message }}
                    </div>
                @enderror
            </div>
            <div class="mb-3">
                <label for="harga" class="form-label">Harga</label>
                <input type="number" class="form-control @error('harga') is-invalid @enderror" id="harga" name="harga" required autofocus value="{{ old('harga') }}">
                @error('harga')
                    <div class="invalid-feedback">
                        {{ $message }}
                    </div>
                @enderror
            </div>
            <div class="mb-3">
                <label for="jml" class="form-label">Jumlah</label>
                <input type="number" class="form-control @error('jml') is-invalid @enderror" id="jml" name="jml" required autofocus value="{{ old('jml') }}">
                @error('jml')
                    <div class="invalid-feedback">
                        {{ $message }}
                    </div>
                @enderror
            </div>
            <div class="mb-3">
                <label for="ket" class="form-label">Deskripsi</label>
                @error('ket')                   
                        <p class="text-danger">{{ $message }}</p>                   
                @enderror
                <input id="ket" type="hidden" name="ket" value="{{ old('ket') }}">
                <trix-editor input="ket"></trix-editor>
            </div>
            <div class="mb-3">
                <label for="gambar" class="form-label">Foto (Width:540px x Height:405px, maks. 2MB)</label>
                <img class="img-preview img- mb-3 col-sm-5">
                <input class="form-control @error('gambar') is-invalid @enderror" type="file" id="gambar" name="gambar" onchange="previewImage()">
                @error('gambar')
                    <div class="invalid-feedback">
                        {{ $message }}
                    </div>
                @enderror
            </div>

            
            <button type="submit" class="btn btn-primary">Simpan</button>
        </form>
    </div>

     <script>

        //   mematikan tombol upload file di trix editor 
        document.addEventListener('trix-file-accept', function(e) {
            e.preventDefault();
        });

        function previewImage() {
            const image = document.querySelector('#gambar');
            const imgPreview = document.querySelector('.img-preview');

            imgPreview.style.display = 'block';

            const oFReader = new FileReader();
            oFReader.readAsDataURL(image.files[0]);

            oFReader.onload = function(oFREvent) {
                imgPreview.src = oFREvent.target.result;
            }
        }

    </script>
@endsection