@extends('layouts.master')
@section('title', 'Geofencing Management - Udankhatola')

@section('content')

<div class="pagetitle">
    <h1>Location Geofencing Management</h1>
    <nav>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{url('/')}}">Home</a></li>
            <li class="breadcrumb-item"><a href="{{route('locations.index')}}">Locations</a></li>
            <li class="breadcrumb-item active">Geofencing</li>
        </ol>
    </nav>
</div><!-- End Page Title -->

<section class="section dashboard">
    <div class="row">

    @if(session('success'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        <i class="mdi mdi-check-all me-2"></i>
        {{ session('success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    @endif

    @if(session('error'))
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        <i class="mdi mdi-block-helper me-2"></i>
        {{ session('error') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    @endif

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="mdi mdi-map-marker-radius me-2"></i>
                        Configure Geofencing for Locations
                    </h5>
                </div>
                <div class="card-body">
                    <div class="alert alert-info">
                        <h6 class="alert-heading"><i class="mdi mdi-information me-2"></i>How to use:</h6>
                        <ul class="mb-0">
                            <li>Add <strong>Latitude</strong> and <strong>Longitude</strong> for each location</li>
                            <li>Set <strong>Geofence Radius</strong> in meters (e.g., 1000m = 1km)</li>
                            <li>Group locations by <strong>Region</strong> (e.g., "Haridwar" for CHD + MNS)</li>
                            <li>Agents will be validated against all locations in their region</li>
                        </ul>
                        <hr>
                        <small><strong>Tip:</strong> Get coordinates from <a href="https://www.google.com/maps" target="_blank">Google Maps</a> - Right-click on location → Click coordinates to copy</small>
                    </div>

                    <div class="table-responsive">
                        <table class="table table-bordered table-hover align-middle">
                            <thead class="table-light">
                                <tr>
                                    <th>Location Name</th>
                                    <th>Loccode</th>
                                    <th>Latitude</th>
                                    <th>Longitude</th>
                                    <th>Geofence Radius (meters)</th>
                                    <th>Region</th>
                                    <th>Status</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($locations as $location)
                                <tr>
                                    <form action="{{ route('locations.geofencing.update', $location->id) }}" method="POST">
                                        @csrf
                                        @method('PATCH')
                                        <td>
                                            <strong>{{ $location->name }}</strong>
                                        </td>
                                        <td>
                                            <span class="badge bg-primary">{{ $location->loccode }}</span>
                                        </td>
                                        <td>
                                            <input type="number" 
                                                   step="0.00000001" 
                                                   name="latitude" 
                                                   class="form-control form-control-sm" 
                                                   value="{{ $location->latitude }}"
                                                   placeholder="30.3165"
                                                   required>
                                            @error('latitude')
                                                <small class="text-danger">{{ $message }}</small>
                                            @enderror
                                        </td>
                                        <td>
                                            <input type="number" 
                                                   step="0.00000001" 
                                                   name="longitude" 
                                                   class="form-control form-control-sm" 
                                                   value="{{ $location->longitude }}"
                                                   placeholder="78.0322"
                                                   required>
                                            @error('longitude')
                                                <small class="text-danger">{{ $message }}</small>
                                            @enderror
                                        </td>
                                        <td>
                                            <input type="number" 
                                                   name="geofence_radius" 
                                                   class="form-control form-control-sm" 
                                                   value="{{ $location->geofence_radius ?? 1000 }}"
                                                   min="0"
                                                   max="50000"
                                                   placeholder="1000"
                                                   required>
                                            <small class="text-muted">{{ $location->geofence_radius ? round($location->geofence_radius/1000, 2) . ' km' : '' }}</small>
                                            @error('geofence_radius')
                                                <small class="text-danger">{{ $message }}</small>
                                            @enderror
                                        </td>
                                        <td>
                                            <input type="text" 
                                                   name="region" 
                                                   class="form-control form-control-sm" 
                                                   value="{{ $location->region }}"
                                                   placeholder="Haridwar">
                                            @error('region')
                                                <small class="text-danger">{{ $message }}</small>
                                            @enderror
                                        </td>
                                        <td>
                                            @if($location->latitude && $location->longitude)
                                                <span class="badge bg-success">
                                                    <i class="mdi mdi-check-circle"></i> Configured
                                                </span>
                                            @else
                                                <span class="badge bg-warning">
                                                    <i class="mdi mdi-alert"></i> Pending
                                                </span>
                                            @endif
                                        </td>
                                        <td>
                                            <button type="submit" class="btn btn-sm btn-primary">
                                                <i class="mdi mdi-content-save"></i> Save
                                            </button>
                                            @if($location->latitude && $location->longitude)
                                            <a href="https://www.google.com/maps?q={{ $location->latitude }},{{ $location->longitude }}" 
                                               target="_blank" 
                                               class="btn btn-sm btn-info"
                                               title="View on Google Maps">
                                                <i class="mdi mdi-map-marker"></i>
                                            </a>
                                            @endif
                                        </td>
                                    </form>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="8" class="text-center">
                                        <p class="text-muted mb-0">No locations found</p>
                                    </td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bulk Region Update Card -->
    <div class="row mt-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="bi bi-geo-alt-fill me-2"></i>
                        Bulk Region Assignment
                    </h5>
                </div>
                <div class="card-body">
                    <form action="{{ route('locations.bulk.region') }}" method="POST">
                        @csrf
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label fw-bold">Select Locations</label>
                                    <div class="border rounded p-3" style="max-height: 300px; overflow-y: auto;">
                                        @foreach($locations as $location)
                                        <div class="form-check mb-2">
                                            <input class="form-check-input" 
                                                   type="checkbox" 
                                                   name="location_ids[]" 
                                                   value="{{ $location->id }}" 
                                                   id="location_{{ $location->id }}">
                                            <label class="form-check-label" for="location_{{ $location->id }}">
                                                <strong>{{ $location->name }}</strong> 
                                                <span class="badge bg-primary">{{ $location->loccode }}</span>
                                                @if($location->region)
                                                <span class="badge bg-info">{{ $location->region }}</span>
                                                @endif
                                            </label>
                                        </div>
                                        @endforeach
                                    </div>
                                    <small class="text-muted">
                                        <i class="bi bi-info-circle me-1"></i>
                                        Check multiple locations to assign them to the same region
                                    </small>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label fw-bold">Region Name</label>
                                    <input type="text" 
                                           name="region" 
                                           class="form-control form-control-lg" 
                                           placeholder="e.g., Haridwar, Uttarakhand, North India"
                                           required>
                                    <small class="text-muted">
                                        <i class="bi bi-info-circle me-1"></i>
                                        All selected locations will be grouped under this region
                                    </small>
                                </div>
                                <div class="alert alert-info">
                                    <strong>Example:</strong> Select "Chandi Devi (CHD)" and "Mansa Devi (MNS)" and enter region as "Haridwar" to group them together.
                                </div>
                                <button type="submit" class="btn btn-success btn-lg w-100">
                                    <i class="bi bi-check-circle me-2"></i>
                                    Update Region for Selected Locations
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Quick Reference Card -->
    <div class="row mt-4">
        <div class="col-12">
            <div class="card border-primary">
                <div class="card-header bg-primary text-white">
                    <h5 class="card-title mb-0 text-white">
                        <i class="mdi mdi-help-circle me-2"></i>
                        Quick Reference
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h6><i class="mdi mdi-map-marker-radius text-primary me-2"></i>Geofence Radius Examples:</h6>
                            <ul>
                                <li><strong>100m</strong> - Very tight (within building)</li>
                                <li><strong>500m</strong> - Nearby area (5-10 min walk)</li>
                                <li><strong>1000m (1km)</strong> - Local area (recommended)</li>
                                <li><strong>5000m (5km)</strong> - Wider area</li>
                                <li><strong>10000m (10km)</strong> - City-wide</li>
                            </ul>
                        </div>
                        <div class="col-md-6">
                            <h6><i class="mdi mdi-map-legend text-primary me-2"></i>Region Grouping:</h6>
                            <ul>
                                <li><strong>Same Region:</strong> Agent validated against ALL locations in region</li>
                                <li><strong>Example:</strong> CHD + MNS both in "Haridwar" region</li>
                                <li><strong>Benefit:</strong> Agent can book from either location if within range</li>
                                <li><strong>No Region:</strong> Only validated against assigned location</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<style>
.table td input {
    min-width: 120px;
}
.badge {
    font-size: 0.875rem;
}
</style>
@endsection