@extends('layouts.admin')

@section('title', 'Create Charging Point - EV Charging Network')

@section('breadcrumb_title', 'Charging Points')
@section('breadcrumb_link', route('charging-points.index'))
@section('breadcrumb_sub_title', 'Create')
@section('page_title', 'Create New Charging Point')

@section('content')
    <div class="min-h-screen bg-gray-50">
        <div class="row mt-4">
            <div class="col-12">
                <div class="card">
                    <!-- Card header -->
                    <div class="card-header">
                        <h5 class="mb-0">Location Information</h5>
                        <p class="text-sm mb-0">
                            Enter the latitude and longitude coordinates for the charging point location. The system will
                            check for existing charging points within 50 meters.
                        </p>
                    </div>

                    <!-- Card body -->
                    <div class="card-body">
                        @if (session('error'))
                            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                <span class="alert-icon"><i class="ni ni-bell-55"></i></span>
                                <span class="alert-text">{{ session('error') }}</span>
                                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                        @endif

                        <form action="{{ route('charging-points.check-location') }}" method="POST" id="locationForm">
                            @csrf
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="latitude" class="form-label">Latitude <span
                                                class="text-danger">*</span></label>
                                        <input type="number" step="any"
                                            class="form-control @error('latitude') is-invalid @enderror" id="latitude"
                                            name="latitude" value="{{ old('latitude') }}" placeholder="e.g., 40.7128">
                                        @error('latitude')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                        <small class="form-text text-muted">Enter the latitude coordinate (e.g.,
                                            40.7128)</small>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="longitude" class="form-label">Longitude <span
                                                class="text-danger">*</span></label>
                                        <input type="number" step="any"
                                            class="form-control @error('longitude') is-invalid @enderror" id="longitude"
                                            name="longitude" value="{{ old('longitude') }}" placeholder="e.g., -74.0060">
                                        @error('longitude')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                        <small class="form-text text-muted">Enter the longitude coordinate (e.g.,
                                            -74.0060)</small>
                                    </div>
                                </div>
                            </div>

                            <div class="row mt-4">
                                <div class="col-12">
                                    <div class="d-flex justify-content-between">
                                        <a href="{{ route('charging-points.index') }}" class="btn btn-secondary">
                                            <i class="fas fa-arrow-left me-2"></i>Back to List
                                        </a>
                                        <button type="submit" class="btn btn-primary">
                                            <i class="fas fa-search me-2"></i>Check Location
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Add some basic validation
            const form = document.getElementById('locationForm');
            const latitudeInput = document.getElementById('latitude');
            const longitudeInput = document.getElementById('longitude');

            form.addEventListener('submit', function(e) {
                const latitude = parseFloat(latitudeInput.value);
                const longitude = parseFloat(longitudeInput.value);

                // Basic coordinate validation
                if (latitude < -90 || latitude > 90) {
                    e.preventDefault();
                    alert('Latitude must be between -90 and 90 degrees.');
                    latitudeInput.focus();
                    return false;
                }

                if (longitude < -180 || longitude > 180) {
                    e.preventDefault();
                    alert('Longitude must be between -180 and 180 degrees.');
                    longitudeInput.focus();
                    return false;
                }
            });
        });
    </script>
@endsection