@extends('layouts.app')

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

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2><i class="bi bi-plus-circle"></i> Tambah Pelanggan</h2>
    <a href="{{ route('pelanggan.index') }}" class="btn btn-secondary">
        <i class="bi bi-arrow-left"></i> Kembali
    </a>
</div>

<div class="card">
    <div class="card-body">
        <form action="{{ route('pelanggan.store') }}" method="POST">
            @csrf

            <div class="row">
                <div class="col-md-6 mb-3">
                    <label for="kode_pelanggan" class="form-label">
                        Kode Pelanggan <span class="text-danger">*</span>
                    </label>
                    <input type="text" 
                           class="form-control @error('kode_pelanggan') is-invalid @enderror" 
                           id="kode_pelanggan" 
                           name="kode_pelanggan" 
                           value="{{ old('kode_pelanggan') }}" 
                           required
                           placeholder="Contoh: PEL-001">
                    @error('kode_pelanggan')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                    <small class="form-text text-muted">Kode harus unik</small>
                </div>

                <div class="col-md-6 mb-3">
                    <label for="nama" class="form-label">
                        Nama <span class="text-danger">*</span>
                    </label>
                    <input type="text" 
                           class="form-control @error('nama') is-invalid @enderror" 
                           id="nama" 
                           name="nama" 
                           value="{{ old('nama') }}" 
                           required
                           placeholder="Nama pelanggan">
                    @error('nama')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>

            <div class="row">
                <div class="col-md-6 mb-3">
                    <label for="telepon" class="form-label">Telepon</label>
                    <input type="text" 
                           class="form-control @error('telepon') is-invalid @enderror" 
                           id="telepon" 
                           name="telepon" 
                           value="{{ old('telepon') }}" 
                           placeholder="Nomor telepon">
                    @error('telepon')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="col-md-6 mb-3">
                    <label for="email" class="form-label">Email</label>
                    <input type="email" 
                           class="form-control @error('email') is-invalid @enderror" 
                           id="email" 
                           name="email" 
                           value="{{ old('email') }}" 
                           placeholder="email@contoh.com">
                    @error('email')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>

            <div class="mb-3">
                <label for="kontak" class="form-label">Kontak</label>
                <input type="text" 
                       class="form-control @error('kontak') is-invalid @enderror" 
                       id="kontak" 
                       name="kontak" 
                       value="{{ old('kontak') }}" 
                       placeholder="Nama orang yang dihubungi">
                @error('kontak')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <div class="mb-3">
                <label for="alamat" class="form-label">Alamat</label>
                <textarea class="form-control @error('alamat') is-invalid @enderror" 
                          id="alamat" 
                          name="alamat" 
                          rows="2" 
                          placeholder="Alamat (opsional)">{{ old('alamat') }}</textarea>
                @error('alamat')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <div class="mb-3">
                <label for="keterangan" class="form-label">Keterangan</label>
                <textarea class="form-control @error('keterangan') is-invalid @enderror" 
                          id="keterangan" 
                          name="keterangan" 
                          rows="3" 
                          placeholder="Keterangan tambahan (opsional)">{{ old('keterangan') }}</textarea>
                @error('keterangan')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>
            <div class="mb-3">
                <label class="form-label">Peta Lokasi</label>
                <div id="map" style="height: 400px; border: 1px solid #ddd; border-radius: 4px;"></div>
                <small class="form-text text-muted">Klik pada peta untuk menentukan koordinat, atau masukkan koordinat manual di bawah</small>
            </div>
            <div class="row">
                <div class="col-md-6 mb-3">
                    <label for="latitude" class="form-label">Latitude</label>
                    <input type="number" 
                           step="any"
                           class="form-control @error('latitude') is-invalid @enderror" 
                           id="latitude" 
                           name="latitude" 
                           value="{{ old('latitude') }}" 
                           placeholder="Contoh: -6.2088">
                    @error('latitude')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                    <small class="form-text text-muted">Koordinat lintang (opsional, -90 sampai 90)</small>
                </div>

                <div class="col-md-6 mb-3">
                    <label for="longitude" class="form-label">Longitude</label>
                    <input type="number" 
                           step="any"
                           class="form-control @error('longitude') is-invalid @enderror" 
                           id="longitude" 
                           name="longitude" 
                           value="{{ old('longitude') }}" 
                           placeholder="Contoh: 106.8456">
                    @error('longitude')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                    <small class="form-text text-muted">Koordinat bujur (opsional, -180 sampai 180)</small>
                </div>
            </div>

            <div class="d-flex justify-content-end gap-2">
                <a href="{{ route('pelanggan.index') }}" class="btn btn-secondary">
                    <i class="bi bi-x-circle"></i> Batal
                </a>
                <button type="submit" class="btn btn-primary">
                    <i class="bi bi-save"></i> Simpan
                </button>
            </div>
        </form>
    </div>
</div>

@push('styles')
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<style>
    #map { z-index: 0; }
</style>
@endpush

@push('scripts')
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Check if map container exists
        const mapContainer = document.getElementById('map');
        if (!mapContainer) {
            console.error('Map container not found');
            return;
        }

        // Default center (Jakarta)
        let defaultLat = -6.2088;
        let defaultLng = 106.8456;
        let zoom = 13;

        // Get initial values from form
        const latInput = document.getElementById('latitude');
        const lngInput = document.getElementById('longitude');
        let initialLat = parseFloat(latInput.value) || defaultLat;
        let initialLng = parseFloat(lngInput.value) || defaultLng;

        // Initialize map
        const map = L.map('map').setView([initialLat, initialLng], zoom);

        // Add tile layer
        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);

        // Create marker
        let marker = null;

        // If initial coordinates exist, add marker
        if (latInput.value && lngInput.value) {
            marker = L.marker([initialLat, initialLng]).addTo(map);
        }

        // Map click event - update coordinates
        map.on('click', function(e) {
            const lat = e.latlng.lat;
            const lng = e.latlng.lng;

            // Update input fields
            latInput.value = lat.toFixed(8);
            lngInput.value = lng.toFixed(8);

            // Update or create marker
            if (marker) {
                marker.setLatLng([lat, lng]);
            } else {
                marker = L.marker([lat, lng]).addTo(map);
            }

            // Center map on clicked location
            map.setView([lat, lng], map.getZoom());
        });

        // Input change event - update marker
        function updateMarkerFromInput() {
            const lat = parseFloat(latInput.value);
            const lng = parseFloat(lngInput.value);

            if (!isNaN(lat) && !isNaN(lng) && lat >= -90 && lat <= 90 && lng >= -180 && lng <= 180) {
                if (marker) {
                    marker.setLatLng([lat, lng]);
                } else {
                    marker = L.marker([lat, lng]).addTo(map);
                }
                map.setView([lat, lng], map.getZoom());
            }
        }

        // Listen to input changes
        latInput.addEventListener('change', updateMarkerFromInput);
        lngInput.addEventListener('change', updateMarkerFromInput);
    });
</script>
@endpush
@endsection