@extends('layouts.user.main')

@section('content')

@if ($errors->any())
    <div class="container-xxl alert-custom-class">
        <div class="alert alert-danger alert-dismissible" role="alert">
            <ul>
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    </div>
@endif

<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
	<div class="post d-flex flex-column-fluid" id="kt_post">
		<div id="kt_content_container" class="container-xxl">
            <div class="d-flex flex-column gap-7 gap-lg-10">
            <form class="form" method="POST" action="{{route('user.update', $user->id)}}">
                @method('PUT')
                @csrf
                <div class="card card-flush py-4">
                    <div class="card-header">
                        <div class="card-title">
                            <h2>Edit User</h2>
                        </div>
                    </div>
                    <div class="card-body pt-0">
                        <div class="d-flex flex-wrap gap-5 mb-10">
                            <div class="fv-row w-100 flex-md-root">
                                <label class="required form-label">Name</label>
                                <input type="text" class="form-control form-control-solid mb-2" name="name" placeholder="Name" value="{{old('name', $user->name)}}"/>
                            </div>
                            <div class="fv-row w-100 flex-md-root">
                                <label class="required form-label">Email</label>
                                <input type="text" class="form-control form-control-solid mb-2" name="email" placeholder="Email" value="{{ old('email', $user->email) }}"/>
                            </div>
                        </div>
                        <div class="d-flex flex-wrap gap-5 mb-10">
                            <div class="fv-row w-100 flex-md-root">
                                <label class="form-label">Password</label>
                                <input type="password" class="form-control form-control-solid mb-2" name="password" placeholder="
                                Password" value=""/>
                            </div>
                            <div class="fv-row w-100 flex-md-root">
                                <h3 class="inline-block text-xl sm:text-2xl font-extrabold text-slate-900 tracking-tight dark:text-slate-200 py-4 block sm:inline-block flex">Roles</h3>
                                <div class="grid grid-cols-4 gap-4">
                                    @forelse ($roles as $role)
                                    <div class="col-span-4 sm:col-span-2 md:col-span-1">
                                        <label class="form-check-label">
                                            <input type="checkbox" name="roles[]" value="{{ $role->name }}" {{ in_array($role->id, $userHasRoles) ? 'checked' : '' }} class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
                                            {{ $role->name }}
                                        </label>
                                    </div>
                                    @empty
                                    ----
                                    @endforelse
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer">
                        <div class="d-flex">
                            <a href="{{ route('user.index') }}" data-kt-contacts-type="cancel" class="btn btn-secondary me-3">Cancel</a>
                            <button type="submit" class="btn btn-primary me-3">Submit</button>
                        </div>
                    </div>
                </div>
            </form>
            </div>
		</div>
	</div>
</div>
@endsection