@extends('layouts.app')

@section('title', isset($checkpoint) ? 'Edit Checkpoint' : 'Create Checkpoints')
@section('no-page-header')

@section('content')
<div class="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100">
    <!-- Progress Header -->
    <div class="bg-white/80 backdrop-blur-sm border-b border-slate-200 sticky top-0 z-10">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
            <div class="flex items-center justify-between">
                <div class="flex items-center space-x-4">
                    <a href="{{ route('patrols.checkpoints') }}" class="inline-flex items-center px-3 py-2 rounded-lg text-slate-600 hover:text-slate-900 hover:bg-slate-100 transition-all duration-200">
                        <i class="fas fa-arrow-left mr-2"></i>
                        <span class="font-medium">Back</span>
                    </a>
                    <div class="h-6 w-px bg-slate-200"></div>
                    <div>
                        <h1 class="text-2xl font-bold text-slate-900">
                            @if(isset($checkpoint))
                                <i class="fas fa-edit text-blue-600 mr-2"></i>Edit Checkpoint
                            @else
                                <i class="fas fa-plus-circle text-blue-600 mr-2"></i>Create Checkpoints
                            @endif
                        </h1>
                        <p class="text-sm text-slate-500 mt-1">
                            @if(isset($checkpoint))
                                Modify checkpoint details and configuration
                            @else
                                Add and configure multiple patrol checkpoints efficiently
                            @endif
                        </p>
                    </div>
                </div>
                @if(!isset($checkpoint))
                    <div class="flex items-center space-x-2">
                        <div class="text-right">
                            <p class="text-sm font-medium text-slate-900" id="checkpoint-header-count">0 checkpoints</p>
                            <p class="text-xs text-slate-500">Ready to create</p>
                        </div>
                        <div class="w-12 h-12 rounded-full bg-gradient-to-r from-blue-500 to-indigo-600 flex items-center justify-center text-white font-bold" id="checkpoint-badge">
                            0
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <!-- Flash Messages -->
        @if(session('success'))
            <div class="mb-6 animate-fade-in">
                <div class="bg-green-50 border border-green-200 rounded-xl p-4 shadow-sm">
                    <div class="flex items-center">
                        <div class="flex-shrink-0">
                            <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center">
                                <i class="fas fa-check text-green-600"></i>
                            </div>
                        </div>
                        <div class="ml-3">
                            <p class="text-sm font-medium text-green-800">{{ session('success') }}</p>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        @if(session('error'))
            <div class="mb-6 animate-fade-in">
                <div class="bg-red-50 border border-red-200 rounded-xl p-4 shadow-sm">
                    <div class="flex items-center">
                        <div class="flex-shrink-0">
                            <div class="w-10 h-10 bg-red-100 rounded-full flex items-center justify-center">
                                <i class="fas fa-exclamation-triangle text-red-600"></i>
                            </div>
                        </div>
                        <div class="ml-3">
                            <p class="text-sm font-medium text-red-800">{{ session('error') }}</p>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        @if($errors->any())
            <div class="mb-6 animate-fade-in">
                <div class="bg-red-50 border border-red-200 rounded-xl p-4 shadow-sm">
                    <div class="flex items-center">
                        <div class="flex-shrink-0">
                            <div class="w-10 h-10 bg-red-100 rounded-full flex items-center justify-center">
                                <i class="fas fa-exclamation-circle text-red-600"></i>
                            </div>
                        </div>
                        <div class="ml-3">
                            <p class="text-sm font-medium text-red-800">{{ $errors->first() }}</p>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        <!-- Main Form Container -->
        <div class="bg-white/90 backdrop-blur-sm rounded-2xl shadow-xl border border-slate-200/60 overflow-hidden">
            <form action="{{ isset($checkpoint) ? route('patrols.checkpoints.update', $checkpoint->id) : route('patrols.checkpoints.store') }}" method="POST" class="space-y-0">
                @csrf
                @if(isset($checkpoint))
                    @method('PUT')
                @endif

                <div class="p-8 space-y-8">
                    @if(isset($checkpoint))
                        <!-- Single Checkpoint Edit Mode -->
                        <div class="space-y-6">
                            <!-- Section Header -->
                            <div class="text-center pb-6 border-b border-slate-200">
                                <div class="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-r from-blue-500 to-indigo-600 rounded-2xl mb-4">
                                    <i class="fas fa-map-pin text-white text-2xl"></i>
                                </div>
                                <h3 class="text-xl font-bold text-slate-900 mb-2">Checkpoint Configuration</h3>
                                <p class="text-slate-500">Update the details and settings for this checkpoint</p>
                            </div>

                            <!-- Basic Information Card -->
                            <div class="bg-gradient-to-r from-slate-50 to-blue-50 rounded-xl p-6 border border-slate-200">
                                <h4 class="text-lg font-semibold text-slate-900 mb-6 flex items-center">
                                    <div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center mr-3">
                                        <i class="fas fa-info-circle text-blue-600 text-sm"></i>
                                    </div>
                                    Basic Information
                                </h4>
                                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                                    <div class="space-y-2">
                                        <label for="checkpoint_name" class="block text-sm font-semibold text-slate-700 flex items-center">
                                            <i class="fas fa-tag text-slate-400 mr-2"></i>
                                            Checkpoint Name
                                            <span class="text-red-500 ml-1">*</span>
                                        </label>
                                        <input type="text" id="checkpoint_name" name="checkpoint_name" value="{{ old('checkpoint_name', $checkpoint->checkpoint_name ?? '') }}" 
                                               class="w-full px-4 py-3 border border-slate-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white/80 backdrop-blur-sm transition-all duration-200" 
                                               placeholder="Enter checkpoint name" required>
                                        @error('checkpoint_name')
                                            <p class="mt-2 text-sm text-red-600 flex items-center">
                                                <i class="fas fa-exclamation-circle mr-1"></i>
                                                {{ $message }}
                                            </p>
                                        @enderror
                                    </div>

                                    <div class="space-y-2">
                                        <label for="service_id" class="block text-sm font-semibold text-slate-700 flex items-center">
                                            <i class="fas fa-concierge-bell text-slate-400 mr-2"></i>
                                            Service
                                            <span class="text-red-500 ml-1">*</span>
                                        </label>
                                        <select id="service_id" name="service_id" class="w-full px-4 py-3 border border-slate-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white/80 backdrop-blur-sm transition-all duration-200" required>
                                            <option value="">Select Site</option>
                                            @foreach($services ?? [] as $id => $name)
                                                <option value="{{ $id }}" {{ old('service_id', $checkpoint->service_id ?? '') == $id ? 'selected' : '' }}>{{ $name }}</option>
                                            @endforeach
                                        </select>
                                        @error('service_id')
                                            <p class="mt-2 text-sm text-red-600 flex items-center">
                                                <i class="fas fa-exclamation-circle mr-1"></i>
                                                {{ $message }}
                                            </p>
                                        @enderror
                                    </div>

                                    <div class="space-y-2">
                                        <label for="latitude" class="block text-sm font-semibold text-slate-700 flex items-center">
                                            <i class="fas fa-map-marker-alt text-slate-400 mr-2"></i>
                                            Latitude
                                            <span class="text-red-500 ml-1">*</span>
                                        </label>
                                        <input type="number" id="latitude" name="latitude" value="{{ old('latitude', $checkpoint->latitude ?? '') }}" 
                                               step="any" class="w-full px-4 py-3 border border-slate-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white/80 backdrop-blur-sm transition-all duration-200" 
                                               placeholder="Enter latitude" required>
                                        @error('latitude')
                                            <p class="mt-2 text-sm text-red-600 flex items-center">
                                                <i class="fas fa-exclamation-circle mr-1"></i>
                                                {{ $message }}
                                            </p>
                                        @enderror
                                    </div>

                                    <div class="space-y-2">
                                        <label for="longitude" class="block text-sm font-semibold text-slate-700 flex items-center">
                                            <i class="fas fa-map-marker-alt text-slate-400 mr-2"></i>
                                            Longitude
                                            <span class="text-red-500 ml-1">*</span>
                                        </label>
                                        <input type="number" id="longitude" name="longitude" value="{{ old('longitude', $checkpoint->longitude ?? '') }}" 
                                               step="any" class="w-full px-4 py-3 border border-slate-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white/80 backdrop-blur-sm transition-all duration-200" 
                                               placeholder="Enter longitude" required>
                                        @error('longitude')
                                            <p class="mt-2 text-sm text-red-600 flex items-center">
                                                <i class="fas fa-exclamation-circle mr-1"></i>
                                                {{ $message }}
                                            </p>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <!-- Additional Information Card -->
                            <div class="bg-gradient-to-r from-indigo-50 to-purple-50 rounded-xl p-6 border border-slate-200">
                                <h4 class="text-lg font-semibold text-slate-900 mb-6 flex items-center">
                                    <div class="w-8 h-8 bg-indigo-100 rounded-lg flex items-center justify-center mr-3">
                                        <i class="fas fa-file-alt text-indigo-600 text-sm"></i>
                                    </div>
                                    Additional Information
                                </h4>
                                <div class="space-y-2">
                                    <label for="instructions" class="block text-sm font-semibold text-slate-700 flex items-center">
                                        <i class="fas fa-info-circle text-slate-400 mr-2"></i>
                                        Instructions & Notes
                                    </label>
                                    <textarea id="instructions" name="instructions" rows="4" 
                                              class="w-full px-4 py-3 border border-slate-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white/80 backdrop-blur-sm transition-all duration-200 resize-none"
                                              placeholder="Add any additional information or instructions for this checkpoint">{{ old('instructions', $checkpoint->instructions ?? '') }}</textarea>
                                    @error('instructions')
                                        <p class="mt-2 text-sm text-red-600 flex items-center">
                                            <i class="fas fa-exclamation-circle mr-1"></i>
                                            {{ $message }}
                                        </p>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    @else
                        <!-- Multi-Checkpoint Creation Mode -->
                        <!-- Hero Section -->
                        <div class="text-center pb-8 border-b border-slate-200">
                            <div class="inline-flex items-center justify-center w-20 h-20 bg-gradient-to-r from-blue-500 via-indigo-500 to-purple-600 rounded-3xl mb-6 shadow-lg">
                                <i class="fas fa-layer-group text-white text-3xl"></i>
                            </div>
                            <h3 class="text-2xl font-bold text-slate-900 mb-3">Multi-Checkpoint Creation</h3>
                            <p class="text-slate-500 max-w-2xl mx-auto">Create multiple patrol checkpoints efficiently. Add checkpoints manually or use your current location.</p>
                        </div>

                        <!-- Action Buttons -->
                        <div class="mb-8">
                            <div class="flex flex-col sm:flex-row gap-4 justify-center">
                                <button type="button" onclick="addCheckpointRow()" class="px-8 py-4 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white rounded-2xl transition-all duration-200 flex items-center font-semibold shadow-lg hover:shadow-xl transform hover:scale-105">
                                    <i class="fas fa-plus mr-3"></i>
                                    Add Checkpoint
                                </button>
                                <button type="button" onclick="getCurrentLocationAndAddCheckpoint()" class="px-8 py-4 bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white rounded-2xl transition-all duration-200 flex items-center font-semibold shadow-lg hover:shadow-xl transform hover:scale-105">
                                    <i class="fas fa-crosshairs mr-3"></i>
                                    Use Current Location
                                </button>
                            </div>
                        </div>

                        <!-- Checkpoints Management Section -->
                        <div class="bg-gradient-to-r from-slate-50 to-gray-100 rounded-2xl p-6 border border-slate-200">
                            <div class="flex items-center justify-between mb-6">
                                <div class="flex items-center space-x-3">
                                    <div class="w-10 h-10 bg-slate-600 rounded-xl flex items-center justify-center">
                                        <i class="fas fa-list text-white"></i>
                                    </div>
                                    <div>
                                        <h4 class="text-lg font-bold text-slate-900">Checkpoints Queue</h4>
                                        <p class="text-sm text-slate-500">Manage your checkpoints before creation</p>
                                    </div>
                                </div>
                                <div class="flex items-center space-x-3">
                                    <div class="text-right">
                                        <p class="text-sm font-bold text-slate-900" id="checkpoint-count">0 checkpoints</p>
                                        <p class="text-xs text-slate-500">In queue</p>
                                    </div>
                                    <button type="button" onclick="clearAllCheckpoints()" class="px-4 py-2 bg-red-50 hover:bg-red-100 text-red-600 rounded-xl transition-all duration-200 flex items-center text-sm font-medium">
                                        <i class="fas fa-trash-alt mr-2"></i>
                                        Clear All
                                    </button>
                                </div>
                            </div>
                            
                            <div id="checkpoints-container" class="space-y-4 max-h-96 overflow-y-auto">
                                <!-- Checkpoints will be added here dynamically -->
                            </div>
                            
                            <div id="empty-state" class="text-center py-12 border-2 border-dashed border-slate-300 rounded-xl bg-white/50">
                                <div class="w-20 h-20 bg-slate-100 rounded-full flex items-center justify-center mx-auto mb-4">
                                    <i class="fas fa-inbox text-slate-400 text-3xl"></i>
                                </div>
                                <h5 class="text-lg font-semibold text-slate-700 mb-2">No Checkpoints Yet</h5>
                                <p class="text-slate-500 mb-4">Click the buttons above to add checkpoints manually or use your current location</p>
                                <div class="flex justify-center space-x-2">
                                    <span class="px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-xs font-medium">Manual Entry</span>
                                    <span class="px-3 py-1 bg-purple-100 text-purple-700 rounded-full text-xs font-medium">Current Location</span>
                                </div>
                            </div>
                        </div>
                    @endif

                </div>

                <!-- Enhanced Form Actions -->
                <div class="bg-gradient-to-r from-slate-50 to-blue-50 px-8 py-6 border-t border-slate-200">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center space-x-4">
                            <a href="{{ route('patrols.checkpoints') }}" class="px-6 py-3 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-xl transition-all duration-200 flex items-center font-medium">
                                <i class="fas fa-times mr-2"></i>
                                Cancel
                            </a>
                            @if(!isset($checkpoint))
                                <div class="text-sm text-slate-500">
                                    <i class="fas fa-info-circle mr-1"></i>
                                    All checkpoints will be created at once
                                </div>
                            @endif
                        </div>
                        <button type="submit" class="px-8 py-3 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white rounded-xl transition-all duration-200 flex items-center font-semibold shadow-lg hover:shadow-xl transform hover:scale-105">
                            <i class="fas fa-save mr-2"></i>
                            @if(isset($checkpoint))
                                Update Checkpoint
                            @else
                                Create Checkpoint(s)
                            @endif
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

