@extends('layouts.app')

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

@section('body_class', 'setting-general-admin')

@section('content')
@php
    $loginPath = old('admin_login_path', $dashboardSettings->admin_login_path ?? \App\Services\AdminAccessService::loginRoutePath());
    $refreshMinutes = (int) old('auto_refresh_interval_minutes', $dashboardSettings->auto_refresh_interval_minutes ?? 5);
@endphp
<div class="sg-page">
    <p class="sg-back"><a href="{{ route('setting.index') }}">← Setting</a></p>

    <header class="sg-header">
        <div>
            <h1>General</h1>
            <p class="sg-subtitle">
                Admin access (IP allowlist and staff login URL) and dashboard auto-refresh.
                Visitors who are not on an allowed IP and open the site root are sent to the public store.
            </p>
        </div>
    </header>

    @if(session('success'))
        <div class="alert alert-success sg-flash">{{ session('success') }}</div>
    @endif
    @if(session('error'))
        <div class="alert alert-danger sg-flash">{{ session('error') }}</div>
    @endif
    @if($errors->any())
        <div class="alert alert-danger sg-flash">
            {{ $errors->first() }}
        </div>
    @endif

    <div class="sg-summary">
        <div class="sg-summary__card">
            <span class="sg-summary__label">Your IP</span>
            <span class="sg-summary__value"><code>{{ $detectedIp ?? 'unknown' }}</code></span>
            <span class="sg-summary__hint">Detected from this request</span>
        </div>
        <div class="sg-summary__card">
            <span class="sg-summary__label">Staff login</span>
            <span class="sg-summary__value sg-summary__value--link">
                <a href="{{ $adminLoginUrl }}" target="_blank" rel="noopener">{{ $adminLoginUrl }}</a>
            </span>
            <span class="sg-summary__hint">Current portal URL</span>
        </div>
        <div class="sg-summary__card">
            <span class="sg-summary__label">Allowed IPs</span>
            <span class="sg-summary__value">{{ $allowedIps->count() }}</span>
            <span class="sg-summary__hint">{{ $allowedIps->count() === 1 ? 'address on allowlist' : 'addresses on allowlist' }}</span>
        </div>
        <div class="sg-summary__card">
            <span class="sg-summary__label">Auto-refresh</span>
            <span class="sg-summary__value">
                @if($refreshMinutes === 0)
                    Off
                @else
                    {{ $refreshMinutes }} {{ $refreshMinutes === 1 ? 'min' : 'min' }}
                @endif
            </span>
            <span class="sg-summary__hint">Deals, Marketing, PWYW, Offers</span>
        </div>
    </div>

    <section class="sg-card">
        <div class="sg-card__head">
            <div>
                <h2>Admin access</h2>
                <p class="sg-card__sub">Control who can open this tools dashboard and where staff sign in.</p>
            </div>
        </div>

        <div class="sg-card__body">
            <div class="sg-callout">
                <strong>Emergency unlock:</strong>
                add a row in phpMyAdmin table <code>admin_allowed_ips</code>, or use <code>ADMIN_ALLOWED_IPS</code> in <code>.env</code>.
            </div>

            <div class="sg-panel">
                <div class="sg-panel__head">
                    <h3>Allowed IPs</h3>
                    <p>Only these addresses can reach the admin tools. Keep at least one IP so you do not lock yourself out.</p>
                </div>
                <div class="sg-panel__body sg-panel__body--flush">
                    @if($allowedIps->isEmpty())
                        <p class="sg-empty">No IPs in the database yet. Add one below or configure <code>ADMIN_ALLOWED_IPS</code> in .env.</p>
                    @else
                        <div class="sg-table-wrap">
                            <table class="sg-table">
                                <thead>
                                    <tr>
                                        <th>IP address</th>
                                        <th>Note</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($allowedIps as $ipRow)
                                        <tr>
                                            <td><code class="sg-ip">{{ $ipRow->ip_address }}</code></td>
                                            <td>
                                                @if($ipRow->note)
                                                    {{ $ipRow->note }}
                                                @else
                                                    <span class="sg-muted">—</span>
                                                @endif
                                            </td>
                                            <td class="sg-actions-cell">
                                                @if($allowedIps->count() > 1)
                                                    <form action="{{ route('setting.admin-access.delete-ip', $ipRow) }}" method="POST" onsubmit="return confirm('Remove {{ $ipRow->ip_address }} from the allowlist?');">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button type="submit" class="sg-btn sg-btn--danger">Remove</button>
                                                    </form>
                                                @else
                                                    <span class="sg-muted" title="Keep at least one IP">Protected</span>
                                                @endif
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @endif
                </div>
            </div>

            <form action="{{ route('setting.admin-access') }}" method="POST" class="sg-form">
                @csrf

                <div class="sg-panel">
                    <div class="sg-panel__head">
                        <h3>Staff login path</h3>
                        <p>Secret URL path for staff login. No leading slash.</p>
                    </div>
                    <div class="sg-panel__body">
                        <div class="sg-field">
                            <label for="admin_login_path">Path <span class="sg-req">*</span></label>
                            <input type="text" name="admin_login_path" id="admin_login_path" required
                                pattern="[A-Za-z0-9]+([\/\-][A-Za-z0-9]+)*"
                                value="{{ $loginPath }}"
                                placeholder="staff/avi-portal">
                            @error('admin_login_path')<p class="sg-error">{{ $message }}</p>@enderror
                            <p class="sg-hint">Example: <code>staff/avi-portal</code>. After changing on the server, run <code>php artisan route:clear</code>.</p>
                        </div>
                    </div>
                </div>

                <div class="sg-panel">
                    <div class="sg-panel__head">
                        <h3>Add IP</h3>
                        <p>Optional. Leave blank to only save the login path.</p>
                    </div>
                    <div class="sg-panel__body">
                        <div class="sg-form-grid">
                            <div class="sg-field">
                                <label for="new_ip">IP address</label>
                                <input type="text" name="new_ip" id="new_ip" value="{{ old('new_ip') }}" placeholder="e.g. 71.196.1.109">
                                @error('new_ip')<p class="sg-error">{{ $message }}</p>@enderror
                            </div>
                            <div class="sg-field">
                                <label for="new_ip_note">Note <span class="sg-optional">optional</span></label>
                                <input type="text" name="new_ip_note" id="new_ip_note" value="{{ old('new_ip_note') }}" placeholder="Primary admin, Home, Office…">
                            </div>
                        </div>
                        @if($detectedIp)
                            <p class="sg-hint">Your current IP is <code>{{ $detectedIp }}</code> — use that if you need to add this device.</p>
                        @endif
                    </div>
                </div>

                <div class="sg-form-actions">
                    <button type="submit" class="sg-submit">Save admin access</button>
                </div>
            </form>
        </div>
    </section>

    <section class="sg-card">
        <div class="sg-card__head">
            <div>
                <h2>Auto-refresh</h2>
                <p class="sg-card__sub">How often Deals, Marketing, Pay What You Want, and Offers reload in the browser.</p>
            </div>
        </div>
        <div class="sg-card__body">
            <form action="{{ route('setting.dashboard-settings') }}" method="POST" class="sg-form">
                @csrf
                <div class="sg-panel">
                    <div class="sg-panel__head">
                        <h3>Refresh interval</h3>
                        <p>Refresh is skipped while a modal or dialog is open. Use <strong>0</strong> to disable.</p>
                    </div>
                    <div class="sg-panel__body">
                        <div class="sg-field sg-field--narrow">
                            <label for="auto_refresh_interval_minutes">Minutes <span class="sg-req">*</span></label>
                            <input type="number" name="auto_refresh_interval_minutes" id="auto_refresh_interval_minutes"
                                min="0" max="120" required
                                value="{{ $refreshMinutes }}">
                            <p class="sg-hint">Default: <strong>5</strong>. Range: 0–120.</p>
                        </div>
                    </div>
                </div>
                <div class="sg-form-actions">
                    <button type="submit" class="sg-submit">Save auto-refresh</button>
                </div>
            </form>
        </div>
    </section>
