@extends('admin.layouts.app')

@section('content')
    <div class="content">
        <div class="container-fluid">
            <x-nav title="Add Service" :route="''"  :import="''"/>
            <!-- end page-title -->
            <div class="row">
                <div class="col-12">
                    <div class="card m-b-30">
                        <div class="card-body">

                            <form action="{{route('dashboard.services.store')}}" method="POST" enctype="multipart/form-data">
                                @csrf
{{--                                <x-input attribute="col-sm-10" label="Name" type="type" name="name" value="" placeholder="Enter service name"/>--}}
                                <x-input attribute="col-sm-10" label="Title" type="type" name="title" value="" placeholder="Enter service title"/>
                                <x-input attribute="col-sm-10" label="Service Order" type="type" name="so_number"
                                         :value="1" placeholder="Service Order"/>
{{--                                <x-input attribute="col-sm-10" label="Value One" type="type" name="value_one" value="" placeholder="Enter service value one"/>--}}
{{--                                <x-input attribute="col-sm-10" label="Value Two" type="type" name="value_two" value="" placeholder="Enter service value two"/>--}}
{{--                                <x-input attribute="col-sm-10" label="Value Three" type="type" name="value_three" value="" placeholder="Enter service value three"/>--}}
                                <!-- Description Input (Rich Text Editor) -->
                                <div class="form-group row">
                                    <label for="description" class="col-sm-10 col-form-label">Description</label>
                                    <div class="col-sm-10">
                                        <textarea id="description" name="description" class="form-control rich-text-editor" placeholder="Enter detailed service description"></textarea>
                                    </div>
                                </div>

                                <x-input attribute="col-sm-10" label="Service Photo" type="file" name="service_photo" value="" placeholder="Enter service Photo"/>
                                <x-input attribute="col-sm-10" label="Service Photo for details page" type="file" name="service_photo_details" value="" placeholder="Enter service Photo for details page"/>
                                <x-input attribute="col-sm-10" label="Service Banner" type="file" name="banner" value="" placeholder="Enter service Banner for details page"/>
                                <x-button :attribute="getAction()" :item="$item" />
                            </form>

                        </div>
                    </div>
                </div> <!-- end col -->
            </div>
        </div>
        <!-- container-fluid -->

    </div>

    <!-- Include Rich Text Editor Script -->
    <script src="https://cdn.ckeditor.com/4.16.2/standard/ckeditor.js"></script>
    <script>
        // Initialize CKEditor
        CKEDITOR.replace('description', {
            height: 300,
            toolbarGroups: [
                { name: 'basicstyles', groups: ['basicstyles', 'cleanup'] },
                { name: 'paragraph', groups: ['list', 'indent', 'blocks', 'align'] },
                { name: 'styles' },
                { name: 'colors' },
                { name: 'links' },
                { name: 'insert' }
            ],
            removeButtons: 'Underline,Subscript,Superscript'
        });
    </script>
@endsection