@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>

                            <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="Alamat lengkap dengan patokan">{{ old('address') }}</textarea>
                                    @error('address')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <!-- Location Picker Section with OpenStreetMap -->
                            <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-6">
                                                    <label for="lat" class="form-label">Latitude</label>
                                                    <input type="number" step="any" class="form-control @error('lat') is-invalid @enderror" 
                                                           id="lat" name="lat" value="{{ old('lat', '-6.2088') }}" readonly>
                                                    @error('lat')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                                <div class="col-md-6">
                                                    <label for="lon" class="form-label">Longitude</label>
                                                    <input type="number" step="any" class="form-control @error('lon') is-invalid @enderror" 
                                                           id="lon" name="lon" value="{{ old('lon', '106.8456') }}" readonly>
                                                    @error('lon')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </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>
                                            
                                            <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>

                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label for="password" class="form-label">Password <span class="text-danger">*</span></label>
                                    <input type="password" class="form-control @error('password') is-invalid @enderror" 
                                           id="password" name="password" required>
                                    @error('password')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-6">
                                    <label for="password_confirmation" class="form-label">Konfirmasi Password <span class="text-danger">*</span></label>
                                    <input type="password" class="form-control" 
                                           id="password_confirmation" name="password_confirmation" required>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-12">
                                    <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>

                            <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>
                        <p class="text-muted">
                            <small>
                                Map menggunakan OpenStreetMap (gratis). 
                                Klik pada peta untuk set koordinat atau gunakan deteksi lokasi otomatis.
                            </small>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('styles')
<!-- Leaflet CSS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
@endpush

@push('scripts')
<!-- Leaflet JS -->
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

<script>
let map;
let marker;

// Initialize map with OpenStreetMap
document.addEventListener('DOMContentLoaded', function() {
    initializeMap();
});

function initializeMap() {
    // Default location (Jakarta)
    const defaultLat = parseFloat(document.getElementById('lat').value) || -6.2088;
    const defaultLng = parseFloat(document.getElementById('lon').value) || 106.8456;

    // Create map
    map = L.map('map').setView([defaultLat, defaultLng], 13);

    // Add OpenStreetMap tile layer
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: '© OpenStreetMap contributors'
    }).addTo(map);

    // Create marker
    marker = L.marker([defaultLat, defaultLng], {
        draggable: true
    }).addTo(map);

    // Update coordinates when marker is dragged
    marker.on('dragend', function() {
        const position = marker.getLatLng();
        updateCoordinates(position.lat, position.lng);
    });

    // Update coordinates when map is clicked
    map.on('click', function(e) {
        const lat = e.latlng.lat;
        const lng = e.latlng.lng;
        
        marker.setLatLng([lat, lng]);
        updateCoordinates(lat, lng);
    });
}

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

// Use current location
document.getElementById('useCurrentLocation').addEventListener('click', function() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
            const lat = position.coords.latitude;
            const lng = position.coords.longitude;
            
            map.setView([lat, lng], 15);
            marker.setLatLng([lat, lng]);
            updateCoordinates(lat, lng);
            
            alert('Lokasi berhasil dideteksi!');
        }, function(error) {
            alert('Gagal mendapatkan lokasi: ' + error.message);
        });
    } else {
        alert('Browser tidak mendukung deteksi lokasi');
    }
});

// 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