@extends('admin.layouts.base')

@section('content')
    <div class="container-fluid">

        <div class="d-flex justify-content-between mb-3">
            <h4>Create Service</h4>
            <a href="{{ route('admin.home-about-services.index') }}" class="btn btn-secondary">Back</a>
        </div>

        <form action="{{ route('admin.home-about-services.store') }}" method="POST" enctype="multipart/form-data">
            @csrf

            <div class="row">

                <div class="col-md-8">

                    {{-- Title --}}
                    <div class="form-group mb-3">
                        <label>Service Title *</label>
                        <input type="text" name="title" class="form-control mb-3" placeholder="Title">
                    </div>

                    {{-- Description --}}
                    <div class="form-group mb-3">
                        <label>Description</label>
                        <textarea name="list_items[]" id="description-editor" class="form-control mb-3"
                            placeholder="Enter bullet point and press Enter">
                    </textarea>
                    </div>

                    {{-- Image --}}
                    <div class="form-group mb-3">
                        <label>Image *</label>
                        <input type="file" name="image" class="form-control" required>
                    </div>

                    {{-- Status --}}
                    <div class="form-group mb-3">
                        <label>Status *</label>
                        <select name="status" class="form-control" required>
                            <option value="1">Active</option>
                            <option value="0">Inactive</option>
                        </select>
                    </div>

                </div>

            </div>

            <div class="mt-4">
                <button class="btn btn-primary">Save</button>
            </div>

        </form>
    </div>
@endsection

@section('scripts')
    {{-- CKEditor --}}
    <script src="https://cdn.ckeditor.com/4.22.1/standard/ckeditor.js"></script>

    <script>
        CKEDITOR.replace('description-editor', {
            height: 150
        });

        CKEDITOR.replace('list-editor', {
            height: 150,
            removeButtons: 'Image,Table,HorizontalRule',
        });
    </script>
@endsection