@extends('layout.app')

@section('title', 'Detail Infrastruktur - Sistem Manajemen ISP')

@section('content')
<x-material-page-header 
    title="Detail Infrastruktur" 
    :breadcrumbs="[
        ['name' => 'Infrastruktur', 'url' => route('infrastruktur.index')],
        ['name' => 'Detail']
    ]"
>
    @if($infrastruktur->jenis === 'ODP')
        <a href="{{ route('infrastruktur.odp-ports', $infrastruktur) }}" class="btn btn-sm bg-gradient-info mb-0 me-2">
            <i class="material-symbols-rounded" style="font-size: 16px; vertical-align: middle;">settings</i> Kelola Port
        </a>
    @endif
    @if($infrastruktur->jenis === 'ODC')
        <a href="{{ route('infrastruktur.odc-cores', $infrastruktur) }}" class="btn btn-sm bg-gradient-primary mb-0 me-2">
            <i class="material-symbols-rounded" style="font-size: 16px; vertical-align: middle;">settings</i> Kelola Core
        </a>
    @endif
    <a href="{{ route('infrastruktur.edit', $infrastruktur) }}" class="btn btn-sm bg-gradient-warning mb-0 me-2">
        <i class="material-symbols-rounded" style="font-size: 16px; vertical-align: middle;">edit</i> Edit
    </a>
    <a href="{{ route('infrastruktur.index') }}" class="btn btn-sm bg-gradient-secondary mb-0">
        <i class="material-symbols-rounded" style="font-size: 16px; vertical-align: middle;">arrow_back</i> Kembali
    </a>
</x-material-page-header>

