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

@section('content')
@php
    $tcpRules = $services->filter(fn($s) => str_contains(strtolower($s->protocol), 'tcp') && (int)$s->enabled);
    $udpRules = $services->filter(fn($s) => str_contains(strtolower($s->protocol), 'udp') && (int)$s->enabled);
    $totalTcp = $services->filter(fn($s) => str_contains(strtolower($s->protocol), 'tcp'))->count();
    $totalUdp = $services->filter(fn($s) => str_contains(strtolower($s->protocol), 'udp'))->count();
@endphp

{{-- Header --}}
<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="shield" style="width:20px;height:20px;"></i> Firewall Services
        </h4>
        <div class="text-secondary small mt-1">These are the allowed PBX service ports. Manage which ports are open and accessible.</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>
        <form method="POST" action="{{ route('firewall.services.defaults') }}" class="d-inline">
            @csrf
            <button type="submit" class="btn btn-outline-primary btn-sm">
                <i data-lucide="database" style="width:14px;height:14px;"></i> Load Default Rules
            </button>
        </form>
        <form method="POST" action="{{ route('firewall.services.sync') }}" class="d-inline">
            @csrf
            <button type="submit" class="btn btn-outline-warning btn-sm">
                <i data-lucide="refresh-cw" style="width:14px;height:14px;"></i> Sync from iptables
            </button>
        </form>
        <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#fwServiceModal">
            <i data-lucide="plus" style="width:14px;height:14px;"></i> Add Service 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(37,99,235,.1);">
                <i data-lucide="list" style="width:20px;height:20px;color:#2563eb;"></i>
            </div>
            <div>
                <div class="ext-summary-label">Total Rules</div>
                <div class="ext-summary-value">{{ $services->count() }}</div>
                <div class="ext-summary-sub">All configured rules</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(34,197,94,.1);">
                <i data-lucide="share-2" style="width:20px;height:20px;color:#16a34a;"></i>
            </div>
            <div>
                <div class="ext-summary-label">TCP Rules</div>
                <div class="ext-summary-value">{{ $tcpRules->count() }} <span style="font-size:.85rem;font-weight:400;color:#64748b;">/ {{ $totalTcp }}</span></div>
                <div class="ext-summary-sub">Enabled TCP ports</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(124,58,237,.1);">
                <i data-lucide="radio" style="width:20px;height:20px;color:#7c3aed;"></i>
            </div>
            <div>
                <div class="ext-summary-label">UDP Rules</div>
                <div class="ext-summary-value">{{ $udpRules->count() }} <span style="font-size:.85rem;font-weight:400;color:#64748b;">/ {{ $totalUdp }}</span></div>
                <div class="ext-summary-sub">Enabled UDP ports</div>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        @php $latest = $services->sortByDesc('updated_at')->first(); @endphp
        <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="clock" style="width:20px;height:20px;color:#d97706;"></i>
            </div>
            <div>
                <div class="ext-summary-label">Last Updated</div>
                <div class="ext-summary-value" style="font-size:1rem;">{{ $latest ? \Carbon\Carbon::parse($latest->updated_at)->diffForHumans() : 'Never' }}</div>
                <div class="ext-summary-sub"><span style="color:#16a34a;font-weight:600;">&#9679;</span> Firewall active</div>
            </div>
        </div>
    </div>
</div>

