@extends('layouts.app')

@section('content')
<style>
.page-wrap { max-width: 800px; }

.card {
    background:#fff;
    border-radius:14px;
    padding:22px;
    box-shadow:0 4px 14px rgba(0,0,0,0.06);
}

.form-group {
    display:flex;
    flex-direction:column;
    margin-bottom:15px;
}

label {
    font-weight:600;
    margin-bottom:6px;
}

input, textarea {
    padding:10px;
    border:1px solid #ddd;
    border-radius:8px;
}

.btn {
    padding:10px 14px;
    border:none;
    border-radius:8px;
    cursor:pointer;
    font-weight:600;
    text-decoration:none;
    display:inline-block;
}

.btn-primary { background:#1E4FA8; color:#fff; }
.btn-orange { background:#E84C0D; color:#fff; }
</style>

<div class="page-wrap">
    <h2>Create Role</h2>

    <div class="card">
        <form method="POST" action="{{ url('/roles') }}">
            @csrf

            <div class="form-group">
                <label>Role Name *</label>
                <input type="text" name="name" required>
            </div>

            <div class="form-group">
                <label>Role Code</label>
                <input type="text" name="code" placeholder="Optional, e.g CASHIER">
            </div>

            <div class="form-group">
                <label>Description</label>
                <textarea name="description"></textarea>
            </div>

            <label>
                <input type="checkbox" name="is_active" checked>
                Active
            </label>

            <br><br>

            <button class="btn btn-primary">Save Role</button>
            <a href="{{ url('/roles') }}" class="btn btn-orange">Back</a>
        </form>
    </div>
</div>
@endsection