@extends('layouts.app')

@section('title', 'Setting')

@section('content')
<div class="setting-page">
    <header class="setting-header">
        <h1>Setting</h1>
        <p class="setting-subtitle">Configure options for each module. Choose a section below to open its settings.</p>
    </header>

    <div class="setting-cards-grid">
        <a href="{{ route('setting.general') }}" class="setting-card">
            <span class="setting-card-icon" aria-hidden="true">⚙</span>
            <h2 class="setting-card-title">General</h2>
            <p class="setting-card-desc">Auto-refresh interval for Deals, Marketing, Pay What You Want, and Offers pages.</p>
            <span class="setting-card-cta">Open General →</span>
        </a>
        <a href="{{ route('setting.fees') }}" class="setting-card">
            <span class="setting-card-icon" aria-hidden="true">💰</span>
            <h2 class="setting-card-title">Fees &amp; profit</h2>
            <p class="setting-card-desc">Gateway, sales commission, shipping, and extra fees for Marketing, Deals, and Offers.</p>
            <span class="setting-card-cta">Open Fees &amp; profit →</span>
        </a>
        <a href="{{ route('setting.sales-commissions') }}" class="setting-card">
            <span class="setting-card-icon" aria-hidden="true">👤</span>
            <h2 class="setting-card-title">Sales commissions</h2>
            <p class="setting-card-desc">Salespeople, commission rates, and Shopify auto-commission on paid orders.</p>
            <span class="setting-card-cta">Open Sales commissions →</span>
        </a>
        <a href="{{ route('setting.marketing') }}" class="setting-card">
            <span class="setting-card-icon" aria-hidden="true">✉</span>
            <h2 class="setting-card-title">Marketing</h2>
            <p class="setting-card-desc">Coupon expiration, test email/phone, and test messages for Marketing templates.</p>
            <span class="setting-card-cta">Open Marketing →</span>
        </a>
        <a href="{{ route('setting.offer') }}" class="setting-card">
            <span class="setting-card-icon" aria-hidden="true">◈</span>
            <h2 class="setting-card-title">Offer</h2>
            <p class="setting-card-desc">SMS phones, offer limits, validity, and automated offer flow.</p>
            <span class="setting-card-cta">Open Offer →</span>
        </a>
        <a href="{{ route('setting.deals') }}" class="setting-card">
            <span class="setting-card-icon" aria-hidden="true">◷</span>
            <h2 class="setting-card-title">Deal of the Day</h2>
            <p class="setting-card-desc">Test email for templates and theme section/block for the Deals module.</p>
            <span class="setting-card-cta">Open Deal of the Day →</span>
        </a>
        <a href="{{ route('setting.pwyw') }}" class="setting-card">
            <span class="setting-card-icon" aria-hidden="true">$</span>
            <h2 class="setting-card-title">Pay What You Want</h2>
            <p class="setting-card-desc">Cleanup rules for PWYW variants and run cleanup now.</p>
            <span class="setting-card-cta">Open Pay What You Want →</span>
        </a>
        <a href="{{ route('setting.social-media') }}" class="setting-card">
            <span class="setting-card-icon" aria-hidden="true">📱</span>
            <h2 class="setting-card-title">Social Media</h2>
            <p class="setting-card-desc">Handoff notification phone. SMS alerts when users request human assistance via WhatsApp or Instagram.</p>
            <span class="setting-card-cta">Open Social Media →</span>
        </a>
        <a href="{{ route('setting.nmi-payment') }}" class="setting-card">
            <span class="setting-card-icon" aria-hidden="true">💳</span>
            <h2 class="setting-card-title">NMI Payment</h2>
            <p class="setting-card-desc">NMI API keys, tax, link expiry, admin SMS alerts, layaway plans, terms, and weekly reminders.</p>
            <span class="setting-card-cta">Open NMI Payment →</span>
        </a>
        <a href="{{ route('setting.accountant-report') }}" class="setting-card">
            <span class="setting-card-icon" aria-hidden="true">📊</span>
            <h2 class="setting-card-title">Accountant Report</h2>
            <p class="setting-card-desc">Accountant email and automatic day-10 PDF + CSV of no-tax Shopify + NMI sales.</p>
            <span class="setting-card-cta">Open Accountant Report →</span>
        </a>
        <a href="{{ route('setting.product-ai-import') }}" class="setting-card">
            <span class="setting-card-icon" aria-hidden="true">✦</span>
            <h2 class="setting-card-title">Product AI Import</h2>
            <p class="setting-card-desc">Crop ratio, image/video compression targets, upload limits, lifestyle and Shopify DRAFT defaults.</p>
            <span class="setting-card-cta">Open Product AI Import →</span>
        </a>
        <a href="{{ route('setting.nameplates') }}" class="setting-card">
            <span class="setting-card-icon" aria-hidden="true">◇</span>
            <h2 class="setting-card-title">Nameplates</h2>
            <p class="setting-card-desc">Google Fonts API key, jewelry typefaces, and the prompts for jewelry photo Generate.</p>
            <span class="setting-card-cta">Open Nameplates →</span>
        </a>
        <a href="{{ route('setting.ad-platforms') }}" class="setting-card">
            <span class="setting-card-icon" aria-hidden="true">◈</span>
            <h2 class="setting-card-title">Ad platforms</h2>
            <p class="setting-card-desc">Connect Meta Ads (Facebook / Instagram campaigns). Google Ads and more platforms later.</p>
            <span class="setting-card-cta">Open Ad platforms →</span>
        </a>
    </div>
</div>

@push('styles')
<style>
.setting-page { max-width: 800px; }
.setting-header { margin-bottom: 1.5rem; }
.setting-header h1 { font-size: 1.5rem; font-weight: 700; margin: 0 0 0.5rem 0; color: #111; }
.setting-subtitle { margin: 0; font-size: 0.95rem; color: #4b5563; line-height: 1.5; }
.setting-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25rem; }
.setting-card { display: block; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 1.5rem; text-decoration: none; color: inherit; transition: border-color 0.2s, box-shadow 0.2s; }
.setting-card:hover { border-color: #2563eb; box-shadow: 0 2px 8px rgba(37, 99, 235, 0.12); }
.setting-card-icon { font-size: 2rem; display: block; margin-bottom: 0.75rem; }
.setting-card-title { font-size: 1.1rem; font-weight: 700; margin: 0 0 0.5rem 0; color: #111; }
.setting-card-desc { font-size: 0.85rem; color: #6b7280; line-height: 1.45; margin: 0 0 0.75rem 0; }
.setting-card-cta { font-size: 0.85rem; font-weight: 600; color: #2563eb; }
</style>
@endpush
@endsection