<div class="container-fluid py-4">
    <div class="row">
        <div class="col-lg-8">
            <!-- Info Infrastruktur -->
            <div class="card my-4">
                <div class="card-header pb-0 pt-3">
                    <h6 class="mb-0">Informasi Infrastruktur</h6>
                </div>
                <div class="card-body pt-0">
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <strong>Nama:</strong>
                            <div class="text-muted h5">{{ $infrastruktur->nama }}</div>
                        </div>
                        <div class="mb-3">
                            <strong>Jenis:</strong>
                            <div>
                                <span class="badge badge-sm bg-gradient-info">{{ $infrastruktur->jenis }}</span>
                            </div>
                        </div>
                        <div class="mb-3">
                            <strong>Status:</strong>
                            <div>
                                <span class="badge badge-sm bg-gradient-{{ $infrastruktur->status_badge_class }}">
                                    {{ $infrastruktur->status }}
                                </span>
                            </div>
                        </div>
                        <div class="mb-3">
                            <strong>Kapasitas:</strong>
                            <div class="text-muted">{{ $infrastruktur->kapasitas ?? '-' }}</div>
                        </div>
                        @if($infrastruktur->jenis === 'ODP' && $infrastruktur->jumlah_port)
                        <div class="mb-3">
                            <strong>Jumlah Port:</strong>
                            <div class="text-muted">{{ $infrastruktur->jumlah_port }} port</div>
                        </div>
                        @endif
                        @if($infrastruktur->jenis === 'ODC' && $infrastruktur->kapasitas_core)
                        <div class="mb-3">
                            <strong>Kapasitas Core:</strong>
                            <div class="text-muted">{{ $infrastruktur->kapasitas_core }}</div>
                        </div>
                        @endif
                        @if($infrastruktur->jenis === 'Tiang' && $infrastruktur->nomor_tiang)
                        <div class="mb-3">
                            <strong>Nomor Tiang:</strong>
                            <div class="text-muted">{{ $infrastruktur->nomor_tiang }}</div>
                        </div>
                        @endif
                        @if($infrastruktur->jenis === 'Tiang' && $infrastruktur->kondisi_tiang)
                        <div class="mb-3">
                            <strong>Kondisi Tiang:</strong>
                            <div>
                                <span class="badge 
                                    @if($infrastruktur->kondisi_tiang == 'Baik') badge-success
                                    @elseif($infrastruktur->kondisi_tiang == 'Rusak Ringan') badge-warning
                                    @elseif($infrastruktur->kondisi_tiang == 'Rusak Berat') badge-danger
                                    @else badge-secondary
                                    @endif">
                                    {{ $infrastruktur->kondisi_tiang }}
                                </span>
                            </div>
                        </div>
                        @endif
                        @if($infrastruktur->jenis === 'Closure' && $infrastruktur->id_closure)
                        <div class="mb-3">
                            <strong>ID Closure:</strong>
                            <div class="text-muted">{{ $infrastruktur->id_closure }}</div>
                        </div>
                        @endif
                    </div>
                    <div class="col-md-6">
                        @if($infrastruktur->jenis === 'Tiang' && $infrastruktur->jalur_tiang)
                        <div class="mb-3">
                            <strong>Jalur Tiang:</strong>
                            <div class="text-muted">{{ $infrastruktur->jalur_tiang }}</div>
                        </div>
                        @endif
                        @if($infrastruktur->jenis === 'Closure')
                        <div class="mb-3">
                            <strong>Core Masuk:</strong>
                            <div class="text-muted">{{ $infrastruktur->core_masuk ?? '-' }}</div>
                        </div>
                        <div class="mb-3">
                            <strong>Core Keluar:</strong>
                            <div class="text-muted">{{ $infrastruktur->core_keluar ?? '-' }}</div>
                        </div>
                        @endif
                        <div class="mb-3">
                            <strong>Vendor:</strong>
                            <div class="text-muted">{{ $infrastruktur->vendor ?? '-' }}</div>
                        </div>
                        <div class="mb-3">
                            <strong>Tanggal Instalasi:</strong>
                            <div class="text-muted">{{ $infrastruktur->tanggal_instalasi?->format('d F Y') ?? '-' }}</div>
                        </div>
                        <div class="mb-3">
                            <strong>Dibuat:</strong>
                            <div class="text-muted">{{ $infrastruktur->created_at->format('d F Y H:i') }}</div>
                        </div>
                        <div class="mb-3">
                            <strong>Terakhir Update:</strong>
                            <div class="text-muted">{{ $infrastruktur->updated_at->format('d F Y H:i') }}</div>
                        </div>
                    </div>
                </div>
                
                <div class="mb-3">
                    <strong>Alamat:</strong>
                    <div class="text-muted">{{ $infrastruktur->alamat }}</div>
                </div>
                
                @if($infrastruktur->latitude && $infrastruktur->longitude)
                <div class="mb-3">
                    <strong>Koordinat:</strong>
                    <div class="text-muted">
                        <i class="material-symbols-rounded me-1" style="font-size: 16px; vertical-align: middle;">location_on</i>
                        {{ $infrastruktur->latitude }}, {{ $infrastruktur->longitude }}
                    </div>
                </div>
                @endif
                
                @if($infrastruktur->keterangan)
                <div class="mb-3">
                    <strong>Keterangan:</strong>
                    <div class="text-muted">{{ $infrastruktur->keterangan }}</div>
                </div>
                @endif
            </div>
        </div>
        
        <!-- ODC Core Summary -->
        @if($infrastruktur->jenis === 'ODC' && $infrastruktur->kapasitas_core)
        <div class="card my-4">
            <div class="card-header pb-0 pt-3 bg-gradient-primary text-white">
                <div class="row align-items-center">
                    <div class="col">
                        <h6 class="mb-0">
                            <i class="material-symbols-rounded me-2" style="font-size: 20px; vertical-align: middle;">settings</i> Core Management
                        </h6>
                    </div>
                    <div class="col-auto">
                        <a href="{{ route('infrastruktur.odc-cores', $infrastruktur) }}" class="btn btn-sm bg-gradient-light mb-0">
                            <i class="material-symbols-rounded me-1" style="font-size: 16px; vertical-align: middle;">settings</i> Kelola Core
                        </a>
                    </div>
                </div>
            </div>
            <div class="card-body">
                @php
                    $coreUsage = $infrastruktur->core_usage;
                @endphp
                @if($coreUsage)
                <div class="row">
                    <div class="col-md-3">
                        <div class="text-center">
                            <h2 class="mb-0">{{ $coreUsage['total'] }}</h2>
                            <small class="text-muted">Total Core</small>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="text-center">
                            <h2 class="mb-0 text-success">{{ $coreUsage['used'] }}</h2>
                            <small class="text-muted">Core Terpakai</small>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="text-center">
                            <h2 class="mb-0 text-primary">{{ $coreUsage['available'] }}</h2>
                            <small class="text-muted">Core Tersedia</small>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="text-center">
                            <h2 class="mb-0">{{ $coreUsage['usage_percentage'] }}%</h2>
                            <small class="text-muted">Tingkat Penggunaan</small>
                        </div>
                    </div>
                </div>
                <div class="mt-3">
                    <div class="progress" style="height: 25px;">
                        <div class="progress-bar 
                            @if($coreUsage['usage_percentage'] >= 90) bg-danger
                            @elseif($coreUsage['usage_percentage'] >= 70) bg-warning
                            @else bg-success
                            @endif" 
                            role="progressbar" 
                            style="width: {{ $coreUsage['usage_percentage'] }}%"
                            aria-valuenow="{{ $coreUsage['usage_percentage'] }}" 
                            aria-valuemin="0" 
                            aria-valuemax="100">
                            {{ $coreUsage['usage_percentage'] }}%
                        </div>
                    </div>
                </div>
                @endif
            </div>
        </div>
        @endif
        
        <!-- ODP Port Summary -->
        @if($infrastruktur->jenis === 'ODP' && $infrastruktur->jumlah_port)
        <div class="card my-4">
            <div class="card-header pb-0 pt-3 bg-gradient-info text-white">
                <div class="row align-items-center">
                    <div class="col">
                        <h6 class="mb-0">
                            <i class="material-symbols-rounded me-2" style="font-size: 20px; vertical-align: middle;">settings</i> Port Management
                        </h6>
                    </div>
                    <div class="col-auto">
                        <a href="{{ route('infrastruktur.odp-ports', $infrastruktur) }}" class="btn btn-sm bg-gradient-light mb-0">
                            <i class="material-symbols-rounded me-1" style="font-size: 16px; vertical-align: middle;">settings</i> Kelola Port
                        </a>
                    </div>
                </div>
            </div>
            <div class="card-body">
                @php
                    $portUsage = $infrastruktur->port_usage;
                @endphp
                <div class="row">
                    <div class="col-md-3">
                        <div class="text-center">
                            <h2 class="mb-0">{{ $portUsage['total'] }}</h2>
                            <small class="text-muted">Total Port</small>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="text-center">
                            <h2 class="mb-0 text-success">{{ $portUsage['used'] }}</h2>
                            <small class="text-muted">Port Terpakai</small>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="text-center">
                            <h2 class="mb-0 text-primary">{{ $portUsage['available'] }}</h2>
                            <small class="text-muted">Port Tersedia</small>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="text-center">
                            <h2 class="mb-0">{{ $portUsage['usage_percentage'] }}%</h2>
                            <small class="text-muted">Tingkat Penggunaan</small>
                        </div>
                    </div>
                </div>
                <div class="mt-3">
                    <div class="progress" style="height: 25px;">
                        <div class="progress-bar 
                            @if($portUsage['usage_percentage'] >= 90) bg-danger
                            @elseif($portUsage['usage_percentage'] >= 70) bg-warning
                            @else bg-success
                            @endif" 
                            role="progressbar" 
                            style="width: {{ $portUsage['usage_percentage'] }}%"
                            aria-valuenow="{{ $portUsage['usage_percentage'] }}" 
                            aria-valuemin="0" 
                            aria-valuemax="100">
                            {{ $portUsage['usage_percentage'] }}%
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @endif
        
        <!-- LibreNMS Monitoring -->
        @if($infrastruktur->librenms_device_id && config('librenms.enabled'))
        <div class="card my-4">
            <div class="card-header pb-0 pt-3">
                <h6 class="mb-0">Monitoring LibreNMS</h6>
            </div>
            <div class="card-body pt-0">
                <div class="row">
                    <div class="col-md-6">
                        <h6>CPU Usage</h6>
                        <div class="border rounded p-2" style="height: 200px;">
                            <iframe src="{{ app(\App\Services\LibreNmsService::class)->graphUrlForDeviceCpu($infrastruktur->librenms_device_id) }}" 
                                    style="width: 100%; height: 100%; border: 0;" 
                                    loading="lazy" 
                                    referrerpolicy="no-referrer">
                            </iframe>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <h6>Memory Usage</h6>
                        <div class="border rounded p-2" style="height: 200px;">
                            <iframe src="{{ config('librenms.base_url') }}/graph.php?type=device_mempool&device={{ $infrastruktur->librenms_device_id }}&from=-24h&to=now" 
                                    style="width: 100%; height: 100%; border: 0;" 
                                    loading="lazy" 
                                    referrerpolicy="no-referrer">
                            </iframe>
                        </div>
                    </div>
                </div>
                <div class="mt-3">
                    <a href="{{ config('librenms.base_url') }}/device/device={{ $infrastruktur->librenms_device_id }}" 
                       target="_blank" 
                       class="btn bg-gradient-primary mb-0">
                        <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">open_in_new</i>Lihat di LibreNMS
                    </a>
                </div>
            </div>
        </div>
        @endif

        <!-- Foto -->
        @if($infrastruktur->foto)
        <div class="card my-4">
            <div class="card-header pb-0 pt-3">
                <h6 class="mb-0">Foto Infrastruktur</h6>
            </div>
            <div class="card-body text-center">
                <img src="{{ asset('uploads/infrastruktur/' . $infrastruktur->foto) }}" 
                     alt="Foto {{ $infrastruktur->nama }}" 
                     class="img-fluid rounded" 
                     style="max-height: 400px;">
            </div>
        </div>
        @endif
    </div>
    
    <div class="col-lg-4">
        <!-- Quick Actions -->
        <div class="card my-4">
            <div class="card-header pb-0 pt-3">
                <h6 class="mb-0">Aksi Cepat</h6>
            </div>
            <div class="card-body pt-0">
                <a href="{{ route('infrastruktur.edit', $infrastruktur) }}" class="btn bg-gradient-warning mb-0 w-100 mb-2">
                    <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">edit</i>Edit Infrastruktur
                </a>
                
                @if($infrastruktur->latitude && $infrastruktur->longitude)
                <button type="button" class="btn bg-gradient-info mb-0 w-100 mb-2" onclick="showOnMap()">
                    <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">location_on</i>Lihat di Peta
                </button>
                @endif
                
                <button type="button" class="btn bg-gradient-danger mb-0 w-100" onclick="confirmDelete()">
                    <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">delete</i>Hapus Infrastruktur
                </button>
                
                <form id="delete-form" method="POST" action="{{ route('infrastruktur.destroy', $infrastruktur) }}" style="display: none;">
                    @csrf
                    @method('DELETE')
                </form>
            </div>
        </div>
        
        <!-- Status Info -->
        @if($infrastruktur->status === 'Maintenance')
        <div class="card my-4 border-warning">
            <div class="card-header pb-0 pt-3 bg-gradient-warning text-dark">
                <h6 class="mb-0">Status: Maintenance</h6>
            </div>
            <div class="card-body pt-0">
                <p class="mb-0">
                    <i class="material-symbols-rounded text-warning me-2" style="font-size: 20px; vertical-align: middle;">build</i>
                    Infrastruktur sedang dalam perawatan.
                </p>
            </div>
        </div>
        @elseif($infrastruktur->status === 'Nonaktif')
        <div class="card my-4 border-danger">
            <div class="card-header pb-0 pt-3 bg-gradient-danger text-white">
                <h6 class="m-0 font-weight-bold">Status: Nonaktif</h6>
            </div>
            <div class="card-body">
                <p class="mb-0">
                    <i class="fas fa-times-circle text-danger me-2"></i>
                    Infrastruktur tidak aktif.
                </p>
            </div>
        </div>
        @else
        <div class="card shadow mb-4 border-success">
            <div class="card-header bg-success text-white">
                <h6 class="m-0 font-weight-bold">Status: Aktif</h6>
            </div>
            <div class="card-body">
                <p class="mb-0">
                    <i class="fas fa-check-circle text-success me-2"></i>
                    Infrastruktur beroperasi normal.
                </p>
            </div>
        </div>
        @endif
        
        <!-- Map Preview -->
        @if($infrastruktur->latitude && $infrastruktur->longitude)
        <div class="card shadow">
            <div class="card-header">
                <h6 class="m-0 font-weight-bold text-primary">Lokasi</h6>
            </div>
            <div class="card-body p-0">
                <div id="miniMap" style="height: 200px; width: 100%;"></div>
            </div>
        </div>
        @endif
    </div>
