@extends('layouts.app')

@section('content')
<div class="space-y-6 max-w-2xl">
    <div class="flex items-center justify-between">
        <h1 class="text-2xl font-bold">New Access Rule</h1>
        <a href="{{ route('firewall.access', ['type' => request('type', $type ?? 'blacklist')]) }}"
           class="px-3 py-2 rounded bg-gray-100 hover:bg-gray-200 text-sm">? Back</a>
    </div>

    @if($errors->any())
        <div class="p-3 rounded bg-red-50 text-red-700 border border-red-200">
            {{ $errors->first() }}
        </div>
    @endif

    <form method="POST" action="{{ route('firewall.access.store') }}" class="bg-white border rounded p-4 shadow-sm space-y-4">
        @csrf

        <div>
            <label class="block text-sm font-medium">Type</label>
            <select name="type" class="mt-1 border rounded px-3 py-2 w-full">
                <option value="blacklist" {{ (request('type',$type ?? '')==='blacklist')?'selected':'' }}>Blacklist</option>
                <option value="whitelist" {{ (request('type',$type ?? '')==='whitelist')?'selected':'' }}>Whitelist</option>
            </select>
        </div>

        <div>
            <label class="block text-sm font-medium">Action</label>
            <select name="action" class="mt-1 border rounded px-3 py-2 w-full">
                <option value="deny">Deny</option>
                <option value="allow">Allow</option>
            </select>
        </div>

        <div>
            <label class="block text-sm font-medium">IP Address</label>
            <input name="ip_address" type="text" placeholder="e.g. 203.0.113.7"
                   class="mt-1 border rounded px-3 py-2 w-full" required>
        </div>

        <div>
            <label class="block text-sm font-medium">Name (optional)</label>
            <input name="name" type="text" class="mt-1 border rounded px-3 py-2 w-full">
        </div>

        <div>
            <label class="block text-sm font-medium">Description (optional)</label>
            <textarea name="description" rows="3" class="mt-1 border rounded px-3 py-2 w-full"></textarea>
        </div>

        <div class="pt-2">
            <button class="px-5 py-2 rounded bg-indigo-600 text-white hover:bg-indigo-700">Save Rule</button>
        </div>
    </form>
</div>
@endsection