<x-app-layout-sideblock title="Starter Sideblock" is-sidebar-open="true" is-header-blur="true">
    <main class="main-content w-full px-[var(--margin-x)] pb-8">
        <div class="flex items-center space-x-4 py-5 lg:py-6">
            <ul class="hidden flex-wrap items-center space-x-2 sm:flex">
                <li class="flex items-center space-x-2">
                    <a class="text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
                        href="/">Home</a>
                    <svg x-ignore xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
                        stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                    </svg>
                </li>
                <li> Configuration </li>
                <svg x-ignore xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                </svg>
                <li class="flex items-center space-x-2">
                    <a class="text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
                        href="{{ route($route) }}">CompanyType Management</a>
                    <svg x-ignore xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
                        stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                    </svg>
                </li>
            </ul>
        </div>
        <div class="grid grid-cols-1 gap-4 sm:gap-5 lg:gap-6">
            <form action="{{ route($route . '.store') }}" method="POST">
                @method('POST')
                @csrf
                <div class="card pb-4">
                    <div class="my-3 flex h-8 items-center justify-between px-4 sm:px-5">
                        <h2
                            class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base">
                            <i class="fa-solid fa-edit text-primary"></i>  Create
                        </h2>
                    </div>
                    <div class="w-3/4 px-3 space-y-5 m-auto mb-4">
                        <div class="flex items-center">
                            <label class="w-2/12 mr-2">
                                <span>Name:</span>
                            </label>
                            <span class="relative flex w-full">
                                <input
                                    class="form-input w-2/4 rounded-lg border border-slate-300 bg-transparent px-3 py-2 text-xs placeholder-text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
                                    placeholder="" type="text" />
                            </span>
                        </div>

                        <div class="flex items-center">
                            <label class="w-2/12 mr-2">
                                <span>Description:</span>
                            </label>
                            <span class="relative flex  w-full">
                                <textarea rows="4" placeholder=" Enter Text"
                                    class="form-textarea w-1/2 rounded-lg border border-slate-300 bg-transparent p-2.5 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"></textarea>
                            </span>
                        </div>

                        <div class="flex items-center">
                            <label class="w-2/12 mr-2">
                                <span>Show All User</span>
                            </label>
                            <span class="relative flex  w-full">
                                <label class="inline-flex items-center space-x-2">
                                    <input
                                        class="form-radio is-basic h-4 w-4 rounded-full border-slate-400/70 checked:!border-success checked:bg-success hover:!border-success focus:!border-success dark:border-navy-400"
                                        name="show_all_user" type="radio" />
                                    <p>Y</p>
                                    <input
                                        class="form-radio is-basic h-4 w-4 rounded-full border-slate-400/70 checked:!border-success checked:bg-success hover:!border-success focus:!border-success dark:border-navy-400"
                                        name="show_all_user" type="radio" />
                                    <p>N</p>
                                </label>
                            </span>
                        </div>

                        <div class="flex items-center">
                            <label class="w-2/12 mr-2">
                                <span>Create All User</span>
                            </label>
                            <span class="relative flex  w-full">
                                <label class="inline-flex items-center space-x-2">
                                    <input
                                        class="form-radio is-basic h-4 w-4 rounded-full border-slate-400/70 checked:!border-success checked:bg-success hover:!border-success focus:!border-success dark:border-navy-400"
                                        name="create_all_user" type="radio" />
                                    <p>Y</p>
                                    <input
                                        class="form-radio is-basic h-4 w-4 rounded-full border-slate-400/70 checked:!border-success checked:bg-success hover:!border-success focus:!border-success dark:border-navy-400"
                                        name="create_all_user" type="radio" />
                                    <p>N</p>
                                </label>
                            </span>
                        </div>

                        <div class="flex items-center">
                            <label class="w-2/12 mr-2">
                                <span>Register</span>
                            </label>
                            <span class="relative flex  w-full">
                                <label class="inline-flex items-center space-x-2">
                                    <input
                                        class="form-radio is-basic h-4 w-4 rounded-full border-slate-400/70 checked:!border-success checked:bg-success hover:!border-success focus:!border-success dark:border-navy-400"
                                        name="register" type="radio" />
                                    <p>Y</p>
                                    <input
                                        class="form-radio is-basic h-4 w-4 rounded-full border-slate-400/70 checked:!border-success checked:bg-success hover:!border-success focus:!border-success dark:border-navy-400"
                                        name="register" type="radio" />
                                    <p>N</p>
                                </label>
                            </span>
                        </div>

                        <div class="flex items-center">
                            <label class="w-2/12 mr-2">
                                <span>Create Company</span>
                            </label>
                            <span class="relative flex  w-full">
                                <label class="inline-flex items-center space-x-2">
                                    <input
                                        class="form-radio is-basic h-4 w-4 rounded-full border-slate-400/70 checked:!border-success checked:bg-success hover:!border-success focus:!border-success dark:border-navy-400"
                                        name="create_company" type="radio" />
                                    <p>Y</p>
                                    <input
                                        class="form-radio is-basic h-4 w-4 rounded-full border-slate-400/70 checked:!border-success checked:bg-success hover:!border-success focus:!border-success dark:border-navy-400"
                                        name="create_company" type="radio" />
                                    <p>N</p>
                                </label>
                            </span>
                        </div>

                        <div class="flex items-center">
                            <label class="w-2/12 mr-2">
                                <span>Show All Group</span>
                            </label>
                            <span class="relative flex  w-full">
                                <label class="inline-flex items-center space-x-2">
                                    <input
                                        class="form-radio is-basic h-4 w-4 rounded-full border-slate-400/70 checked:!border-success checked:bg-success hover:!border-success focus:!border-success dark:border-navy-400"
                                        name="show_all_group" type="radio" />
                                    <p>Y</p>
                                    <input
                                        class="form-radio is-basic h-4 w-4 rounded-full border-slate-400/70 checked:!border-success checked:bg-success hover:!border-success focus:!border-success dark:border-navy-400"
                                        name="show_all_group" type="radio" />
                                    <p>N</p>
                                </label>
                            </span>
                        </div>
                        <div class="flex items-center">
                            <label class="w-2/12 mr-2">
                                <span>Show All Shipment</span>
                            </label>
                            <span class="relative flex  w-full">
                                <label class="inline-flex items-center space-x-2">
                                    <input
                                        class="form-radio is-basic h-4 w-4 rounded-full border-slate-400/70 checked:!border-success checked:bg-success hover:!border-success focus:!border-success dark:border-navy-400"
                                        name="show_all_shipment" type="radio" />
                                    <p>Y</p>
                                    <input
                                        class="form-radio is-basic h-4 w-4 rounded-full border-slate-400/70 checked:!border-success checked:bg-success hover:!border-success focus:!border-success dark:border-navy-400"
                                        name="show_all_shipment" type="radio" />
                                    <p>N</p>
                                </label>
                            </span>
                        </div>
                        <div class="flex items-center">
                            <label class="w-2/12 mr-2">
                                <span>Assign Role to Company:</span>
                            </label>
                            <span class="relative flex  w-full">
                                <select
                                    class="form-select w-2/4 rounded-lg border border-slate-300 bg-white px-3 py-2 text-xs hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:bg-navy-700 dark:hover:border-navy-400 dark:focus:border-accent">
                                    <option>Test1</option>
                                    <option>Test2</option>
                                    <option>Test3</option>
                                </select>
                            </span>
                        </div>

                        <div class="grid grid-cols-8 justify-center space-x-2 pt-4">
                            <a href="{{ route($route) }}"
                                class="col-start-3 btn  border border-slate-300 font-medium text-slate-800 hover:bg-slate-150 focus:bg-slate-150 active:bg-slate-150/80 dark:border-navy-450 dark:text-navy-50 dark:hover:bg-navy-500 dark:focus:bg-navy-500 dark:active:bg-navy-500/90">
                                Cancel
                            </a>
                            <button type="submit"
                                class="btn ml-3 bg-primary font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90">
                                Save
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </main>

</x-app-layout-sideblock>
