@extends('layouts.app')

@section('title', 'Tambah Coverage Area')

@section('content')
<div class="container-fluid">
    <div class="corporate-header">
        <div class="row align-items-center">
            <div class="col-md-8">
                <h1 class="h3 mb-0 text-gray-800">
                    <i class="fas fa-plus text-primary me-2"></i>
                    Tambah Coverage Area
                </h1>
                <p class="text-muted small mb-0">Tambahkan area jangkauan jaringan internet baru</p>
            </div>
            <div class="col-md-4 text-end">
                <a href="{{ route('coverage-areas.index') }}" class="btn btn-secondary btn-sm">
                    <i class="fas fa-arrow-left me-1"></i>
                    Kembali
                </a>
            </div>
        </div>
    </div>

    <form method="POST" action="{{ route('coverage-areas.store') }}">
        @csrf
        
        <div class="row">
            <!-- Form Input Section -->
            <div class="col-lg-6">
                <!-- Basic Information -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h6 class="m-0 font-weight-bold text-primary">
                            <i class="fas fa-info-circle me-2"></i>Informasi Dasar
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Nama Area <span class="text-danger">*</span></label>
                                <input type="text" name="name" class="form-control @error('name') is-invalid @enderror" 
                                       value="{{ old('name') }}" placeholder="Contoh: Area Jakarta Pusat">
                                @error('name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Kode Area <span class="text-danger">*</span></label>
                                <input type="text" name="code" class="form-control @error('code') is-invalid @enderror" 
                                       value="{{ old('code') }}" placeholder="Contoh: JKT-001">
                                @error('code')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Deskripsi</label>
                            <textarea name="description" class="form-control @error('description') is-invalid @enderror" 
                                      rows="3" placeholder="Deskripsi area coverage...">{{ old('description') }}</textarea>
                            @error('description')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <!-- Geographic Information -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h6 class="m-0 font-weight-bold text-primary">
                            <i class="fas fa-map-marker-alt me-2"></i>Informasi Geografis
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Latitude <span class="text-danger">*</span></label>
                                <input type="number" name="latitude" id="latitude" step="any" 
                                       class="form-control @error('latitude') is-invalid @enderror" 
                                       value="{{ old('latitude', -6.200000) }}" placeholder="-6.200000">
                                @error('latitude')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Longitude <span class="text-danger">*</span></label>
                                <input type="number" name="longitude" id="longitude" step="any" 
                                       class="form-control @error('longitude') is-invalid @enderror" 
                                       value="{{ old('longitude', 106.816666) }}" placeholder="106.816666">
                                @error('longitude')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Radius Coverage (km) <span class="text-danger">*</span></label>
                            <input type="number" name="radius" step="0.1" 
                                   class="form-control @error('radius') is-invalid @enderror" 
                                   value="{{ old('radius', 2) }}" placeholder="2.0">
                            @error('radius')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="alert alert-info">
                            <i class="fas fa-lightbulb me-2"></i>
                            Klik pada peta untuk menentukan lokasi atau input koordinat manual
                        </div>
                    </div>
                </div>

                <!-- Address Information -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h6 class="m-0 font-weight-bold text-primary">
                            <i class="fas fa-home me-2"></i>Alamat
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Provinsi</label>
                                <input type="text" name="province" class="form-control @error('province') is-invalid @enderror" 
                                       value="{{ old('province') }}" placeholder="DKI Jakarta">
                                @error('province')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Kota/Kabupaten</label>
                                <input type="text" name="city" class="form-control @error('city') is-invalid @enderror" 
                                       value="{{ old('city') }}" placeholder="Jakarta Pusat">
                                @error('city')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Kecamatan</label>
                                <input type="text" name="district" class="form-control @error('district') is-invalid @enderror" 
                                       value="{{ old('district') }}" placeholder="Menteng">
                                @error('district')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Kelurahan</label>
                                <input type="text" name="village" class="form-control @error('village') is-invalid @enderror" 
                                       value="{{ old('village') }}" placeholder="Menteng">
                                @error('village')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-8 mb-3">
                                <label class="form-label">Alamat Lengkap</label>
                                <textarea name="full_address" class="form-control @error('full_address') is-invalid @enderror" 
                                          rows="2" placeholder="Jl. Merdeka No. 1, Jakarta Pusat">{{ old('full_address') }}</textarea>
                                @error('full_address')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="form-label">Kode Pos</label>
                                <input type="text" name="postal_code" class="form-control @error('postal_code') is-invalid @enderror" 
                                       value="{{ old('postal_code') }}" placeholder="10110">
                                @error('postal_code')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Map Section -->
            <div class="col-lg-6">
                <div class="card sticky-top" style="top: 1rem;">
                    <div class="card-header">
                        <h6 class="m-0 font-weight-bold text-primary">
                            <i class="fas fa-map me-2"></i>Peta Lokasi
                        </h6>
                    </div>
                    <div class="card-body p-0">
                        <div id="map" style="height: 400px; width: 100%;"></div>
                    </div>
                    <div class="card-footer">
                        <div class="d-flex justify-content-between align-items-center">
                            <button type="button" class="btn btn-sm btn-outline-secondary" onclick="getCurrentLocation()">
                                <i class="fas fa-crosshairs me-1"></i>Lokasi Saya
                            </button>
                            <button type="button" class="btn btn-sm btn-outline-primary" onclick="centerMap()">
                                <i class="fas fa-search-location me-1"></i>Center Map
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Network Information -->
        <div class="card mb-4">
            <div class="card-header">
                <h6 class="m-0 font-weight-bold text-primary">
                    <i class="fas fa-network-wired me-2"></i>Informasi Jaringan
                </h6>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-3 mb-3">
                        <label class="form-label">Jenis Jaringan <span class="text-danger">*</span></label>
                        <select name="network_type" class="form-select @error('network_type') is-invalid @enderror">
                            <option value="">Pilih Jenis</option>
                            <option value="fiber" {{ old('network_type') == 'fiber' ? 'selected' : '' }}>Fiber Optic</option>
                            <option value="wireless" {{ old('network_type') == 'wireless' ? 'selected' : '' }}>Wireless</option>
                            <option value="hybrid" {{ old('network_type') == 'hybrid' ? 'selected' : '' }}>Hybrid</option>
                        </select>
                        @error('network_type')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="col-md-3 mb-3">
                        <label class="form-label">Teknologi</label>
                        <input type="text" name="technology" class="form-control @error('technology') is-invalid @enderror" 
                               value="{{ old('technology') }}" placeholder="HTB/OLT">
                        @error('technology')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="col-md-3 mb-3">
                        <label class="form-label">Status <span class="text-danger">*</span></label>
                        <select name="status" class="form-select @error('status') is-invalid @enderror">
                            <option value="active" {{ old('status') == 'active' ? 'selected' : '' }}>Aktif</option>
                            <option value="inactive" {{ old('status') == 'inactive' ? 'selected' : '' }}>Tidak Aktif</option>
                            <option value="maintenance" {{ old('status') == 'maintenance' ? 'selected' : '' }}>Maintenance</option>
                            <option value="planned" {{ old('status') == 'planned' ? 'selected' : '' }}>Direncanakan</option>
                        </select>
                        @error('status')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="col-md-3 mb-3">
                        <label class="form-label">Kualitas Coverage <span class="text-danger">*</span></label>
                        <select name="coverage_quality" class="form-select @error('coverage_quality') is-invalid @enderror">
                            <option value="excellent" {{ old('coverage_quality') == 'excellent' ? 'selected' : '' }}>Excellent</option>
                            <option value="good" {{ old('coverage_quality') == 'good' ? 'selected' : '' }}>Good</option>
                            <option value="fair" {{ old('coverage_quality') == 'fair' ? 'selected' : '' }}>Fair</option>
                            <option value="poor" {{ old('coverage_quality') == 'poor' ? 'selected' : '' }}>Poor</option>
                        </select>
                        @error('coverage_quality')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
                
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label class="form-label">Tanggal Instalasi</label>
                        <input type="date" name="installation_date" 
                               class="form-control @error('installation_date') is-invalid @enderror" 
                               value="{{ old('installation_date') }}">
                        @error('installation_date')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>
        </div>

        <!-- Additional Information -->
        <div class="card mb-4">
            <div class="card-header">
                <h6 class="m-0 font-weight-bold text-primary">
                    <i class="fas fa-cog me-2"></i>Informasi Tambahan
                </h6>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label class="form-label">Contact Person</label>
                        <input type="text" name="contact_person" 
                               class="form-control @error('contact_person') is-invalid @enderror" 
                               value="{{ old('contact_person') }}" placeholder="John Doe">
                        @error('contact_person')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label">No. Telepon</label>
                        <input type="text" name="contact_phone" 
                               class="form-control @error('contact_phone') is-invalid @enderror" 
                               value="{{ old('contact_phone') }}" placeholder="081234567890">
                        @error('contact_phone')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
                <div class="mb-3">
                    <label class="form-label">Catatan</label>
                    <textarea name="notes" class="form-control @error('notes') is-invalid @enderror" 
                              rows="3" placeholder="Catatan tambahan...">{{ old('notes') }}</textarea>
                    @error('notes')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>
        </div>

        <!-- Submit Buttons -->
        <div class="card">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <a href="{{ route('coverage-areas.index') }}" class="btn btn-secondary">
                        <i class="fas fa-times me-1"></i>Batal
                    </a>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save me-1"></i>Simpan Coverage Area
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>

<!-- Leaflet CSS & JS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

<script>
let map;
let marker;
let circle;

document.addEventListener('DOMContentLoaded', function() {
    initMap();
});

function initMap() {
    // Initialize map
    const lat = parseFloat(document.getElementById('latitude').value) || -6.200000;
    const lng = parseFloat(document.getElementById('longitude').value) || 106.816666;
    
    map = L.map('map').setView([lat, lng], 13);
    
    // Add tile layer
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '© OpenStreetMap contributors'
    }).addTo(map);
    
    // Add marker and circle
    updateMapMarker(lat, lng);
    
    // Map click event
    map.on('click', function(e) {
        const lat = e.latlng.lat;
        const lng = e.latlng.lng;
        
        document.getElementById('latitude').value = lat.toFixed(6);
        document.getElementById('longitude').value = lng.toFixed(6);
        
        updateMapMarker(lat, lng);
    });
    
    // Input change events
    document.getElementById('latitude').addEventListener('change', updateFromInputs);
    document.getElementById('longitude').addEventListener('change', updateFromInputs);
    document.querySelector('input[name="radius"]').addEventListener('change', updateFromInputs);
}

