@extends('layouts.app')

@section('title', 'Marketing – Setting')

@section('content')
<div class="setting-section-page">
    <p class="setting-back">
        <a href="{{ route('setting.index') }}">← Setting</a>
    </p>
    <header class="setting-header">
        <h1>Marketing</h1>
        <p class="setting-subtitle">Coupon expiration and cleanup. After the period below, expired coupons are permanently deleted from Shopify and removed from the Marketing cards. Customers receive a reminder email before their coupon expires.</p>
    </header>
    <section class="setting-section setting-card">
        <form action="{{ route('marketing.settings') }}" method="POST" class="marketing-settings-form">
            @csrf
            <div class="marketing-settings-grid">
                <div class="marketing-settings-row">
                    <label class="marketing-settings-label" for="expired_coupon_delete_after_days">Delete expired coupons from Shopify after (days)</label>
                    <input type="number" name="expired_coupon_delete_after_days" id="expired_coupon_delete_after_days" class="marketing-settings-input" min="0" max="365" value="{{ old('expired_coupon_delete_after_days', $marketingSettings->expired_coupon_delete_after_days ?? 30) }}" required>
                    <span class="marketing-settings-hint">Days after expiration when the coupon is permanently deleted from Shopify (and removed from cards). Use <strong>0</strong> to delete all expired coupons as soon as they expire. Default: 30.</span>
                </div>
                <div class="marketing-settings-row">
                    <label class="marketing-settings-label" for="expiration_reminder_days">Send expiration reminder email (days before expiry)</label>
                    <input type="number" name="expiration_reminder_days" id="expiration_reminder_days" class="marketing-settings-input" min="0" max="30" value="{{ old('expiration_reminder_days', $marketingSettings->expiration_reminder_days ?? 1) }}" required>
                    <span class="marketing-settings-hint">Email the customer this many days before the coupon expires. Default: 1.</span>
                </div>
                <div class="marketing-settings-row">
                    <label class="marketing-settings-label" for="coupon_default_expiry_days">Default coupon expiration (days from creation)</label>
                    <input type="number" name="coupon_default_expiry_days" id="coupon_default_expiry_days" class="marketing-settings-input" min="1" max="365" value="{{ old('coupon_default_expiry_days', $marketingSettings->coupon_default_expiry_days ?? 15) }}" required>
                    <span class="marketing-settings-hint">When you create a discount, the expiration date defaults to this many days from today. Default: 15.</span>
                </div>
            </div>

            <p class="marketing-settings-subsection-desc" style="margin-top:1rem;">
                Fee defaults (gateway, commission, shipping) are configured in
                <a href="{{ route('setting.fees') }}">Setting → Fees &amp; profit</a>.
            </p>

            <div class="marketing-settings-grid">
                <div class="marketing-settings-row">
                    <label class="marketing-settings-label" for="test_email">Test email address</label>
                    <input type="email" name="test_email" id="test_email" class="marketing-settings-input" placeholder="colonia7421@gmail.com" value="{{ old('test_email', $marketingSettings->test_email ?? 'colonia7421@gmail.com') }}">
                    <span class="marketing-settings-hint">Used when you send a test email from the options below. Default: colonia7421@gmail.com</span>
                </div>
                <div class="marketing-settings-row">
                    <label class="marketing-settings-label" for="test_phone">Test phone (for SMS)</label>
                    <input type="text" name="test_phone" id="test_phone" class="marketing-settings-input" placeholder="+1234567890" value="{{ old('test_phone', $marketingSettings->test_phone ?? '') }}">
                    <span class="marketing-settings-hint">E.164 format (e.g. +1234567890). Used when you send a test SMS.</span>
                </div>
            </div>
            <div class="marketing-settings-actions">
                <button type="submit" class="btn btn-primary">Save settings</button>
            </div>
        </form>

        <div class="marketing-settings-actions" style="margin-top: 1rem;">
            <form action="{{ route('marketing.delete-expired-coupons') }}" method="POST" style="display: inline;" onsubmit="return confirm('Delete from Shopify and remove from cards all expired coupons that are older than the configured days above. Continue?');">
                @csrf
                <button type="submit" class="btn btn-secondary">Delete expired coupons now</button>
            </form>
            <span class="marketing-settings-hint" style="margin-left: 0.5rem; vertical-align: middle;">Removes from Shopify and from cards all coupons that are expired and past the &quot;Delete after (days)&quot; setting.</span>
        </div>

        <div class="marketing-test-messages-block">
            <h3 class="marketing-test-messages-title">Test messages</h3>
            <p class="marketing-test-messages-desc">Send a test email or SMS to preview and update the content of each template. Emails go to the <strong>Test email</strong> above; SMS to the <strong>Test phone</strong> above.</p>
            <form action="{{ route('marketing.send-test-message') }}" method="POST" class="marketing-test-messages-form">
                @csrf
                <div class="marketing-test-messages-row">
                    <label class="marketing-settings-label" for="test_template">Message type</label>
                    <select name="test_template" id="test_template" class="marketing-settings-input" required>
                        @foreach($testMessageTypes ?? [] as $value => $label)
                            <option value="{{ $value }}">{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="marketing-settings-actions">
                    <button type="submit" class="btn btn-secondary">Send test</button>
                </div>
            </form>
        </div>
    </section>
</div>
@push('styles')
@include('setting.partials.section-styles')
<style>
.marketing-settings-subsection-title { font-size: 1rem; font-weight: 700; margin: 1.5rem 0 0.35rem 0; color: #111; }
.marketing-settings-subsection-desc { margin: 0 0 1rem 0; font-size: 0.85rem; color: #6b7280; line-height: 1.45; }
.marketing-settings-fees-grid { margin-bottom: 1rem; }
.marketing-settings-fee-row { gap: 0.5rem; }
.marketing-settings-fee-label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; font-weight: 600; color: #374151; }
</style>
@endpush
@endsection