@extends('layouts.admin.frame')

@section('header')
    @component('layouts.admin.header')
    Statikus tartalmak kezelése
    @slot('subtitle')
        {{ $item->name }}
    @endslot
    @endcomponent
@endsection

@section('content')

    <form action="{{ isset($item) ? route('contents.update', $item->id) : route('contents.store') }}" method="POST" id="users-form" novalidate class="aneeds-validation" enctype="multipart/form-data">
        @csrf
        
        @if (isset($item))
            @method('PUT')
            <input type="hidden" name="id" value="{{ $item->id }}" />
        @endif

        @component('layouts.admin.formErrors')@endcomponent

        <div class="card">
            <div class="card-body">
                
                <div class="row">
                    @if($item->has_pic)
                    <div class="col-12 col-sm-3">
                        <h4>Fotó</h4>
                        <div class="pic-container">                                                        
                            <img id="myImage" src="{{ asset( (isset($item) && is_file($item->imagefile())) ? $item->imagefile() : 'adm//nopic.jpg') }}" class="w-100" />
                        </div>
                        <input type="file" class="form-control" name="image" id="fileInput">
                    
                    </div>
                    @endif
                    <div class="col-12 col-sm">
                        <h4>Tartalom</h4>
                        <textarea class="form-control" name="content" id="content" rows="6">{{ isset($item) ? $item->content : '' }}</textarea>
                        @include('layouts.admin.editor', ['selector' => '#content'])        
                    </div>
                </div>

                
            
                <div class="text-center mt-3">
                    <button type="submit" class="btn btn-primary">Mentés</button>
                    <a href="{{ route('contents.index') }}" class="btn btn-secondary">Mégsem</a>
                </div>

            </div>
        </div>
    </form>

@endsection

@section('scripts')
    <script>
        function readURL(input){
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    $('#myImage').attr('src', e.target.result);
                }
                reader.readAsDataURL(input.files[0]);
            }
        }
        $("#fileInput").change(function(){
            readURL(this);
        });
    </script>
@endsection