@push('styles')
<style>
/* Modern Animations */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Checkpoint Item Styles */
.checkpoint-item {
    animation: fadeIn 0.4s ease-out;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.checkpoint-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border-color: #3b82f6;
}

.checkpoint-item.removing {
    animation: slideOut 0.3s ease-out;
}

/* Button Hover Effects */
.btn-remove {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-remove:hover {
    transform: scale(1.1);
}

/* Toast Notifications */
.toast {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    animation: slideIn 0.3s ease-out;
    backdrop-filter: blur(10px);
}

/* Progress Bar */
.progress-bar {
    height: 6px;
    background: linear-gradient(90deg, #e5e7eb 0%, #f3f4f6 50%, #e5e7eb 100%);
    background-size: 200% 100%;
    border-radius: 3px;
    overflow: hidden;
    animation: shimmer 2s infinite;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6 0%, #6366f1 100%);
    transition: width 0.3s ease;
    border-radius: 3px;
}

/* Form Input Enhancements */
input[type="text"],
input[type="number"],
select,
textarea {
    transition: all 0.2s ease;
}

input[type="text"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.1), 0 2px 4px -1px rgba(59, 130, 246, 0.06);
}

/* Card Hover Effects */
.group:hover .group-hover\:scale-110 {
    transform: scale(1.1);
}

.group:hover .group-hover\:translate-x-1 {
    transform: translateX(0.25rem);
}

/* Badge Animation */
#checkpoint-badge {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#checkpoint-badge.pulse {
    animation: pulse 0.6s ease-in-out;
}

