@extends('layouts.app')

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

    <div class="card" style="max-width: 600px; margin-top: 1rem;">
        <form action="{{ route('banks.store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            
            <div style="margin-bottom: 1rem;">
                <label for="name" style="display:block; font-weight:bold; margin-bottom:0.5rem;">Bank 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="template_image" style="display:block; font-weight:bold; margin-bottom:0.5rem;">Cheque Template Image (Optional)</label>
                <input type="file" name="template_image" id="template_image" accept="image/*" style="width: 100%;">
                <p style="color: gray; font-size: 0.875rem; margin-top: 0.25rem;">Upload a blank cheque image to setup printing coordinates.</p>
                @error('template_image') <span style="color:red; font-size: 0.875rem;">{{ $message }}</span> @enderror
            </div>

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