@csrf

<div class="row mb-3">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header bg-dark text-white">User</div>
            <div class="card-body">
                @include('partials.validation-errors', ['displayErrors' => true])
                <div class="alert alert-secondary rounded-0 text-center">
                    <span class="text-danger">*</span> Indicates a required field.
                </div>
                <div class="row mb-3">
                    <label for="first_name" class="col-sm-4 col-form-label text-right">
                        First Name <span class="text-danger">*</span>
                    </label>
                    <div class="col-sm-8">
                        <input type="text"
                            class="form-control @error('first_name') is-invalid @enderror"
                            name="first_name"
                            id="first_name"
                            value="{{ old('first_name', $user->first_name) }}" />
                        @error('first_name') <span class="invalid-feedback" role="alert">{{ $message }}</span> @enderror
                    </div>
                </div>
                <div class="row mb-3">
                    <label for="last_name" class="col-sm-4 col-form-label text-right">
                        Last Name <span class="text-danger">*</span>
                    </label>
                    <div class="col-sm-8">
                        <input type="text"
                            class="form-control @error('last_name') is-invalid @enderror"
                            name="last_name"
                            id="last_name"
                            value="{{ old('last_name', $user->last_name) }}" />
                        @error('last_name') <span class="invalid-feedback" role="alert">{{ $message }}</span> @enderror
                    </div>
                </div>
                <div class="row mb-3">
                    <label for="email" class="col-sm-4 col-form-label text-right">
                        E-Mail Address <span class="text-danger">*</span>
                    </label>
                    <div class="col-sm-8">
                        <input type="email"
                            class="form-control @error('email') is-invalid @enderror"
                            name="email"
                            id="email"
                            value="{{ old('email', $user->email) }}" />
                        @error('email') <span class="invalid-feedback" role="alert">{{ $message }}</span> @enderror
                    </div>
                </div>
                <div class="row mb-3">
                    <label for="phone" class="col-sm-4 col-form-label text-right">
                        Phone Number <span class="text-danger">*</span>
                    </label>
                    <div class="col-sm-8">
                        <input type="text"
                            class="form-control @error('phone') is-invalid @enderror"
                            name="phone"
                            id="phone"
                            value="{{ old('phone', $user->phone) }}"
                        />
                        @error('phone') <span class="invalid-feedback" role="alert">{{ $message }}</span> @enderror
                    </div>
                </div>
                <div class="row mb-3">
                    <label for="state_id" class="col-sm-4 col-form-label text-right">
                        State <span class="text-danger">*</span>
                    </label>
                    <div class="col-sm-8">
                        <select name="state_id" id="state_id" class="form-control form-select @error('state_id') is-invalid @enderror">
                            <option value=""></option>
                            @foreach($states as $state)
                                <option value="{{ $state->id }}" {{ (old('state_id', $user->state_id) == $state->id) ? 'selected="selected"' : '' }}>
                                    {{ $state->name }}
                                </option>
                            @endforeach
                        </select>
                        @error('state_id') <span class="invalid-feedback" role="alert">{{ $message }}</span> @enderror
                    </div>
                </div>
                <div class="row mb-3">
                    <label for="state_role_id" class="col-sm-4 col-form-label text-right">
                        State Role <span class="text-danger">*</span>
                    </label>
                    <div class="col-sm-8">
                        <select name="state_role_id" id="state_role_id" class="form-control form-select @error('state_role_id') is-invalid @enderror">
                            <option value=""></option>
                            @foreach($roles as $role)
                                <option value="{{ $role->id }}" {{ (old('state_role_id', $user->state_role_id) == $role->id) ? 'selected="selected"' : '' }}>
                                    {{ $role->name }}
                                </option>
                            @endforeach
                        </select>
                        @error('state_role_id') <span class="invalid-feedback" role="alert">{{ $message }}</span> @enderror
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-sm-8 offset-4">
                        <button type="submit" class="btn btn-success">Save User</button>
                        <a class="btn btn-outline-dark" href="{{ route('admin.users.index') }}">Cancel</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/jquery.inputmask.bundle.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#phone').inputmask("(999) 999-9999");
        });
    </script>
@endpush