{{-- resources/views/firewall/access.blade.php --}}
@extends('layouts.app')

@section('content')
<div class="d-flex justify-content-between align-items-center flex-wrap mb-4">
    <div>
        <h4 class="mb-0 fw-bold d-flex align-items-center gap-2">
            <i data-lucide="lock" style="width:20px;height:20px;"></i> Firewall Access Control
        </h4>
        <div class="text-secondary small mt-1">Explicitly allow or deny IP addresses to access your PBX services.</div>
    </div>
    <div class="d-flex gap-2 mt-2 mt-md-0">
        <button type="button" onclick="window.location.reload()" class="btn btn-outline-secondary btn-sm">
            <i data-lucide="refresh-cw" style="width:14px;height:14px;"></i> Reload
        </button>
        <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="collapse" data-bs-target="#addRuleForm">
            <i data-lucide="plus" style="width:14px;height:14px;"></i> Add Rule
        </button>
    </div>
</div>

@if(session('status'))
<div class="alert alert-success alert-dismissible fade show">
    {{ session('status') }}
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
@endif
@if($errors->any())
<div class="alert alert-danger">
    @foreach($errors->all() as $e)<div>{{ $e }}</div>@endforeach
</div>
@endif

{{-- KPI Cards --}}
<div class="row g-3 mb-4">
    <div class="col-6 col-md-3">
        <div class="ext-summary-card d-flex align-items-center gap-3">
            <div class="ext-summary-icon" style="background:rgba(34,197,94,.1);">
                <i data-lucide="shield-check" style="width:20px;height:20px;color:#16a34a;"></i>
            </div>
            <div>
                <div class="ext-summary-label">Trusted IPs</div>
                <div class="ext-summary-value text-success">{{ $whitelist->count() }}</div>
                <div class="ext-summary-sub">Allowed to access PBX</div>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="ext-summary-card d-flex align-items-center gap-3">
            <div class="ext-summary-icon" style="background:rgba(239,68,68,.1);">
                <i data-lucide="shield-x" style="width:20px;height:20px;color:#dc2626;"></i>
            </div>
            <div>
                <div class="ext-summary-label">Denied IPs</div>
                <div class="ext-summary-value text-danger">{{ $blacklist->count() }}</div>
                <div class="ext-summary-sub">Explicitly blocked</div>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="ext-summary-card d-flex align-items-center gap-3">
            <div class="ext-summary-icon" style="background:rgba(245,158,11,.1);">
                <i data-lucide="ban" style="width:20px;height:20px;color:#d97706;"></i>
            </div>
            <div>
                <div class="ext-summary-label">Auto-Banned IPs</div>
                <div class="ext-summary-value">{{ count($fail2banBanned ?? []) }}</div>
                <div class="ext-summary-sub"><a href="{{ route('fail2ban.index') }}" class="text-primary">View details →</a></div>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="ext-summary-card d-flex align-items-center gap-3">
            <div class="ext-summary-icon" style="background:rgba(37,99,235,.1);">
                <i data-lucide="shield" style="width:20px;height:20px;color:#2563eb;"></i>
            </div>
            <div>
                <div class="ext-summary-label">Default Policy</div>
                <div class="ext-summary-value text-success">Allow</div>
                <div class="ext-summary-sub">Unlisted IPs are permitted</div>
            </div>
        </div>
    </div>
</div>