</div>
@endsection

@section('styles')
@if($infrastruktur->latitude && $infrastruktur->longitude)
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<style>
    /* Mini Map - Argon Dashboard React Theme */
    #miniMap {
        border-radius: 0 0 0.375rem 0.375rem;
        box-shadow: 0 0 2rem 0 rgba(136, 152, 170, 0.15);
    }
</style>
@endif
@endsection

@section('scripts')
@if($infrastruktur->latitude && $infrastruktur->longitude)
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
// Initialize mini map
const miniMap = L.map('miniMap').setView([{{ $infrastruktur->latitude }}, {{ $infrastruktur->longitude }}], 15);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors'
}).addTo(miniMap);

L.marker([{{ $infrastruktur->latitude }}, {{ $infrastruktur->longitude }}])
    .addTo(miniMap)
    .bindPopup('{{ $infrastruktur->nama }}')
    .openPopup();
</script>
@endif

<script>
function confirmDelete() {
    if (confirm('Apakah Anda yakin ingin menghapus infrastruktur "{{ $infrastruktur->nama }}"?')) {
        document.getElementById('delete-form').submit();
    }
}

function showOnMap() {
    window.open('{{ route('dashboard.map') }}?lat={{ $infrastruktur->latitude }}&lng={{ $infrastruktur->longitude }}', '_blank');
}
</script>
@endsection