@extends('layouts.app')

@section('title', 'Platform Settings')

@push('styles')
<style>
    .settings-grid { display:grid;grid-template-columns:1fr 1fr;gap:1.5rem; }
    .settings-section {
        background:#fff;border:1px solid var(--gray-200);border-radius:14px;
        padding:1.5rem;
    }
    .settings-section h3 { font-size:.95rem;font-weight:700;color:var(--gray-800);margin-bottom:1.25rem;display:flex;align-items:center;gap:.45rem; }
    .settings-section h3 i { color:var(--green); }

    .radio-card {
        display:flex;align-items:flex-start;gap:.85rem;
        padding:.9rem 1rem;border-radius:10px;
        border:2px solid var(--gray-200);
        cursor:pointer;margin-bottom:.6rem;
        transition:border-color .15s,background .15s;
    }
    .radio-card:hover { border-color:var(--green);background:var(--green-light); }
    .radio-card.selected { border-color:var(--green);background:var(--green-light); }
    .radio-card input[type=radio] { display:none; }
    .radio-dot {
        width:18px;height:18px;border-radius:50%;
        border:2px solid var(--gray-300);flex-shrink:0;margin-top:.2rem;
        display:flex;align-items:center;justify-content:center;
        transition:border-color .15s,background .15s;
    }
    .radio-card.selected .radio-dot {
        border-color:var(--green);background:var(--green);
        box-shadow:0 0 0 3px rgba(0,166,81,.15);
    }
    .radio-card.selected .radio-dot::after {
        content:'';width:7px;height:7px;background:#fff;border-radius:50%;
    }
    .radio-label { font-size:.88rem;font-weight:600;color:var(--gray-800); }
    .radio-desc  { font-size:.75rem;color:var(--gray-500);margin-top:.15rem; }

    .toggle-row {
        display:flex;align-items:center;justify-content:space-between;
        padding:.9rem 1rem;border-radius:10px;border:1.5px solid var(--gray-200);
        margin-bottom:.6rem;
    }
    .toggle-label { font-size:.88rem;font-weight:600;color:var(--gray-800); }
    .toggle-desc  { font-size:.75rem;color:var(--gray-500);margin-top:.1rem; }
    .sw { position:relative;width:44px;height:24px;flex-shrink:0; }
    .sw input { display:none; }
    .sw-track {
        position:absolute;inset:0;background:var(--gray-300);border-radius:12px;
        cursor:pointer;transition:background .2s;
    }
    .sw input:checked + .sw-track { background:var(--green); }
    .sw-thumb {
        position:absolute;top:3px;left:3px;
        width:18px;height:18px;background:#fff;border-radius:50%;
        box-shadow:0 1px 4px rgba(0,0,0,.2);
        pointer-events:none;transition:transform .2s;
    }
    .sw input:checked ~ .sw-thumb { transform:translateX(20px); }

    .save-row { margin-top:1.5rem;display:flex;justify-content:flex-end; }

    @media(max-width:768px) { .settings-grid { grid-template-columns:1fr; } }
</style>
@endpush

@section('content')

<div class="page-header">
    <div>
        <h1 class="page-title"><i class="fas fa-sliders"></i> Platform Settings</h1>
        <p class="page-subtitle">Configure platform-wide behaviour for the public feedback flow.</p>
    </div>
    <a href="{{ route('admin.projects.index') }}" class="btn-secondary">
        <i class="fas fa-qrcode"></i> Project QR Settings
    </a>
</div>

<form method="POST" action="{{ route('admin.settings.update') }}">
@csrf

<div class="settings-grid">

    {{-- ── User Info Placement ──────────────────────────────────── --}}
    <div class="settings-section">
        <h3><i class="fas fa-id-card"></i> User Info Placement</h3>
        <p style="font-size:.82rem;color:var(--gray-500);margin-bottom:1rem;">
            Choose whether the public user information form appears before or after the survey questions.
        </p>

        <label class="radio-card {{ $settings['public_user_info_placement'] === 'before' ? 'selected' : '' }}"
               id="rc-before">
            <input type="radio" name="public_user_info_placement" value="before"
                   {{ $settings['public_user_info_placement'] === 'before' ? 'checked' : '' }}
                   onchange="selectRadio('rc-before','rc-after')">
            <div class="radio-dot"></div>
            <div>
                <div class="radio-label"><i class="fas fa-arrow-up" style="font-size:.7rem;color:var(--green);"></i> Collect Info First</div>
                <div class="radio-desc">User fills in name, phone, etc. before answering questions.</div>
            </div>
        </label>

        <label class="radio-card {{ $settings['public_user_info_placement'] === 'after' ? 'selected' : '' }}"
               id="rc-after">
            <input type="radio" name="public_user_info_placement" value="after"
                   {{ $settings['public_user_info_placement'] === 'after' ? 'checked' : '' }}
                   onchange="selectRadio('rc-after','rc-before')">
            <div class="radio-dot"></div>
            <div>
                <div class="radio-label"><i class="fas fa-arrow-down" style="font-size:.7rem;color:var(--green);"></i> Collect Info After (Default)</div>
                <div class="radio-desc">User answers questions first, then provides their details at the end.</div>
            </div>
        </label>
    </div>

    {{-- ── Duplicate Prevention ─────────────────────────────────── --}}
    <div class="settings-section">
        <h3><i class="fas fa-shield-halved"></i> Submission Controls</h3>
        <p style="font-size:.82rem;color:var(--gray-500);margin-bottom:1rem;">
            Anti-spam and duplicate prevention settings for public submissions.
        </p>

        <div class="toggle-row">
            <div>
                <div class="toggle-label">Duplicate Prevention</div>
                <div class="toggle-desc">
                    Block same phone number from submitting for the same project more than once per day.
                </div>
            </div>
            <label class="sw">
                <input type="checkbox" name="public_duplicate_check" value="1"
                       id="dupCheck"
                       {{ $settings['public_duplicate_check'] === '1' ? 'checked' : '' }}>
                <div class="sw-track"></div>
                <div class="sw-thumb"></div>
            </label>
        </div>
        <input type="hidden" name="public_duplicate_check" id="dupHidden"
               value="{{ $settings['public_duplicate_check'] }}">

        <div style="background:var(--gray-50);border-radius:10px;padding:.85rem 1rem;font-size:.8rem;color:var(--gray-500);margin-top:.75rem;">
            <i class="fas fa-info-circle" style="color:var(--green);"></i>
            Public surveys are also protected by rate limiting (max 5 submissions per IP per minute).
        </div>
    </div>

</div>

<div class="save-row">
    <button type="submit" class="btn-primary">
        <i class="fas fa-floppy-disk"></i> Save Settings
    </button>
</div>

</form>

@endsection

@push('scripts')
<script>
function selectRadio(onId, offId) {
    document.getElementById(onId).classList.add('selected');
    document.getElementById(offId).classList.remove('selected');
}

// Keep hidden field in sync with checkbox (for unchecked = 0)
const dupCheck  = document.getElementById('dupCheck');
const dupHidden = document.getElementById('dupHidden');
if (dupCheck) {
    // Remove the regular input when checkbox is used
    dupCheck.addEventListener('change', function() {
        dupHidden.value = this.checked ? '1' : '0';
    });
    // Ensure form sends correct value
    dupCheck.form.addEventListener('submit', function() {
        if (!dupCheck.checked) dupHidden.value = '0';
    });
}
</script>
@endpush