@extends('admin.layouts.app')
@section('title','Settings')
@section('breadcrumb') <span>/</span> Settings @endsection

@section('content')
<div class="page-header">
    <div><h1>Settings</h1><p class="page-subtitle">Configure NGO information, payment, email and CMS</p></div>
</div>

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

    <!-- Tabs -->
    <ul class="nav nav-tabs mb-4" id="settingsTabs">
        @foreach(['general'=>'General','legal'=>'Legal & Tax','payment'=>'Payment Gateway','email'=>'Email / SMTP','donation'=>'Donation','contact'=>'Contact','cms'=>'Website CMS'] as $group => $label)
        <li class="nav-item">
            <a class="nav-link {{ $loop->first ? 'active' : '' }}" data-bs-toggle="tab" href="#tab-{{ $group }}" style="font-size:13px;font-weight:600;">
                {{ $label }}
            </a>
        </li>
        @endforeach
    </ul>

    <div class="tab-content">
        @foreach(['general','legal','payment','email','donation','contact','cms'] as $group)
        <div class="tab-pane fade {{ $loop->first ? 'show active' : '' }}" id="tab-{{ $group }}">
            <div class="card">
                <div class="card-body">
                    @if($groups->has($group))
                    <div class="row g-3">
                        @foreach($groups[$group] as $setting)
                        <div class="{{ in_array($setting->type,['textarea']) ? 'col-12' : 'col-md-6' }}">
                            <label class="form-label">{{ $setting->label }}</label>
                            @if($setting->type === 'textarea')
                                <textarea name="{{ $setting->key }}" class="form-control" rows="3">{{ old($setting->key, $setting->value) }}</textarea>
                            @elseif($setting->type === 'boolean')
                                <div class="form-check form-switch mt-2">
                                    <input class="form-check-input" type="checkbox" name="{{ $setting->key }}" value="1"
                                        {{ $setting->value == '1' ? 'checked' : '' }}>
                                </div>
                            @elseif($setting->type === 'file')
                                <input type="file" name="{{ $setting->key }}" class="form-control">
                                @if($setting->value)
                                <small class="text-success"><i class="fas fa-file me-1"></i>Current: {{ $setting->value }}</small>
                                @endif
                            @else
                                <input type="{{ in_array($setting->key,['razorpay_key_secret','razorpay_webhook_secret','email_password']) ? 'password' : 'text' }}"
                                    name="{{ $setting->key }}" class="form-control"
                                    value="{{ old($setting->key, $setting->value) }}"
                                    placeholder="{{ $setting->label }}">
                            @endif
                        </div>
                        @endforeach
                    </div>
                    @else
                    <div class="text-center py-4 text-muted">
                        <i class="fas fa-cog d-block mb-2" style="font-size:24px;color:#cbd5e1;"></i>
                        No settings in this group
                    </div>
                    @endif

                    @if($group === 'email')
                    <hr>
                    <div class="d-flex align-items-center gap-2">
                        <input type="email" id="testEmailTo" class="form-control" style="max-width:280px;" placeholder="Send test email to...">
                        <button type="button" class="btn btn-outline-primary" id="testEmailBtn" onclick="sendTestEmail()">
                            <i class="fas fa-paper-plane me-2"></i>Send Test Email
                        </button>
                    </div>
                    <small class="text-muted d-block mt-1">Uses the SMTP settings above as currently saved in the database (save first if you just changed them).</small>
                    @endif

                    @if($group === 'payment')
                    <hr>
                    <button type="button" class="btn btn-outline-primary" id="testRazorpayBtn" onclick="testRazorpay()">
                        <i class="fas fa-plug me-2"></i>Test Razorpay Connection
                    </button>
                    <small class="text-muted d-block mt-1">Verifies the Razorpay Key ID/Secret above (as currently saved) can authenticate with Razorpay's API.</small>
                    @endif
                </div>
            </div>
        </div>
        @endforeach
    </div>

    <div class="d-flex gap-2 mt-3">
        <button type="submit" class="btn btn-primary">
            <i class="fas fa-save me-2"></i>Save All Settings
        </button>
        <button type="reset" class="btn btn-outline-secondary">Reset Changes</button>
    </div>
</form>
@endsection

@push('scripts')
<script>
function sendTestEmail() {
    const to  = document.getElementById('testEmailTo').value;
    const btn = document.getElementById('testEmailBtn');
    if (!to) { toastr.error('Enter an email address to send the test to.'); return; }

    btn.disabled = true;
    btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Sending...';

    fetch('{{ route("admin.settings.test-email") }}', {
        method: 'POST',
        headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Content-Type': 'application/json' },
        body: JSON.stringify({ to: to }),
    })
    .then(r => r.json())
    .then(d => {
        btn.disabled = false;
        btn.innerHTML = '<i class="fas fa-paper-plane me-2"></i>Send Test Email';
        d.success ? toastr.success(d.message) : toastr.error(d.message);
    })
    .catch(() => {
        btn.disabled = false;
        btn.innerHTML = '<i class="fas fa-paper-plane me-2"></i>Send Test Email';
        toastr.error('Network error while sending test email.');
    });
}

function testRazorpay() {
    const btn = document.getElementById('testRazorpayBtn');
    btn.disabled = true;
    btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Testing...';

    fetch('{{ route("admin.settings.test-razorpay") }}', {
        method: 'POST',
        headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
    })
    .then(r => r.json())
    .then(d => {
        btn.disabled = false;
        btn.innerHTML = '<i class="fas fa-plug me-2"></i>Test Razorpay Connection';
        d.success ? toastr.success(d.message) : toastr.error(d.message);
    })
    .catch(() => {
        btn.disabled = false;
        btn.innerHTML = '<i class="fas fa-plug me-2"></i>Test Razorpay Connection';
        toastr.error('Network error while testing Razorpay.');
    });
}
</script>
@endpush