@extends('layouts.app')

@section('title', 'DNS Records Overview')

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h2 mb-2">
                <i class="bi bi-server text-info"></i>
                DNS Records Monitoring
            </h1>
            <p class="text-muted">Monitor and track DNS records across all your websites</p>
        </div>
    </div>

    <!-- Stats Overview -->
    <div class="row g-4 mb-4">
        <div class="col-md-4">
            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="bg-primary bg-opacity-10 text-primary rounded p-3">
                                <i class="bi bi-globe fs-4"></i>
                            </div>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <div class="text-muted small">Total Sites</div>
                            <div class="h4 mb-0">{{ $stats['total_sites'] }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="bg-info bg-opacity-10 text-info rounded p-3">
                                <i class="bi bi-server fs-4"></i>
                            </div>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <div class="text-muted small">DNS Records</div>
                            <div class="h4 mb-0">{{ $stats['total_dns_records'] }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="bg-success bg-opacity-10 text-success rounded p-3">
                                <i class="bi bi-check-circle fs-4"></i>
                            </div>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <div class="text-muted small">Sites Monitored</div>
                            <div class="h4 mb-0">{{ $stats['sites_with_records'] }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Sites List -->
    <div class="card border-0 shadow-sm">
        <div class="card-header bg-white border-bottom">
            <h5 class="mb-0">
                <i class="bi bi-list-check me-2"></i>
                DNS Records by Site
            </h5>
        </div>
        <div class="card-body p-0">
            @if($sites->isNotEmpty())
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead class="bg-light">
                            <tr>
                                <th>Website</th>
                                <th>DNS Records</th>
                                <th>Record Types</th>
                                <th>Last Updated</th>
                                <th class="text-end">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($sites as $site)
                                <tr>
                                    <td>
                                        <div class="fw-semibold">{{ $site->name }}</div>
                                        <div class="small text-muted">{{ $site->url }}</div>
                                    </td>
                                    <td>
                                        <span class="badge bg-primary fs-6">
                                            {{ $site->dns_records_count }} records
                                        </span>
                                    </td>
                                    <td>
                                        @if($site->dnsRecords->isNotEmpty())
                                            @php
                                                $types = $site->dnsRecords->pluck('record_type')->unique();
                                            @endphp
                                            @foreach($types->take(3) as $type)
                                                <span class="badge bg-secondary me-1">{{ $type }}</span>
                                            @endforeach
                                            @if($types->count() > 3)
                                                <span class="badge bg-light text-dark">+{{ $types->count() - 3 }}</span>
                                            @endif
                                        @else
                                            <span class="text-muted">—</span>
                                        @endif
                                    </td>
                                    <td>
                                        @if($site->dnsRecords->isNotEmpty())
                                            <span class="text-muted">
                                                {{ $site->dnsRecords->first()->updated_at->diffForHumans() }}
                                            </span>
                                        @else
                                            <span class="text-muted">—</span>
                                        @endif
                                    </td>
                                    <td class="text-end">
                                        <a href="{{ route('dns-records.index', $site) }}" class="btn btn-sm btn-outline-primary">
                                            <i class="bi bi-eye"></i> View Records
                                        </a>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @else
                <div class="text-center py-5">
                    <i class="bi bi-server text-muted" style="font-size: 4rem; opacity: 0.3;"></i>
                    <h5 class="mt-3">No DNS Records</h5>
                    <p class="text-muted">Add sites and configure DNS records to start monitoring.</p>
                    <a href="{{ route('sites.create') }}" class="btn btn-primary mt-3">
                        <i class="bi bi-plus-circle"></i> Add Site
                    </a>
                </div>
            @endif
        </div>
    </div>

    <!-- Info Card -->
    <div class="alert alert-info mt-4">
        <h6 class="alert-heading">
            <i class="bi bi-info-circle me-2"></i>
            About DNS Monitoring
        </h6>
        <p class="mb-0">
            DNS record monitoring helps you track changes to your domain's DNS configuration.
            You can monitor A, AAAA, CNAME, MX, TXT, NS, SOA, PTR, and SRV records.
            Add DNS records for each site to get notified of any unexpected changes.
        </p>
    </div>
</div>
@endsection