@extends('admin.layouts.app')
@push('contents')
    <div class="content-wrapper">
        <div class="container-fluid">
            <div class="row">
                <div class="col">
                    <h1>
                        @isset($news)
                            Haber Düzenle
                        @else
                            Haber Ekle
                        @endisset
                    </h1>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-body">
                            <form enctype="multipart/form-data"
                                  action="@isset($news){{ route('admin.news.update', $news->id) }}@else{{ route('admin.news.store') }}@endisset"
                                  method="post">
                                @csrf
                                @isset($news)
                                    <div class="form-group row">
                                        <div class="col-md-6">
                                            <img src="{{ asset($news->image) }}" alt="{{ $news->title }}" id="preview"
                                                 class="img-fluid">
                                        </div>
                                    </div>
                                @endisset
                                <div class="form-group row">
                                    <div class="col-md-6">
                                        <label for="title" class="col-sm-3 col-form-label">Resim</label>
                                        <div class="col-sm-9">
                                            <input type="file" class="form-control" id="image" name="image"
                                                   onchange="readURL(this);"
                                                   @isset($news)
                                                       @empty($news->image)
                                                           required
                                                @endempty
                                                @endisset>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <div class="col-md-6">
                                        <label for="title" class="col-sm-3 col-form-label">Başlık</label>
                                        <div class="col-sm-9">
                                            <input type="text" class="form-control" id="title" name="title"
                                                   value="@isset($news){{ $news->title }}@endisset" required>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <div class="col-md-6">
                                        <label for="content" class="col-sm-3 col-form-label">İçerik</label>
                                        <div class="col-sm-9">
                                            <textarea class="form-control" id="content" name="content" rows="5"
                                                      required>@isset($news){!! $news->content !!}@endisset</textarea>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <div class="col-md-6">
                                        <label for="save" class="col-sm-3 col-form-label"></label>
                                        <div class="col-sm-9">
                                            <button type="submit" class="btn btn-primary">Kaydet</button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endpush
@push('scripts')
    <script !src="">
        document.getElementById('image').addEventListener('change', function() {
            var file = this.files[0];
            if (file) {
                var img = new Image();
                img.src = URL.createObjectURL(file);
                img.onload = function() {
                    if (this.width != 315 && this.height != 150) {
                        document.getElementById('image').style.border = '3px solid red';
                        document.getElementById('image').value = '';
                        document.getElementById('image').insertAdjacentHTML('afterend', '<span style="color: red; font-size: 16px;">Resim boyutu 315x150 olmalıdır.</span>');
                    } else {
                        document.getElementById('image').style.border = 'none';
                        document.getElementById('image').nextElementSibling.remove();
                    }
                };
            }
        });
    </script>

    <script>
        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    $('#preview').attr('src', e.target.result);
                }
                reader.readAsDataURL(input.files[0]);
            } else {
                $('#preview').attr('src','@isset($journal){{ asset($news->image) }}@endisset')
            }
        }
    </script>
@endpush