@extends('layouts.dashboard')

@section('page_title', 'CREATE NEW USER')

@section('content')
<div class="ff-toolbar d-flex justify-content-between align-items-center mb-4">
    <h2 class="mb-0" style="font-size: 1.25rem;">Create New User</h2>
    <a class="btn btn-outline-secondary btn-sm" href="{{ route('users.index') }}"><i class="fa fa-arrow-left"></i> Back</a>
</div>

@if (count($errors) > 0)
    <div class="alert alert-danger bg-transparent border-danger text-danger">
      <strong>Whoops!</strong> There were some problems with your input.<br><br>
      <ul>
         @foreach ($errors->all() as $error)
           <li>{{ $error }}</li>
         @endforeach
      </ul>
    </div>
@endif

<div class="ff-table-card table-responsive p-4">
    <form method="POST" action="{{ route('users.store') }}">
        @csrf
        <div class="row g-4">
            <div class="col-md-6">
                <div class="form-group">
                    <label class="mb-2 fw-semibold">Name:</label>
                    <input type="text" name="name" placeholder="Name" class="form-control ff-input">
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <label class="mb-2 fw-semibold">Email:</label>
                    <input type="email" name="email" placeholder="Email" class="form-control ff-input">
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <label class="mb-2 fw-semibold">Password:</label>
                    <input type="password" name="password" placeholder="Password" class="form-control ff-input">
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <label class="mb-2 fw-semibold">Confirm Password:</label>
                    <input type="password" name="confirm-password" placeholder="Confirm Password" class="form-control ff-input">
                </div>
            </div>
            <div class="col-md-12">
                <div class="form-group">
                    <label class="mb-2 fw-semibold">Role:</label>
                    <select name="roles[]" class="form-control ff-input" multiple="multiple" style="height: 120px;">
                        @foreach ($roles as $value => $label)
                            <option value="{{ $value }}">
                                {{ $label }}
                            </option>
                         @endforeach
                    </select>
                </div>
            </div>
            <div class="col-12 mt-4 text-end">
                <button type="submit" class="ff-action border-0"><i class="fa-solid fa-floppy-disk"></i> Submit</button>
            </div>
        </div>
    </form>
</div>
@endsection