@extends('layouts.app')
@section('page-title', 'New User')
@section('styles')
<style>
.form-card{background:#fff;border:1px solid #e6e9ef;border-radius:12px;overflow:hidden;max-width:600px}
.form-head{padding:1rem 1.5rem;border-bottom:1px solid #e6e9ef;display:flex;align-items:center;gap:8px}
.form-head i{font-size:18px;color:#0073ea}
.form-head-title{font-size:15px;font-weight:600;color:#1f2d3d}
.form-body{padding:1.5rem}
.form-group{margin-bottom:1.25rem}
.form-label{display:block;font-size:12.5px;font-weight:500;color:#555;margin-bottom:5px}
.form-input{width:100%;padding:8px 12px;border:1px solid #e6e9ef;border-radius:8px;font-size:13px;font-family:'Figtree',sans-serif;outline:none;color:#333}
.form-input:focus{border-color:#0073ea}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.btn-primary{display:inline-flex;align-items:center;gap:6px;padding:8px 20px;background:#0073ea;color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:500;cursor:pointer;font-family:'Figtree',sans-serif}
.btn-primary:hover{background:#005ecb}
.btn-link{display:inline-flex;align-items:center;gap:4px;padding:8px 12px;color:#666;font-size:13px;text-decoration:none}
.btn-link:hover{color:#333}
.form-footer{padding:1rem 1.5rem;border-top:1px solid #e6e9ef;display:flex;align-items:center;gap:8px;background:#f9fafb}
.error-msg{font-size:11.5px;color:#e24b4a;margin-top:3px}
</style>
@endsection
@section('content')
<div class="form-card">
  <div class="form-head">
    <i class="ti ti-user-plus"></i>
    <span class="form-head-title">Create New User</span>
  </div>
  <form method="POST" action="{{ route('users.store') }}">
    @csrf
    <div class="form-body">
      <div class="form-group">
        <label class="form-label">Full Name <span style="color:#e24b4a">*</span></label>
        <input type="text" name="name" class="form-input" value="{{ old('name') }}" required>
        @error('name')<div class="error-msg">{{ $message }}</div>@enderror
      </div>
      <div class="form-group">
        <label class="form-label">Email <span style="color:#e24b4a">*</span></label>
        <input type="email" name="email" class="form-input" value="{{ old('email') }}" required>
        @error('email')<div class="error-msg">{{ $message }}</div>@enderror
      </div>
      <div class="form-row">
        <div class="form-group">
          <label class="form-label">Password <span style="color:#e24b4a">*</span></label>
          <input type="password" name="password" class="form-input" required>
          @error('password')<div class="error-msg">{{ $message }}</div>@enderror
        </div>
        <div class="form-group">
          <label class="form-label">Confirm Password <span style="color:#e24b4a">*</span></label>
          <input type="password" name="confirm_password" class="form-input" required>
        </div>
      </div>
      <div class="form-group">
        <label class="form-label">Role <span style="color:#e24b4a">*</span></label>
        <select name="role_id" class="form-input" required>
          <option value="">— Select Role —</option>
          @foreach($roles as $id => $name)
          <option value="{{ $id }}" {{ old('role_id') == $id ? 'selected' : '' }}>{{ $name }}</option>
          @endforeach
        </select>
        @error('role_id')<div class="error-msg">{{ $message }}</div>@enderror
      </div>
    </div>
    <div class="form-footer">
      <button type="submit" class="btn-primary"><i class="ti ti-check" style="font-size:14px"></i>Create User</button>
      <a href="{{ route('users.index') }}" class="btn-link"><i class="ti ti-arrow-left" style="font-size:14px"></i>Back</a>
    </div>
  </form>
</div>
@endsection