@extends('layouts.app')

@section('title', 'Detail ODP - ' . $topOdp->nama_odp)

@section('content')
<div class="container-fluid">
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h2 mb-1">Detail ODP</h1>
            <p class="text-muted mb-0">{{ $topOdp->nama_odp }}</p>
        </div>
        <div class="d-flex gap-2">
            <a href="{{ route('top-odps.edit', $topOdp) }}" class="btn btn-primary">
                <i class="fas fa-edit"></i> Edit
            </a>
            <a href="{{ route('top-odps.index') }}" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left"></i> Kembali
            </a>
        </div>
    </div>

    <div class="row">
        <!-- Informasi Utama -->
        <div class="col-lg-8">
            <!-- Informasi Dasar -->
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-white border-bottom">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-info-circle text-primary"></i> Informasi Dasar
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold">Nama ODP</label>
                            <div class="form-control-plaintext">{{ $topOdp->nama_odp }}</div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold">Kode ODP</label>
                            <div class="form-control-plaintext">
                                <code class="bg-light px-2 py-1 rounded">{{ $topOdp->kode_odp }}</code>
                            </div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold">ODC</label>
                            <div class="form-control-plaintext">
                                <div class="fw-medium">{{ $topOdp->topOdc->nama_odc ?? '-' }}</div>
                                @if($topOdp->topOdc && $topOdp->topOdc->topOlt)
                                    <small class="text-muted">OLT: {{ $topOdp->topOdc->topOlt->nama_server_olt }}</small>
                                @endif
                            </div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold">Tipe Koneksi</label>
                            <div class="form-control-plaintext">
                                @if(($topOdp->parent_type ?? 'odc') === 'odp')
                                    <span class="badge bg-warning text-dark">
                                        <i class="fas fa-sitemap me-1"></i>
                                        ODP Cascading
                                    </span>
                                @else
                                    <span class="badge bg-primary">
                                        <i class="fas fa-network-wired me-1"></i>
                                        Direct ODC
                                    </span>
                                @endif
                            </div>
                        </div>
                        
                        @if(($topOdp->parent_type ?? 'odc') === 'odc')
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-bold">Port ODC</label>
                                <div class="form-control-plaintext">
                                    <span class="badge bg-info">
                                        {{ str_replace('port_', 'Port ', $topOdp->odc_port ?? 'N/A') }}
                                    </span>
                                </div>
                            </div>
                        @else
                            <!-- Parent ODP Information -->
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-bold">Parent ODP</label>
                                <div class="form-control-plaintext">
                                    @if($topOdp->parentOdp)
                                        <div class="fw-medium">{{ $topOdp->parentOdp->nama_odp }}</div>
                                        <small class="text-muted">Kode: {{ $topOdp->parentOdp->kode_odp }}</small>
                                    @else
                                        <span class="text-muted">Tidak ada parent ODP</span>
                                    @endif
                                </div>
                            </div>
                            
                            @if($topOdp->splitter_ratio)
                                <div class="col-md-6 mb-3">
                                    <label class="form-label fw-bold">Splitter Ratio</label>
                                    <div class="form-control-plaintext">
                                        <code class="bg-light px-2 py-1 rounded">{{ $topOdp->splitter_ratio }}</code>
                                    </div>
                                </div>
                            @endif
                            
                            @if($topOdp->splitter_power_ratio)
                                <div class="col-md-12 mb-3">
                                    <label class="form-label fw-bold">Power Distribution Ratio</label>
                                    <div class="form-control-plaintext">
                                        <code class="bg-light px-2 py-1 rounded">{{ $topOdp->splitter_power_ratio }}</code>
                                    </div>
                                </div>
                            @endif
                        @endif
                        <div class="col-md-4 mb-3">
                            <label class="form-label fw-bold">Jumlah Port</label>
                            <div class="form-control-plaintext">
                                <span class="badge bg-secondary">{{ $topOdp->jml_port_odp }} Port</span>
                            </div>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label fw-bold">Redaman Rata-rata</label>
                            <div class="form-control-plaintext">
                                @if($topOdp->redaman_rata_rata)
                                    <span class="badge bg-warning">{{ $topOdp->redaman_format }}</span>
                                @else
                                    <span class="text-muted">Belum diukur</span>
                                @endif
                            </div>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label fw-bold">Status</label>
                            <div class="form-control-plaintext">
                                <span class="badge bg-{{ $topOdp->status_badge }}">
                                    {{ $topOdp->status_label }}
                                </span>
                            </div>
                        </div>
                        @if($topOdp->keterangan)
                            <div class="col-12 mb-3">
                                <label class="form-label fw-bold">Keterangan</label>
                                <div class="form-control-plaintext">{{ $topOdp->keterangan }}</div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Foto ODP -->
            @if($topOdp->foto_odp)
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-header bg-white border-bottom">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-camera text-primary"></i> Foto ODP
                        </h5>
                    </div>
                    <div class="card-body text-center">
                        <img src="{{ $topOdp->foto_url }}" alt="Foto {{ $topOdp->nama_odp }}" 
                             class="img-fluid rounded shadow" style="max-height: 400px;">
                    </div>
                </div>
            @endif

            <!-- Peta Lokasi -->
            @if($topOdp->koordinat)
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-header bg-white border-bottom">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-map-marker-alt text-primary"></i> Lokasi
                        </h5>
                    </div>
                    <div class="card-body">
                        @if($topOdp->lokasi)
                            <div class="mb-3">
                                <label class="form-label fw-bold">Alamat</label>
                                <div class="form-control-plaintext">{{ $topOdp->lokasi }}</div>
                            </div>
                        @endif
                        
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="form-label fw-bold">Latitude</label>
                                <div class="form-control-plaintext">{{ $topOdp->latitude }}</div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-bold">Longitude</label>
                                <div class="form-control-plaintext">{{ $topOdp->longitude }}</div>
                            </div>
                        </div>

                        <!-- Peta Interaktif -->
                        <div id="map" style="height: 300px; border-radius: 8px;"></div>
                        
                        <div class="mt-3 d-flex gap-2">
                            <a href="https://maps.google.com/?q={{ $topOdp->koordinat }}" target="_blank" class="btn btn-outline-primary btn-sm">
                                <i class="fab fa-google"></i> Buka di Google Maps
                            </a>
                            <a href="https://www.openstreetmap.org/?mlat={{ $topOdp->latitude }}&mlon={{ $topOdp->longitude }}&zoom=16" target="_blank" class="btn btn-outline-secondary btn-sm">
                                <i class="fas fa-map"></i> Buka di OpenStreetMap
                            </a>
                        </div>
                    </div>
                </div>
            @endif
        </div>

        <!-- Sidebar -->
        <div class="col-lg-4">
            <!-- Aksi Cepat -->
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-white border-bottom">
                    <h6 class="card-title mb-0">
                        <i class="fas fa-bolt text-warning"></i> Aksi Cepat
                    </h6>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <a href="{{ route('top-odps.edit', $topOdp) }}" class="btn btn-primary btn-sm">
                            <i class="fas fa-edit"></i> Edit ODP
                        </a>
                        
                        <form action="{{ route('top-odps.toggle-status', $topOdp) }}" method="POST" class="d-inline">
                            @csrf
                            <button type="submit" class="btn btn-outline-{{ $topOdp->status === 'aktif' ? 'warning' : 'success' }} btn-sm w-100">
                                <i class="fas fa-toggle-{{ $topOdp->status === 'aktif' ? 'off' : 'on' }}"></i>
                                {{ $topOdp->status === 'aktif' ? 'Non-aktifkan' : 'Aktifkan' }}
                            </button>
                        </form>
                        
                        <form action="{{ route('top-odps.duplicate', $topOdp) }}" method="POST" class="d-inline">
                            @csrf
                            <button type="submit" class="btn btn-outline-info btn-sm w-100">
                                <i class="fas fa-copy"></i> Duplikasi
                            </button>
                        </form>
                        
                        <button type="button" class="btn btn-outline-danger btn-sm" onclick="confirmDelete()">
                            <i class="fas fa-trash"></i> Hapus
                        </button>
                    </div>
                </div>
            </div>

            <!-- Statistik ODP -->
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-white border-bottom">
                    <h6 class="card-title mb-0">
                        <i class="fas fa-chart-bar text-info"></i> Statistik ODP
                    </h6>
                </div>
                <div class="card-body">
                    <div class="row text-center">
                        <div class="col-6 mb-3">
                            <div class="border-end">
                                <div class="h4 mb-1 text-primary">{{ $topOdp->jml_port_odp }}</div>
                                <div class="small text-muted">Total Port</div>
                            </div>
                        </div>
                        <div class="col-6 mb-3">
                            <div class="h4 mb-1 text-success">0</div>
                            <div class="small text-muted">Port Terisi</div>
                        </div>
                        <div class="col-12">
                            <div class="progress" style="height: 8px;">
                                <div class="progress-bar bg-success" role="progressbar" style="width: 0%"></div>
                            </div>
                            <div class="small text-muted mt-1">Utilisasi: 0%</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Info Teknis -->
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white border-bottom">
                    <h6 class="card-title mb-0">
                        <i class="fas fa-cog text-secondary"></i> Info Teknis
                    </h6>
                </div>
                <div class="card-body">
                    <div class="small">
                        <div class="row mb-2">
                            <div class="col-5 text-muted">ID ODP:</div>
                            <div class="col-7">#{{ $topOdp->id }}</div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-5 text-muted">Tipe:</div>
                            <div class="col-7">{{ $topOdp->jml_port_odp }} Port</div>
                        </div>
                        @if($topOdp->redaman_rata_rata)
                            <div class="row mb-2">
                                <div class="col-5 text-muted">Redaman:</div>
                                <div class="col-7">{{ $topOdp->redaman_format }}</div>
                            </div>
                        @endif
                        @if($topOdp->koordinat)
                            <div class="row mb-2">
                                <div class="col-5 text-muted">Koordinat:</div>
                                <div class="col-7">{{ $topOdp->koordinat }}</div>
                            </div>
                        @endif
                        <div class="row mb-2">
                            <div class="col-5 text-muted">Dibuat:</div>
                            <div class="col-7">{{ $topOdp->created_at->format('d/m/Y H:i') }}</div>
                        </div>
                        <div class="row">
                            <div class="col-5 text-muted">Diupdate:</div>
                            <div class="col-7">{{ $topOdp->updated_at->format('d/m/Y H:i') }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Child ODPs (if any) -->
    @if($topOdp->childOdps && $topOdp->childOdps->count() > 0)
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header bg-white border-bottom">
                <h5 class="card-title mb-0">
                    <i class="fas fa-sitemap text-warning"></i> Child ODPs (Cascading)
                </h5>
            </div>
            <div class="card-body">
                <div class="alert alert-info">
                    <i class="fas fa-info-circle me-2"></i>
                    <strong>ODP Cascading:</strong> Berikut adalah ODPs yang mengambil uplink dari ODP ini melalui splitter.
                </div>
                
                <div class="row">
                    @foreach($topOdp->childOdps as $childOdp)
                        <div class="col-md-6 mb-3">
                            <div class="card border-warning">
                                <div class="card-body">
                                    <h6 class="card-title">
                                        <a href="{{ route('top-odps.show', $childOdp) }}" class="text-decoration-none">
                                            {{ $childOdp->nama_odp }}
                                        </a>
                                    </h6>
                                    <p class="card-text">
                                        <strong>Kode:</strong> {{ $childOdp->kode_odp }}<br>
                                        @if($childOdp->splitter_ratio)
                                            <strong>Splitter:</strong> <code>{{ $childOdp->splitter_ratio }}</code><br>
                                        @endif
                                        @if($childOdp->splitter_power_ratio)
                                            <strong>Power Ratio:</strong> <code>{{ $childOdp->splitter_power_ratio }}</code><br>
                                        @endif
                                        <strong>Status:</strong> 
                                        <span class="badge bg-{{ $childOdp->status_badge }}">
                                            {{ $childOdp->status_label }}
                                        </span>
                                    </p>
                                    <div class="d-flex gap-2">
                                        <a href="{{ route('top-odps.show', $childOdp) }}" class="btn btn-outline-primary btn-sm">
                                            <i class="fas fa-eye"></i> Detail
                                        </a>
                                        <a href="{{ route('top-odps.edit', $childOdp) }}" class="btn btn-outline-warning btn-sm">
                                            <i class="fas fa-edit"></i> Edit
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    @endif
</div>

<!-- Modal Konfirmasi Delete -->
<div class="modal fade" id="deleteModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Konfirmasi Hapus</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>Apakah Anda yakin ingin menghapus ODP <strong>{{ $topOdp->nama_odp }}</strong>?</p>
                <p class="text-danger small">
                    <i class="fas fa-exclamation-triangle"></i>
                    Tindakan ini tidak dapat dibatalkan!
                </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                <form action="{{ route('top-odps.destroy', $topOdp) }}" method="POST" class="d-inline">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-danger">Hapus</button>
                </form>
            </div>
        </div>
    </div>
</div>

@push('styles')
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
@endpush

@push('scripts')
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script>
@if($topOdp->koordinat)
// Initialize map
const map = L.map('map').setView([{{ $topOdp->latitude }}, {{ $topOdp->longitude }}], 16);

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

// Add marker
const marker = L.marker([{{ $topOdp->latitude }}, {{ $topOdp->longitude }}]).addTo(map);

// Add popup
marker.bindPopup(`
    <div class="text-center">
        <h6 class="mb-1">{{ $topOdp->nama_odp }}</h6>
        <p class="mb-1 small">{{ $topOdp->kode_odp }}</p>
        @if($topOdp->lokasi)
            <p class="mb-0 small text-muted">{{ $topOdp->lokasi }}</p>
        @endif
    </div>
`).openPopup();
@endif

function confirmDelete() {
    new bootstrap.Modal(document.getElementById('deleteModal')).show();
}
</script>
@endpush
@endsection