</div>
@push('styles')
<style>
body.setting-general-admin main.main > .container {
    max-width: 1100px !important;
    width: 100% !important;
}
.sg-page { width: 100%; color: #0f172a; }
.sg-back { margin: 0 0 0.75rem; font-size: 0.875rem; }
.sg-back a { color: #2563eb; text-decoration: none; font-weight: 600; }
.sg-back a:hover { text-decoration: underline; }
.sg-flash { margin-bottom: 1rem; }

.sg-header { margin-bottom: 1.15rem; }
.sg-header h1 {
    margin: 0 0 0.35rem;
    font-size: 1.55rem;
    font-weight: 750;
    letter-spacing: -0.02em;
}
.sg-subtitle {
    margin: 0;
    max-width: 46rem;
    font-size: 0.92rem;
    color: #64748b;
    line-height: 1.5;
}

.sg-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.15rem;
}
.sg-summary__card {
    background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 0.9rem 1rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    min-width: 0;
}
.sg-summary__label {
    display: block;
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94a3b8;
    margin-bottom: 0.3rem;
}
.sg-summary__value {
    display: block;
    font-size: 1rem;
    font-weight: 750;
    color: #0f172a;
    word-break: break-word;
}
.sg-summary__value code {
    font-size: 0.92rem;
    font-weight: 700;
    background: #f1f5f9;
    padding: 0.1rem 0.35rem;
    border-radius: 5px;
}
.sg-summary__value--link a {
    color: #2563eb;
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 650;
    word-break: break-all;
}
.sg-summary__value--link a:hover { text-decoration: underline; }
.sg-summary__hint {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.76rem;
    color: #64748b;
    line-height: 1.35;
}

.sg-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    margin-bottom: 1.15rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    overflow: hidden;
}
.sg-card__head {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #eef2f7;
}
.sg-card__head h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 750;
}
.sg-card__sub {
    margin: 0.2rem 0 0;
    font-size: 0.82rem;
    color: #64748b;
}
.sg-card__body {
    padding: 1rem 1.25rem 1.25rem;
    display: grid;
    gap: 0.9rem;
}

