@extends('layouts.admin')
@section('title', $configuration['title'])

@push('styles')
@if($module === 'tracking')
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
<style>
    #liveMap { height: 420px; width: 100%; border-radius: 16px; z-index: 1; }
    .pulse-marker { width: 16px; height: 16px; border-radius: 50%; background: #6658f6; box-shadow: 0 0 0 rgba(102,88,246,0.6); animation: pulse 1.8s infinite; }
    @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(102,88,246,0.7); } 70% { box-shadow: 0 0 0 16px rgba(102,88,246,0); } 100% { box-shadow: 0 0 0 0 rgba(102,88,246,0); } }
</style>
@endif
@endpush

@section('content')
<nav><ol class="breadcrumb small"><li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li><li class="breadcrumb-item active">{{ $configuration['title'] }}</li></ol></nav>

<div class="d-flex flex-wrap justify-content-between align-items-center gap-3 mb-4">
    <div>
        <h1 class="h3 fw-bold mb-1"><i class="bi {{ $configuration['icon'] }} text-primary me-2"></i>{{ $configuration['title'] }}</h1>
        <p class="text-secondary mb-0">Search, filter and review platform records.</p>
    </div>
    <div class="d-flex gap-2">
        <button class="btn btn-outline-secondary" onclick="window.print()"><i class="bi bi-printer me-1"></i>Print / Export</button>
    </div>
</div>

@if($module === 'tracking')
<div class="card panel mb-4">
    <div class="card-header bg-transparent d-flex justify-content-between align-items-center py-3 border-0">
        <div>
            <h5 class="fw-bold mb-0"><i class="bi bi-geo-alt-fill text-danger me-2"></i>Live Global Radar & GPS Map</h5>
            <small class="text-secondary">Real-time device coordinates, battery status, and trajectory history</small>
        </div>
        <span class="badge bg-success-subtle text-success px-3 py-2 rounded-pill"><i class="bi bi-broadcast me-1"></i>Live Satellite Feed</span>
    </div>
    <div class="card-body p-3">
        <div id="liveMap"></div>
    </div>
</div>
@endif

<div class="card panel mb-4">
    <div class="card-body">
        <form class="row g-3 align-items-end" method="GET">
            <div class="col-md-7">
                <label class="form-label small fw-semibold" for="moduleSearch">Search</label>
                <div class="input-group">
                    <span class="input-group-text bg-transparent"><i class="bi bi-search"></i></span>
                    <input id="moduleSearch" class="form-control" name="search" value="{{ request('search') }}" placeholder="Search {{ strtolower($configuration['title']) }}...">
                </div>
            </div>
            @if($statuses->isNotEmpty())
            <div class="col-md-3">
                <label class="form-label small fw-semibold" for="statusFilter">Status</label>
                <select id="statusFilter" class="form-select" name="status">
                    <option value="">All statuses</option>
                    @foreach($statuses as $status)
                        <option value="{{ $status }}" @selected(request('status')===$status)>{{ ucfirst(str_replace('_',' ',$status)) }}</option>
                    @endforeach
                </select>
            </div>
            @endif
            <div class="col-md-2 d-grid">
                <button class="btn btn-dark"><i class="bi bi-funnel me-1"></i>Filter</button>
            </div>
        </form>
    </div>
</div>

<div class="card panel">
    <div class="card-body p-0">
        <div class="d-flex justify-content-between px-4 py-3 border-bottom">
            <strong>{{ number_format($records->total()) }} records</strong>
            <span class="small text-secondary">Page {{ $records->currentPage() }} of {{ max(1,$records->lastPage()) }}</span>
        </div>
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead class="table-light">
                    <tr>
                        @foreach($columns as $column)
                            <th class="text-nowrap px-4 py-3">{{ ucwords(str_replace('_',' ',$column)) }}</th>
                        @endforeach
                    </tr>
                </thead>
                <tbody>
                @forelse($records as $record)
                    <tr>
                        @foreach($columns as $column)
                            @php($value = $record->{$column})
                            <td class="px-4 text-nowrap">
                                @if(in_array($column,['status','risk_level','priority','payment_status'],true))
                                    <span class="badge rounded-pill {{ in_array($value,['active','paid','resolved','good']) ? 'text-bg-success' : (in_array($value,['critical','lost','failed']) ? 'text-bg-danger' : 'text-bg-secondary') }}">
                                        {{ ucfirst(str_replace('_',' ',(string)$value)) }}
                                    </span>
                                @elseif(in_array($column,['is_premium','is_public','is_system'],true))
                                    <i class="bi {{ $value ? 'bi-check-circle-fill text-success' : 'bi-dash-circle text-secondary' }}"></i>
                                @elseif(str_contains($column,'amount') || str_contains($column,'price') || str_contains($column,'balance'))
                                    ₹{{ number_format((float)$value, 2) }}
                                @else
                                    <span title="{{ $value }}">{{ \Illuminate\Support\Str::limit((string)($value ?? '—'), 36) }}</span>
                                @endif
                            </td>
                        @endforeach
                    </tr>
                @empty
                    <tr>
                        <td colspan="{{ count($columns) }}">
                            <div class="text-center py-5">
                                <i class="bi {{ $configuration['icon'] }} fs-1 text-secondary opacity-50"></i>
                                <h2 class="h6 mt-3">No records found</h2>
                                <p class="text-secondary small mb-0">Records will appear here when telemetry or users are active.</p>
                            </div>
                        </td>
                    </tr>
                @endforelse
                </tbody>
            </table>
        </div>
        @if($records->hasPages())
            <div class="px-4 py-3 border-top">{{ $records->links() }}</div>
        @endif
    </div>
</div>
@endsection

@push('scripts')
@if($module === 'tracking')
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const mapElement = document.getElementById('liveMap');
        if (mapElement) {
            const map = L.map('liveMap').setView([28.6139, 77.2090], 13);
            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                maxZoom: 19,
                attribution: '&copy; OpenStreetMap contributors'
            }).addTo(map);

            const marker = L.marker([28.6139, 77.2090]).addTo(map);
            marker.bindPopup('<b>Pixel 8 Pro (Primary)</b><br>Battery: 88% &bull; Status: Armed<br>Last Updated: Just now').openPopup();

            // Draw safe geofence circle
            L.circle([28.6139, 77.2090], {
                color: '#20c997',
                fillColor: '#20c997',
                fillOpacity: 0.15,
                radius: 400
            }).addTo(map).bindPopup('Safe Zone: Registered Home / Office');
        }
    });
</script>
@endif
@endpush