@extends('layouts.app')

@section('title', 'Create ISP Site')
@section('page-title', 'Create ISP Site')

@push('styles')
<style>
    #map {
        height: 400px;
        width: 100%;
        border-radius: 8px;
        border: 1px solid #dee2e6;
        background: #f0f0f0;
    }
    #map-loading {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
    }
    .map-container {
        position: relative;
    }
    .coordinates-display {
        background: #f8f9fa;
        border: 1px solid #dee2e6;
        border-radius: 4px;
        padding: 8px 12px;
        font-family: monospace;
        font-size: 14px;
        margin-top: 10px;
    }
    .map-instructions {
        background: #e7f3ff;
        border-left: 4px solid #0066cc;
        padding: 12px;
        border-radius: 4px;
        margin-bottom: 15px;
    }
</style>
@endpush

@section('content')
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="h3 mb-0 text-gray-800">
                        <i class="fas fa-plus mr-2"></i>Create ISP Site
                    </h1>
                </div>
                <div>
                    <a href="{{ route('reseller.isp.sites.index') }}" class="btn btn-secondary">
                        <i class="fas fa-arrow-left mr-2"></i>Back to List
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Site Information</h6>
                </div>
                <div class="card-body">
                    <form action="{{ route('reseller.isp.sites.store') }}" method="POST">
                        @csrf
                        
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="site_name" class="form-label font-weight-bold">Site Name <span class="text-danger">*</span></label>
                                <input type="text" class="form-control @error('site_name') is-invalid @enderror" 
                                       id="site_name" name="site_name" value="{{ old('site_name') }}" required>
                                @error('site_name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6 mb-3">
                                <label for="site_type" class="form-label font-weight-bold">Site Type <span class="text-danger">*</span></label>
                                <select class="form-control @error('site_type') is-invalid @enderror" 
                                        id="site_type" name="site_type" required>
                                    <option value="">Select Type</option>
                                    <option value="DC" {{ old('site_type') == 'DC' ? 'selected' : '' }}>DC</option>
                                    <option value="POP" {{ old('site_type') == 'POP' ? 'selected' : '' }}>POP</option>
                                    <option value="SW" {{ old('site_type') == 'SW' ? 'selected' : '' }}>SW</option>
                                    <option value="Reseller" {{ old('site_type') == 'Reseller' ? 'selected' : '' }}>Reseller</option>
                                </select>
                                @error('site_type')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-12 mb-3">
                                <label for="address" class="form-label font-weight-bold">Address</label>
                                <textarea class="form-control @error('address') is-invalid @enderror" 
                                          id="address" name="address" rows="2">{{ old('address') }}</textarea>
                                @error('address')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-12 mb-3">
                                <label class="form-label font-weight-bold">
                                    <i class="fas fa-map-marker-alt mr-2"></i>Location on Map
                                </label>
                                <div class="map-instructions">
                                    <small>
                                        <i class="fas fa-info-circle mr-1"></i>
                                        Click on the map or drag the marker to set the site location. The coordinates will be automatically filled.
                                    </small>
                                </div>
                                <div class="map-container">
                                    <div id="map" style="position: relative;">
                                        <div id="map-loading" style="text-align: center; color: #666;">
                                            <i class="fas fa-spinner fa-spin fa-2x mb-2"></i>
                                            <p>Loading map...</p>
                                        </div>
                                    </div>
                                    <div class="coordinates-display">
                                        <strong>Selected Coordinates:</strong> 
                                        <span id="coordinates-display">Not selected</span>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-6 mb-3">
                                <label for="latitude" class="form-label font-weight-bold">Latitude</label>
                                <input type="number" step="0.000001" class="form-control @error('latitude') is-invalid @enderror" 
                                       id="latitude" name="latitude" value="{{ old('latitude') }}" readonly>
                                <small class="form-text text-muted">Auto-filled from map selection</small>
                                @error('latitude')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6 mb-3">
                                <label for="longitude" class="form-label font-weight-bold">Longitude</label>
                                <input type="number" step="0.000001" class="form-control @error('longitude') is-invalid @enderror" 
                                       id="longitude" name="longitude" value="{{ old('longitude') }}" readonly>
                                <small class="form-text text-muted">Auto-filled from map selection</small>
                                @error('longitude')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="row mt-4">
                            <div class="col-12">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-save mr-2"></i>Save Site
                                </button>
                                <a href="{{ route('reseller.isp.sites.index') }}" class="btn btn-secondary">
                                    <i class="fas fa-times mr-2"></i>Cancel
                                </a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
let map;
let marker;
let geocoder;

function initMap() {
    // Remove loading indicator
    const loadingElement = document.getElementById('map-loading');
    if (loadingElement) {
        loadingElement.remove();
    }
    
    // Default location (Dhaka, Bangladesh)
    const defaultLocation = { lat: 23.8103, lng: 90.4125 };
    
    // Check if we have existing coordinates
    const existingLat = parseFloat(document.getElementById('latitude').value);
    const existingLng = parseFloat(document.getElementById('longitude').value);
    
    const initialLocation = (existingLat && existingLng) 
        ? { lat: existingLat, lng: existingLng }
        : defaultLocation;
    
    // Get map container
    const mapElement = document.getElementById('map');
    if (!mapElement) {
        console.error('Map container not found');
        return;
    }
    
    // Initialize map
    map = new google.maps.Map(mapElement, {
        zoom: existingLat && existingLng ? 15 : 13,
        center: initialLocation,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: true,
        streetViewControl: true,
        fullscreenControl: true,
        zoomControl: true
    });
    
    // Initialize geocoder
    geocoder = new google.maps.Geocoder();
    
    // Create marker
    marker = new google.maps.Marker({
        position: initialLocation,
        map: map,
        draggable: true,
        title: "Site Location",
        animation: google.maps.Animation.DROP
    });
    
    // Update coordinates when marker is dragged
    marker.addListener('dragend', function() {
        updateCoordinates(marker.getPosition());
    });
    
    // Update coordinates when map is clicked
    map.addListener('click', function(event) {
        marker.setPosition(event.latLng);
        updateCoordinates(event.latLng);
        // Visual feedback - bounce animation
        marker.setAnimation(google.maps.Animation.BOUNCE);
        setTimeout(function() {
            marker.setAnimation(null);
        }, 750);
    });
    
    // Set initial coordinates display
    if (existingLat && existingLng) {
        updateCoordinates(new google.maps.LatLng(existingLat, existingLng));
    } else {
        updateCoordinates(new google.maps.LatLng(defaultLocation.lat, defaultLocation.lng));
    }
}

function updateCoordinates(latLng) {
    const lat = latLng.lat();
    const lng = latLng.lng();
    
    // Update form inputs
    document.getElementById('latitude').value = lat.toFixed(6);
    document.getElementById('longitude').value = lng.toFixed(6);
    
    // Update display with visual feedback
    const coordDisplay = document.getElementById('coordinates-display');
    coordDisplay.textContent = `${lat.toFixed(6)}, ${lng.toFixed(6)}`;
    coordDisplay.style.color = '#28a745';
    coordDisplay.style.fontWeight = 'bold';
    
    // Reset color after 2 seconds
    setTimeout(function() {
        coordDisplay.style.color = '';
        coordDisplay.style.fontWeight = '';
    }, 2000);
    
    // Optional: Reverse geocode to get address
    geocoder.geocode({ location: latLng }, function(results, status) {
        if (status === 'OK' && results[0]) {
            const addressField = document.getElementById('address');
            if (addressField && !addressField.value.trim()) {
                addressField.value = results[0].formatted_address;
            }
        }
    });
}

// Load Google Maps API script
function loadGoogleMapsAPI() {
    // Check if script already exists
    if (document.querySelector('script[src*="maps.googleapis.com"]')) {
        if (typeof google !== 'undefined' && google.maps) {
            initMap();
        }
        return;
    }
    
    const script = document.createElement('script');
    script.src = 'https://maps.googleapis.com/maps/api/js?key=AIzaSyCJ6bQnxONHYHcdar2wxnatHnitsWeLX6E&libraries=places&callback=initMap';
    script.async = true;
    script.defer = true;
    script.onerror = function() {
        console.error('Failed to load Google Maps script');
        const mapElement = document.getElementById('map');
        if (mapElement) {
            mapElement.innerHTML = '<div style="padding: 20px; text-align: center; color: #dc3545; background: #fff; border-radius: 8px;"><i class="fas fa-exclamation-triangle fa-3x mb-3"></i><p><strong>Google Maps could not be loaded</strong></p><p>Please check your internet connection.</p><button onclick="location.reload()" class="btn btn-primary">Retry</button></div>';
        }
    };
    
    document.head.appendChild(script);
}

// Initialize when DOM is ready
document.addEventListener('DOMContentLoaded', function() {
    loadGoogleMapsAPI();
    
    // Set a timeout to handle map loading failure
    setTimeout(function() {
        if (typeof google === 'undefined' || !google.maps) {
            console.error('Google Maps not loaded after 10 seconds');
            const mapElement = document.getElementById('map');
            if (mapElement && !mapElement.querySelector('div')) {
                mapElement.innerHTML = '<div style="padding: 20px; text-align: center; color: #dc3545;"><i class="fas fa-exclamation-triangle fa-3x mb-3"></i><p><strong>Google Maps could not be loaded</strong></p><p>Please check your internet connection.</p><button onclick="location.reload()" class="btn btn-primary">Retry</button></div>';
            }
        }
    }, 10000);
});
</script>
@endpush