{% extends 'admin/layout/base.twig' %}
{% block title %}{{ link is not empty and link.id is defined and link.id ? 'Edit' : 'Create' }} Payment Link - {{ app_name }}{% endblock %}
{% block content %}
<div class="op-page-header">
    <div>
        <h1>{{ link is not empty and link.id is defined and link.id ? 'Edit' : 'Create' }} Payment Link</h1>
        <p class="op-page-subtitle">Configure reusable payment link options, preset amounts, and brand branding overrides.</p>
    </div>
    <a href="/admin/payment-links" class="op-btn op-btn-outline">← Back</a>
</div>
<form method="POST" action="/admin/payment-links/{{ link is not empty and link.id is defined and link.id ? link.id ~ '/update' : 'store' }}" class="op-form">
    <input type="hidden" name="_csrf_token" value="{{ csrf_token }}">
    <div class="op-grid op-grid-2">
        <div class="op-card">
            <div class="op-card-header"><h3>Link Details</h3></div>
            <div class="op-card-body">
                <div class="op-form-group">
                    <label>Title *</label>
                    <input type="text" name="title" value="{{ link.title ?? '' }}" class="op-input" required>
                </div>
                <div class="op-form-group">
                    <label>Description</label>
                    <textarea name="description" rows="3" class="op-input">{{ link.description ?? '' }}</textarea>
                </div>
                <div class="op-form-row">
                    <div class="op-form-group op-col-6">
                        <label>Amount (Leave empty for custom)</label>
                        <input type="number" name="amount" value="{{ link.amount ?? '' }}" step="0.01" min="0" class="op-input">
                    </div>
                    <div class="op-form-group op-col-6">
                        <label>Currency</label>
                        <select name="currency" class="op-input">
                            {% for cur in currencies %}<option value="{{ cur.code }}" {{ (link.currency ?? 'BDT') == cur.code ? 'selected' : '' }}>{{ cur.code }}</option>{% endfor %}
                        </select>
                    </div>
                </div>
                <div class="op-form-row">
                    <div class="op-form-group op-col-6">
                        <label>Minimum Amount (custom-amount links only)</label>
                        <input type="number" name="min_amount" value="{{ link.min_amount ?? '' }}" step="0.01" min="0" class="op-input">
                    </div>
                    <div class="op-form-group op-col-6">
                        <label>Maximum Amount (custom-amount links only)</label>
                        <input type="number" name="max_amount" value="{{ link.max_amount ?? '' }}" step="0.01" min="0" class="op-input">
                    </div>
                </div>
            </div>
        </div>
        <div class="op-card">
            <div class="op-card-header"><h3>Settings</h3></div>
            <div class="op-card-body">
                <div class="op-form-group">
                    <label>Max Uses (0 for unlimited)</label>
                    <input type="number" name="max_uses" value="{{ link.max_uses ?? '0' }}" class="op-input">
                </div>
                <div class="op-form-group">
                    <label>Expires At</label>
                    <div class="op-date-picker">
                        <input type="hidden" name="expires_at" value="{{ link.expires_at ?? '' }}">
                        <div class="op-date-picker-group">
                            <input type="text" class="op-date-picker-input" placeholder="Select expiry date" value="{{ link.expires_at ?? '' }}" readonly>
                            <button type="button" class="op-date-picker-trigger" aria-label="Pick date">
                                <svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5"/></svg>
                            </button>
                        </div>
                        <div class="op-calendar-popover">
                            <div class="op-calendar-header">
                                <button type="button" class="op-calendar-nav-btn op-calendar-prev"><svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/></svg></button>
                                <div class="op-calendar-heading"></div>
                                <button type="button" class="op-calendar-nav-btn op-calendar-next"><svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/></svg></button>
                            </div>
                            <div class="op-calendar-grid-header"><span>Su</span><span>Mo</span><span>Tu</span><span>We</span><span>Th</span><span>Fr</span><span>Sa</span></div>
                            <div class="op-calendar-grid-body"></div>
                        </div>
                    </div>
                </div>
                <div class="op-form-group">
                    <label class="op-checkbox-label">
                        <input type="checkbox" name="require_address" value="1" {{ (link.require_address is defined and link.require_address) ? 'checked' : '' }}>
                        Require Shipping Address
                    </label>
                </div>
                {% if link is not empty and link.id is defined and link.id %}
                <div class="op-form-group">
                    <label>Status</label>
                    <select name="status" class="op-input">
                        <option value="active" {{ link.status == 'active' ? 'selected' : '' }}>Active</option>
                        <option value="inactive" {{ link.status == 'inactive' ? 'selected' : '' }}>Inactive</option>
                    </select>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
    <div class="op-form-actions op-mt-4">
        <button type="submit" class="op-btn op-btn-primary op-btn-lg">{{ link is not empty and link.id is defined and link.id ? 'Save Changes' : 'Create Link' }}</button>
    </div>
</form>
{% endblock %}