function updateMapMarker(lat, lng) {
    // Remove existing marker and circle
    if (marker) {
        map.removeLayer(marker);
    }
    if (circle) {
        map.removeLayer(circle);
    }
    
    // Add new marker
    marker = L.marker([lat, lng], {
        draggable: true
    }).addTo(map);
    
    // Add circle for coverage radius
    const radius = parseFloat(document.querySelector('input[name="radius"]').value) || 2;
    circle = L.circle([lat, lng], {
        radius: radius * 1000, // Convert km to meters
        color: '#007bff',
        fillColor: '#007bff',
        fillOpacity: 0.2
    }).addTo(map);
    
    // Marker drag event
    marker.on('dragend', function(e) {
        const position = marker.getLatLng();
        document.getElementById('latitude').value = position.lat.toFixed(6);
        document.getElementById('longitude').value = position.lng.toFixed(6);
        updateFromInputs();
    });
}

function updateFromInputs() {
    const lat = parseFloat(document.getElementById('latitude').value);
    const lng = parseFloat(document.getElementById('longitude').value);
    
    if (!isNaN(lat) && !isNaN(lng)) {
        updateMapMarker(lat, lng);
        map.setView([lat, lng], map.getZoom());
    }
}

function getCurrentLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
            const lat = position.coords.latitude;
            const lng = position.coords.longitude;
            
            document.getElementById('latitude').value = lat.toFixed(6);
            document.getElementById('longitude').value = lng.toFixed(6);
            
            updateMapMarker(lat, lng);
            map.setView([lat, lng], 15);
        }, function(error) {
            alert('Error getting your location: ' + error.message);
        });
    } else {
        alert('Geolocation is not supported by this browser.');
    }
}

function centerMap() {
    const lat = parseFloat(document.getElementById('latitude').value) || -6.200000;
    const lng = parseFloat(document.getElementById('longitude').value) || 106.816666;
    map.setView([lat, lng], 13);
}
</script>

<style>
.leaflet-container {
    border-radius: 0 0 0.375rem 0.375rem;
}

.sticky-top {
    z-index: 1020;
}

.form-label {
    font-weight: 600;
    color: #5a5c69;
}

.card-header h6 {
    color: #5a5c69;
}

.text-danger {
    color: #e74a3b !important;
}

@media (max-width: 768px) {
    .sticky-top {
        position: relative !important;
        top: auto !important;
    }
}
</style>
@endsection