<x-app-layout>
<x-slot name="header">
        <h1 class="mb-0 uppercase text-3xl">
            {{ $action }}
        </h1>
    </x-slot>

    <div class="py-12">
    <div class="grid grid-cols-1">
        <div class="card">
            <div class="card-header flex justify-between">
                <h3 class="card-title uppercase">
                    <i class="fas fa-plus"></i>
                    {{ $action }}
                </h3>
                <a href="{{ route('users.index') }}" class="btn btn-primary w-max uppercase">Back to list</a>
            </div>

            @if(session()->has('message'))
            <div class="alert alert-success">
                {{ session()->get('message') }}
            </div>
            @endif

            <div class="card-body">

                <div class="shadow-sm overflow-hidden mb-8  ">

                @if($user)
                    <form action="{{ route('users.update', $user['id']) }}" method="POST">
                        <input value="{{$user['id']}}" type="hidden" name="user_id" />
                        @method('PUT')
                    @else 
                    <form action="{{ route('users.store') }}" method="POST">
                    @endif
                        @csrf                     
                        <div class="p-5">
                            <div class="grid grid-cols-2 gap-4">
                                <label class="block form-label">
                                    <span class="after:content-['*'] after:ml-0.5 after:text-red-500 block">Name</span>
                                    <input value="{{$user['name']??old('name')}}" type="name" name="name" class="form-input mt-1 px-3 py-2 bg-white border shadow-sm border-slate-300 placeholder-slate-400 focus:outline-none focus:border-sky-500 focus:ring-sky-500 block w-full rounded-md sm:text-sm focus:ring-1" placeholder="Please enter name" />
                                    @error('name')
                                    <div class=" alert-danger mt-3 text-red-900">{{ $message }}</div>
                                    @enderror
                                </label>

                                <label class="block form-label">
                                    <span class="after:content-['*'] after:ml-0.5 after:text-red-500 block">Email</span>
                                    <input value="{{$user['email']??old('email')}}" type="email" name="email" class="form-input mt-1 px-3 py-2 bg-white border shadow-sm border-slate-300 placeholder-slate-400 focus:outline-none focus:border-sky-500 focus:ring-sky-500 block w-full rounded-md sm:text-sm focus:ring-1" placeholder="you@example.com" />
                                    @error('email')
                                    <div class=" alert-danger mt-3 text-red-900">{{ $message }}</div>
                                    @enderror
                                </label>

                                <label class="block form-label">
                                    <span class="after:content-['*'] after:ml-0.5 after:text-red-500 block">Password</span>
                                    <input value="{{old('password')}}" type="password" name="password" class="form-input mt-1 px-3 py-2 bg-white border shadow-sm border-slate-300 placeholder-slate-400 focus:outline-none focus:border-sky-500 focus:ring-sky-500 block w-full rounded-md sm:text-sm focus:ring-1" placeholder="Please enter password" />
                                    @error('password')
                                    <div class=" alert-danger mt-3 text-red-900">{{ $message }}</div>
                                    @enderror
                                </label>

                                <label class="block form-label">
                                    <span class="after:content-['*'] after:ml-0.5 after:text-red-500 block">Confirm Password</span>
                                    <input value="{{old('confirm_password')}}" type="password" name="confirm_password" class="form-input mt-1 px-3 py-2 bg-white border shadow-sm border-slate-300 placeholder-slate-400 focus:outline-none focus:border-sky-500 focus:ring-sky-500 block w-full rounded-md sm:text-sm focus:ring-1" placeholder="Please re-enter password" />
                                    @error('confirm_password')
                                    <div class=" alert-danger mt-3 text-red-900">{{ $message }}</div>
                                    @enderror
                                </label>

                                @if(!empty($roles))
                                <label class="block form-label">
                                    <span class="block">Role</span>
                                    <select name="role" class="form-input mt-1 px-3 py-2 bg-white border shadow-sm border-slate-300 focus:outline-none focus:border-sky-500 focus:ring-sky-500 block w-full rounded-md sm:text-sm focus:ring-1">
                                        @foreach($roles as $role)
                                            <option value="{{ $role }}" {{ ($currentRole ?? 'user') === $role ? 'selected' : '' }}>
                                                {{ ucfirst($role) }}
                                            </option>
                                        @endforeach
                                    </select>
                                </label>
                                @endif

                            </div>
                            <div class="mt-10">
                                <input type="submit" value="Save" class="btn-primary inline-flex items-center px-4 py-2 bg-gray-800 dark:bg-gray-200 border border-transparent rounded-md font-semibold text-xs text-white dark:text-gray-800 uppercase tracking-widest hover:bg-gray-700 dark:hover:bg-white focus:bg-gray-700 dark:focus:bg-white active:bg-gray-900 dark:active:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition ease-in-out duration-150">
                                <a href="{{ route('users.index') }}" class="ml-5 inline-flex items-center px-4 py-2 bg-red-800 dark:bg-red-200 border border-transparent rounded-md font-semibold text-xs text-white dark:text-red-800 uppercase tracking-widest hover:bg-red-700 dark:hover:bg-white focus:bg-gray-700 dark:focus:bg-white active:bg-gray-900 dark:active:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-red-800 transition ease-in-out duration-150">Cancel</a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

        </div>
    </div>
    </div>
    
    
    
    
    
    
    
    
</x-app-layout>