@extends('layouts.app')

@section('title', 'Create Box')
@section('page-title', 'Create New Box')

@push('styles')
<style>
    #map {
        height: 400px;
        width: 100%;
        border-radius: 8px;
    }
    .map-container {
        position: relative;
    }
    .coordinates-display {
        background: #f8f9fa;
        border: 1px solid #dee2e6;
        border-radius: 4px;
        padding: 8px 12px;
        font-family: monospace;
        font-size: 14px;
    }
</style>
@endpush

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-md-6">
            <div class="custom-card">
                <div class="custom-card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-plus me-2"></i>
                        Add New Box
                    </h5>
                </div>
                <div class="custom-card-body">
                    <form action="{{ route('boxes.store') }}" method="POST">
                        @csrf
                        
                        <div class="mb-3">
                            <label for="name" class="form-label">Box Name <span class="text-danger">*</span></label>
                            <input type="text" 
                                   class="form-control custom-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 class="mb-3">
                            <label for="sub_zone_id" class="form-label">Sub Zone <span class="text-danger">*</span></label>
                            <select class="form-control custom-form-control @error('sub_zone_id') is-invalid @enderror" 
                                    id="sub_zone_id" 
                                    name="sub_zone_id" 
                                    required>
                                <option value="">Select a Sub Zone</option>
                                @foreach($subZones as $subZone)
                                    <option value="{{ $subZone->id }}" 
                                            {{ old('sub_zone_id', request('sub_zone_id')) == $subZone->id ? 'selected' : '' }}>
                                        {{ $subZone->name }}
                                        @if($subZone->code)
                                            - {{ $subZone->code }}
                                        @endif
                                        @if($subZone->zone)
                                            ({{ $subZone->zone->name }}
                                            @if($subZone->zone->code)
                                                - {{ $subZone->zone->code }}
                                            @endif
                                            @if($subZone->zone->branch)
                                                | {{ $subZone->zone->branch->name }}
                                            @endif
                                            )
                                        @endif
                                    </option>
                                @endforeach
                            </select>
                            @error('sub_zone_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            @if(\App\Helpers\PermissionHelper::isSuperUser(auth()->id()))
                                <div class="form-text">All active sub-zones are available (Super User)</div>
                            @else
                                <div class="form-text">Only sub-zones from your authorized branches and zones are available</div>
                            @endif
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">Select Location</label>
                            <div class="coordinates-display" id="coordinates-display">
                                Click on the map to set coordinates
                            </div>
                            <input type="hidden" id="latitude" name="latitude" value="{{ old('latitude') }}">
                            <input type="hidden" id="longitude" name="longitude" value="{{ old('longitude') }}">
                            @error('latitude')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            @error('longitude')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <div class="mb-3">
                            <label for="description" class="form-label">Description</label>
                            <textarea class="form-control custom-form-control @error('description') is-invalid @enderror" 
                                      id="description" 
                                      name="description" 
                                      rows="3">{{ old('description') }}</textarea>
                            @error('description')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <div class="mb-3">
                            <div class="form-check">
                                <input class="form-check-input" 
                                       type="checkbox" 
                                       id="is_active" 
                                       name="is_active" 
                                       value="1" 
                                       {{ old('is_active', true) ? 'checked' : '' }}>
                                <label class="form-check-label" for="is_active">
                                    Active Box
                                </label>
                            </div>
                            <div class="form-text">Inactive boxes cannot be used for new connections</div>
                        </div>
                        
                        <div class="d-flex justify-content-end">
                            <button type="submit" class="btn btn-success btn-custom">
                                <i class="fas fa-check me-2"></i>Save Box
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        
        <div class="col-md-6">
            <div class="custom-card">
                <div class="custom-card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-map me-2"></i>
                        Select Location
                    </h5>
                </div>
                <div class="custom-card-body">
                    <div class="mb-3">
                        <input type="text" 
                               class="form-control custom-form-control" 
                               id="search-location" 
                               placeholder="Search location or address...">
                    </div>
                    <div class="map-container">
                        <div id="map">
                            <div style="padding: 20px; text-align: center; color: #666;">
                                <i class="fas fa-spinner fa-spin fa-3x mb-3"></i>
                                <p>Loading Google Maps...</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
// Debug function to check Google Maps API loading
function checkGoogleMapsAPI() {
    console.log('Checking Google Maps API...');
    console.log('Google object:', typeof google);
    console.log('Google Maps object:', typeof google?.maps);
    
    if (typeof google === 'undefined') {
        console.error('Google Maps API not loaded');
        document.getElementById('map').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 API not loaded</strong></p><p>Please check your internet connection and API key.</p></div>';
        return false;
    }
    
    if (typeof google.maps === 'undefined') {
        console.error('Google Maps library not loaded');
        document.getElementById('map').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 library not loaded</strong></p><p>Please check your API key permissions.</p></div>';
        return false;
    }
    
    console.log('Google Maps API loaded successfully');
    return true;
}

let map;
let marker;
let geocoder;
let searchBox;

function initMap() {
    console.log('initMap function called');
    
    // Check if Google Maps API is loaded
    if (!checkGoogleMapsAPI()) {
        return;
    }
    
    try {
        // Default location (Dhaka, Bangladesh)
        const defaultLocation = { lat: 23.8103, lng: 90.4125 };
        
        // Check if map container exists
        const mapElement = document.getElementById("map");
        if (!mapElement) {
            throw new Error('Map container not found');
        }
        
        console.log('Initializing map...');
        
        // Initialize map
        map = new google.maps.Map(mapElement, {
            zoom: 13,
            center: defaultLocation,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            mapTypeControl: true,
            streetViewControl: true,
            fullscreenControl: true
        });
        
        // Initialize geocoder
        geocoder = new google.maps.Geocoder();
        
        // Create initial marker
        marker = new google.maps.Marker({
            position: defaultLocation,
            map: map,
            draggable: true,
            title: "Box Location"
        });
        
        // 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);
        });
        
        // Initialize search box
        const searchInput = document.getElementById('search-location');
        searchBox = new google.maps.places.SearchBox(searchInput);
        
        // Bias the SearchBox results towards current map's viewport
        map.addListener('bounds_changed', () => {
            searchBox.setBounds(map.getBounds());
        });
        
        // Listen for the event fired when the user selects a prediction
        searchBox.addListener('places_changed', () => {
            const places = searchBox.getPlaces();
            
            if (places.length === 0) {
                return;
            }
            
            // Clear out the old markers
            marker.setMap(null);
            
            // For each place, get the icon, name and location
            const bounds = new google.maps.LatLngBounds();
            
            places.forEach((place) => {
                if (!place.geometry || !place.geometry.location) {
                    console.log("Returned place contains no geometry");
                    return;
                }
                
                // Create a marker for each place
                marker = new google.maps.Marker({
                    map: map,
                    title: place.name,
                    position: place.geometry.location,
                    draggable: true
                });
                
                // Update coordinates
                updateCoordinates(place.geometry.location);
                
                if (place.geometry.viewport) {
                    bounds.union(place.geometry.viewport);
                } else {
                    bounds.extend(place.geometry.location);
                }
            });
            
            map.fitBounds(bounds);
        });
        
        // Set initial coordinates
        updateCoordinates(defaultLocation);
        
        console.log('Map initialized successfully');
        
    } catch (error) {
        console.error('Error initializing map:', error);
        document.getElementById('map').innerHTML = '<div style="padding: 20px; text-align: center; color: #dc3545;"><i class="fas fa-exclamation-triangle fa-3x mb-3"></i><p><strong>Error:</strong> ' + error.message + '</p><p>Please check your API key and internet connection.</p></div>';
    }
}

function updateCoordinates(latLng) {
    const lat = latLng.lat();
    const lng = latLng.lng();
    
    // Update hidden inputs
    document.getElementById('latitude').value = lat.toFixed(8);
    document.getElementById('longitude').value = lng.toFixed(8);
    
    // Update display
    document.getElementById('coordinates-display').textContent = `${lat.toFixed(8)},${lng.toFixed(8)}`;
}

// Fallback function if Google Maps fails to load
function handleMapError() {
    console.error('Google Maps failed to load after timeout');
    document.getElementById('map').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 API key and internet connection.</p><button onclick="location.reload()" class="btn btn-primary">Retry</button></div>';
}

// Load Google Maps API script
function loadGoogleMapsAPI() {
    console.log('Loading Google Maps API...');
    
    // Check if script already exists
    if (document.querySelector('script[src*="maps.googleapis.com"]')) {
        console.log('Google Maps script already exists');
        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');
        handleMapError();
    };
    
    document.head.appendChild(script);
    console.log('Google Maps script added to head');
}

// Initialize when DOM is ready
document.addEventListener('DOMContentLoaded', function() {
    console.log('DOM loaded, initializing Google Maps...');
    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');
            handleMapError();
        }
    }, 10000);
});
</script>
@endpush