@extends('main.layouts.app')
@section('content')
{{-- @include('ckfinder::setup') --}}


<style>
    #og_image{
        height: 48px;
    }

    #banner_image{
        height:48px;
    }
</style>

<div class="main-content">
    <section class="section">

        <div class="section-header mb-0">
            <h1>
                <i class="fa fa-list-alt" aria-hidden="true"></i>
                Add Category </h1>
        </div>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"> 
                <a class="" href="/admin/category">Product Category </a>
             </li>
            <li class="breadcrumb-item"> 
                <a class="" href="#">Add Category </a>
            </li>
        </ol>


        <div class="section-body">
            {{-- <div class="row wrapper border-bottom white-bg page-heading"> --}}
            <div class="row wrapper  white-bg page-heading">
                <div class="col-sm-8">

                </div>
                <div class="col-sm-4">
                    <div class="title-action">
                        {{-- <a href="#"><button class='btn btn-info'> List Users</button></a> --}}
                    </div>
                </div>
            </div>
            <div class="wrapper wrapper-content">
                <div class="animated fadeInUp card">
                    <form role="form" class="form-edit-add" action="{{ route('categories.store') }}" method="POST" enctype="multipart/form-data">
                        {{ csrf_field() }}
                        
                        <div class="panel-body card-body">
                        
                        @if (count($errors) > 0)
                            <div class="alert alert-danger">
                                <ul>
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif
                        
                        <div class="form-group">
                            <label class="control-label">Category Name</label>
                            <input class="form-control" required type="text" name="category_name"/>
                        </div>
                        <div class="form-group">
                            <label class="control-label">Slug</label>
                            <input class="form-control" required type="text" name="slug_url"/>
                        </div>
                        <div class="form-group">
                            <label class="control-label">Banner Image</label>
                            <input class="form-control" required type="file" name="banner_image" id="banner_image" />
                        </div>
                        
                        <fieldset class="border p-2">
                            <legend  class="float-none w-auto p-2 text-center">Meta Details</legend>
                            
                            <div class="form-group">
                                <label class="control-label">MetaTitle</label>
                                <input type="text" name="meta_title" class="form-control" required/>
                            </div>
                        
                            <div class="form-group">
                                <label class="control-label">Meta Description</label>
                                <input class="form-control" required type="text" name="meta_desc" />
                            </div>
                        
                            <div class="form-group">
                                <label class="control-label">Meta Keywords</label>
                                <input class="form-control" required type="text" name="meta_keywords" />
                            </div>
                            
                         </fieldset>
                         {{-- OG Details --}}
                         <fieldset class="border p-2">
                            <legend  class="float-none w-auto p-2 text-center">OG Details</legend>
                            
                            <div class="form-group">
                                <label class="control-label">OG Title</label>
                                <input type="text" name="og_title" class="form-control" required/>
                            </div>
                        
                            <div class="form-group">
                                <label class="control-label">OG Description</label>
                                <input class="form-control" required type="text" name="og_desc" />
                            </div>
                        
                            <div class="mb-3">
                                <label for="formFileSm" class="form-label">OG Image</label>
                                {{-- <input class="form-control form-control-sm" name="og_image" id="og_image" type="file"> --}}
                                <input class="form-control" name="og_image" id="og_image" type="file">
                            </div>
                            
                         </fieldset>
                        
                        <div class="panel-footer">
                            <button type="submit" class="btn btn-primary save mt-3">Save</button>
                        </div>
                        </form>



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

    <script type="text/javascript" src="/js/ckfinder/ckfinder.js"></script>
    <script>
        CKFinder.config({
            connectorPath: '/ckfinder/connector'
        });
    </script>
    <script src="https://cdn.ckeditor.com/4.17.1/standard/ckeditor.js"></script>

@endsection