{{-- Add Rule Form (collapsible) --}}
<div class="collapse {{ $errors->any() ? 'show' : '' }}" id="addRuleForm">
<div class="card mb-4">
    <div class="card-header fw-semibold">Add Access Rule</div>
    <div class="card-body">
        <form method="POST" action="{{ route('firewall.access.store') }}">
            @csrf
            <div class="row g-3">
                <div class="col-12 col-md-5">
                    <label class="form-label">Name / Label</label>
                    <input type="text" name="name" class="form-control" placeholder="e.g. Office WAN, Partner VPN" required>
                </div>
                <div class="col-12 col-md-4">
                    <label class="form-label">IP Address (CIDR)</label>
                    <input type="text" name="ip_address" class="form-control" placeholder="e.g. 203.0.113.5/32" required>
                </div>
                <div class="col-12 col-md-3">
                    <label class="form-label">Action</label>
                    <select name="action" class="form-select" required>
                        <option value="allow">Allow (Whitelist)</option>
                        <option value="deny">Deny (Blacklist)</option>
                    </select>
                </div>
                <div class="col-12">
                    <label class="form-label">Description <span class="text-secondary">(optional)</span></label>
                    <input type="text" name="description" class="form-control" placeholder="Notes about this rule (location, purpose, etc.)">
                </div>
                <div class="col-12 d-flex justify-content-end">
                    <button type="submit" class="btn btn-success btn-sm">
                        <i data-lucide="save" style="width:14px;height:14px;"></i> Save Rule
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>
</div>

{{-- Whitelist + Blacklist --}}
<div class="row g-4">
    <div class="col-12 col-lg-6">
        <div class="card h-100">
            <div class="card-header d-flex align-items-center justify-content-between">
                <span class="fw-semibold d-flex align-items-center gap-2">
                    <i data-lucide="shield-check" style="width:15px;height:15px;color:#22c55e;"></i>
                    Whitelist (Allowed IPs)
                </span>
                <span class="badge bg-success">{{ $whitelist->count() }}</span>
            </div>
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead>
                        <tr>
                            <th>Name / Label</th>
                            <th>IP / CIDR</th>
                            <th>Description</th>
                            <th class="text-end">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($whitelist as $rule)
                        <tr>
                            <td>
                                <div class="fw-semibold">{{ $rule->name }}</div>
                                <div class="text-secondary" style="font-size:.75rem;">ID: {{ $rule->id }}</div>
                            </td>
                            <td><code>{{ $rule->ip_address }}</code></td>
                            <td class="text-secondary small">{{ $rule->description ?: '—' }}</td>
                            <td class="text-end">
                                <form method="POST" action="{{ route('firewall.access.destroy', $rule->id) }}"
                                      onsubmit="return confirm('Delete this rule?');" class="d-inline">
                                    @csrf @method('DELETE')
                                    <button type="submit" class="btn btn-outline-danger btn-sm">
                                        <i data-lucide="trash-2" style="width:13px;height:13px;"></i>
                                    </button>
                                </form>
                            </td>
                        </tr>
                        @empty
                        <tr><td colspan="4" class="text-center text-secondary py-4">No whitelist rules defined.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="col-12 col-lg-6">
        <div class="card h-100">
            <div class="card-header d-flex align-items-center justify-content-between">
                <span class="fw-semibold d-flex align-items-center gap-2">
                    <i data-lucide="shield-x" style="width:15px;height:15px;color:#ef4444;"></i>
                    Blacklist (Denied IPs)
                </span>
                <span class="badge bg-danger">{{ $blacklist->count() }}</span>
            </div>
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead>
                        <tr>
                            <th>Name / Label</th>
                            <th>IP / CIDR</th>
                            <th>Description</th>
                            <th class="text-end">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($blacklist as $rule)
                        <tr>
                            <td>
                                <div class="fw-semibold">{{ $rule->name }}</div>
                                <div class="text-secondary" style="font-size:.75rem;">ID: {{ $rule->id }}</div>
                            </td>
                            <td><code>{{ $rule->ip_address }}</code></td>
                            <td class="text-secondary small">{{ $rule->description ?: '—' }}</td>
                            <td class="text-end">
                                <form method="POST" action="{{ route('firewall.access.destroy', $rule->id) }}"
                                      onsubmit="return confirm('Delete this rule?');" class="d-inline">
                                    @csrf @method('DELETE')
                                    <button type="submit" class="btn btn-outline-danger btn-sm">
                                        <i data-lucide="trash-2" style="width:13px;height:13px;"></i>
                                    </button>
                                </form>
                            </td>
                        </tr>
                        @empty
                        <tr><td colspan="4" class="text-center text-secondary py-4">No blacklist rules defined.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

@endsection