@extends('admin.layouts.dashboard')
@section('title','Buat Berita')
@section('content')
<form action="{{route('berita.store')}}" method="POST" enctype="multipart/form-data">
    @csrf
    <div class="row">
        <div class="col-lg-8 col-md-12 col-sm-12">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <a href="{{route('berita.index')}}" class="btn btn-warning"><i class="fa fa-arrow-left" aria-hidden="true"></i> Back</a>
                </div>
                <div class="card-body">
                    <div class="d-flex flex-column mb-8 fv-row">
                        <!--begin::Label-->
                        <label class="d-flex align-items-center fs-6 fw-bold mb-2">
                            <span class="required">Judul Berita</span>
                            <i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip" title="Isi Judul Berita"></i>
                        </label>
                        <!--end::Label-->
                        <input type="text" class="form-control form-control-solid @error('judul') is-invalid @enderror" placeholder="Masukkan Judul Berita" name="judul" required />
                        @error('judul')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label>Isi Berita</label>
                        <textarea class="form-control @error('isiberita') is-invalid @enderror" name="isiberita" id="isiberita"></textarea>
                        @error('isiberita')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                        @enderror
                    </div>
                    <div class="text-right mt-5">
                        <button type="reset" class="btn btn-sm btn-danger">Reset</button>
                    </div>

                </div>


            </div>
        </div>
        <div class="col-lg-4 col-md-12 col-sm-12">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    Publish
                </div>
                <div class="card-body">
                    <div class="text-center">
                        <button name="draft" value="N" class="btn btn-sm btn-info btn-block">Draft</button>
                        <button name="publish" value="Y" class="btn btn-sm btn-primary btn-block">Publish</button>
                    </div>

                </div>
            </div>

            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    Status
                </div>
                <div class="card-body">
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" name="headline" type="checkbox" id="inlineCheckbox1" value="Y">
                        <label class="form-check-label" for="inlineCheckbox1">Headline</label>
                    </div>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" name="aktif" type="checkbox" id="inlineCheckbox2" value="Y">
                        <label class="form-check-label" for="inlineCheckbox2">Aktif</label>
                    </div>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" name="utama" type="checkbox" id="inlineCheckbox2" value="Y">
                        <label class="form-check-label" for="inlineCheckbox2">Utama</label>
                    </div>

                </div>
            </div>

            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    Kategori
                </div>
                <div class="card-body">
                    <div class="form-group">
                        <select class="form-control @error('id_category') is-invalid @enderror" name="id_kategori">
                            <option value="" holder>-Pilih Kategori-</option>
                            @foreach($categories as $category)
                            <option value="{{$category->id_kategori}}">{{$category->nama_kategori}}</option>
                            @endforeach
                        </select>
                        @error('id_category')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                        @enderror
                    </div>

                </div>
            </div>

            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    Tag
                </div>
                <div class="card-body">
                    <div class="form-group">
                        <select class="form-control @error('id_tag') is-invalid @enderror" name="id_tag">
                            <option value="" holder>-Pilih Tag-</option>
                            @foreach($tags as $tag)
                            <option value="{{$tag->nama_tag}}">{{$tag->nama_tag}}</option>
                            @endforeach
                        </select>
                        @error('id_tag')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                        @enderror
                    </div>

                </div>
            </div>

            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    Image
                </div>
                <div class="card-body">
                    <div class="form-group">
                        <img src="{{asset('assets_panel/image/no-image.jpg')}}" id="preview" alt="" class="img-fluid mb-2" width="300px">
                        <input type="file" class="form-control @error('image') is-invalid @enderror" id="image" name="image">
                        @error('image')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                        @enderror
                    </div>
                </div>
            </div>
        </div>

    </div>
</form>

@endsection

@section('js')
<script>
    $(document).ready(function() {
        CKEDITOR.replace('isiberita');


    });

    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function(e) {
                $('#preview').attr('src', e.target.result);
                $('#preview').show();
            }

            reader.readAsDataURL(input.files[0]);
        }
    }

    $("#image").change(function() {
        readURL(this);
    });
</script>
@endsection