/* Scrollbar Styling */
.max-h-96::-webkit-scrollbar {
    width: 6px;
}

.max-h-96::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 3px;
}

.max-h-96::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.max-h-96::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Fade In Animation for Flash Messages */
.animate-fade-in {
    animation: fadeIn 0.3s ease-out;
}

/* Glass Morphism Effect */
.glass {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Gradient Text */
.gradient-text {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
</style>
@endpush

<script>
// Multi-checkpoint management
let checkpointIndex = 0;
let checkpoints = [];

function showToast(message, type = 'success') {
    const toast = document.createElement('div');
    const bgColor = type === 'success' ? 'bg-green-500' : 
                    type === 'error' ? 'bg-red-500' : 
                    'bg-blue-500';
    
    const icon = type === 'success' ? 'fa-check-circle' : 
                  type === 'error' ? 'fa-exclamation-circle' : 
                  'fa-info-circle';
    
    toast.className = `toast ${bgColor} text-white px-6 py-4 rounded-2xl shadow-2xl flex items-center space-x-3 min-w-[300px]`;
    toast.innerHTML = `
        <div class="flex-shrink-0">
            <div class="w-8 h-8 bg-white/20 rounded-full flex items-center justify-center">
                <i class="fas ${icon} text-white text-sm"></i>
            </div>
        </div>
        <div class="flex-1">
            <p class="font-medium">${message}</p>
        </div>
        <button onclick="this.parentElement.parentElement.remove()" class="flex-shrink-0 ml-4 text-white/80 hover:text-white">
            <i class="fas fa-times"></i>
        </button>
    `;
    
    document.body.appendChild(toast);
    
    // Auto remove after 4 seconds
    setTimeout(() => {
        toast.style.animation = 'slideOut 0.3s ease-out';
        setTimeout(() => toast.remove(), 300);
    }, 4000);
}

function updateCheckpointCount() {
    const count = checkpoints.length;
    const countElement = document.getElementById('checkpoint-count');
    const headerCountElement = document.getElementById('checkpoint-header-count');
    const badgeElement = document.getElementById('checkpoint-badge');
    
    const countText = `${count} checkpoint${count !== 1 ? 's' : ''}`;
    
    if (countElement) {
        countElement.textContent = countText;
    }
    
    if (headerCountElement) {
        headerCountElement.textContent = countText;
    }
    
    if (badgeElement) {
        badgeElement.textContent = count;
        // Add pulse animation when count changes
        badgeElement.classList.add('pulse');
        setTimeout(() => badgeElement.classList.remove('pulse'), 600);
    }
    
    const emptyState = document.getElementById('empty-state');
    const container = document.getElementById('checkpoints-container');
    
    if (count === 0) {
        if (emptyState) emptyState.style.display = 'block';
        if (container) container.style.display = 'none';
    } else {
        if (emptyState) emptyState.style.display = 'none';
        if (container) container.style.display = 'block';
    }
}

function addCheckpointRow(data = null) {
    const index = checkpointIndex++;
    const checkpoint = data || {
        name: '',
        latitude: '',
        longitude: '',
        instructions: ''
    };
    
    checkpoints[index] = checkpoint;
    
    const container = document.getElementById('checkpoints-container');
    const checkpointHtml = `
        <div class="checkpoint-item bg-white rounded-xl p-6 border border-slate-200 shadow-sm hover:shadow-md transition-all duration-300" data-index="${index}">
            <div class="flex items-start justify-between mb-4">
                <div class="flex items-center space-x-3">
                    <div class="w-10 h-10 bg-gradient-to-r from-blue-500 to-indigo-600 rounded-xl flex items-center justify-center text-white font-bold">
                        ${index + 1}
                    </div>
                    <div>
                        <h5 class="text-lg font-bold text-slate-900">Checkpoint #${index + 1}</h5>
                        <p class="text-sm text-slate-500">Ready for configuration</p>
                    </div>
                </div>
                <button type="button" onclick="removeCheckpoint(${index})" class="p-2 text-red-500 hover:bg-red-50 rounded-lg transition-all duration-200 group">
                    <i class="fas fa-trash-alt group-hover:scale-110 transition-transform duration-200"></i>
                </button>
            </div>
            
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
                <div class="space-y-2">
                    <label class="block text-sm font-semibold text-slate-700 flex items-center">
                        <i class="fas fa-tag text-slate-400 mr-2"></i>
                        Checkpoint Name
                        <span class="text-red-500 ml-1">*</span>
                    </label>
                    <input type="text" name="checkpoints[${index}][name]" value="${checkpoint.name}" 
                           class="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white/90 backdrop-blur-sm transition-all duration-200"
                           placeholder="Enter checkpoint name" required>
                </div>
                
                <div class="space-y-2">
                    <label class="block text-sm font-semibold text-slate-700 flex items-center">
                        <i class="fas fa-concierge-bell text-slate-400 mr-2"></i>
                        Site
                        <span class="text-red-500 ml-1">*</span>
                    </label>
                    <select name="checkpoints[${index}][service_id]" class="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white/90 backdrop-blur-sm transition-all duration-200" required>
                        <option value="">Select Site</option>
                        @foreach($services ?? [] as $id => $name)
                            <option value="{{ $id }}">{{ $name }}</option>
                        @endforeach
                    </select>
                </div>
                
                <div class="space-y-2">
                    <label class="block text-sm font-semibold text-slate-700 flex items-center">
                        <i class="fas fa-map-marker-alt text-slate-400 mr-2"></i>
                        Latitude
                        <span class="text-red-500 ml-1">*</span>
                    </label>
                    <input type="number" name="checkpoints[${index}][latitude]" value="${checkpoint.latitude}" 
                           step="any" class="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white/90 backdrop-blur-sm transition-all duration-200"
                           placeholder="Enter latitude" required>
                </div>
                
                <div class="space-y-2">
                    <label class="block text-sm font-semibold text-slate-700 flex items-center">
                        <i class="fas fa-map-marker-alt text-slate-400 mr-2"></i>
                        Longitude
                        <span class="text-red-500 ml-1">*</span>
                    </label>
                    <input type="number" name="checkpoints[${index}][longitude]" value="${checkpoint.longitude}" 
                           step="any" class="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white/90 backdrop-blur-sm transition-all duration-200"
                           placeholder="Enter longitude" required>
                </div>
                
                <div class="lg:col-span-2 space-y-2">
                    <label class="block text-sm font-semibold text-slate-700 flex items-center">
                        <i class="fas fa-info-circle text-slate-400 mr-2"></i>
                        Instructions & Notes
                    </label>
                    <textarea name="checkpoints[${index}][instructions]" rows="2" 
                              class="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white/90 backdrop-blur-sm transition-all duration-200 resize-none"
                              placeholder="Add any additional information or instructions">${checkpoint.instructions}</textarea>
                </div>
            </div>
        </div>
    `;
    
    container.insertAdjacentHTML('beforeend', checkpointHtml);
    updateCheckpointCount();
    showToast('Checkpoint added successfully', 'success');
    
    // Scroll to the new checkpoint
    const newElement = container.querySelector(`.checkpoint-item[data-index="${index}"]`);
    if (newElement) {
        newElement.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
    }
}

function removeCheckpoint(index) {
    if (confirm('Are you sure you want to remove this checkpoint?')) {
        const element = document.querySelector(`.checkpoint-item[data-index="${index}"]`);
        if (element) {
            element.classList.add('removing');
            setTimeout(() => {
                element.remove();
                delete checkpoints[index];
                updateCheckpointCount();
                showToast('Checkpoint removed', 'info');
            }, 300);
        }
    }
}

function clearAllCheckpoints() {
    if (confirm('Are you sure you want to clear all checkpoints?')) {
        document.getElementById('checkpoints-container').innerHTML = '';
        checkpoints = [];
        checkpointIndex = 0;
        updateCheckpointCount();
        showToast('All checkpoints cleared', 'info');
    }
}

function getCurrentLocationAndAddCheckpoint() {
    if (navigator.geolocation) {
        showToast('Getting your current location...', 'info');
        
        navigator.geolocation.getCurrentPosition(
            (position) => {
                const { latitude, longitude } = position.coords;
                
                // Create checkpoint with current location data
                addCheckpointRow({
                    name: `Location ${checkpointIndex + 1}`,
                    latitude: latitude.toFixed(6),
                    longitude: longitude.toFixed(6),
                    instructions: 'Current GPS location'
                });
                
                showToast('Current location added as checkpoint', 'success');
            },
            (error) => {
                let errorMessage = 'Unable to get current location';
                
                switch(error.code) {
                    case error.PERMISSION_DENIED:
                        errorMessage = 'Location access denied. Please enable location permissions.';
                        break;
                    case error.POSITION_UNAVAILABLE:
                        errorMessage = 'Location information is unavailable.';
                        break;
                    case error.TIMEOUT:
                        errorMessage = 'Location request timed out.';
                        break;
                }
                
                showToast(errorMessage, 'error');
            },
            {
                enableHighAccuracy: true,
                timeout: 10000,
                maximumAge: 0
            }
        );
    } else {
        showToast('Geolocation is not supported by this browser', 'error');
    }
}

// Enhanced validation
document.addEventListener('DOMContentLoaded', function() {
    const form = document.querySelector('form');
    if (form) {
        form.addEventListener('submit', function(e) {
            // Only validate multi-checkpoint form if not in edit mode
            @if(!isset($checkpoint))
                const checkpointItems = document.querySelectorAll('.checkpoint-item');
                
                if (checkpointItems.length === 0) {
                    e.preventDefault();
                    showToast('Please add at least one checkpoint', 'error');
                    return false;
                }
                
                // Validate each checkpoint
                let isValid = true;
                checkpointItems.forEach(item => {
                    const nameInput = item.querySelector('input[name*="[name]"]');
                    const serviceSelect = item.querySelector('select[name*="[service_id]"]');
                    const latInput = item.querySelector('input[name*="[latitude]"]');
                    const lngInput = item.querySelector('input[name*="[longitude]"]');
                    
                    if (!nameInput.value || !serviceSelect.value || !latInput.value || !lngInput.value) {
                        isValid = false;
                        item.classList.add('border-red-500');
                    } else {
                        item.classList.remove('border-red-500');
                    }
                });
                
                if (!isValid) {
                    e.preventDefault();
                    showToast('Please complete all required fields for each checkpoint', 'error');
                    return false;
                }
            @endif
        });
    }
    
    @if(!isset($checkpoint))
        updateCheckpointCount();
    @endif
});
</script>

@endsection