@extends('layouts.app')

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

@section('content')
<div class="card">
    <div class="card-header">Edit Data Pelanggan</div>
    <div class="card-body">
        <form action="{{ route('customers.update', $customer->id) }}" method="POST">
            @csrf
            @method('PUT')
            <div class="mb-3">
                <label for="name" class="form-label">Nama Pelanggan</label>
                <input type="text" class="form-control" id="name" name="name" value="{{ $customer->name }}" required>
            </div>
            <div class="mb-3">
                <label for="address" class="form-label">Alamat</label>
                <textarea class="form-control" id="address" name="address" rows="3" required>{{ $customer->address }}</textarea>
                <button type="button" id="geocode-btn" class="btn btn-sm btn-outline-primary mt-2">
                    <i class="fas fa-map-marker-alt"></i> Dapatkan Koordinat dari Alamat
                </button>
            </div>
            <div class="mb-3">
                <label for="phone" class="form-label">Telepon</label>
                <input type="text" class="form-control" id="phone" name="phone" value="{{ $customer->phone }}" required>
            </div>
            
            <div class="row">
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="latitude" class="form-label">Latitude</label>
                        <input type="number" step="any" class="form-control" id="latitude" name="latitude" value="{{ $customer->latitude }}" required>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="longitude" class="form-label">Longitude</label>
                        <input type="number" step="any" class="form-control" id="longitude" name="longitude" value="{{ $customer->longitude }}" required>
                    </div>
                </div>
            </div>
            
            <div class="mb-3">
                <div id="map-picker" style="height: 300px; border-radius: 5px; border: 1px solid #ddd;"></div>
                <small class="text-muted">Klik pada peta untuk mengubah lokasi atau gunakan tombol di atas untuk mendapatkan koordinat dari alamat</small>
            </div>
            
            <button type="submit" class="btn btn-primary">Update</button>
            <a href="{{ route('customers.index') }}" class="btn btn-secondary">Batal</a>
        </form>
    </div>
</div>

@section('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Inisialisasi peta
        var initialLat = {{ $customer->latitude ?? -2.5489 }};
        var initialLon = {{ $customer->longitude ?? 118.0149 }};
        var initialZoom = {{ $customer->latitude ? 15 : 5 }};
        
        var map = L.map('map-picker').setView([initialLat, initialLon], initialZoom);
        
        // 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 jika ada koordinat
        var marker;
        @if($customer->latitude && $customer->longitude)
            marker = L.marker([initialLat, initialLon]).addTo(map)
                .bindPopup('Lokasi saat ini: ' + [initialLat, initialLon].join(', '));
        @endif
        
        // Fungsi untuk update marker dan form
        function updateLocation(latlng) {
            if (marker) {
                map.removeLayer(marker);
            }
            marker = L.marker(latlng).addTo(map)
                .bindPopup('Lokasi baru: ' + [latlng.lat, latlng.lng].join(', '))
                .openPopup();
            
            document.getElementById('latitude').value = latlng.lat;
            document.getElementById('longitude').value = latlng.lng;
        }
        
        // Klik pada peta untuk update lokasi
        map.on('click', function(e) {
            updateLocation(e.latlng);
        });
        
        // Tombol geocode alamat
        document.getElementById('geocode-btn').addEventListener('click', function() {
            var address = document.getElementById('address').value;
            if (!address) {
                alert('Masukkan alamat terlebih dahulu');
                return;
            }
            
            this.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Mencari...';
            this.disabled = true;
            
            fetch(`https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(address)}`)
                .then(response => response.json())
                .then(data => {
                    if (data.length > 0) {
                        var lat = parseFloat(data[0].lat);
                        var lon = parseFloat(data[0].lon);
                        updateLocation({ lat: lat, lng: lon });
                        map.setView([lat, lon], 15);
                    } else {
                        alert('Alamat tidak ditemukan. Silakan coba dengan alamat lebih spesifik.');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('Terjadi kesalahan saat mencari alamat');
                })
                .finally(() => {
                    this.innerHTML = '<i class="fas fa-map-marker-alt"></i> Dapatkan Koordinat dari Alamat';
                    this.disabled = false;
                });
        });
        
        // Validasi form sebelum submit
        document.querySelector('form').addEventListener('submit', function(e) {
            if (!document.getElementById('latitude').value || !document.getElementById('longitude').value) {
                e.preventDefault();
                alert('Silakan tentukan lokasi dengan klik pada peta atau gunakan tombol "Dapatkan Koordinat"');
            }
        });
    });
</script>
@endsection
@endsection