@extends('layouts.app')

@section('title', 'Detail Pelanggan')

@section('content')
<div class="card">
    <div class="card-header">Detail Pelanggan</div>
    <div class="card-body">
        <div class="row">
            <div class="col-md-6">
                <table class="table table-bordered">
                    <tr>
                        <th>Nama</th>
                        <td>{{ $customer->name }}</td>
                    </tr>
                    <tr>
                        <th>Alamat</th>
                        <td>{{ $customer->address }}</td>
                    </tr>
                    <tr>
                        <th>Telepon</th>
                        <td>{{ $customer->phone }}</td>
                    </tr>
                </table>
            </div>
            <div class="col-md-6">
                <table class="table table-bordered">
                    <tr>
                        <th>Latitude</th>
                        <td>{{ $customer->latitude ?? '-' }}</td>
                    </tr>
                    <tr>
                        <th>Longitude</th>
                        <td>{{ $customer->longitude ?? '-' }}</td>
                    </tr>
                    <tr>
                        <th>Total Keluhan</th>
                        <td>{{ $customer->complaints->count() }}</td>
                    </tr>
                </table>
            </div>
        </div>
        
        @if($customer->latitude && $customer->longitude)
        <div class="mt-4">
            <h5>Lokasi Pelanggan</h5>
            <div id="map"></div>
        </div>
        
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                // Inisialisasi peta
                var map = L.map('map').setView([{{ $customer->latitude }}, {{ $customer->longitude }}], 15);
                
                // Tambahkan tile layer OpenStreetMap
                L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                }).addTo(map);
                
                // Tambahkan marker
                var marker = L.marker([{{ $customer->latitude }}, {{ $customer->longitude }}]).addTo(map)
                    .bindPopup(`
                        <b>{{ $customer->name }}</b><br>
                        {{ $customer->address }}<br>
                        Telp: {{ $customer->phone }}
                    `)
                    .openPopup();
                
                // Opsional: Tambahkan circle untuk menunjukkan radius
                L.circle([{{ $customer->latitude }}, {{ $customer->longitude }}], {
                    color: '#3388ff',
                    fillColor: '#3388ff',
                    fillOpacity: 0.2,
                    radius: 100
                }).addTo(map);
            });
        </script>
        @else
        <div class="alert alert-info mt-4">
            <i class="fas fa-info-circle"></i> Lokasi pelanggan tidak tersedia (latitude dan longitude belum diisi)
        </div>
        @endif
        
        <div class="mt-3">
            <a href="{{ route('customers.edit', $customer->id) }}" class="btn btn-warning">Edit</a>
            <a href="{{ route('customers.index') }}" class="btn btn-secondary">Kembali</a>
        </div>
    </div>
</div>
@endsection