@extends('layouts.admin')

@section('title', 'Record offline donation')
@section('heading', 'Record offline donation')

@section('content')
<p class="back"><a class="backlink" href="{{ route('admin.donations.index') }}"><svg class="i" aria-hidden="true"><use href="#i-chevron"/></svg>Back to donations</a></p>

<header class="rhead rhead--form rhead--wide">
    <div class="rhead__id">
        <span class="rhead__ico" aria-hidden="true"><svg class="i i--lg"><use href="#i-heart"/></svg></span>
        <div>
            <h2>Record offline donation</h2>
            <p>For cash, cheque, bank-transfer or direct UPI gifts. Every donation gets a numbered receipt and shows in your totals.</p>
        </div>
    </div>
</header>

<div class="dform">
<form class="card editor" method="post" action="{{ route('admin.donations.store') }}" novalidate>
    @csrf
    <div class="editor__grid">
        <div class="editor__cell"><h2 class="editor__sub">Donor details</h2></div>
        @foreach ([
            ['name', 'Donor name', 'text', true, true], ['email', 'Email', 'email', true, true],
            ['phone', 'Phone', 'tel', false, true], ['pan', 'PAN', 'text', false, true],
        ] as [$key, $label, $type, $req, $half])
            <div class="editor__cell editor__cell--half">
                <div class="field @error($key) has-error @enderror">
                    <label class="field__label" for="o-{{ $key }}">{{ $label }}@if($req)<span class="req" aria-hidden="true"> *</span>@endif</label>
                    <input class="input" id="o-{{ $key }}" type="{{ $type }}" name="{{ $key }}" value="{{ old($key) }}" @if($req) required @endif>
                    @error($key)<p class="field__err">{{ $message }}</p>@enderror
                </div>
            </div>
        @endforeach

        <div class="editor__cell">
            <div class="field">
                <label class="field__label" for="o-address">Address (optional)</label>
                <textarea class="input input--area" id="o-address" name="address" rows="2" maxlength="300">{{ old('address') }}</textarea>
            </div>
        </div>

        <div class="editor__cell"><h2 class="editor__sub">Gift details</h2></div>
        <div class="editor__cell editor__cell--third">
            <div class="field @error('amount') has-error @enderror">
                <label class="field__label" for="o-amount">Amount (₹)<span class="req" aria-hidden="true"> *</span></label>
                <div class="slug"><span class="slug__pre">&#8377;</span><input class="input" id="o-amount" type="number" inputmode="numeric" min="1" name="amount" value="{{ old('amount') }}" required></div>
                @error('amount')<p class="field__err">{{ $message }}</p>@enderror
            </div>
        </div>
        <div class="editor__cell editor__cell--third">
            <div class="field @error('received_on') has-error @enderror">
                <label class="field__label" for="o-date">Date received<span class="req" aria-hidden="true"> *</span></label>
                <input class="input" id="o-date" type="date" name="received_on" max="{{ now()->toDateString() }}" value="{{ old('received_on', now()->toDateString()) }}" required>
                @error('received_on')<p class="field__err">{{ $message }}</p>@enderror
            </div>
        </div>
        <div class="editor__cell editor__cell--third">
            <div class="field">
                <label class="field__label" for="o-mode">Mode<span class="req" aria-hidden="true"> *</span></label>
                <select class="input" id="o-mode" name="mode" required>
                    @foreach ($modes as $k => $l)<option value="{{ $k }}" @selected(old('mode') === $k)>{{ $l }}</option>@endforeach
                </select>
            </div>
        </div>

        <div class="editor__cell">
            <div class="field">
                <label class="field__label" for="o-cause">Purpose</label>
                <select class="input" id="o-cause" name="cause_id">
                    <option value="">General donation (where needed most)</option>
                    @foreach ($causes as $c)<option value="{{ $c->id }}" @selected((string) old('cause_id') === (string) $c->id)>{{ $c->title }}</option>@endforeach
                </select>
            </div>
        </div>
        <div class="editor__cell"><h2 class="editor__sub">Notes &amp; receipt</h2></div>
        <div class="editor__cell">
            <div class="field">
                <label class="field__label" for="o-notes">Private notes (cheque number, bank reference...)</label>
                <textarea class="input input--area" id="o-notes" name="notes" rows="2" maxlength="1000">{{ old('notes') }}</textarea>
            </div>
        </div>
        <div class="editor__cell">
            <label class="check check--plain"><input type="checkbox" name="send_receipt" value="1" @checked(old('send_receipt', true))><span>Email the receipt to the donor now</span></label>
        </div>
    </div>

    <div class="editor__foot editor__foot--bar">
        <button class="btn btn--green" type="submit"><svg class="i" aria-hidden="true"><use href="#i-check"/></svg>Record donation and issue receipt</button>
        <a class="btn btn--ghost" href="{{ route('admin.donations.index') }}">Cancel</a>
    </div>
</form>

<aside class="dform__side" aria-label="Tips">
    <div class="dtips">
        <h2>Before you record</h2>
        <ul class="dtips__list">
            <li><span class="dtips__ico" aria-hidden="true"><svg class="i"><use href="#i-mail"/></svg></span><div><strong>Donor email</strong><p>Needed to send the receipt. Leave the tick on to email it straight away.</p></div></li>
            <li><span class="dtips__ico" aria-hidden="true"><svg class="i"><use href="#i-shield"/></svg></span><div><strong>PAN for tax benefit</strong><p>Add the donor&rsquo;s PAN if they want to claim 80G.</p></div></li>
            <li><span class="dtips__ico" aria-hidden="true"><svg class="i"><use href="#i-lock"/></svg></span><div><strong>Private notes</strong><p>Cheque numbers and bank references are only visible here, never to the donor.</p></div></li>
        </ul>
    </div>
</aside>
</div>
@endsection