@extends('layouts.admin.frame')

@section('header')
    @component('layouts.admin.header')
        Főoldali animáció
    @slot('subtitle')
        
    @endslot
    @slot('menu_function')
        
    @endslot
    @endcomponent
@endsection

@section('content')
    
    <div class="card">
        <div class="card-header">
            {{ isset($item) ? 'Kép módosítása' : 'Új kép feltöltése' }}
        </div>
        <div class="card-body">
            
            <form action="{{ isset($item) ? route('slider.update', $item->id) : route('slider.store') }}" method="POST" enctype="multipart/form-data">
                <input type="hidden" name="is_video" value="0" />
                @csrf

                @if (isset($item))
                    @method('PUT')    
                @endif
                
                        <div class="form-group">
                            <label for="title">Megnevezés</label>
                            <input class="form-control" name="name" value="{{ isset($item) ? $item->name : '' }}" />
                        </div>
                                                
                        <div class="form-group d-none">
                            <label for="title">Link</label>
                            <input class="form-control" name="link" value="{{ isset($item) ? $item->link : '' }}" />
                        </div>

                        <div class="form-group">
                            <label for="title">Kép (1920x800)</label>
                            <div class="pic-container">                                                        
                                <img id="myImage" src="{{ asset( (isset($item) && is_file($item->imagefile())) ? $item->imagefile() : 'adm//nopic.jpg') }}" height="200" />
                            </div>
                            <input type="file" class="form-control" name="image" id="fileInput">
                        </div>
                                    
                <div class="text-center mt-4">
                    <button type="submit" class="btn btn-primary">Mentés</button>
                    <a href="{{ route('slider.index') }}" class="btn btn-secondary">Mégsem</a>
                </div>
                @component('layouts.admin.formErrors')@endcomponent
                
            </form>
        </div>
    </div>
    
    

@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