@extends('layouts.app')

@section('content')
<div class="max-w-3xl mx-auto">
  <!-- Header -->
  <div class="mb-6 flex items-center justify-between">
    <h1 class="text-2xl font-semibold text-gray-800">Create Permission</h1>
    <a href="{{ route('admin.permissions.index') }}"
      class="inline-flex items-center gap-2 rounded-lg border px-3 py-2 text-sm text-gray-700 hover:bg-gray-50">
      ← Back to permissions
    </a>
  </div>

  {{-- Validation errors --}}
  @if($errors->any())
  <div class="mb-4 rounded-lg border border-red-200 bg-red-50 p-4 text-red-700">
    <div class="font-medium">Please fix the following:</div>
    <ul class="mt-2 list-inside list-disc space-y-1">
      @foreach($errors->all() as $e)
      <li>{{ $e }}</li>
      @endforeach
    </ul>
  </div>
  @endif

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

    <div class="rounded-xl bg-white p-6 shadow-sm ring-1 ring-gray-100">
      <!-- Name -->
      <div class="mb-6">
        <label class="block text-sm font-medium text-gray-700">Permission name</label>
        <input
          name="name"
          value="{{ old('name') }}"
          class="mt-1 w-full rounded-lg border-gray-300 text-gray-900 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
          placeholder="e.g. purchase.create"
          required>
        <p class="mt-1 text-xs text-gray-500">Tip: কনভেনশন—<code>resource.action</code> (যেমন <b>purchase.view</b>, <b>purchase.create</b>).</p>
      </div>

      <!-- Actions -->
      <div class="mt-6 flex items-center justify-end gap-3">
        <a href="{{ route('admin.permissions.index') }}"
          class="rounded-lg border border-gray-300 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">
          Cancel
        </a>
        <button type="submit"
          class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-1">
          Save Permission
        </button>
      </div>
    </div>
  </form>
</div>
@endsection