@extends('admin.layout.master')

@section('title', __('admin.add_rental_company'))
@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">{{ __('admin.add_rental_company') }}</h5>
                    <a href="{{ route('admin.rental-companies.index') }}" class="btn btn-secondary">
                        <i class="ti ti-arrow-left"></i> {{ __('admin.back_to_rental_companies') }}
                    </a>
                </div>
                <div class="card-body">
                    <form action="{{ route('admin.rental-companies.store') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        
                        <!-- Name Fields -->
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="name_ar" class="form-label">{{ __('admin.name_ar') }} *</label>
                                    <input type="text" class="form-control @error('name.ar') is-invalid @enderror" 
                                           id="name_ar" name="name[ar]" value="{{ old('name.ar') }}" required>
                                    @error('name.ar')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="name_en" class="form-label">{{ __('admin.name_en') }} *</label>
                                    <input type="text" class="form-control @error('name.en') is-invalid @enderror" 
                                           id="name_en" name="name[en]" value="{{ old('name.en') }}" required>
                                    @error('name.en')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Description Fields -->
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="description_ar" class="form-label">{{ __('admin.description_ar') }}</label>
                                    <textarea class="form-control @error('description.ar') is-invalid @enderror" 
                                              id="description_ar" name="description[ar]" rows="3">{{ old('description.ar') }}</textarea>
                                    @error('description.ar')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="description_en" class="form-label">{{ __('admin.description_en') }}</label>
                                    <textarea class="form-control @error('description.en') is-invalid @enderror" 
                                              id="description_en" name="description[en]" rows="3">{{ old('description.en') }}</textarea>
                                    @error('description.en')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Contact Information -->
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="phone" class="form-label">{{ __('admin.phone') }}</label>
                                    <input type="text" class="form-control @error('phone') is-invalid @enderror" 
                                           id="phone" name="phone" value="{{ old('phone') }}">
                                    @error('phone')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="email" class="form-label">{{ __('admin.email') }}</label>
                                    <input type="email" class="form-control @error('email') is-invalid @enderror" 
                                           id="email" name="email" value="{{ old('email') }}">
                                    @error('email')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Password -->
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="password" class="form-label">{{ __('admin.password') }}</label>
                                    <input type="password" class="form-control @error('password') is-invalid @enderror" 
                                           id="password" name="password" value="{{ old('password') }}">
                                    @error('password')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="status" class="form-label">{{ __('admin.status') }} *</label>
                                    <select class="form-select @error('status') is-invalid @enderror" id="status" name="status" required>
                                        <option value="active" {{ old('status') == 'active' ? 'selected' : '' }}>{{ __('admin.active') }}</option>
                                        <option value="inactive" {{ old('status') == 'inactive' ? 'selected' : '' }}>{{ __('admin.inactive') }}</option>
                                    </select>
                                    @error('status')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Address and Location -->
                        <div class="row">
                            <div class="col-md-12">
                                <div class="mb-3">
                                    <label for="address" class="form-label">{{ __('admin.address') }}</label>
                                    <input type="text" class="form-control @error('address') is-invalid @enderror" 
                                           id="address" name="address" value="{{ old('address') }}" placeholder="{{ __('admin.search_address') }}">
                                    @error('address')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="latitude" class="form-label">{{ __('admin.latitude') }}</label>
                                    <input type="number" step="any" class="form-control @error('latitude') is-invalid @enderror" 
                                           id="latitude" name="latitude" value="{{ old('latitude') }}" readonly>
                                    @error('latitude')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="longitude" class="form-label">{{ __('admin.longitude') }}</label>
                                    <input type="number" step="any" class="form-control @error('longitude') is-invalid @enderror" 
                                           id="longitude" name="longitude" value="{{ old('longitude') }}" readonly>
                                    @error('longitude')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label class="form-label">&nbsp;</label>
                                    <div>
                                        <button type="button" class="btn btn-info" id="getLocation">
                                            <i class="ti ti-map-pin"></i> {{ __('admin.get_current_location') }}
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Map -->
                        <div class="row">
                            <div class="col-md-12">
                                <div class="mb-3">
                                    <label class="form-label">{{ __('admin.map') }}</label>
                                    <div id="map" style="height: 400px; width: 100%; border: 2px solid #ddd; border-radius: 8px; background-color: #f8f9fa;"></div>
                                </div>
                            </div>
                        </div>

                        <!-- Image Upload -->
                        <div class="row">
                            <div class="col-md-12">
                                <div class="mb-3">
                                    <label for="image" class="form-label">{{ __('admin.image') }}</label>
                                    <input type="file" class="form-control @error('image') is-invalid @enderror" 
                                           id="image" name="image" accept="image/*">
                                    @error('image')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <small class="form-text text-muted">{{ __('admin.image_help') }}</small>
                                </div>
                            </div>
                        </div>

                        <!-- Submit Buttons -->
                        <div class="row">
                            <div class="col-12">
                                <div class="d-flex justify-content-end gap-2">
                                    <a href="{{ route('admin.rental-companies.index') }}" class="btn btn-secondary">
                                        {{ __('admin.cancel') }}
                                    </a>
                                    <button type="submit" class="btn btn-primary">
                                        <i class="ti ti-save"></i> {{ __('admin.save') }}
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@push('styles')
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css"/>
<link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css" />
<style>
    #map {
        height: 400px;
        width: 100%;
        border: 2px solid #ddd;
        border-radius: 8px;
        background-color: #f8f9fa;
        z-index: 1 !important;
    }
    .leaflet-control-geocoder {
        z-index: 2 !important;
        position: absolute;
        top: 10px;
        right: 10px;
    }
