@extends('layouts.app')

@section('title', 'Edit 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>Edit 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.update', $branch) }}" method="POST">
                @csrf
                @method('PUT')
                <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', $branch->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', $branch->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', $branch->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', $branch->radius) }}" 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', $branch->status) == '1' ? 'selected' : '' }}>Active</option>
                                        <option value="0" {{ old('status', $branch->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">
                                <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 or click on the map to set location</small>
                            </div>

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

                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="latitude" class="form-label">Latitude</label>
                                    <input type="text" class="form-control @error('latitude') is-invalid @enderror" id="latitude" name="latitude" value="{{ old('latitude', $branch->latitude) }}" readonly>
                                    @error('latitude')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label for="longitude" class="form-label">Longitude</label>
                                    <input type="text" class="form-control @error('longitude') is-invalid @enderror" id="longitude" name="longitude" value="{{ old('longitude', $branch->longitude) }}" readonly>
                                    @error('longitude')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </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> Update 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 with existing coordinates or default
    const defaultLat = {{ old('latitude', $branch->latitude ?? -6.2088) }};
    const defaultLng = {{ old('longitude', $branch->longitude ?? 106.8456) }};
    const hasCoordinates = {{ ($branch->latitude && $branch->longitude) ? 'true' : 'false' }};
    const defaultZoom = hasCoordinates ? 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($branch->latitude && $branch->longitude)
        placeMarker({{ $branch->latitude }}, {{ $branch->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);
        });
    });
</script>
@endpush