@error('title')
<strong>{!! $errors->first('title', ':message') !!}</strong>
<script>
    $(document).ready(function () {
        $('#postaMeme').modal('show');
    });
</script>
@enderror
<div class="modal fade" id="postaMeme" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content main-theme-color">
            <div>
                <a type="button" class="close clr-wht float-right m-r-10" data-dismiss="modal">&times;</a>
            </div>
            <div id="beforeTitle">
                <h1 class="clr-wht m-l-20">Post a meme</h1>
                <small class="m-l-20 clr-wht">Choose how you want to upload your meme</small>
            </div>
            <div id="afterTitle">
                <h1 class="clr-wht m-l-20">Enter the details</h1>
                <small class="m-l-20 clr-wht">Give an accurate description of your post.
                </small>
            </div>

            <div class="m-t-20">
                <form method="post" action="{{route('MemeStore')}}" enctype="multipart/form-data">
                    @csrf
                    <div id="beforePostMeme">
                        <div class="form-group files color m-30">
                            <input type="file" class="form-control memeImage" name="img" id="file" style="opacity: 0.25;"
                                   accept="image/x-png,image/gif,image/jpeg">
                        </div>
                        <div class="row m-l-0">
                            <div class="card m-30 upload-meme w-37" id="uploadURl">
                                <div>
                                    <img src="{{asset('images/img.png')}}" class="img-fluid upload-img-modal" width="40px">
                                </div>
                                <div>
                                    <h6 class="clr-wht text-center m-t-10">Upload from URL</h6>
                                </div>
                            </div>

                            <div class="card m-30 upload-meme w-37">
                                <div>
                                    <img class="img-fluid upload-img-modal" src="{{asset('images/memeicon.png')}}"
                                         width="40px">
                                </div>
                                <div>
                                    <h6 class="clr-wht text-center m-t-10">Create a meme</h6>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div id="afterPostMeme">
                        <div class="form-group color m-20">
                            <img id="myImg" src="" alt="" class="img-fluid"/>
                            <p id="img-err" class="text-red"></p>
                        </div>

                        <div class="m-20">
                            <div class="form-group">
                                <label class="control-label clr-wht">Title</label>
                                <input type="text" class="form-control" name="title"
                                       placeholder="e.g. it really do be like that" maxlength="50" required/>
                            </div>
                            <div class="form-group">
                                <label class="control-label clr-wht">Tags</label><br>
                                <input id="tags" class="form-control" data-role="tagsinput" type="text" name="tags" placeholder="tags 1 , tags 2 , tags 3" required>
                            </div>
                            <div class="form-group">
                                <label for="multiple" class="control-label clr-wht">Categories</label><br>
                                <select name="category" data-placeholder="Choose a Category..." class="form-control"
                                        required>
                                    <option value=""></option>
                                    @foreach(@categoryForMemeDetails() as $cat)
                                        <option value="{{$cat->id}}">{{$cat->name}}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="form-group">
                                <button type="submit" class="btn btn-primary btn-width navbar-bg next m-b-20 m-l-10" name="submitPost">
                                    Post
                                </button>
                                <button type="button" href="javascript:void(0)" class='btn btn-primary btn-width navbar-bg next m-b-20 GetMasterMeme'>Back
                                </button>
                            </div>
                        </div>
                    </div>

                </form>
                <form method="post" action="{{route('MemeStore')}}" enctype="multipart/form-data">
                    @csrf
                    <div id="UrlContent">
                        <div>
                            <h1 class="clr-wht m-l-20">Upload from URL</h1>
                            <small class="m-l-20 clr-wht">Type or paste the image URL, PNG, GIF, JPEG allowed .</small>
                        </div>
                        <div class="m-20">
                            <h6 class="clr-wht">Image URL</h6>
                            <div class="form-group">
                                <input type="text" class="form-control" id="imglink" pattern="https?://.+" name="imgUrl"
                                       placeholder="https://" required/>
                            </div>
                            <span class="validUrlMsg text-red">Please enter valid url !</span>

                            <div class="form-group">
                                <img id="ImgURL" src="" alt="" class="img-fluid"/>
                            </div>
                            <p id="img-err" class="text-red"></p>
                        </div>
                        <div class="m-20">
                            <div class="form-group">
                                <label class="control-label clr-wht">Title</label>
                                <input type="text" class="form-control" name="title"
                                       placeholder="e.g. it really do be like that" maxlength="50" required/>
                            </div>
                            <div class="form-group">
                                <label for="multiple" class="control-label clr-wht">Tags</label><br>
                                <input id="tags" class="form-control" data-role="tagsinput" type="text" required name="tags" placeholder="tags 1 , tags 2 , tags 3">
                            </div>
                            <div class="form-group">
                                <label for="multiple" class="control-label clr-wht">Categories</label><br>
                                <select name="category" data-placeholder="Choose a Category..." class="form-control"
                                        required>
                                    <option value=""></option>
                                    @foreach(@categoryForMemeDetails() as $cat)
                                        <option value="{{$cat->id}}">{{$cat->name}}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="form-group">
                                <button type="submit" class="btn btn-primary btn-width navbar-bg next m-l-10 m-b-20"
                                        name="submitPost">Post
                                </button>
                                <button type="button" href="javascript:void(0)"
                                        class='btn btn-primary btn-width navbar-bg next m-b-20 GetMasterMeme'>Back
                                </button>

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

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