@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">{{ __('Submit Meme') }}</div>
                <div class="card-body">
                    <form method="POST" action="{{ route('meme-create') }}" enctype="multipart/form-data">
                        @csrf
                        <div class="form-row">
                            <div class="form-group w-100">
                                <label>Meme Title</label>
                                <input type="text" name="title" class="form-control" required>
                            </div>
                            <div class="form-group w-100">
                                <label>Meme Caption (Optional)</label>
                                <input type="text" name="caption" class="form-control">
                            </div>
                            <div class="form-group w-100">
                                <label>Upload (JPEG, JPG, PNG, GIF)</label>
                                <div class="input-group mb-3">
                                    <div class="custom-file">
                                        <input type="file" name="image" class="custom-file-input" id="inputGroupFile02">
                                        <label class="custom-file-label" for="inputGroupFile02" aria-describedby="inputGroupFileAddon02">Choose file</label>
                                    </div>
                                </div>
                                <script type="text/javascript">
                                document.querySelector('.custom-file-input').addEventListener('change',function(e){
                                  var fileName = document.getElementById("inputGroupFile02").files[0].name;
                                  var nextSibling = e.target.nextElementSibling
                                  nextSibling.innerText = fileName
                                })
                                </script>
                            </div>
                        </div>
                        <button type="submit" class="btn btn-primary btn-lg w-100">Submit Meme</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection