@extends('admin.layout')
@section('admin_container')



    <section class="content">
        <div class="container-fluid">

            @if(session()->has('message.level'))
                <div class="alert alert-{{ session('message.level') }}">
                    {!! session('message.content') !!}
                </div>
            @endif



            @if(count($errors)>0)
                @foreach($errors->all() as $error)
                    <p class="alert alert-danger">{{$error}}</p>
                @endforeach
            @endif


            <form action="/create_new_article" method="post" >

                {{csrf_field()}}

                <input type="hidden" name="article_id" value="{{$next_id}}">

                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <div class="card">
                        <div class="body">

                            <h2 class="card-inside-title">Complete Article Details</h2>
                            <div class="row ">
                                <div class="col-sm-12">
                                    <div class="form-group">
                                        <div class="form-line">
                                            <label>Article Name</label>
                                            <input type="text" class="form-control" name="article_name"  placeholder="Article Name" required/>
                                        </div>
                                    </div>
                                </div>
                            </div>


                            <div class="row ">
                                <div class="col-sm-12">
                                    <label>Author Name</label>
                                    <select class="form-control" name="author_id">
                                        <option value="" style="text-align: center;">-- Please select Author Name --</option>

                                        @foreach($authors as $author)
                                            <option value="{{$author->id}}">{{$author->author_name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <h3 style="text-align: center;">Or</h3>


                            <div class="row ">
                                <div class="col-sm-12">
                                    <div class="form-group" >
                                        <div class="form-line">
                                            <label>Author Name (If Not In the list) </label>
                                            <input type="text" class="form-control" name="author_name"  placeholder="Author Name If Not In the list" />
                                        </div>
                                    </div>
                                </div>
                            </div>



                            <div class="row ">
                                <div class="col-sm-12">
                                    <div class="form-group" >
                                        <div class="form-line">
                                            <label>Publishing Date </label>
                                            <input type="text" class="form-control" name="published_date"  placeholder="Publishing Date" />
                                        </div>
                                    </div>
                                </div>
                            </div>


                            <div class="row ">
                                <div class="col-sm-12">
                                    <div class="form-group">
                                        <div class="form-line">
                                            <label>Short Description </label>
                                            <textarea name="description" cols="30" rows="5" placeholder="Short Description" class="form-control no-resize" required></textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>


                            <div class="row ">
                                <div class="col-sm-12">
                                    <label>Category</label>
                                    <select class="form-control show-tick" id="catagory1" name="catagory">
                                        <option value="" style="text-align: center;">-- Please select category --</option>
                                        @foreach($catagories as $catagory)
                                            <option value="{{$catagory->id}}">{{$catagory->catagory_name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>



                            <div class="row ">
                                <div class="col-sm-12">
                                    <label>Sub Category</label>
                                    <select name="sub_catagory" id="sub_catagory1" class="form-control show-tick">
                                        <option value="" style="text-align: center;">-- Please select sub category --</option>
                                    </select>
                                </div>
                            </div>


                            <div class="row ">
                                <div class="col-sm-12">
                                    <div class="form-group">
                                        <div class="form-line">
                                            <label>Article </label>
                                            <textarea name="article" cols="30" rows="5" placeholder="Article" class="form-control no-resize" required></textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>


                            <div class="row ">
                                <div class="col-sm-12">
                                    <label>Tags</label>
                                    <select name="tags[]" class="mdb-select md-form form-control" multiple >
                                        <option value="">Tags</option>
                                        {{--@include('country')--}}
                                        @foreach($tags as $tag)
                                            <option value="{{$tag['id']}}">{{$tag['catagory_name']}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>


                            <div class="row">
                                <div class="col-sm-4">
                                    <input type="submit" name="submit" class="btn btn-primary" value="Submit" />
                                </div>
                            </div>

                        </div>


                    </div>
                </div>

            </form>


        </div>
    </section>



    <script type="text/javascript">

        $(document).ready(function() {
            $('#catagory1').on('change', function () {
                var catagoryID = $(this).val();

                console.log(catagoryID);
                if (catagoryID) {
                    $.ajax({
                        type: 'GET',
                        url: 'get_sub_catagories/'+catagoryID,
                        success: function (html) {
                            console.log(html);
                            $('#sub_catagory1').html(html);
                            $("#sub_catagory1").html(html).selectpicker('refresh');
                        }
                    });
                } else {
                    $('#sub_catagory').html('<option value="">Select Sub Catagory</option>');
                }
            });
        });

    </script>



@endsection