@extends('layouts.app')

@section('title', 'Tambah Pelanggan Baru')

@section('content')
<div class="card">
    <div class="card-header">Tambah Pelanggan Baru</div>
    <div class="card-body">
        <form action="{{ route('customers.store') }}" method="POST">
            @csrf
            <div class="mb-3">
                <label for="name" class="form-label">Nama Pelanggan</label>
                <input type="text" class="form-control" id="name" name="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></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
                </button>
            </div>
            <div class="mb-3">
                <label for="phone" class="form-label">Telepon</label>
                <input type="text" class="form-control" id="phone" name="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" readonly>
                    </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" readonly>
                    </div>
                </div>
            </div>
            
            <div class="mb-3">
                <div id="map-picker" style="height: 300px;"></div>
                <small class="text-muted">Klik pada peta untuk mengatur lokasi</small>
            </div>
            
            <button type="submit" class="btn btn-primary">Simpan</button>
            <a href="{{ route('customers.index') }}" class="btn btn-secondary">Batal</a>
        </form>
    </div>
</div>

@section('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Inisialisasi peta untuk pemilihan lokasi
        var map = L.map('map-picker').setView([-2.5489, 118.0149], 5); // Posisi default Indonesia
        
        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);
        
        var marker;
        
        // Fungsi untuk menempatkan marker
        function placeMarker(latlng) {
            if (marker) {
                map.removeLayer(marker);
            }
            marker = L.marker(latlng).addTo(map);
            document.getElementById('latitude').value = latlng.lat;
            document.getElementById('longitude').value = latlng.lng;
        }
        
        // Klik pada peta untuk menempatkan marker
        map.on('click', function(e) {
            placeMarker(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;
            }
            
            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);
                        document.getElementById('latitude').value = lat;
                        document.getElementById('longitude').value = lon;
                        
                        // Pindahkan peta ke lokasi yang ditemukan
                        map.setView([lat, lon], 15);
                        placeMarker([lat, lon]);
                    } else {
                        alert('Alamat tidak ditemukan. Silakan coba dengan alamat lebih spesifik.');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('Terjadi kesalahan saat mencari alamat');
                });
        });
        
        // Jika edit mode dan ada koordinat, tampilkan marker
        @if(isset($customer) && $customer->latitude && $customer->longitude)
            var lat = {{ $customer->latitude }};
            var lon = {{ $customer->longitude }};
            map.setView([lat, lon], 15);
            placeMarker([lat, lon]);
        @endif
    });
</script>
@endsection
@endsection