<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) }}">Consignee List</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-2 m-auto mb-4">
                    <div class="flex items-center">
                            <label class="w-2/12 mr-2">
                                <span>Consignee Code :</span>
                            </label>
                            <span class="relative flex w-10/12">
                                <input
                                    class="form-input w-2/4 rounded-lg border border-slate-300 bg-transparent px-1 py-1 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" name="CSN_CODE" value=""/>
                            </span>
                        </div>
                        <div class="flex items-center">
                            <label class="w-2/12 mr-2">
                                <span>Consignee Name:</span>
                            </label>
                            <span class="relative flex  w-10/12">
                                <input
                                    class="form-input w-2/4 rounded-lg border border-slate-300 bg-transparent px-1 py-1 pl-4 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="" name="CSN_NAME" value="" type="text" />
                            </span>
                        </div>
                        <div class="flex items-center">
                            <label class="w-2/12 mr-2">
                                <span>Company Tax No.:</span>
                            </label>
                            <span class="relative flex  w-10/12">
                                <input
                                    class="form-input peer w-2/4 rounded-lg border border-slate-300 bg-transparent px-1 py-1 pl-4 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" 
                                    value="" />
                            </span>
                        </div>
                        <div class="flex items-center">
                            <label class="w-2/12 mr-2">
                                <span>Branch:</span>
                            </label>
                            <span class="relative flex  w-10/12">
                                <input
                                    class="form-input peer w-2/4 rounded-lg border border-slate-300 bg-transparent px-1 py-1 pl-4 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"  value=""/>
                            </span>
                        </div>
                        <div class="flex items-center">
                            <label class="w-2/12 mr-2">
                                <span>Street and Address:</span>
                            </label>
                            <span class="relative flex  w-10/12">
                            <textarea rows="2" placeholder=" Enter Text"
                                        class="form-textarea w-6/12 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>District:</span>
                            </label>
                            <span class="relative flex  w-10/12">
                                <input
                                    class="form-input peer w-2/4 rounded-lg border border-slate-300 bg-transparent px-1 py-1 pl-4 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" value=""/>
                            </span>
                        </div>
                        <div class="flex items-center">
                            <label class="w-2/12 mr-2">
                                <span>Sub province:</span>
                            </label>
                            <span class="relative flex  w-10/12">
                                <input
                                    class="form-input peer w-2/4 rounded-lg border border-slate-300 bg-transparent px-1 py-1 pl-4 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" value="" />
                            </span>
                        </div>
                        <div class="flex items-center">
                            <label class="w-2/12 mr-2">
                                <span>Province:</span>
                            </label>
                            <span class="relative flex  w-10/12">
                                <input
                                    class="form-input peer w-2/4 rounded-lg border border-slate-300 bg-transparent px-1 py-1 pl-4 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" value="" />
                            </span>
                        </div>
                        <div class="flex items-center">
                            <label class="w-2/12 mr-2">
                                <span>Post Code:</span>
                            </label>
                            <span class="relative flex  w-10/12">
                                <input
                                    class="form-input peer w-2/4 rounded-lg border border-slate-300 bg-transparent px-1 py-1 pl-4 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"value="" />
                            </span>
                        </div>
                        <div class="flex items-center">
                            <label class="w-2/12 mr-2">
                                <span>Country:</span>
                            </label>
                            <span class="relative flex  w-10/12">
                                <input
                                    class="form-input peer w-1/4 rounded-lg border border-slate-300 bg-transparent px-1 py-1 pl-4 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" value="" />&nbsp;
                                    <button x-ref="popperRef" @click="isShowPopper = !isShowPopper" class="btn bg-slate-150 my-0.5 -mr-1 h-6 w-6 p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-2 w-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"></path>
                                </svg>
                              </button>
                            </span>
                        </div>
                        <div class="flex items-center">
                            <label class="w-2/12 mr-2">
                                <span>Contact Name:</span>
                            </label>
                            <span class="relative flex  w-10/12">
                                <input
                                    class="form-input peer w-2/4 rounded-lg border border-slate-300 bg-transparent px-1 py-1 pl-4 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" value="" />
                            </span>
                        </div>
                        <div class="flex items-center">
                            <label class="w-2/12 mr-2">
                                <span>Phone:</span>
                            </label>
                            <span class="relative flex  w-10/12">
                                <input
                                    class="form-input peer w-2/4 rounded-lg border border-slate-300 bg-transparent px-1 py-1 pl-4 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" value="" />
                            </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>
