@extends('admin.layouts.app')
@section('title','System Settings')
@section('page-title','System Settings')
@section('page-subtitle','Configure organization branding, contact details and system preferences')
@section('content')

@if(session('success'))<div class="alert alert-success">{{ session('success') }}</div>@endif
@if($errors->any())
    <div class="alert alert-danger"><ul class="mb-0">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul></div>
@endif

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

    <ul class="nav nav-pills mb-4" role="tablist">
        <li class="nav-item"><button type="button" class="nav-link active" data-bs-toggle="pill" data-bs-target="#tab-general">General</button></li>
        <li class="nav-item"><button type="button" class="nav-link" data-bs-toggle="pill" data-bs-target="#tab-branding">Branding & Colors</button></li>
        <li class="nav-item"><button type="button" class="nav-link" data-bs-toggle="pill" data-bs-target="#tab-assets">Logo & Favicon</button></li>
    </ul>

    <div class="tab-content">
        {{-- General --}}
        <div class="tab-pane fade show active" id="tab-general">
            <div class='cardx p-4'>
                <h6 class="mb-3">Organization Information</h6>
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label">Organization Name *</label>
                        <input name="organization_name" class="form-control" value="{{ old('organization_name', $settings['organization_name']) }}" required>
                        <small class="text-muted">Full name shown across the system</small>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Short Name</label>
                        <input name="organization_short_name" class="form-control" value="{{ old('organization_short_name', $settings['organization_short_name']) }}" placeholder="NIAE">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Admin Panel Label</label>
                        <input name="admin_panel_label" class="form-control" value="{{ old('admin_panel_label', $settings['admin_panel_label']) }}" placeholder="CONFERENCE ADMIN">
                    </div>
                    <div class="col-md-12">
                        <label class="form-label">Tagline</label>
                        <input name="organization_tagline" class="form-control" value="{{ old('organization_tagline', $settings['organization_tagline']) }}" placeholder="Conference Management System">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Support Email *</label>
                        <input type="email" name="support_email" class="form-control" value="{{ old('support_email', $settings['support_email']) }}" required>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Support Phone</label>
                        <input name="support_phone" class="form-control" value="{{ old('support_phone', $settings['support_phone']) }}">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Website URL</label>
                        <input type="url" name="website_url" class="form-control" value="{{ old('website_url', $settings['website_url']) }}" placeholder="https://example.org">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Default Currency *</label>
                        <input name="default_currency" class="form-control" value="{{ old('default_currency', $settings['default_currency']) }}" required>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Timezone *</label>
                        <input name="timezone" class="form-control" value="{{ old('timezone', $settings['timezone']) }}" required placeholder="Africa/Lagos">
                    </div>
                </div>
            </div>

            <div class="cardx p-4 mt-4">
                <h6 class="mb-3">Public Certificate Verification</h6>
                <div class="form-check mb-2">
                    <input type="hidden" name="certificate_verify_landing_enabled" value="0">
                    <input type="checkbox" name="certificate_verify_landing_enabled" value="1" class="form-check-input" id="certificate_verify_landing_enabled"
                        @checked(old('certificate_verify_landing_enabled', ($settings['certificate_verify_landing_enabled'] ?? '1') === '1'))>
                    <label class="form-check-label" for="certificate_verify_landing_enabled">
                        Enable public code-entry page at <code>/verify-certificate</code>
                    </label>
                </div>
                <p class="text-muted small mb-2">
                    When enabled, visitors can manually enter a certificate number or verification code.
                    QR links always use <code>/verify-certificate/{code}</code> directly.
                </p>
                <p class="text-muted small mb-0">
                    Only <strong>activated</strong> certificates show as valid publicly. Unactivated certificates return a limited response without holder details.
                    <a href="{{ route('certificates.verify.index') }}" target="_blank">Open verification page</a>
                </p>
            </div>

            <div class="cardx p-4 mt-4">
                <h6 class="mb-3">Public Password Reset</h6>
                <div class="form-check mb-2">
                    <input type="hidden" name="public_password_reset_enabled" value="0">
                    <input type="checkbox" name="public_password_reset_enabled" value="1" class="form-check-input" id="public_password_reset_enabled"
                        @checked(old('public_password_reset_enabled', ($settings['public_password_reset_enabled'] ?? '1') === '1'))>
                    <label class="form-check-label" for="public_password_reset_enabled">
                        Enable self-service password reset on the login page
                    </label>
                </div>
                <p class="text-muted small mb-2">
                    When enabled, users can request a reset link at <code>/forgot-password</code>.
                    Reset links are sent by <strong>email only</strong> (not SMS or WhatsApp).
                    When disabled, the forgot-password link is hidden and users are directed to contact support.
                </p>
                <p class="text-muted small mb-0">
                    Admins can always reset passwords from
                    <a href="{{ route('admin.users.password-reset.index') }}">Users → Password Reset</a>.
                </p>
            </div>

            <div class="cardx p-4 mt-4">
                <h6 class="mb-3">Paper Review Workflow</h6>
                <p class="text-muted small">Defaults for in-app paper submission conferences. Each conference can override review mode under Conference setup.</p>
                <div class="row g-3">
                    <div class="col-md-4">
                        <label class="form-label">Default review mode *</label>
                        <select name="paper_review_mode_default" class="form-select" required>
                            <option value="double_blind" @selected(old('paper_review_mode_default', $settings['paper_review_mode_default'] ?? 'double_blind') === 'double_blind')>Double-blind</option>
                            <option value="single" @selected(old('paper_review_mode_default', $settings['paper_review_mode_default'] ?? '') === 'single')>Single review</option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Email batch size *</label>
                        <input type="number" name="paper_email_batch_size" class="form-control" min="1" max="50" required
                            value="{{ old('paper_email_batch_size', $settings['paper_email_batch_size'] ?? 25) }}">
                        <small class="text-muted">Max emails sent per batch (e.g. 20–25).</small>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Batch interval (minutes) *</label>
                        <input type="number" name="paper_email_batch_interval_minutes" class="form-control" min="5" max="10" required
                            value="{{ old('paper_email_batch_interval_minutes', $settings['paper_email_batch_interval_minutes'] ?? 5) }}">
                        <small class="text-muted">Scheduler runs every 5 minutes.</small>
                    </div>
                </div>
                <p class="text-muted small mt-3 mb-0">
                    Manage templates at <a href="{{ route('admin.paper-email-templates.index') }}">Paper Email Templates</a>
                    and view sent mail at <a href="{{ route('admin.paper-notifications.index') }}">Paper Notifications</a>.
                </p>
            </div>
        </div>

        {{-- Branding colors --}}
        <div class="tab-pane fade" id="tab-branding">
            <div class='cardx p-4'>
                <h6 class="mb-3">Color Scheme</h6>
                <p class="text-muted">These colors apply system-wide to admin, user portal and login pages.</p>
                <div class="row g-3">
                    @foreach([
                        'primary_color' => 'Primary Color',
                        'primary_dark_color' => 'Primary Dark',
                        'secondary_color' => 'Secondary Color',
                        'accent_color' => 'Accent Color',
                        'sidebar_gradient_start' => 'Sidebar Gradient Start',
                        'sidebar_gradient_end' => 'Sidebar Gradient End',
                        'page_background_color' => 'Page Background',
                    ] as $field => $label)
                        <div class="col-md-4">
                            <label class="form-label">{{ $label }}</label>
                            <div class="input-group">
                                <input type="color" class="form-control form-control-color" value="{{ old($field, $settings[$field]) }}" oninput="this.nextElementSibling.value=this.value">
                                <input type="text" name="{{ $field }}" class="form-control" value="{{ old($field, $settings[$field]) }}" pattern="^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$" required>
                            </div>
                        </div>
                    @endforeach
                </div>
                <div class="mt-4 p-3 rounded border" style="background: var(--brand-page-bg);">
                    <strong>Preview</strong>
                    <div class="d-flex gap-2 mt-2 flex-wrap">
                        <span class="badge px-3 py-2" style="background:{{ $settings['primary_color'] }}">Primary</span>
                        <span class="badge px-3 py-2" style="background:{{ $settings['primary_dark_color'] }}">Dark</span>
                        <span class="badge px-3 py-2" style="background:{{ $settings['secondary_color'] }}">Secondary</span>
                        <span class="badge px-3 py-2" style="background:{{ $settings['accent_color'] }}">Accent</span>
                    </div>
                </div>
            </div>
        </div>

        {{-- Assets --}}
        <div class="tab-pane fade" id="tab-assets">
            <div class='cardx p-4'>
                <h6 class="mb-3">Logo & Favicon</h6>
                <div class="row g-4">
                    <div class="col-md-4">
                        <label class="form-label">Organization Logo</label>
                        @if($settingsService->logoUrl())
                            <div class="mb-2 p-3 border rounded bg-white text-center">
                                <img src="{{ $settingsService->logoUrl() }}" alt="Logo" style="max-height:80px; max-width:100%">
                            </div>
                            <div class="form-check mb-2"><input type="checkbox" name="remove_logo" value="1" class="form-check-input" id="remove_logo"><label class="form-check-label" for="remove_logo">Remove current logo</label></div>
                        @endif
                        <input type="file" name="logo" class="form-control" accept="image/*">
                        <small class="text-muted">Used in sidebar. PNG/SVG recommended.</small>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Login Page Logo</label>
                        @if($settingsService->loginLogoUrl())
                            <div class="mb-2 p-3 border rounded bg-white text-center">
                                <img src="{{ $settingsService->loginLogoUrl() }}" alt="Login logo" style="max-height:80px; max-width:100%">
                            </div>
                            <div class="form-check mb-2"><input type="checkbox" name="remove_login_logo" value="1" class="form-check-input" id="remove_login_logo"><label class="form-check-label" for="remove_login_logo">Remove login logo</label></div>
                        @endif
                        <input type="file" name="login_logo" class="form-control" accept="image/*">
                        <small class="text-muted">Optional. Falls back to main logo if empty.</small>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Favicon</label>
                        @if($settingsService->faviconUrl())
                            <div class="mb-2 p-3 border rounded bg-white text-center">
                                <img src="{{ $settingsService->faviconUrl() }}" alt="Favicon" style="max-height:32px">
                            </div>
                            <div class="form-check mb-2"><input type="checkbox" name="remove_favicon" value="1" class="form-check-input" id="remove_favicon"><label class="form-check-label" for="remove_favicon">Remove favicon</label></div>
                        @endif
                        <input type="file" name="favicon" class="form-control" accept=".png,.ico,.svg,.jpg,.jpeg">
                        <small class="text-muted">Browser tab icon. 32×32 PNG or ICO.</small>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="mt-4">
        <button type="submit" class="btn btn-green">Save All Settings</button>
    </div>
</form>

@push('scripts')
<script>
document.querySelectorAll('input[type="color"]').forEach(picker => {
    picker.addEventListener('input', () => picker.nextElementSibling.value = picker.value);
    picker.nextElementSibling?.addEventListener('input', () => picker.value = picker.nextElementSibling.value);
});
</script>
@endpush

@if($paystack)
<div class='cardx p-4 mt-4'>
    <h6>Paystack Status</h6>
    <p>Mode: <strong>{{ ucfirst($paystack->mode) }}</strong> · Enabled: <strong>{{ $paystack->is_enabled ? 'Yes' : 'No' }}</strong></p>
    <a href="{{ route('admin.paystack.index') }}" class="btn btn-sm btn-outline-green">Configure Paystack</a>
</div>
@endif

@endsection