@extends('Admin.layout')

@section('content')

<style>
    .role-card {
        max-width: 600px;
        margin: 0 auto;
        background: rgba(12, 24, 44, 0.55);
        border: 1px solid rgba(201, 162, 75, 0.25);
        border-radius: 4px;
        padding: 2rem;
        box-shadow: 0 24px 70px rgba(0, 0, 0, .20);
    }

    .role-title {
        color: #eef2f7;
        font-size: 1.4rem;
        font-weight: 600;
        margin-bottom: 1.5rem;
    }

    .role-label {
        color: #93a1b8;
        font-size: .85rem;
        font-weight: 500;
        margin-bottom: .5rem;
    }

    .role-input {
        width: 100%;
        min-height: 44px;
        background: rgba(6, 13, 26, 0.55);
        border: 1px solid rgba(201, 162, 75, 0.25);
        color: #eef2f7;
        border-radius: 7px;
        padding: .7rem .9rem;
        font-size: .9rem;
        outline: none;
    }

    .role-input::placeholder {
        color: #93a1b8;
        opacity: .5;
    }

    .role-input:focus {
        background: rgba(6, 13, 26, 0.70);
        border-color: #c9a24b;
        box-shadow: 0 0 0 .2rem rgba(201, 162, 75, 0.25);
        color: #eef2f7;
    }

    .role-button {
        width: 100%;
        min-height: 45px;
        margin-top: 1.5rem;
        padding: .75rem;
        border: none;
        border-radius: 3px;
        background: linear-gradient(
            135deg,
            #e6c987,
            #c9a24b
        );
        color: #060d1a;
        font-size: .95rem;
        font-weight: 700;
        letter-spacing: .02em;
        transition: filter .15s ease, transform .15s ease;
    }

    .role-button:hover {
        filter: brightness(1.08);
    }

    .role-button:active {
        transform: translateY(1px);
    }
</style>

<div class="container-fluid">

    <div class="d-flex align-items-center mb-4">
        <i class="ti ti-shield-lock me-2"></i>
        <h4 class="mb-0">Role</h4>
    </div>

    <div class="card">
        <div class="card-body">

            <form action="{{ route('staffrole.store') }}" method="POST">
                @csrf

                <div class="col-12 col-md-6">

                    <label for="role" class="form-label">
                        Enter Role
                    </label>

                    <input
                        type="text"
                        id="role"
                        name="role"
                        class="form-control"
                        placeholder="Enter role"
                        value="{{ old('role') }}"
                    >

                    @error('role')
                        <div class="text-danger mt-1" style="font-size:13px;">
                            {{ $message }}
                        </div>
                    @enderror

                </div>

                <div class="mt-3">
                    <button type="submit" class="btn btn-primary">
                        Save Role
                    </button>
                </div>

            </form>

        </div>
    </div>

</div>

@endsection