@extends('layouts.app')

@section('title', 'NMI Payment – Setting')

@section('content')
<div class="setting-section-page nmi-setting-wrap">
    <p class="setting-back">
        <a href="{{ route('setting.index') }}">← Setting</a>
    </p>
    <header class="setting-header">
        <h1>NMI Payment</h1>
        <p class="setting-subtitle">
            NMI API keys, payment-link options, admin SMS alerts, and layaway terms.
            Send links from <a href="{{ route('nmi-payment.index') }}">NMI Payment Links</a>.
            Twilio SMS still uses your existing .env Twilio credentials.
        </p>
    </header>

    @if(session('success'))
        <p class="alert alert-success">{{ session('success') }}</p>
    @endif
    @if(session('error'))
        <p class="alert alert-error">{{ session('error') }}</p>
    @endif

    <form action="{{ route('setting.nmi-payment.update') }}" method="POST" class="nmi-setting-form">
        @csrf

        <section class="nmi-setting-group nmi-setting-group--connection">
            <header class="nmi-setting-group-head">
                <h2 class="nmi-setting-group-title">NMI connection</h2>
                <p class="nmi-setting-group-desc">
                    Store keys here (not in .env). Use the NMI <strong>Private Security Key</strong> from Options → Settings → Security Keys (API source), not a third-party key.
                    Payment status syncs from NMI automatically every minute and when you click <strong>Refresh payment status</strong> on Payment Links.
                </p>
            </header>
            <div class="nmi-setting-stack">
                <div class="nmi-setting-field">
                    <label class="marketing-settings-label" for="private_security_key">NMI Private Security Key</label>
                    @if(!empty($hasPrivateKey))
                        <span class="marketing-settings-hint">Current key: <code>{{ $maskedPrivateKey }}</code>. Leave blank to keep it.</span>
                    @endif
                    <input type="password" name="private_security_key" id="private_security_key" class="nmi-setting-input" autocomplete="off" placeholder="Paste private API key">
                </div>
                <div class="nmi-setting-field">
                    <label class="marketing-settings-label" for="checkout_public_key">NMI Collect Checkout Public Key</label>
                    <input type="text" name="checkout_public_key" id="checkout_public_key" class="nmi-setting-input"
                        value="{{ old('checkout_public_key', $settings->checkout_public_key) }}"
                        placeholder="checkout_public_...">
                </div>
                <div class="nmi-setting-row">
                    <div class="nmi-setting-field">
                        <label class="marketing-settings-label" for="tax_rate_percent">Tax rate (%)</label>
                        <input type="number" step="0.01" min="0" max="100" name="tax_rate_percent" id="tax_rate_percent" class="nmi-setting-input"
                            value="{{ old('tax_rate_percent', $settings->tax_rate_percent) }}">
                    </div>
                    <div class="nmi-setting-field">
                        <label class="marketing-settings-label" for="link_expiry_hours">Link expires (hours)</label>
                        <input type="number" min="1" max="720" name="link_expiry_hours" id="link_expiry_hours" class="nmi-setting-input"
                            value="{{ old('link_expiry_hours', $settings->link_expiry_hours) }}">
                        <span class="marketing-settings-hint">Also used for layaway invitation / installment payment links.</span>
                    </div>
                </div>
                <div class="nmi-setting-row">
                    <div class="nmi-setting-field">
                        <label class="marketing-settings-label" for="customer_self_reactivation_max">Customer self-reactivations (max)</label>
                        <input type="number" min="0" max="10" name="customer_self_reactivation_max" id="customer_self_reactivation_max" class="nmi-setting-input"
                            value="{{ old('customer_self_reactivation_max', $settings->customer_self_reactivation_max ?? 2) }}">
                        <span class="marketing-settings-hint">How many times a customer may reopen an expired link themselves (default 2). Admin Reactivate is unlimited.</span>
                    </div>
                </div>
                <div class="nmi-setting-row">
                    <div class="nmi-setting-field">
                        <label class="marketing-settings-label" for="payment_description">Payment description (NMI product)</label>
                        <input type="text" name="payment_description" id="payment_description" class="nmi-setting-input"
                            value="{{ old('payment_description', $settings->payment_description) }}"
                            placeholder="Custom Payment">
                    </div>
                    <div class="nmi-setting-field">
                        <label class="marketing-settings-label" for="sms_sender_name">SMS sender label</label>
                        <input type="text" name="sms_sender_name" id="sms_sender_name" class="nmi-setting-input"
                            value="{{ old('sms_sender_name', $settings->sms_sender_name) }}"
                            placeholder="Avi The Jeweler">
                    </div>
                </div>
                <div class="nmi-setting-field">
                    <label class="marketing-settings-label">
                        <input type="hidden" name="enabled" value="0">
                        <input type="checkbox" name="enabled" value="1" @checked(old('enabled', $settings->enabled))>
                        Enable NMI Payment Links
                    </label>
                    @if(!$settings->isConfigured())
                        <span class="marketing-settings-hint nmi-setting-warn">Add both NMI keys and enable this feature before sending links.</span>
                    @endif
                </div>
            </div>
        </section>

        <section class="nmi-setting-group nmi-setting-group--alerts">
            <header class="nmi-setting-group-head">
                <h2 class="nmi-setting-group-title">Admin alerts</h2>
                <p class="nmi-setting-group-desc">
                    When a customer pays through NMI (payment link or layaway), admin email goes to <strong>DEALS_NOTIFICATION_EMAIL</strong> in .env. SMS alerts go to the numbers below.
                </p>
            </header>
            <div class="nmi-setting-stack">
                <div class="nmi-setting-field">
                    <label class="marketing-settings-label" for="admin_notification_phones">Admin SMS on payment received</label>
                    <input type="text" name="admin_notification_phones" id="admin_notification_phones" class="nmi-setting-input"
                        value="{{ old('admin_notification_phones', $settings->admin_notification_phones ?? '+17866084763, +17867694691') }}"
                        placeholder="+17866084763, +17867694691">
                    <span class="marketing-settings-hint">Comma-separated E.164 numbers. Leave blank to disable admin payment SMS.</span>
                </div>
            </div>
        </section>

        <section class="nmi-setting-group nmi-setting-group--layaway">
            <header class="nmi-setting-group-head">
                <h2 class="nmi-setting-group-title">Layaway</h2>
                <p class="nmi-setting-group-desc">
                    Configure layaway plans for NMI payment links and Instagram Story checkout. Layaway is <strong>disabled by default</strong> — regular NMI payments are unaffected until you enable it.
                </p>
            </header>
            <div class="nmi-setting-stack">
                <div class="nmi-setting-field">
                    <label class="marketing-settings-label">
                        <input type="hidden" name="layaway_enabled" value="0">
                        <input type="checkbox" name="layaway_enabled" value="1" @checked(old('layaway_enabled', $settings->layaway_enabled))>
                        Enable layaway
                    </label>
                    <span class="marketing-settings-hint">When off, all payments work exactly as they do today.</span>
                </div>
                <div class="nmi-setting-row">
                    <div class="nmi-setting-field">
                        <label class="marketing-settings-label" for="layaway_duration_days">Layaway duration (calendar days)</label>
                        <input type="number" name="layaway_duration_days" id="layaway_duration_days" class="nmi-setting-input" min="1" max="730"
                            value="{{ old('layaway_duration_days', $settings->layaway_duration_days ?? 90) }}">
                        <span class="marketing-settings-hint">Default: 90 days from first successful payment. Existing plans keep their duration.</span>
                    </div>
                    <div class="nmi-setting-field">
                        <label class="marketing-settings-label" for="layaway_min_deposit_percent">Preset buttons start at (% of plan total)</label>
                        <input type="number" step="0.01" name="layaway_min_deposit_percent" id="layaway_min_deposit_percent" class="nmi-setting-input" min="1" max="100"
                            value="{{ old('layaway_min_deposit_percent', $settings->layaway_min_deposit_percent ?? 20) }}">
                        <span class="marketing-settings-hint">
                            Hides the fixed Pay 20% / 30% / 40% buttons below this value.
                            Example: set 30 → Pay 20% disappears; Pay 30% and Pay 40% stay.
                            Does not change Custom amount (still 10% minimum) or Pay in full.
                        </span>
                    </div>
                </div>
                <div class="nmi-setting-row">
                    <div class="nmi-setting-field">
                        <label class="marketing-settings-label" for="layaway_refund_fee_percent">Refund fee (% of deposits — shown in terms)</label>
                        <input type="number" step="0.01" name="layaway_refund_fee_percent" id="layaway_refund_fee_percent" class="nmi-setting-input" min="0" max="100"
                            value="{{ old('layaway_refund_fee_percent', $settings->layaway_refund_fee_percent ?? 10) }}">
                        <span class="marketing-settings-hint">Refunds are processed manually in NMI. This percentage is disclosed in the terms only.</span>
                    </div>
                    <div class="nmi-setting-field nmi-setting-field--checkbox">
                        <label class="marketing-settings-label">
                            <input type="hidden" name="layaway_weekly_reminders" value="0">
                            <input type="checkbox" name="layaway_weekly_reminders" value="1" @checked(old('layaway_weekly_reminders', $settings->layaway_weekly_reminders ?? true))>
                            Send weekly balance reminder emails and SMS
                        </label>
                    </div>
                </div>
                <div class="nmi-setting-field">
                    <label class="marketing-settings-label" for="layaway_terms_html">Layaway Terms and Conditions (HTML)</label>
                    <textarea name="layaway_terms_html" id="layaway_terms_html" class="nmi-setting-input nmi-setting-textarea" rows="18">{{ old('layaway_terms_html', $settings->layaway_terms_html ?: $defaultTerms) }}</textarea>
                    <span class="marketing-settings-hint">
                        Displayed in a popup modal at checkout. You can edit this text freely.
                        When you change duration / minimum payment / refund fee / link expiry above and click <strong>Save settings</strong>, matching numbers inside these terms update automatically (the rest of your text is kept).
                    </span>
                </div>
            </div>
        </section>

        <div class="nmi-setting-actions">
            <button type="submit" class="btn btn-primary">Save settings</button>
        </div>
    </form>
