@extends('layouts.admin.master')

@section('content')
    <div class="container-fluid py-3">
        <div class="d-flex flex-column flex-lg-row justify-content-between align-items-lg-center gap-3 mb-4">
            <div>
                <h3 class="mb-1">{{ $asset->asset_code }}</h3>
                <p class="text-muted mb-0">{{ $asset->name }}</p>
            </div>
            <div class="d-flex flex-wrap gap-2">
                <a href="{{ route('admin.smart_city.assets') }}" class="btn btn-outline-secondary btn-sm">Kembali ke Daftar</a>
                <a href="{{ route('admin.smart_city.assets.edit', $asset) }}" class="btn btn-outline-primary btn-sm">Ubah Aset</a>
                <span class="badge bg-light text-dark fs-6 px-3 py-2">{{ $asset->status_label }} | {{ $asset->condition_label }}</span>
            </div>
        </div>

        @if (session('success'))
            <div class="alert alert-success">{{ session('success') }}</div>
        @endif
        @if (session('error'))
            <div class="alert alert-danger">{{ session('error') }}</div>
        @endif

        <div class="row g-3 mb-4">
            <div class="col-xl-7">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-header bg-white border-0 pt-4">
                        <h5 class="mb-1">Profil Aset</h5>
                    </div>
                    <div class="card-body pt-2">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <div class="small text-muted">Kategori</div>
                                <div class="fw-semibold">{{ $asset->category?->name ?: '-' }}</div>
                            </div>
                            <div class="col-md-6">
                                <div class="small text-muted">Organisasi / OPD</div>
                                <div class="fw-semibold">{{ $asset->organization?->short_name ?: $asset->organization?->name ?: '-' }}</div>
                            </div>
                            <div class="col-md-6">
                                <div class="small text-muted">Layanan Terkait</div>
                                <div class="fw-semibold">{{ $asset->service?->nama ?: 'Tanpa layanan' }}</div>
                            </div>
                            <div class="col-md-6">
                                <div class="small text-muted">Tipe Kepemilikan</div>
                                <div class="fw-semibold">{{ \App\Models\SmartCity\Asset::OWNERSHIP_TYPES[$asset->ownership_type] ?? ($asset->ownership_type ?: '-') }}</div>
                            </div>
                            <div class="col-md-6">
                                <div class="small text-muted">Instalasi</div>
                                <div class="fw-semibold">{{ optional($asset->installation_date)->format('d M Y') ?: '-' }}</div>
                            </div>
                            <div class="col-md-6">
                                <div class="small text-muted">Maintenance Berikutnya</div>
                                <div class="fw-semibold">{{ optional($asset->next_maintenance_at)->format('d M Y H:i') ?: 'Belum dijadwalkan' }}</div>
                            </div>
                            <div class="col-12">
                                <div class="small text-muted">Lokasi</div>
                                <div class="fw-semibold">{{ $asset->address_text ?: 'Belum ada alamat rinci' }}</div>
                                <div class="small text-muted mt-1">{{ $asset->latitude && $asset->longitude ? $asset->latitude . ', ' . $asset->longitude : 'Titik koordinat belum diisi' }}</div>
                            </div>
                            <div class="col-12">
                                <div class="small text-muted">Deskripsi</div>
                                <div class="border rounded-4 p-3 bg-light">{{ $asset->description ?: 'Belum ada deskripsi aset.' }}</div>
                            </div>
                            @if ($asset->wilayah_metadata)
                                <div class="col-12">
                                    <div class="small text-muted">Metadata Wilayah</div>
                                    <pre class="border rounded-4 bg-light p-3 small mb-0">{{ json_encode($asset->wilayah_metadata, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES) }}</pre>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-5">
                <div class="card border-0 shadow-sm mb-3">
                    <div class="card-header bg-white border-0 pt-4">
                        <h5 class="mb-1">Foto Aset</h5>
                    </div>
                    <div class="card-body pt-2">
                        @if ($asset->photo_url)
                            <img src="{{ $asset->photo_url }}" alt="{{ $asset->name }}" class="img-fluid rounded-4 border">
                        @else
                            <div class="text-muted">Belum ada foto aset.</div>
                        @endif
                    </div>
                </div>

                <div class="card border-0 shadow-sm">
                    <div class="card-header bg-white border-0 pt-4">
                        <h5 class="mb-1">Peta Lokasi</h5>
                    </div>
                    <div class="card-body">
                        <div id="asset-detail-map" class="rounded-4 border"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row g-3">
            <div class="col-xl-6">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-header bg-white border-0 pt-4">
                        <h5 class="mb-1">Tautan ke Aduan</h5>
                        <p class="text-muted mb-0">Aset ini bisa dihubungkan langsung ke tiket pengaduan yang relevan.</p>
                    </div>
                    <div class="card-body pt-2">
                        <form method="POST" action="{{ route('admin.smart_city.assets.complaints.link', $asset) }}" class="row g-3 mb-4">
                            @csrf
                            <div class="col-md-5">
                                <label class="form-label">Aduan</label>
                                <select name="aduan_id" class="form-select" required>
                                    <option value="">Pilih aduan</option>
                                    @foreach ($availableComplaints as $complaint)
                                        <option value="{{ $complaint->id }}">{{ $complaint->kode_tiket }} - {{ $complaint->judul }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Relasi</label>
                                <select name="relation_type" class="form-select" required>
                                    @foreach ($relationTypes as $key => $label)
                                        <option value="{{ $key }}">{{ $label }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-3 d-grid">
                                <label class="form-label d-none d-md-block">&nbsp;</label>
                                <button type="submit" class="btn btn-primary">Tautkan</button>
                            </div>
                            <div class="col-12">
                                <label class="form-label">Catatan</label>
                                <textarea name="note" rows="2" class="form-control"></textarea>
                            </div>
                        </form>

                        @forelse ($asset->complaintLinks as $link)
                            <div class="border rounded-4 p-3 bg-light mb-3">
                                <div class="d-flex justify-content-between gap-3">
                                    <div>
                                        <div class="fw-semibold">{{ $link->complaint?->kode_tiket ?: 'Aduan terhapus' }}</div>
                                        <div>{{ $link->complaint?->judul ?: '-' }}</div>
                                        <div class="small text-muted">{{ \App\Models\SmartCity\AssetComplaintLink::RELATION_TYPES[$link->relation_type] ?? $link->relation_type }}</div>
                                        <div class="small text-muted">{{ $link->complaint?->targetOrganization?->short_name ?: $link->complaint?->targetOrganization?->name ?: 'Belum ada OPD' }}</div>
                                    </div>
                                    <div class="text-end">
                                        @if ($link->complaint)
                                            <a href="{{ route('admin.smart_city.complaints.show', $link->complaint) }}" class="btn btn-outline-primary btn-sm mb-2">Detail</a>
                                        @endif
                                        <form method="POST" action="{{ route('admin.smart_city.assets.complaints.unlink', [$asset, $link]) }}">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-outline-danger btn-sm">Lepas</button>
                                        </form>
                                    </div>
                                </div>
                                @if ($link->note)
                                    <div class="small mt-2">{{ $link->note }}</div>
                                @endif
                            </div>
                        @empty
                            <div class="text-muted">Belum ada aduan yang ditautkan ke aset ini.</div>
                        @endforelse
                    </div>
                </div>
            </div>

            <div class="col-xl-6">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-header bg-white border-0 pt-4">
                        <h5 class="mb-1">Maintenance Log</h5>
                        <p class="text-muted mb-0">Catatan tindak lanjut aset sebagai bukti operasional.</p>
                    </div>
                    <div class="card-body pt-2">
                        <form method="POST" action="{{ route('admin.smart_city.assets.maintenance.store', $asset) }}" enctype="multipart/form-data" class="row g-3 mb-4">
                            @csrf
                            <div class="col-md-4">
                                <label class="form-label">Tipe</label>
                                <select name="maintenance_type" class="form-select" required>
                                    @foreach (\App\Models\SmartCity\AssetMaintenanceLog::TYPES as $key => $label)
                                        <option value="{{ $key }}">{{ $label }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Status Setelah</label>
                                <select name="status_after" class="form-select">
                                    <option value="">Ikuti status sekarang</option>
                                    @foreach (\App\Models\SmartCity\Asset::STATUSES as $key => $label)
                                        <option value="{{ $key }}">{{ $label }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Kondisi Setelah</label>
                                <select name="condition_after" class="form-select">
                                    <option value="">Ikuti kondisi sekarang</option>
                                    @foreach (\App\Models\SmartCity\Asset::CONDITIONS as $key => $label)
                                        <option value="{{ $key }}">{{ $label }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Dijadwalkan</label>
                                <input type="datetime-local" name="scheduled_at" class="form-control">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Dilakukan</label>
                                <input type="datetime-local" name="performed_at" class="form-control" value="{{ now()->format('Y-m-d\\TH:i') }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Biaya Estimasi</label>
                                <input type="number" step="0.01" name="cost_estimate" class="form-control">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Biaya Aktual</label>
                                <input type="number" step="0.01" name="cost_actual" class="form-control">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Pelaksana</label>
                                <input type="text" name="performed_by_name" class="form-control" placeholder="Nama petugas / vendor">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Jadwal Berikutnya</label>
                                <input type="datetime-local" name="next_maintenance_at" class="form-control">
                            </div>
                            <div class="col-12">
                                <label class="form-label">Deskripsi</label>
                                <textarea name="description" rows="3" class="form-control"></textarea>
                            </div>
                            <div class="col-md-8">
                                <label class="form-label">Lampiran</label>
                                <input type="file" name="attachment" class="form-control">
                            </div>
                            <div class="col-md-4 d-grid">
                                <label class="form-label d-none d-md-block">&nbsp;</label>
                                <button type="submit" class="btn btn-primary">Tambah Log</button>
                            </div>
                        </form>

                        @forelse ($asset->maintenanceLogs as $log)
                            <div class="border rounded-4 p-3 bg-light mb-3">
                                <div class="d-flex justify-content-between gap-3">
                                    <div>
                                        <div class="fw-semibold">{{ \App\Models\SmartCity\AssetMaintenanceLog::TYPES[$log->maintenance_type] ?? $log->maintenance_type }}</div>
                                        <div class="small text-muted">{{ optional($log->performed_at)->format('d M Y H:i') ?: '-' }} | {{ $log->performed_by_name ?: ($log->performer?->name ?: 'Sistem') }}</div>
                                    </div>
                                    <div class="small text-muted text-end">
                                        {{ $log->status_before ?: '-' }} -> {{ $log->status_after ?: '-' }}<br>
                                        {{ $log->condition_before ?: '-' }} -> {{ $log->condition_after ?: '-' }}
                                    </div>
                                </div>
                                @if ($log->description)
                                    <div class="mt-2">{{ $log->description }}</div>
                                @endif
                                <div class="small text-muted mt-2">
                                    Estimasi: {{ $log->cost_estimate ? number_format((float) $log->cost_estimate, 0, ',', '.') : '-' }}
                                    |
                                    Aktual: {{ $log->cost_actual ? number_format((float) $log->cost_actual, 0, ',', '.') : '-' }}
                                </div>
                                @if ($log->attachment_url)
                                    <a href="{{ $log->attachment_url }}" target="_blank" class="btn btn-outline-primary btn-sm mt-2">Buka Lampiran</a>
                                @endif
                            </div>
                        @empty
                            <div class="text-muted">Belum ada log maintenance untuk aset ini.</div>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('stylesheet')
    <style>
        #asset-detail-map {
            min-height: 320px;
        }
    </style>
@endsection

@section('javascript')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const mapElement = document.getElementById('asset-detail-map');
            const latitude = @json($asset->latitude);
            const longitude = @json($asset->longitude);

            if (!mapElement || typeof L === 'undefined') {
                return;
            }

            const hasPoint = latitude !== null && longitude !== null;

            if (!hasPoint) {
                mapElement.innerHTML = '<div class="d-flex align-items-center justify-content-center h-100 text-muted">Koordinat aset belum tersedia.</div>';
                return;
            }

            const map = L.map(mapElement).setView([latitude, longitude], 15);

            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                maxZoom: 19,
                attribution: '&copy; OpenStreetMap contributors'
            }).addTo(map);

            L.circleMarker([latitude, longitude], {
                radius: 10,
                color: '#f97316',
                fillColor: '#fb923c',
                fillOpacity: 0.85
            }).addTo(map).bindPopup('<strong>{{ addslashes($asset->asset_code) }}</strong><br>{{ addslashes($asset->name) }}').openPopup();
        });
    </script>
@endsection