@extends('Backend.layouts.app')
@section('content')
    <!-- Page Header -->
    <div class="page-header row no-gutters py-4">
        <div class="col-12 col-sm-4 text-center text-sm-left mb-0">
            <span class="text-uppercase page-subtitle">Information Pages</span>
            <h3 class="page-title">Add New Timeline</h3>
        </div>
    </div>
    <!-- End Page Header -->
    <form class="add-new-post" action="{{isset($timeline)?route('timeline.update', $timeline->id):route('timeline.store')}}" method="post" enctype="multipart/form-data">
        <div class="row">
            <div class="col-lg-9 col-md-12">
                <!-- Add New Post Form -->
                <div class="card card-small mb-3">
                    <div class="card-body">
                        @csrf
                        @if(isset($timeline))
                            @method('PATCH')
                        @endif
                        <div class="row col-md-12 mb-5">
                            <div class="col-md-4">
                                <label>Cover Image<span class="required">*</span></label>
                            </div>
                            <div class="col-md-7 card p-3">
                                <img class="{{isset($timeline)?'d-block':'d-none'}} m-auto" id="cover_image" src="{{isset($timeline) ? $timeline->media[0]->getFullUrl() :''}}" width="150px" height="150px"/>
                                <input class="form-control mt-2" type="file" id="mediaFile" name="cover_image"/>
                                @if($errors->first('image'))
                                    <div class="text text-danger">
                                        * {{$errors->first('image')}}
                                    </div>
                                @endif
                            </div>
                        </div>

                        <input type="hidden" name="status" id="status" />
                        <div class="row col-md-12 col-sm-12 p-0 pl-3">
                            <label>Date <span class="required">*</span> </label>
                            <input class="form-control form-control-lg mb-3" id="date" type="date" name="date" value="{{old('date')?old('date'):(isset($timeline)?$timeline->date:'')}}" placeholder="Your Page Title">
                            @if($errors->first('date'))
                                <div class="alert alert-danger">
                                    {{$errors->first('date')}}
                                </div>
                            @endif
                        </div>
                        <div class="row col-md-12 col-sm-12 p-0 pl-3">
                            <label>Title <span class="required">*</span> </label>
                            <input class="form-control form-control-lg mb-3" id="title" type="text" name="title" value="{{old('title')?old('title'):(isset($timeline)?$timeline->title:'')}}" placeholder="Your Page Title">
                            @if($errors->first('title'))
                                <div class="alert alert-danger">
                                    {{$errors->first('title')}}
                                </div>
                            @endif
                        </div>
                        <div class="row col-md-12 col-sm-12 p-0 pl-3">
                            <label>Redirect Link <span class="required">*</span> </label>
                            <input class="form-control form-control-lg mb-3" id="redirect_link" type="text" name="redirect_link" value="{{old('redirect_link')?old('redirect_link'):(isset($timeline)?$timeline->redirect_link:'')}}" placeholder="Redirect Link">
                            @if($errors->first('redirect_link'))
                                <div class="alert alert-danger">
                                    {{$errors->first('redirect_link')}}
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
                <!-- / Add New Post Form -->
            </div>
            <div class="col-lg-3 col-md-12">
                <!-- Post Overview -->
                <div class='card card-small mb-3'>
                    <div class="card-header border-bottom">
                        <h6 class="m-0">Actions</h6>
                    </div>
                    <div class='card-body p-0'>
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item p-3">
                                @if(isset($timeline))
                                    <span class="d-flex mb-2">
							<i class="material-icons mr-1">flag</i>
							<strong class="mr-1">Status:</strong> {{$timeline->status}}
                                    <!-- <a class="ml-auto" href="#">Edit</a> -->
						</span>
                            @endif
                            <!-- <span class="d-flex mb-2">
	              <i class="material-icons mr-1">visibility</i>
	              <strong class="mr-1">Visibility:</strong>
	              <strong class="text-success">Public</strong>
	              <a class="ml-auto" href="#">Edit</a>
	            </span>
	            <span class="d-flex mb-2">
	              <i class="material-icons mr-1">calendar_today</i>
	              <strong class="mr-1">Schedule:</strong> Now
	              <a class="ml-auto" href="#">Edit</a>
	            </span> -->
                                <span class="d-flex">
							<i class="material-icons mr-1">score</i>
							<strong class="mr-1">Preview:</strong>
							<strong class="text-warning">@if(isset($timeline) && $timeline->status=='Saved')<a target='_blank' href="{{url('/').'/'.$timeline->slug.'/'.$timeline->url}}"><i class='fa fa-eye'></i> Click</a>@else No @endif</strong>
						</span>
                            </li>
                            <li class="list-group-item d-flex px-3">
                                @if(isset($timeline))
                                    <button type="submit" id="update" class="btn btn-sm btn-accent ml-auto" name="status" value="save">
                                        <i class="material-icons">file_copy</i> {{$timeline->status=='Saved'?'Update':'Save'}}
                                    </button>
                                @else
                                    <button type="submit" id="draft" class="btn btn-sm btn-outline-accent" name="status" value="draft">
                                        <i class="material-icons">save</i> Save Draft
                                    </button>
                                    <button type="submit" id="save" class="btn btn-sm btn-accent ml-auto"  name="status" value="save">
                                        <i class="material-icons">file_copy</i> Publish
                                    </button>
                                @endif
                            </li>
                        </ul>
                    </div>
                </div>
                <!-- / Post Overview -->
            </div>
        </div>
    </form>
    <script type="text/javascript">
        $('#mediaFile').on('change',function(){
            $('#cover_image').removeClass('d-none').addClass('d-block');
            $('#cover_image').attr('src',window.URL.createObjectURL(this.files[0]));
        });
    </script>
@endsection