</div>
@push('styles')
@include('setting.partials.section-styles')
<style>
.nmi-setting-wrap { max-width: 920px; }
.nmi-setting-form { display: flex; flex-direction: column; gap: 1.15rem; }
.nmi-setting-group {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.25rem 1.35rem 1.35rem;
    border-left-width: 4px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.nmi-setting-group--connection {
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 48%);
    border-left-color: #334155;
}
.nmi-setting-group--alerts {
    background: linear-gradient(180deg, #fffbeb 0%, #ffffff 55%);
    border-left-color: #d97706;
}
.nmi-setting-group--layaway {
    background: linear-gradient(180deg, #ecfdf5 0%, #ffffff 45%);
    border-left-color: #0f766e;
}
.nmi-setting-group-head { margin-bottom: 1rem; }
.nmi-setting-group-title {
    margin: 0 0 0.35rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.01em;
}
.nmi-setting-group-desc {
    margin: 0;
    font-size: 0.85rem;
    color: #64748b;
    line-height: 1.5;
}
.nmi-setting-stack { display: flex; flex-direction: column; gap: 1rem; }
.nmi-setting-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem 1rem; }
.nmi-setting-field { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.nmi-setting-field--checkbox {
    justify-content: center;
    padding-top: 1.55rem;
}
.nmi-setting-input {
    width: 100%;
    max-width: none;
    padding: 0.55rem 0.65rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    font: inherit;
    font-size: 0.95rem;
    box-sizing: border-box;
}
.nmi-setting-input:focus {
    outline: none;
    border-color: #94a3b8;
    box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.25);
}
.nmi-setting-textarea {
    min-height: 16rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.85rem;
    line-height: 1.5;
    resize: vertical;
}
.nmi-setting-field .marketing-settings-hint { display: block; }
.nmi-setting-warn { color: #b45309; }
.nmi-setting-actions {
    display: flex;
    justify-content: flex-start;
    padding: 0.15rem 0 0.5rem;
}
@media (max-width: 720px) {
    .nmi-setting-row { grid-template-columns: 1fr; }
    .nmi-setting-field--checkbox { padding-top: 0; }
}
</style>
@endpush
@endsection