.sg-callout {
    margin: 0;
    padding: 0.75rem 0.9rem;
    border-radius: 10px;
    border: 1px solid #fde68a;
    background: #fffbeb;
    color: #78350f;
    font-size: 0.82rem;
    line-height: 1.45;
}
.sg-callout code {
    background: rgba(255,255,255,0.7);
    padding: 0.05rem 0.3rem;
    border-radius: 4px;
    font-size: 0.78rem;
}

.sg-panel {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}
.sg-panel__head {
    padding: 0.85rem 1rem 0.75rem;
    border-bottom: 1px solid #eef2f7;
    background: #f8fafc;
}
.sg-panel__head h3 {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 750;
}
.sg-panel__head p {
    margin: 0.25rem 0 0;
    font-size: 0.8rem;
    color: #64748b;
    line-height: 1.4;
}
.sg-panel__body { padding: 1rem; }
.sg-panel__body--flush { padding: 0; }
.sg-empty {
    margin: 0;
    padding: 1.1rem 1rem;
    color: #64748b;
    font-size: 0.88rem;
}
.sg-empty code {
    background: #f1f5f9;
    padding: 0.05rem 0.3rem;
    border-radius: 4px;
}

.sg-table-wrap { width: 100%; overflow-x: auto; }
.sg-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.sg-table th {
    padding: 0.65rem 1rem;
    text-align: left;
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #f8fafc;
    background: #1e293b;
    white-space: nowrap;
}
.sg-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #eef2f7;
    vertical-align: middle;
    color: #1e293b;
}
.sg-table tbody tr:last-child td { border-bottom: none; }
.sg-table tbody tr:nth-child(even) td { background: #fafbfc; }
.sg-table tbody tr:hover td { background: #f1f5f9; }
.sg-ip {
    font-size: 0.88rem;
    font-weight: 700;
    background: #f1f5f9;
    padding: 0.15rem 0.4rem;
    border-radius: 5px;
}
.sg-muted { color: #94a3b8; }
.sg-actions-cell { width: 1%; white-space: nowrap; }
.sg-actions-cell form { margin: 0; }

.sg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 1.85rem;
    padding: 0 0.7rem;
    border-radius: 7px;
    border: 1px solid #fecaca;
    background: #fff;
    color: #b91c1c;
    font: inherit;
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
}
.sg-btn--danger:hover { background: #fef2f2; }

.sg-form { display: grid; gap: 0.9rem; }
.sg-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem 1rem;
}
.sg-field { display: flex; flex-direction: column; gap: 0.32rem; min-width: 0; }
.sg-field--narrow { max-width: 14rem; }
.sg-field label {
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #475569;
}
.sg-optional {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
    color: #94a3b8;
    font-size: 0.75rem;
}
.sg-field input {
    width: 100%;
    box-sizing: border-box;
    min-height: 2.45rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font: inherit;
    font-size: 0.92rem;
    background: #fff;
    color: #0f172a;
}
.sg-field input:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.sg-hint {
    margin: 0.55rem 0 0;
    font-size: 0.8rem;
    color: #64748b;
    line-height: 1.45;
}
.sg-hint code {
    background: #f1f5f9;
    padding: 0.05rem 0.3rem;
    border-radius: 4px;
    font-size: 0.76rem;
}
.sg-hint strong { color: #0f172a; }
.sg-error { margin: 0; color: #dc2626; font-size: 0.82rem; }
.sg-req { color: #dc2626; }

.sg-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}
.sg-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.45rem;
    padding: 0 1.15rem;
    border: none;
    border-radius: 8px;
    background: #2563eb;
    color: #fff;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 750;
    cursor: pointer;
}
.sg-submit:hover { background: #1d4ed8; }

@media (max-width: 900px) {
    .sg-summary { grid-template-columns: 1fr 1fr; }
    .sg-form-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .sg-summary { grid-template-columns: 1fr; }
}
</style>
@endpush
@endsection