@extends('layouts.app')
@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-10">
                <div class="card">
                    <div class="card-header">Dashboard - Add Article</div>
                    <div class="card-body">
                        @if (session('status'))
                            <div class="alert alert-success" role="alert">
                                {{ session('status') }}
                            </div>
                        @endif


                        <div class="panel">
                            <fieldset>
                                {!! Form::open(['route' => 'articles.store', 'class'=> 'form', 'files'=>'true', 'onsubmit'=>'process()']) !!}

                                @if(count($errors)>0 )
                                    <div class="alert alert-danger">
                                        There were some problems adding the article.<br />
                                        <ul>
                                            @foreach($errors->all() as $error)
                                                <li>{{$error}}</li>
                                            @endforeach
                                        </ul>

                                    </div>
                                @endif

                                @if (session()->has('message'))
                                    <div class="alert alert-dismissable alert-success">
                                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                        <strong>
                                            {!! session()->get('message') !!}
                                        </strong>
                                    </div>
                                @endif

                                    <div class="form-group ">
                                        {!! Form::label('Article Title', 'Article Title') !!}
                                        {!! Form::text('articletitle', null, ['class'=> 'form-control', 'placeholder'=> 'Enter Article Title', 'required']) !!}
                                        <small id="emailHelp" class="form-text text-muted">Enter a title for article</small>
                                    </div>

                                <div class="row">

                                    <div class="form-group col-md-6">
                                        {!! Form::label('Article Category', 'Article Category') !!}
                                        <select class="form-control" name="articlecategory">
                                            <option value="news" selected>news</option>
                                            <option value="promotion">promotion</option>
                                            <option value="announcements">announcement</option>
                                        </select>
                                        <small id="emailHelp" class="form-text text-muted">The category to which article belongs to</small>
                                    </div>

                                    <div class="form-group col-md-6">
                                        {!! Form::label('Article Status', 'Publish Article ?') !!}
                                        <select class="form-control" name="articlestatus">
                                            <option value="1" selected>Yes</option>
                                            <option value="0">No</option>
                                        </select>
                                        <small id="emailHelp" class="form-text text-muted">If yes, article will be displayed on homepage immedeately</small>
                                    </div>
                                </div>

                                <div class="row">

                                    <div class="form-group col-md-6">
                                        {!! Form::label('Article Location', 'Article Location') !!}
                                        {!! Form::text('articlelocation', null, ['class'=> 'form-control', 'placeholder'=> 'Enter Article Location', 'required']) !!}
                                        <small id="emailHelp" class="form-text text-muted">Enter a location for this article</small>
                                    </div>

                                    <div class="form-group col-md-6">
                                        {!! Form::label('Article Photo', 'Article Photo') !!}
                                        {!! Form::file('articlephoto', ['class'=>'form-control','required']) !!}
                                        <small id="emailHelp" class="form-text text-muted">Choose a photo for the article - Best size : 1772px by 1181px</small>
                                    </div>
                                </div>

                                <div class="form-group">
                                    {!! Form::label('Article Description', 'Article Description') !!}
                                    {!! Form::textarea('articledetails', null, ['id' => 'articlecontent','class'=> 'form-control', 'placeholder'=> 'Enter the article content here', 'required']) !!}
                                    <small id="emailHelp" class="form-text text-muted">Enter the contents of article here</small>
                                </div>

                                {{--add article location--}}

                                <button type="submit" class="btn btn-primary">Submit</button>
                              

                            </fieldset>
                            {!! Form::close() !!}
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        function process(){
             $('#articlecontent').val($('#articlecontent').val().replace(/(\r\n|\n)/g,"</br>"));
        }
    </script>
@endsection