@extends('layouts.app')
@section('content')
<link href="{{asset('packages/iconpicker/dist/css/fontawesome-iconpicker.min.css')}}" rel="stylesheet">
<style>
	label{
		font-weight: bold !important;
	}
	span.required{
		color:red;
	}
    div.popover{
        width:100% !important;
    }
</style>
<!-- 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">Features</span>
    <h3 class="page-title">{{isset($edit)? 'Edit': 'Add New'}}</h3>
    </div>
</div>
<!-- End Page Header -->
<form class="add-new-post" action="{{isset($edit)?route('feature.update', $edit):route('feature.store')}}" method="post">
    <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($edit))
                    <input type="hidden" name="id" value="{{$edit->id}}" />
                    @endif
                    <div class="container">
                        <div class="row">
                            <div class="col-6">

                                <label for="title">Title <span class="required">*</span></label>
                            <input class="form-control form-control-lg mb-2 {{ $errors->first('title') ? 'is-invalid' : ''}}" id="title" type="text" name="title" value="{{old('title')?old('title'):(isset($edit)?$edit->title:'')}}" placeholder="Your Page Title">
                                @if($errors->first('title'))
                                <div class="text text-danger">
                                    ** {{$errors->first('title')}}
                                </div>
                                @endif
                            </div>
                            <div class="col-6">
                                <label class=""> Icon <span class="required">*</span>
                                </label>
                                <br>
                                {{-- <input class="form-control form-control-lg mb-3 icp" name="icon" value="fab fa-facebook" type="text" /> --}}
                                <input type="hidden" id="icon" name="icon" class="icp" value="{{ isset($edit) ? $edit->icon : ''}}"/>
                                <div class="btn-group form-control p-0  mb-2 {{ $errors->first('icon') ? 'is-invalid': '' }}">
                                    {{-- <input type="text" class="icp demo " /> --}}
                                    <button data-selected="graduation-cap" type="button" class="demo btn dropdown-toggle iconpicker-component" style="width:100%;" data-toggle="dropdown" >
                                        <span style="font-size: 20px;">
                                            Select Icon
                                            <i id="icon" class="fa fa-fw"></i>
                                        </span>
                                        <span class="caret"></span>
                                    </button>
                                    <div class="dropdown-menu w-100"></div>
                                </div>
                                @if($errors->first('icon'))
                                <div class="text text-danger">
                                    ** {{$errors->first('icon')}}
                                </div>
                                @endif
                            </div>
                        </div>
                        <br>
                        <div class=" col-md-12 col-sm-12 p-0 pl-3">
                            <label>Description <span class="required">*</span> </label>
                            <textarea class="content {{$errors->first('description')? 'wrong' : ''}}" id="mytextarea" name="description">{!! isset($edit)?$edit->description:(old('description') ?? '') !!}</textarea>
                            @if($errors->first('description'))
                                <div class="text text-danger">
                                    ** {{$errors->first('description')}}
                                </div>
                            @endif
                        </div>
                    </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($edit))
                        <span class="d-flex mb-2">
                            <i class="material-icons mr-1">flag</i>
                            <strong class="mr-1">Status:</strong> {{$edit->status}}
                        </span>
                        @endif
                        <span class="d-flex">
                            <i class="material-icons mr-1">score</i>
                            <strong class="mr-1">Preview:</strong>
                            <strong class="text-warning">@if(isset($edit) && $edit->status=='Saved')<a target='_blank' href="{{url('/').'/'.$edit->slug.'/'.$edit->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($edit))
                        <button id="update" class="btn btn-sm btn-accent ml-auto" name="status" value="save">
                            <i class="material-icons">file_copy</i> {{$edit->status=='Saved'?'Update':'Save'}}
                        </button>
                        @else
                        <button 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>
</form>
<script src="{{asset('packages/iconpicker/dist/js/fontawesome-iconpicker.js')}}"></script>
<script type="text/javascript">
var icon = "{{ isset($edit) ? $edit->icon : ''}}";
// console.log(defaultValue)
        $('.demo').iconpicker({
            title: 'Social Media Icons',
            selected: icon,
        });
        $('.iconpicker-items a').on('click',function(){
            $('#icon').val(this.children[0].className)
        })

	</script>

@endsection