@extends('layouts.app')

@section('title', 'Add Branch')

@push('styles')
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<style>
    #map {
        height: 400px;
        width: 100%;
        border-radius: 0.5rem;
    }
</style>
@endpush

@section('content')
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0"><i class="bi bi-building me-2"></i>Add New Branch</h5>
                <a href="{{ route('branches.index') }}" class="btn btn-secondary">
                    <i class="bi bi-arrow-left me-1"></i> Back
                </a>
            </div>
            <form action="{{ route('branches.store') }}" method="POST">
                @csrf
                <div class="card-body">
                    <div class="row">
                        <!-- Branch Info -->
                        <div class="col-md-6">
                            <h6 class="mb-3 text-primary">Branch Information</h6>

                            <div class="mb-3">
                                <label for="branch_code" class="form-label">Branch Code <span class="text-danger">*</span></label>
                                <input type="text" class="form-control @error('branch_code') is-invalid @enderror" id="branch_code" name="branch_code" value="{{ old('branch_code') }}" maxlength="20" required>
                                @error('branch_code')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label for="branch_name" class="form-label">Branch Name <span class="text-danger">*</span></label>
                                <input type="text" class="form-control @error('branch_name') is-invalid @enderror" id="branch_name" name="branch_name" value="{{ old('branch_name') }}" maxlength="100" required>
                                @error('branch_name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label for="address" class="form-label">Address</label>
                                <textarea class="form-control @error('address') is-invalid @enderror" id="address" name="address" rows="3" maxlength="500">{{ old('address') }}</textarea>
                                @error('address')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="radius" class="form-label">Radius (meters) <span class="text-danger">*</span></label>
                                    <input type="number" class="form-control @error('radius') is-invalid @enderror" id="radius" name="radius" value="{{ old('radius', 100) }}" min="10" max="1000" required>
                                    @error('radius')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <small class="text-muted">Attendance check-in radius (10-1000m)</small>
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label for="status" class="form-label">Status <span class="text-danger">*</span></label>
                                    <select class="form-select @error('status') is-invalid @enderror" id="status" name="status" required>
                                        <option value="1" {{ old('status', '1') == '1' ? 'selected' : '' }}>Active</option>
                                        <option value="0" {{ old('status') == '0' ? 'selected' : '' }}>Inactive</option>
                                    </select>
                                    @error('status')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Map Section -->
                        <div class="col-md-6">
                            <h6 class="mb-3 text-primary">Location</h6>

                            <div class="mb-3">
                                <label class="form-label">Search Location</label>
                                <div class="input-group">
                                    <input type="text" class="form-control" id="search_location" placeholder="Search location...">
                                    <button type="button" class="btn btn-outline-primary" id="btn_search">
                                        <i class="bi bi-search"></i>
                                    </button>
                                    <button type="button" class="btn btn-outline-info" id="btn_current_location" title="Use current location">
                                        <i class="bi bi-crosshair"></i>
                                    </button>
                                </div>
                                <small class="text-muted">Search address or click on the map</small>
                            </div>

                            <div class="mb-3">
                                <label for="gmaps_link" class="form-label">Google Maps Link (Optional)</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="bi bi-geo-alt"></i></span>
                                    <input type="text" class="form-control @error('gmaps_link') is-invalid @enderror" id="gmaps_link" placeholder="Paste Google Maps link here...">
                                    <button type="button" class="btn btn-outline-success" id="btn_extract_gmaps">
                                        <i class="bi bi-pin-map"></i> Extract
                                    </button>
                                </div>
                                <small class="text-muted">Paste Google Maps link and click Extract to get coordinates</small>
                                @error('gmaps_link')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <div id="map"></div>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Manual Coordinates (Optional)</label>
                                <div class="row g-2">
                                    <div class="col-md-5">
                                        <input type="text" class="form-control @error('latitude') is-invalid @enderror" id="latitude" name="latitude" value="{{ old('latitude') }}" placeholder="Latitude (e.g. -6.2088)">
                                        @error('latitude')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-md-5">
                                        <input type="text" class="form-control @error('longitude') is-invalid @enderror" id="longitude" name="longitude" value="{{ old('longitude') }}" placeholder="Longitude (e.g. 106.8456)">
                                        @error('longitude')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-md-2">
                                        <button type="button" class="btn btn-primary w-100" id="btn_set_manual_coords" title="Set location from manual coordinates">
                                            <i class="bi bi-pin-map-fill"></i>
                                        </button>
                                    </div>
                                </div>
                                <small class="text-muted">Enter coordinates manually and click the pin button to set location</small>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-footer text-end">
                    <a href="{{ route('branches.index') }}" class="btn btn-outline-secondary me-2">Cancel</a>
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-check-lg me-1"></i> Save Branch
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
    // Initialize map - default to Indonesia center
    const defaultLat = {{ old('latitude', -6.2088) }};
    const defaultLng = {{ old('longitude', 106.8456) }};
    const defaultZoom = {{ old('latitude') ? 15 : 5 }};

    const map = L.map('map').setView([defaultLat, defaultLng], defaultZoom);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '© OpenStreetMap contributors'
    }).addTo(map);

    let marker = null;
    let circle = null;

    // If there's existing coordinates, place marker
    @if(old('latitude') && old('longitude'))
        placeMarker({{ old('latitude') }}, {{ old('longitude') }});
    @endif

    // Function to place marker and circle
    function placeMarker(lat, lng) {
        if (marker) {
            map.removeLayer(marker);
        }
        if (circle) {
            map.removeLayer(circle);
        }

        marker = L.marker([lat, lng], { draggable: true }).addTo(map);

        const radius = document.getElementById('radius').value || 100;
        circle = L.circle([lat, lng], {
            radius: parseInt(radius),
            color: '#7367F0',
            fillColor: '#7367F0',
            fillOpacity: 0.2
        }).addTo(map);

        document.getElementById('latitude').value = lat.toFixed(8);
        document.getElementById('longitude').value = lng.toFixed(8);

        // Update on marker drag
        marker.on('dragend', function(e) {
            const pos = e.target.getLatLng();
            updatePosition(pos.lat, pos.lng);
        });
    }

    // Function to update position
    function updatePosition(lat, lng) {
        document.getElementById('latitude').value = lat.toFixed(8);
        document.getElementById('longitude').value = lng.toFixed(8);

        if (circle) {
            circle.setLatLng([lat, lng]);
        }
    }

    // Click on map to place marker
    map.on('click', function(e) {
        placeMarker(e.latlng.lat, e.latlng.lng);
        map.setView(e.latlng, 15);
    });

    // Update circle radius when radius input changes
    document.getElementById('radius').addEventListener('change', function() {
        if (circle) {
            circle.setRadius(parseInt(this.value));
        }
    });

    // Search location
    document.getElementById('btn_search').addEventListener('click', searchLocation);
    document.getElementById('search_location').addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            e.preventDefault();
            searchLocation();
        }
    });

    function searchLocation() {
        const query = document.getElementById('search_location').value;
        if (!query) return;

        fetch(`https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(query)}`)
            .then(response => response.json())
            .then(data => {
                if (data.length > 0) {
                    const lat = parseFloat(data[0].lat);
                    const lng = parseFloat(data[0].lon);
                    placeMarker(lat, lng);
                    map.setView([lat, lng], 15);

                    // Auto-fill address if empty
                    if (!document.getElementById('address').value) {
                        document.getElementById('address').value = data[0].display_name;
                    }
                } else {
                    alert('Location not found');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('Error searching location');
            });
    }

    // Get current location
    document.getElementById('btn_current_location').addEventListener('click', function() {
        if (!navigator.geolocation) {
            alert('Geolocation is not supported by this browser');
            return;
        }

        // Check if we're on a secure context
        if (location.protocol !== 'https:' && location.hostname !== 'localhost') {
            alert('Geolocation requires HTTPS or localhost.\n\nPlease access via http://localhost instead of IP address, or use the search feature to find your location.');
            return;
        }

        navigator.geolocation.getCurrentPosition(function(position) {
            const lat = position.coords.latitude;
            const lng = position.coords.longitude;
            placeMarker(lat, lng);
            map.setView([lat, lng], 15);
        }, function(error) {
            let message = 'Error getting location: ';
            switch(error.code) {
                case error.PERMISSION_DENIED:
                    message += 'Location permission denied';
                    break;
                case error.POSITION_UNAVAILABLE:
                    message += 'Location information unavailable';
                    break;
                case error.TIMEOUT:
                    message += 'Request timeout';
                    break;
                default:
                    message += error.message;
            }
            alert(message);
        });
    });

    // Extract coordinates from Google Maps link
    document.getElementById('btn_extract_gmaps').addEventListener('click', function() {
        const gmapsLink = document.getElementById('gmaps_link').value.trim();
        if (!gmapsLink) {
            alert('Please paste a Google Maps link first');
            return;
        }

        const coords = extractCoordsFromGMapsLink(gmapsLink);
        if (coords) {
            placeMarker(coords.lat, coords.lng);
            map.setView([coords.lat, coords.lng], 15);
            document.getElementById('gmaps_link').classList.remove('is-invalid');
            document.getElementById('gmaps_link').classList.add('is-valid');
        } else {
            document.getElementById('gmaps_link').classList.remove('is-valid');
            document.getElementById('gmaps_link').classList.add('is-invalid');
            alert('Could not extract coordinates from the link. Please make sure it\'s a valid Google Maps link.');
        }
    });

    // Function to extract coordinates from Google Maps link
    function extractCoordsFromGMapsLink(link) {
        // Pattern 1: https://maps.google.com/?q=-6.2088,106.8456
        let match = link.match(/[?&]q=(-?\d+\.?\d*),(-?\d+\.?\d*)/);
        if (match) {
            return { lat: parseFloat(match[1]), lng: parseFloat(match[2]) };
        }

        // Pattern 2: https://www.google.com/maps/@-6.2088,106.8456,15z
        match = link.match(/@(-?\d+\.?\d*),(-?\d+\.?\d*)/);
        if (match) {
            return { lat: parseFloat(match[1]), lng: parseFloat(match[2]) };
        }

        // Pattern 3: https://www.google.com/maps/place/.../@-6.2088,106.8456
        match = link.match(/\/place\/[^@]*@(-?\d+\.?\d*),(-?\d+\.?\d*)/);
        if (match) {
            return { lat: parseFloat(match[1]), lng: parseFloat(match[2]) };
        }

        // Pattern 4: https://goo.gl/maps/... (shortened link - can't extract directly)
        if (link.includes('goo.gl/maps') || link.includes('maps.app.goo.gl')) {
            alert('Shortened Google Maps links are not supported. Please use the full Google Maps link.\n\nTo get the full link:\n1. Open the location in Google Maps\n2. Click "Share"\n3. Copy the link');
            return null;
        }

        return null;
    }

    // Set location from manual coordinates
    document.getElementById('btn_set_manual_coords').addEventListener('click', function() {
        const lat = parseFloat(document.getElementById('latitude').value);
        const lng = parseFloat(document.getElementById('longitude').value);

        if (isNaN(lat) || isNaN(lng)) {
            alert('Please enter valid latitude and longitude values');
            return;
        }

        if (lat < -90 || lat > 90) {
            alert('Latitude must be between -90 and 90');
            return;
        }

        if (lng < -180 || lng > 180) {
            alert('Longitude must be between -180 and 180');
            return;
        }

        placeMarker(lat, lng);
        map.setView([lat, lng], 15);
    });
</script>
@endpush