@extends('layouts.app')

@section('title', 'নতুন পেমেন্ট অ্যালার্ট')

@section('content')
<div class="topbar">
  <div>
    <h1>নতুন পেমেন্ট অ্যালার্ট</h1>
    <div class="topbar-sub">একটি পার্টির জন্য বকেয়া ও মেয়াদ যোগ করুন</div>
  </div>
</div>

<div class="panel" style="padding:24px; max-width:480px;">
  <form method="POST" action="{{ route('alerts.store') }}">
    @csrf
    <div class="field">
      <label>পার্টি</label>
      <select name="party_id" required style="width:100%; padding:11px 13px; background:var(--surface2); border:1px solid var(--border); border-radius:8px; color:var(--text);">
        <option value="">নির্বাচন করুন</option>
        @foreach ($parties as $party)
          <option value="{{ $party->id }}">{{ $party->name }} ({{ $party->branch }})</option>
        @endforeach
      </select>
      @error('party_id') <div class="field-error">{{ $message }}</div> @enderror
    </div>
    <div class="field">
      <label>পরিমাণ (৳)</label>
      <input type="number" step="0.01" name="amount" value="{{ old('amount') }}" required>
      @error('amount') <div class="field-error">{{ $message }}</div> @enderror
    </div>
    <div class="field">
      <label>পরিশোধের মেয়াদ</label>
      <input type="date" name="due_date" value="{{ old('due_date') }}" required>
      @error('due_date') <div class="field-error">{{ $message }}</div> @enderror
    </div>
    <div class="field">
      <label>রিমাইন্ডার মাধ্যম</label>
      <select name="channel" style="width:100%; padding:11px 13px; background:var(--surface2); border:1px solid var(--border); border-radius:8px; color:var(--text);">
        <option value="sms">SMS</option>
        <option value="bkash">bKash</option>
        <option value="nagad">Nagad</option>
        <option value="email">Email</option>
      </select>
    </div>
    <button type="submit" class="btn btn-gold btn-block">অ্যালার্ট তৈরি করুন</button>
  </form>
</div>
@endsection