{{-- Service Rules Table --}}
<div class="card">
    <div class="card-header d-flex align-items-center justify-content-between flex-wrap gap-2">
        <span class="fw-semibold d-flex align-items-center gap-2">
            <i data-lucide="list-filter" style="width:16px;height:16px;"></i> Service Rules
        </span>
        <div class="d-flex align-items-center gap-2 flex-wrap">
            <input type="text" id="svcSearch" class="form-control form-control-sm" placeholder="Search rules..." style="width:200px;" oninput="filterServices()">
            <select id="svcProtocol" class="form-select form-select-sm" style="width:140px;" onchange="filterServices()">
                <option value="">All Protocols</option>
                <option value="tcp">TCP</option>
                <option value="udp">UDP</option>
            </select>
            <select id="svcStatus" class="form-select form-select-sm" style="width:130px;" onchange="filterServices()">
                <option value="">All Statuses</option>
                <option value="1">Enabled</option>
                <option value="0">Disabled</option>
            </select>
        </div>
    </div>
    <div class="table-responsive">
        <table class="table table-hover align-middle mb-0" id="svcTable">
            <thead>
                <tr>
                    <th></th>
                    <th>Name</th>
                    <th>Protocol</th>
                    <th>Port / Range</th>
                    <th>Exposure</th>
                    <th>IP Range / Scope</th>
                    <th>Status</th>
                    <th>Updated</th>
                    <th class="text-end">Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($services as $service)
                @php $enabled = (int)$service->enabled === 1; $isPublic = !$service->ip_range || $service->ip_range === '0.0.0.0/0'; @endphp
                <tr data-protocol="{{ strtolower($service->protocol) }}" data-enabled="{{ $enabled ? '1' : '0' }}" data-name="{{ strtolower($service->name) }}">
                    <td style="width:12px;padding-right:0;">
                        <span style="width:8px;height:8px;border-radius:50%;display:inline-block;background:{{ $enabled ? '#22c55e' : '#94a3b8' }};"></span>
                    </td>
                    <td>
                        <div class="fw-semibold">{{ $service->name }}</div>
                        <div class="text-secondary" style="font-size:.74rem;">ID: {{ $service->id }}</div>
                    </td>
                    <td>
                        <span class="d-flex align-items-center gap-1 text-secondary small">
                            <i data-lucide="radio" style="width:13px;height:13px;"></i>
                            {{ strtoupper($service->protocol) }}
                        </span>
                    </td>
                    <td>
                        <span class="badge bg-secondary-subtle text-secondary border border-secondary-subtle font-monospace">
                            {{ $service->port }}
                        </span>
                    </td>
                    <td>
                        @if($isPublic)
                        <span class="d-flex align-items-center gap-1 text-secondary small">
                            <i data-lucide="globe" style="width:13px;height:13px;"></i> Public
                        </span>
                        @else
                        <span class="d-flex align-items-center gap-1 text-secondary small">
                            <i data-lucide="shield" style="width:13px;height:13px;"></i> Restricted
                        </span>
                        @endif
                    </td>
                    <td class="font-monospace small text-secondary">{{ $service->ip_range ?: '0.0.0.0/0' }}</td>
                    <td>
                        <span class="badge {{ $enabled ? 'bg-success-subtle text-success border border-success-subtle' : 'bg-secondary-subtle text-secondary border border-secondary-subtle' }}">
                            {{ $enabled ? 'Enabled' : 'Disabled' }}
                        </span>
                    </td>
                    <td class="text-secondary small">
                        @if(!empty($service->updated_at))
                            <div>{{ \Carbon\Carbon::parse($service->updated_at)->diffForHumans() }}</div>
                            <div style="font-size:.72rem;">{{ \Carbon\Carbon::parse($service->updated_at)->format('M d, Y H:i') }}</div>
                        @else —
                        @endif
                    </td>
                    <td class="text-end">
                        <div class="d-flex justify-content-end gap-1">
                            <button type="button" class="btn btn-outline-secondary btn-sm" title="Edit (coming soon)" disabled>
                                <i data-lucide="pencil" style="width:13px;height:13px;"></i>
                            </button>
                            <form method="POST" action="{{ route('firewall.services.destroy', $service->id) }}"
                                  class="d-inline" onsubmit="return confirm('Delete this rule?');">
                                @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>
                        </div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="9" class="text-center text-secondary py-4">
                        No service rules found. Click <strong>Load Default Rules</strong> to get started.
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    <div class="d-flex align-items-center justify-content-between px-3 py-2 border-top text-secondary small" id="svcFooter">
        <span>Showing <span id="svcShowing">{{ $services->count() }}</span> of {{ $services->count() }} results</span>
    </div>
</div>

{{-- Add Service Modal --}}
<div class="modal fade" id="fwServiceModal" tabindex="-1" aria-labelledby="fwServiceModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title d-flex align-items-center gap-2" id="fwServiceModalLabel">
                    <i data-lucide="plus-circle" style="width:18px;height:18px;"></i> Add Firewall Service Rule
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" action="{{ route('firewall.services.store') }}">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Name</label>
                        <input type="text" name="name" class="form-control" placeholder="e.g. SIP UDP 5060" required>
                    </div>
                    <div class="row g-3 mb-3">
                        <div class="col-6">
                            <label class="form-label">Protocol</label>
                            <select name="protocol" class="form-select">
                                <option value="tcp">TCP</option>
                                <option value="udp">UDP</option>
                                <option value="tcp/udp">TCP/UDP</option>
                            </select>
                        </div>
                        <div class="col-6">
                            <label class="form-label">Port / Range</label>
                            <input type="text" name="port" class="form-control" placeholder="e.g. 5060 or 10000-20000" required>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">IP Range (CIDR) <span class="text-secondary small">(optional)</span></label>
                        <input type="text" name="ip_range" class="form-control" placeholder="Leave empty for 0.0.0.0/0 (public)">
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" name="enabled" value="1" id="fwEnabled" checked>
                        <label class="form-check-label" for="fwEnabled">Enabled</label>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-success">
                        <i data-lucide="save" style="width:14px;height:14px;"></i> Save Rule
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('custom-scripts')
<script>
function filterServices() {
    const search   = document.getElementById('svcSearch').value.toLowerCase();
    const protocol = document.getElementById('svcProtocol').value.toLowerCase();
    const status   = document.getElementById('svcStatus').value;
    const rows     = document.querySelectorAll('#svcTable tbody tr[data-name]');
    let visible    = 0;
    rows.forEach(row => {
        const matchName  = row.dataset.name.includes(search);
        const matchProto = !protocol || row.dataset.protocol.includes(protocol);
        const matchStat  = !status   || row.dataset.enabled === status;
        const show = matchName && matchProto && matchStat;
        row.style.display = show ? '' : 'none';
        if (show) visible++;
    });
    document.getElementById('svcShowing').textContent = visible;
}
</script>
@endpush

@endsection