@extends('layouts.main')

@section('content')
    <div class="pagetitle">
        <h1>Tambah Customer</h1>
        <nav>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="/">Home</a></li>
                <li class="breadcrumb-item"><a href="{{ route('data-customer.index') }}">Data Customer</a></li>
                <li class="breadcrumb-item active">Tambah</li>
            </ol>
        </nav>
    </div><!-- End Page Title -->

    <section class="section">
        @if (session()->has('error'))
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <i class="bi bi-exclamation-octagon me-1"></i>
                {{ session('error') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        <div class="row">
            <div class="col-lg-8">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title">Form Tambah Customer</h5>
                    </div>
                    <div class="card-body">
                        <form action="{{ route('data-customer.store') }}" method="POST" enctype="multipart/form-data">
                            @csrf

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

                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label for="email" class="form-label">Email <span class="text-danger">*</span></label>
                                    <input type="email" class="form-control @error('email') is-invalid @enderror" 
                                           id="email" name="email" value="{{ old('email') }}" required>
                                    @error('email')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-6">
                                    <label for="phone" class="form-label">Nomor Telepon <span class="text-danger">*</span></label>
                                    <input type="tel" class="form-control @error('phone') is-invalid @enderror" 
                                           id="phone" name="phone" value="{{ old('phone') }}" required
                                           placeholder="08xxxxxxxxxx" maxlength="15">
                                    @error('phone')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <small class="text-muted">Nomor telepon akan menjadi username</small>
                                </div>
                            </div>

                            <hr class="my-4">
                            <h6 class="mb-3"><i class="bi bi-geo-alt-fill text-primary"></i> Data Wilayah</h6>
                            
                            @include('components.region-dropdown', [
                                'required' => true,
                                'provinceValue' => old('province_code', ''),
                                'regencyValue' => old('regency_code', ''),
                                'districtValue' => old('district_code', ''),
                                'villageValue' => old('village_code', ''),
                            ])

                            <hr class="my-4">
                            <h6 class="mb-3"><i class="bi bi-house-fill text-primary"></i> Alamat Detail</h6>

                            <div class="row mb-3">
                                <div class="col-md-12">
                                    <label for="address" class="form-label">Alamat Lengkap <span class="text-danger">*</span></label>
                                    <textarea class="form-control @error('address') is-invalid @enderror" 
                                              id="address" name="address" rows="3" required 
                                              placeholder="Nama jalan, nomor rumah, RT/RW, dan patokan">{{ old('address') }}</textarea>
                                    @error('address')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <small class="text-muted">
                                        <i class="bi bi-info-circle"></i> 
                                        Contoh: Jl. Merdeka No. 123, RT 01/RW 05, dekat Alfamart
                                    </small>
                                </div>
                            </div>

                            <!-- Location Picker Section -->
                            <div class="row mb-3">
                                <div class="col-md-12">
                                    <label class="form-label">Lokasi (Koordinat GPS)</label>
                                    <div class="card">
                                        <div class="card-body">
                                            <div class="row mb-3">
                                                <div class="col-md-4">
                                                    <label for="lat" class="form-label">Latitude <span class="text-danger">*</span></label>
                                                    <input type="number" step="any" class="form-control @error('lat') is-invalid @enderror" 
                                                           id="lat" name="lat" value="{{ old('lat', '-6.2088') }}" 
                                                           placeholder="-6.2088" min="-90" max="90">
                                                    @error('lat')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                                <div class="col-md-4">
                                                    <label for="lon" class="form-label">Longitude <span class="text-danger">*</span> </label>
                                                    <input type="number" step="any" class="form-control @error('lon') is-invalid @enderror" 
                                                           id="lon" name="lon" value="{{ old('lon', '106.8456') }}" 
                                                           placeholder="106.8456" min="-180" max="180">
                                                    @error('lon')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                                <div class="col-md-4">
                                                    <label class="form-label d-block">&nbsp;</label>
                                                    <button type="button" class="btn btn-success w-100" id="searchByCoordinatesBtn">
                                                        <i class="bi bi-geo-alt"></i> Cari Berdasarkan Koordinat
                                                    </button>
                                                </div>
                                            </div>
                                            
                                            <button type="button" class="btn btn-outline-primary mb-3" id="useCurrentLocation">
                                                <i class="bi bi-geo-alt-fill"></i> Gunakan Lokasi Saat Ini
                                            </button>
                                            
                                            <!-- Search Location by Text -->
                                            <div class="row mb-3">
                                                <div class="col-md-8">
                                                    <input type="text" class="form-control" id="searchLocation" 
                                                           placeholder="Cari alamat/lokasi (contoh: Jl. Sudirman Jakarta)">
                                                </div>
                                                <div class="col-md-4">
                                                    <button type="button" class="btn btn-outline-success w-100" id="searchLocationBtn">
                                                        <i class="bi bi-search"></i> Cari Lokasi
                                                    </button>
                                                </div>
                                            </div>
                                            
                                            <div id="map" style="height: 300px; width: 100%; border-radius: 8px;"></div>
                                            <small class="text-muted">
                                                <i class="bi bi-info-circle"></i> 
                                                Klik pada peta untuk memilih lokasi customer, atau gunakan tombol "Gunakan Lokasi Saat Ini"
                                            </small>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Hidden password fields with default value -->
                            <input type="hidden" name="password" value="PAZZ1234777">
                            <input type="hidden" name="password_confirmation" value="PAZZ1234777">

                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label for="photo_profile" class="form-label">Foto Profile (Opsional)</label>
                                    <input type="file" class="form-control @error('photo_profile') is-invalid @enderror" 
                                           id="photo_profile" name="photo_profile" accept="image/*">
                                    @error('photo_profile')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <small class="text-muted">Format: JPG, JPEG, PNG. Maksimal 2MB</small>
                                </div>
                                <div class="col-md-6">
                                    <label for="rumah_tampak_depan" class="form-label">Foto Rumah Tampak Depan (Opsional)</label>
                                    <input type="file" class="form-control @error('rumah_tampak_depan') is-invalid @enderror" 
                                           id="rumah_tampak_depan" name="rumah_tampak_depan" accept="image/*">
                                    @error('rumah_tampak_depan')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <small class="text-muted">Format: JPG, JPEG, PNG. Maksimal 2MB</small>
                                </div>
                            </div>

                            <hr>

                            <div class="row">
                                <div class="col-md-12">
                                    <div class="d-flex justify-content-between">
                                        <a href="{{ route('data-customer.index') }}" class="btn btn-secondary">
                                            <i class="bi bi-arrow-left"></i> Kembali
                                        </a>
                                        <button type="submit" class="btn btn-primary">
                                            <i class="bi bi-check-circle"></i> Simpan Customer
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <div class="col-lg-4">
                <div class="card">
                    <div class="card-header">
                        <h6 class="card-title">Informasi</h6>
                    </div>
                    <div class="card-body">
                        <h6><i class="bi bi-info-circle text-info"></i> Tentang Customer</h6>
                        <ul class="list-unstyled">
                            <li><i class="bi bi-check text-success"></i> Customer adalah pengguna reguler</li>
                            <li><i class="bi bi-check text-success"></i> Tidak memiliki akses worker/teknisi</li>
                            <li><i class="bi bi-check text-success"></i> Dapat membuat order/permintaan layanan</li>
                            <li><i class="bi bi-check text-success"></i> Data akan digunakan untuk pembuatan order</li>
                        </ul>

                        <hr>

                        <h6><i class="bi bi-shield-check text-success"></i> Keamanan</h6>
                        <ul class="list-unstyled">
                            <li><i class="bi bi-check text-success"></i> Password minimal 8 karakter</li>
                            <li><i class="bi bi-check text-success"></i> Email harus unik</li>
                            <li><i class="bi bi-check text-success"></i> Phone harus unik (jadi username)</li>
                        </ul>

                        <hr>

                        <h6><i class="bi bi-map text-primary"></i> Lokasi</h6>
                        <div class="text-muted">
                            <small>
                                <strong>3 Cara Memilih Lokasi:</strong><br>
                                1. <strong>Klik pada peta</strong> untuk pin lokasi<br>
                                2. <strong>Deteksi otomatis</strong> lokasi saat ini<br>
                                3. <strong>Cari berdasarkan alamat</strong> dengan kotak pencarian
                            </small>
                        </div>

                        <hr>

                        <h6><i class="bi bi-camera text-primary"></i> Foto Profile</h6>
                        <p class="text-muted">
                            <small>
                                Foto profile opsional dan akan digunakan untuk identifikasi customer
                                di berbagai halaman sistem.
                            </small>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('scripts')
<!-- Google Maps API -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key={{ config('google.maps.api_key') }}&callback=initMap&libraries=places&loading=async"></script>

<script>
let map;
let marker;
let geocoder;
let placesService;

// Initialize map
function initMap() {
    // Default location (Jakarta)
    const defaultLocation = { 
        lat: parseFloat(document.getElementById('lat').value) || -6.2088, 
        lng: parseFloat(document.getElementById('lon').value) || 106.8456 
    };

    // Create map
    map = new google.maps.Map(document.getElementById('map'), {
        center: defaultLocation,
        zoom: 13,
        mapTypeControl: false,
        streetViewControl: false,
        fullscreenControl: false,
        mapId: "customer-location-map" // Add map ID for better performance
    });

    // Initialize geocoder and places service
    geocoder = new google.maps.Geocoder();
    placesService = new google.maps.places.PlacesService(map);

    // Create marker using AdvancedMarkerElement if available, fallback to Marker
    if (google.maps.marker && google.maps.marker.AdvancedMarkerElement) {
        // Use new AdvancedMarkerElement
        marker = new google.maps.marker.AdvancedMarkerElement({
            position: defaultLocation,
            map: map,
            title: 'Lokasi Customer'
        });

        // For AdvancedMarkerElement, we need to use different event handling
        marker.addListener('dragend', function() {
            updateCoordinates(marker.position.lat, marker.position.lng);
        });
    } else {
        // Fallback to old Marker
        marker = new google.maps.Marker({
            position: defaultLocation,
            map: map,
            draggable: true,
            title: 'Lokasi Customer'
        });

        // Update coordinates when marker is dragged
        marker.addListener('dragend', function() {
            updateCoordinates(marker.getPosition().lat(), marker.getPosition().lng());
        });
    }

    // Update coordinates when map is clicked
    map.addListener('click', function(event) {
        const lat = event.latLng.lat();
        const lng = event.latLng.lng();
        
        if (google.maps.marker && google.maps.marker.AdvancedMarkerElement) {
            marker.position = event.latLng;
        } else {
            marker.setPosition(event.latLng);
        }
        updateCoordinates(lat, lng);
    });

    // Initialize autocomplete for search input
    initializeAutocomplete();
}

// Update coordinate inputs
function updateCoordinates(lat, lng) {
    document.getElementById('lat').value = lat.toFixed(6);
    document.getElementById('lon').value = lng.toFixed(6);
}

// Initialize autocomplete for search input
function initializeAutocomplete() {
    const searchInput = document.getElementById('searchLocation');
    
    // Create autocomplete object restricted to Indonesia
    const autocomplete = new google.maps.places.Autocomplete(searchInput, {
        componentRestrictions: { country: ['id'] }, // Restrict to Indonesia
        fields: ['place_id', 'geometry', 'name', 'formatted_address'],
        types: ['establishment', 'geocode'] // Include both places and addresses
    });

    // When a place is selected from autocomplete
    autocomplete.addListener('place_changed', function() {
        const place = autocomplete.getPlace();
        
        if (!place.geometry || !place.geometry.location) {
            showSearchMessage('Lokasi tidak ditemukan untuk: ' + place.name, 'warning');
            return;
        }

        // Move map and marker to selected place
        moveToLocation(place.geometry.location, place.formatted_address || place.name);
    });
}

// Search location function
function searchLocation() {
    const searchQuery = document.getElementById('searchLocation').value.trim();
    
    if (!searchQuery) {
        showSearchMessage('Masukkan alamat atau nama lokasi untuk dicari', 'warning');
        return;
    }

    // Show loading state
    const searchBtn = document.getElementById('searchLocationBtn');
    const originalText = searchBtn.innerHTML;
    searchBtn.innerHTML = '<i class="spinner-border spinner-border-sm"></i> Mencari...';
    searchBtn.disabled = true;

    // Use Geocoding API to search for the location
    geocoder.geocode({
        address: searchQuery,
        componentRestrictions: { country: 'ID' }, // Restrict to Indonesia
        region: 'ID'
    }, function(results, status) {
        // Restore button state
        searchBtn.innerHTML = originalText;
        searchBtn.disabled = false;

        if (status === 'OK' && results[0]) {
            const location = results[0].geometry.location;
            const address = results[0].formatted_address;
            
            // Move map and marker to found location
            moveToLocation(location, address);
            showSearchMessage('Lokasi ditemukan: ' + address, 'success');
        } else {
            showSearchMessage('Lokasi tidak ditemukan. Coba dengan kata kunci yang lebih spesifik.', 'danger');
        }
    });
}

// Move map and marker to specific location
function moveToLocation(location, address) {
    const lat = location.lat();
    const lng = location.lng();
    
    // Center map to location
    map.setCenter(location);
    map.setZoom(16); // Zoom in for better view
    
    // Move marker
    if (google.maps.marker && google.maps.marker.AdvancedMarkerElement) {
        marker.position = location;
    } else {
        marker.setPosition(location);
    }
    
    // Update coordinate inputs
    updateCoordinates(lat, lng);
    
    // Update address field if found address is more complete
    if (address && address.length > document.getElementById('address').value.length) {
        if (confirm('Gunakan alamat yang ditemukan?\n\n' + address)) {
            document.getElementById('address').value = address;
        }
    }
}

// Show search message
function showSearchMessage(message, type) {
    // Remove existing alerts
    const existingAlert = document.querySelector('#search-alert');
    if (existingAlert) {
        existingAlert.remove();
    }
    
    // Create new alert
    const alertDiv = document.createElement('div');
    alertDiv.id = 'search-alert';
    alertDiv.className = `alert alert-${type} alert-dismissible fade show mt-2`;
    alertDiv.innerHTML = `
        ${message}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    `;
    
    // Insert after search button
    const searchBtn = document.getElementById('searchLocationBtn');
    searchBtn.parentNode.parentNode.appendChild(alertDiv);
    
    // Auto remove after 5 seconds
    setTimeout(() => {
        if (alertDiv.parentNode) {
            alertDiv.remove();
        }
    }, 5000);
}

// Search by coordinates function
function searchByCoordinates() {
    const latInput = document.getElementById('lat');
    const lonInput = document.getElementById('lon');
    const lat = parseFloat(latInput.value);
    const lng = parseFloat(lonInput.value);
    
    // Validate coordinates
    if (isNaN(lat) || isNaN(lng)) {
        showSearchMessage('Masukkan koordinat latitude dan longitude yang valid', 'warning');
        return;
    }
    
    if (lat < -90 || lat > 90) {
        showSearchMessage('Latitude harus antara -90 dan 90', 'warning');
        latInput.focus();
        return;
    }
    
    if (lng < -180 || lng > 180) {
        showSearchMessage('Longitude harus antara -180 dan 180', 'warning');
        lonInput.focus();
        return;
    }
    
    // Show loading state
    const searchBtn = document.getElementById('searchByCoordinatesBtn');
    const originalText = searchBtn.innerHTML;
    searchBtn.innerHTML = '<i class="spinner-border spinner-border-sm"></i> Mencari...';
    searchBtn.disabled = true;
    
    // Create location object
    const location = new google.maps.LatLng(lat, lng);
    
    // Use Reverse Geocoding to get address from coordinates
    geocoder.geocode({ location: location }, function(results, status) {
        // Restore button state
        searchBtn.innerHTML = originalText;
        searchBtn.disabled = false;
        
        if (status === 'OK') {
            if (results[0]) {
                const address = results[0].formatted_address;
                
                // Move map and marker to coordinates
                map.setCenter(location);
                map.setZoom(16);
                
                if (google.maps.marker && google.maps.marker.AdvancedMarkerElement) {
                    marker.position = location;
                } else {
                    marker.setPosition(location);
                }
                
                // Update address field
                const addressField = document.getElementById('address');
                if (confirm('Lokasi ditemukan:\n\n' + address + '\n\nGunakan alamat ini?')) {
                    addressField.value = address;
                }
                
                showSearchMessage('✓ Lokasi berhasil ditemukan: ' + address, 'success');
            } else {
                showSearchMessage('Koordinat valid, tetapi tidak ditemukan alamat spesifik. Peta telah dipindahkan ke koordinat tersebut.', 'info');
                
                // Still move map even if no address found
                map.setCenter(location);
                map.setZoom(16);
                
                if (google.maps.marker && google.maps.marker.AdvancedMarkerElement) {
                    marker.position = location;
                } else {
                    marker.setPosition(location);
                }
            }
        } else {
            showSearchMessage('Gagal menemukan lokasi dari koordinat. Status: ' + status, 'danger');
        }
    });
}

// Search by coordinates button click
document.getElementById('searchByCoordinatesBtn').addEventListener('click', searchByCoordinates);

// Use current location
document.getElementById('useCurrentLocation').addEventListener('click', function() {
    if (navigator.geolocation) {
        // Show loading state
        const btn = this;
        const originalText = btn.innerHTML;
        btn.innerHTML = '<i class="spinner-border spinner-border-sm"></i> Mendeteksi...';
        btn.disabled = true;

        navigator.geolocation.getCurrentPosition(function(position) {
            const lat = position.coords.latitude;
            const lng = position.coords.longitude;
            
            const currentLocation = { lat: lat, lng: lng };
            
            map.setCenter(currentLocation);
            map.setZoom(16);
            
            if (google.maps.marker && google.maps.marker.AdvancedMarkerElement) {
                marker.position = currentLocation;
            } else {
                marker.setPosition(currentLocation);
            }
            
            updateCoordinates(lat, lng);
            
            // Show success message with better UX
            btn.innerHTML = '<i class="bi bi-check-circle-fill"></i> Lokasi Terdeteksi!';
            btn.classList.add('btn-success');
            btn.classList.remove('btn-outline-primary');
            
            setTimeout(() => {
                btn.innerHTML = originalText;
                btn.classList.remove('btn-success');
                btn.classList.add('btn-outline-primary');
                btn.disabled = false;
            }, 2000);
            
        }, function(error) {
            // Restore button state
            btn.innerHTML = originalText;
            btn.disabled = false;
            
            let errorMessage = 'Gagal mendapatkan lokasi: ';
            switch(error.code) {
                case error.PERMISSION_DENIED:
                    errorMessage += 'Akses lokasi ditolak. Silakan izinkan akses lokasi di browser.';
                    break;
                case error.POSITION_UNAVAILABLE:
                    errorMessage += 'Informasi lokasi tidak tersedia.';
                    break;
                case error.TIMEOUT:
                    errorMessage += 'Timeout dalam mendapatkan lokasi.';
                    break;
                default:
                    errorMessage += 'Hanya dapat digunakan di HTTPS atau localhost. Gunakan pencarian lokasi sebagai alternatif.';
                    break;
            }
            
            showSearchMessage(errorMessage, 'warning');
        }, {
            enableHighAccuracy: true,
            timeout: 10000,
            maximumAge: 60000
        });
    } else {
        showSearchMessage('Browser tidak mendukung deteksi lokasi. Gunakan pencarian lokasi sebagai alternatif.', 'warning');
    }
});

// Search location button click
document.getElementById('searchLocationBtn').addEventListener('click', searchLocation);

// Search on Enter key
document.getElementById('searchLocation').addEventListener('keypress', function(e) {
    if (e.key === 'Enter') {
        e.preventDefault();
        searchLocation();
    }
});

// Phone validation and auto-set username
document.getElementById('phone').addEventListener('input', function() {
    let phone = this.value.replace(/\D/g, ''); // Remove non-digits
    
    // Format phone number
    if (phone.length > 0) {
        if (!phone.startsWith('08')) {
            // If doesn't start with 08, add it
            if (phone.startsWith('8')) {
                phone = '0' + phone;
            } else if (!phone.startsWith('0')) {
                phone = '08' + phone;
            }
        }
        
        // Limit to 15 characters
        if (phone.length > 15) {
            phone = phone.substring(0, 15);
        }
    }
    
    this.value = phone;
});

// Form validation
document.querySelector('form').addEventListener('submit', function(e) {
    const phone = document.getElementById('phone').value;
    
    if (phone.length < 10) {
        e.preventDefault();
        alert('Nomor telepon harus minimal 10 digit');
        document.getElementById('phone').focus();
        return false;
    }
    
    if (!phone.startsWith('08')) {
        e.preventDefault();
        alert('Nomor telepon harus dimulai dengan 08');
        document.getElementById('phone').focus();
        return false;
    }
});
</script>
@endpush