@extends('layouts.master')

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

        <x-breadcrumb listRoute="{{ route('admin.services.index') }}" model="Services" item="Create"></x-breadcrumb>

        <div class="card">
            <div class="card-body">
                <x-form.wrapper action="{{ route('admin.services.store') }}" accept=".svg" method="POST"
                    enctype="multipart/form-data">
                    <x-form.row>
                        <x-form.input type="text" col="6" label="Title" :req="true" id="title"
                            name="title" value="{{ old('title') }}" />
                        <x-form.input type="text" col="6" label="Slug" :req="true" id="slug"
                            name="slug" value="{{ old('slug') }}" />
                    </x-form.row>

                    <x-form.row>
                        <div class="col-lg-6">
                            <x-form.input type="file" label="Image" :req="true" id="image" name="image"
                                accept="image/*" onchange="previewThumb(this,'featured-thumb')" />
                            <x-form.preview id="featured-thumb" />
                        </div>
                        <div class="col-lg-6">
                            {{-- <x-form.input type="file" label="Cover Image" :req="true" id="cover" name="cover"
                                accept="image/*" onchange="previewThumb(this,'cover')" />
                            <x-form.preview id="cover" /> --}}
                            <x-form.input type="file" label="Cover Image" id="cover" name="cover" accept="image/*,video/*" onchange="previewThumb(this,'cover-thumb')" />
                        <x-form.preview id="cover-thumb" />
                        </div>
                    </x-form.row>

                    {{-- <x-form.row>
                    <div class="col-lg-6">
                        <x-form.input type="file" label="Icon Image" :req="true" id="icon_image" name="icon_image"
                            accept=".svg" onchange="previewThumb(this,'icon-thumb')" />
                        <x-form.preview id="icon-thumb" />
                    </div>
                </x-form.row> --}}

                    <x-form.textarea type="text" col="12" label="Short Description" id="short_description"
                        name="short_description" value="{{ old('short_description') }}" />

                    <x-form.textarea type="text" isEditor="true" col="12" label="Description" :req="true"
                        id="description" name="description" value="{{ old('description') }}" />
                    <br>
                    <x-form.row>
                        <x-form.input type="number" col="2" label="Order No." :req="true" id="order"
                            name="order" />
                        <x-form.checkbox label="Status" isBreak="break" col="2" id="status" name="status"
                            value="1" class="form-check-input" />
                        {{-- <x-form.checkbox label="Footer" isBreak="break" col="2" id="is_footer_menu"
                            name="is_footer_menu" value="1" class="form-check-input" />
                        <x-form.checkbox label="Menu" isBreak="break" col="2" id="is_menu" name="is_menu"
                            value="1" class="form-check-input" /> --}}
                    </x-form.row>
                    <x-form.button class="btn btn-sm btn-dark" type="submit">
                        <i class='bx bx-save bx-xs'></i>
                        Save
                    </x-form.button>
                </x-form.wrapper>

            </div>
        </div>
    </div>
@endsection

@push('custom_js')
    @include('_helpers.slugify', ['title' => 'title'])
    @include('_helpers.image_preview', ['name' => 'image'])
    {{-- @include('_helpers.image_preview', ['name' => 'cover']) --}}
    @include('_helpers.ck_editor')
    @include('_helpers.ajax_form')
@endpush