<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('configuration.user') }}">User 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('configuration.user.update', $user->id) }}" method="PUT">
                @method('PUT')
                @csrf
                <input type="hidden" name="id" value="{{  $user->id }}">
            <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">
                        EDIT
                    </h2>
                </div>
                <div class="w-3/4 px-3 space-y-4 m-auto mb-4">
                    <div class="flex items-center">
                        <label class="w-32 mr-2">
                            <span>Username:</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 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="username" type="text" />
                        </span>
                    </div>
                    <div class="flex items-center">
                        <label class="w-32 mr-2">
                            <span>Password:</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 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="Your Company" type="text" />
                        </span>
                    </div>
                    <div class="flex items-center">
                        <label class="w-32 mr-2">
                            <span>Group:</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 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>Corporate event</option>
                                <option>Wedding</option>
                                <option>Birthday</option>
                                <option>Other</option>
                            </select>
                        </span>
                    </div>
                    <div class="flex items-center">
                        <label class="w-32 mr-2">
                            <span>Firstname:</span>
                        </label>
                        <span class="relative flex  w-full">
                            <input
                                class="form-input peer w-2/4 rounded-lg border border-slate-300 bg-transparent px-3 py-2 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="Firstname" type="text" name="name" value="{{  old('name')? old('name') : $user->name }}"/>
                        </span>
                    </div>
                    <div class="flex items-center">
                        <label class="w-32 mr-2">
                            <span>Lastname:</span>
                        </label>
                        <span class="relative flex  w-full">
                            <input
                                class="form-input peer w-2/4 rounded-lg border border-slate-300 bg-transparent px-3 py-2 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="Lastname" type="text" />
                        </span>
                    </div>
                    <div class="flex items-center">
                        <label class="w-32 mr-2">
                            <span>Phone:</span>
                        </label>
                        <span class="relative flex  w-full">
                            <input
                                class="form-input peer w-2/4 rounded-lg border border-slate-300 bg-transparent px-3 py-2 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="(999) 999-9999" type="text"
                                x-input-mask="{numericOnly: true, blocks: [0, 3, 3, 4], delimiters: ['(', ') ', '-']}" />
                        </span>
                    </div>
                    <div class="flex items-center">
                        <label class="w-32 mr-2">
                            <span>Email:</span>
                        </label>
                        <span class="relative flex  w-full">
                            <input
                                class="form-input peer w-2/4 rounded-lg border border-slate-300 bg-transparent px-3 py-2 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="Email" type="text" name="email" value="{{  old('email')? old('email') : $user->email }}" />
                        </span>
                    </div>
                    <div class="flex items-center">
                        <label class="w-32 mr-2">
                            <span>Approved</span>
                        </label>
                        <span class="relative flex  w-full">
                            <input checked
                                class="form-switch h-5 w-10 rounded-full bg-slate-300 [--thumb-border:4px] before:rounded-full before:bg-slate-50 checked:bg-success checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
                                type="checkbox" />
                        </span>
                    </div>
                    <div class="grid grid-cols-6 justify-center space-x-2 pt-4">
                        <a href="{{ route('configuration.user') }}"
                            class="col-start-2 btn min-w-[7rem] 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 min-w-[7rem] 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>
