@extends('layouts.app')

@section('content')
<div style="margin-top: 2rem;">
    <h1>Add New Payee</h1>

    <div class="card" style="max-width: 600px; margin-top: 1rem;">
        <form action="{{ route('payees.store') }}" method="POST">
            @csrf
            
            <div style="margin-bottom: 1rem;">
                <label for="name" style="display:block; font-weight:bold; margin-bottom:0.5rem;">Payee Name</label>
                <input type="text" name="name" id="name" required style="width: 100%; padding: 0.5rem; border: 1px solid #D1D5DB; border-radius: 0.375rem;">
                @error('name') <span style="color:red; font-size: 0.875rem;">{{ $message }}</span> @enderror
            </div>

            <div style="margin-bottom: 1rem;">
                <label for="email" style="display:block; font-weight:bold; margin-bottom:0.5rem;">Email (Optional)</label>
                <input type="email" name="email" id="email" style="width: 100%; padding: 0.5rem; border: 1px solid #D1D5DB; border-radius: 0.375rem;">
                @error('email') <span style="color:red; font-size: 0.875rem;">{{ $message }}</span> @enderror
            </div>

            <button type="submit" class="btn">Create Payee</button>
            <a href="{{ route('payees.index') }}" style="margin-left: 1rem; color: gray; text-decoration: none;">Cancel</a>
        </form>
    </div>
</div>
@endsection