<div class="grid grid-cols-1 gap-4 sm:gap-5 lg:gap-6">

    <form wire:submit.prevent="save">
        @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 aria-hidden="true" class="fa-solid fa-edit text-primary"></i> Create
                </h2>
            </div>
            <div class="w-3/4 px-3 space-y-3 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 wire:model.defer="name"
                            class="form-input w-2/4 rounded-lg border border-slate-300 bg-transparent px-3 py-2 text-xs 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="name" type="text" value="{{ old('name') }}" />
                        @error('name')
                            <span class="text-red-500 text-md self-center ml-4">{{ $message }}</span>
                        @enderror
                    </span>

                </div>

                <div class="flex items-center">
                    @if ($file)
                        <div class="mt-2 text-sm text-slate-600 dark:text-slate-300 mr-4">
                            Uploaded File: {{ $file->getClientOriginalName() }}
                        </div>
                    @endif

                    <span wire:loading>
                        <svg class="animate-spin h-5 w-5 text-primary m-3" xmlns="http://www.w3.org/2000/svg" fill="none"
                            viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
                                stroke-width="4"></circle>
                            <path class="opacity-75" fill="currentColor"
                                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.964 7.964 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
                            </path>
                        </svg>
                    </span>
                    <label for="file-upload"
                        class="btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
                        aria-label="Upload File">
                        <input tabindex="-1" id="file-upload" type="file" wire:model="file"
                            class="pointer-events-none absolute inset-0 h-full w-full opacity-0" />
                        <div class="flex items-center space-x-2">
                            <svg xmlns="http://www.w3.org/2000/svg" class="size-5" fill="none" viewBox="0 0 24 24"
                                stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
                            </svg>
                            <span>Choose File</span>
                        </div>
                        @error('file')
                            <span class="error">{{ $message }}</span>
                        @enderror
                    </label>

                </div>

            </div>
            <div class="grid grid-cols-12 justify-center space-x-2 pt-4">
                <a href="/format-file-master"
                    class="col-start-4 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>

    </form>
</div>
