@extends('layouts.app')
@section('content')
<div class="relative min-h-screen group-data-[sidebar-size=sm]:min-h-sm">
    <div class="group-data-[sidebar-size=lg]:ltr:md:ml-vertical-menu group-data-[sidebar-size=lg]:rtl:md:mr-vertical-menu group-data-[sidebar-size=md]:ltr:ml-vertical-menu-md group-data-[sidebar-size=md]:rtl:mr-vertical-menu-md group-data-[sidebar-size=sm]:ltr:ml-vertical-menu-sm group-data-[sidebar-size=sm]:rtl:mr-vertical-menu-sm pt-[calc(theme('spacing.header')_*_1)] pb-[calc(theme('spacing.header')_*_0.8)] px-4 group-data-[navbar=bordered]:pt-[calc(theme('spacing.header')_*_1.3)] group-data-[navbar=hidden]:pt-0 group-data-[layout=horizontal]:mx-auto group-data-[layout=horizontal]:max-w-screen-2xl group-data-[layout=horizontal]:px-0 group-data-[layout=horizontal]:group-data-[sidebar-size=lg]:ltr:md:ml-auto group-data-[layout=horizontal]:group-data-[sidebar-size=lg]:rtl:md:mr-auto group-data-[layout=horizontal]:md:pt-[calc(theme('spacing.header')_*_1.6)] group-data-[layout=horizontal]:px-3 group-data-[layout=horizontal]:group-data-[navbar=hidden]:pt-[calc(theme('spacing.header')_*_0.9)]">
        <div class="container-fluid group-data-[content=boxed]:max-w-boxed mx-auto">
            <div class="flex flex-col gap-2 py-4 md:flex-row md:items-center print:hidden">
                <div class="grow">
                    <h5 class="text-16">service-items</h5>
                </div>
                <ul class="flex items-center gap-2 text-sm font-normal shrink-0">
                    <li class="relative before:content-['\ea54'] before:font-remix ltr:before:-right-1 rtl:before:-left-1 before:absolute before:text-[18px] before:-top-[3px] ltr:pr-4 rtl:pl-4 before:text-slate-400 dark:text-zink-200">
                        <a href="#!" class="text-slate-400 dark:text-zink-200">service-items</a>
                    </li>
                    <li class="text-slate-700 dark:text-zink-100">Create</li>
                </ul>
            </div>

            <div class="grid grid-cols-1 gap-x-5 xl:grid-cols-12">
                <div class="xl:col-span-9">
                    <div class="card">
                        <div class="card-body">
                            <h6 class="mb-3 text-15">Create Service Type</h6>

                            <form action="{{ route('service-types.store') }}" method="post" enctype="multipart/form-data">
                                @csrf

                                <div class="mb-4">
                                    <label for="name" class="inline-block mb-2 text-base font-medium">Name <span class="text-red-500">*</span></label>
                                    <input
                                        id="name"
                                        type="text"
                                        name="name"
                                        value="{{ old('name') }}"
                                        placeholder="Admission"
                                        class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 @error('name') is-invalid @enderror"
                                    >
                                    @error('name')
                                        <span class="mt-1 text-sm text-red-500">{{ $message }}</span>
                                    @enderror
                                </div>

                                <div class="mb-4">
                                    <label for="price" class="inline-block mb-2 text-base font-medium">Service Charge</label>
                                    <input
                                        id="price"
                                        type="text"
                                        name="price"
                                        value="{{ old('price') }}"
                                        placeholder="Service charge"
                                        class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 @error('price') is-invalid @enderror"
                                    >
                                    @error('price')
                                        <span class="mt-1 text-sm text-red-500">{{ $message }}</span>
                                    @enderror
                                </div>


                              

                                <div class="mb-3">
                                    <input
                                        type="submit"
                                        class="text-white transition-all duration-200 ease-linear btn bg-custom-500 border-custom-500 hover:text-white hover:bg-custom-600 hover:border-custom-600 focus:text-white focus:bg-custom-600 focus:border-custom-600 focus:ring focus:ring-custom-100 active:text-white active:bg-custom-600 active:border-custom-600 active:ring active:ring-custom-100"
                                        value="Save Country"
                                    >
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                <div class="xl:col-span-3">
                    <div class="card">
                        <div class="card-body">
                            <p class="text-sm text-slate-500 dark:text-zink-200">
                                Slug is generated automatically from the English name.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @include('layouts.footer')
</div>

<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,700,700i" rel="stylesheet" />
<link rel="stylesheet" href="{{ asset('assets/jodit-3.24.5/jodit.min.css') }}" />
<script src="{{ asset('assets/jodit-3.24.5/jodit.min.js') }}"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        if (window.Jodit && document.querySelector('#area_editor')) {
            Jodit.make('#area_editor', {});
        }
    });
</script>

@endsection