</style>
@endpush

@push('scripts')
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
<script>
let map, marker;
const ORS_API_KEY = "5b3ce3597851110001cf62480944f7f4d0b74e9c8161c73f2169e61f"; // ⚠️ استبدل هذا بالمفتاح الخاص بك

function updateCoordinates(lat, lng) {
    document.getElementById('latitude').value = lat.toFixed(6);
    document.getElementById('longitude').value = lng.toFixed(6);
}

function reverseGeocode(lat, lng, callback) {
    const url = `https://api.openrouteservice.org/geocode/reverse?api_key=${ORS_API_KEY}&point.lat=${lat}&point.lon=${lng}&lang={{ app()->getLocale() }}`;
    
    fetch(url)
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.json();
        })
        .then(data => {
            if (data.features && data.features.length > 0) {
                const address = data.features[0].properties.label;
                callback(address);
            } else {
                callback('{{ __("admin.no_address_found") }}');
            }
        })
        .catch(error => {
            console.error('Reverse Geocoding failed:', error);
            callback('{{ __("admin.no_address_found") }}');
        });
}

function getCurrentLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
            (position) => {
                const lat = position.coords.latitude;
                const lng = position.coords.longitude;
                const pos = [lat, lng];
                
                map.setView(pos, 15);
                marker.setLatLng(pos);
                updateCoordinates(lat, lng);
                
                reverseGeocode(lat, lng, (address) => {
                    document.getElementById('address').value = address;
                });
            },
            () => {
                alert('{{ __("admin.geolocation_failed") }}');
            }
        );
    } else {
        alert('{{ __("admin.geolocation_not_supported") }}');
    }
}

document.addEventListener("DOMContentLoaded", function() {
    const defaultLocation = [24.7136, 46.6753]; // الرياض
    const initialLat = parseFloat(document.getElementById('latitude').value) || defaultLocation[0];
    const initialLng = parseFloat(document.getElementById('longitude').value) || defaultLocation[1];

    map = L.map('map').setView([initialLat, initialLng], 13);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/">OSM</a> contributors'
    }).addTo(map);

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

    updateCoordinates(initialLat, initialLng);
    reverseGeocode(initialLat, initialLng, (address) => {
        document.getElementById('address').value = address;
    });

    marker.on('dragend', function(e) {
        const pos = e.target.getLatLng();
        updateCoordinates(pos.lat, pos.lng);
        reverseGeocode(pos.lat, pos.lng, (address) => {
            document.getElementById('address').value = address;
        });
    });

    map.on('click', function(e) {
        marker.setLatLng(e.latlng);
        updateCoordinates(e.latlng.lat, e.latlng.lng);
        reverseGeocode(e.latlng.lat, e.latlng.lng, (address) => {
            document.getElementById('address').value = address;
        });
    });
    
    // إعداد Geocoder مخصص لـ OpenRouteService
    L.Control.Geocoder.openrouteservice = function(apiKey) {
        return {
            geocode: function(query, cb) {
                const url = `https://api.openrouteservice.org/geocode/search?api_key=${apiKey}&text=${encodeURIComponent(query)}&size=5&lang={{ app()->getLocale() }}`;
                fetch(url)
                    .then(response => response.json())
                    .then(data => {
                        const results = data.features.map(f => ({
                            name: f.properties.label,
                            center: L.latLng(f.geometry.coordinates[1], f.geometry.coordinates[0]),
                            bbox: f.bbox ? L.latLngBounds([f.bbox[1], f.bbox[0]], [f.bbox[3], f.bbox[2]]) : null
                        }));
                        cb(results);
                    })
                    .catch(() => cb([]));
            },
            reverse: function(location, scale, cb) {
                const url = `https://api.openrouteservice.org/geocode/reverse?api_key=${apiKey}&point.lat=${location.lat}&point.lon=${location.lng}&lang={{ app()->getLocale() }}`;
                fetch(url)
                    .then(response => response.json())
                    .then(data => {
                        if (data.features && data.features.length > 0) {
                            cb([{
                                name: data.features[0].properties.label,
                                center: location
                            }]);
                        } else {
                            cb([]);
                        }
                    })
                    .catch(() => cb([]));
            }
        };
    };

    // إضافة شريط البحث
    L.Control.geocoder({
        placeholder: '{{ __("admin.search_address") }}',
        position: 'topright',
        geocoder: L.Control.Geocoder.openrouteservice(ORS_API_KEY)
    }).on('markgeocode', function(e) {
        const latlng = e.geocode.center;
        map.setView(latlng, 16);
        marker.setLatLng(latlng);
        updateCoordinates(latlng.lat, latlng.lng);
        document.getElementById('address').value = e.geocode.name;
    }).addTo(map);

    // ربط زر تحديد الموقع
    document.getElementById('getLocation').addEventListener('click', getCurrentLocation);
});
</script>
@endpush

@endsection