@extends('provider.layout')
@section('title', 'Post a New Ad')

@push('styles')
<style>
    .file-upload {
        border: 2px dashed rgba(20,184,166,0.3);
        border-radius: var(--radius-xl);
        padding: 2.5rem 1.5rem;
        text-align: center;
        background: rgba(20,184,166,0.02);
        cursor: pointer;
        position: relative;
        transition: all var(--transition-fast);
    }
    .file-upload:hover {
        background: rgba(20,184,166,0.05);
        border-color: rgba(20,184,166,0.5);
    }
    .file-upload input[type="file"] {
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        opacity: 0;
        cursor: pointer;
    }
    .image-preview-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 1rem;
        margin-top: 1.25rem;
    }
    .image-preview-item {
        aspect-ratio: 1;
        border-radius: var(--radius-lg);
        overflow: hidden;
        border: 1.5px solid var(--border-default);
        position: relative;
    }
    .image-preview-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
</style>
@endpush

@section('content')
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem">
    <h1 style="font-size:1.5rem;font-weight:800;color:var(--text-primary);letter-spacing:-0.02em">Post a New Ad</h1>
    <a href="{{ route('provider.classified.listings.index') }}" class="btn btn-secondary">
        <i data-lucide="arrow-left" style="width:18px;height:18px"></i> Back to Ads
    </a>
</div>

<div style="max-width:720px;">
    <form action="{{ route('provider.classified.listings.store') }}" method="POST" enctype="multipart/form-data" id="create-listing-form">
        @csrf

        <div class="card" style="padding:1.5rem;margin-bottom:1.5rem">
            <h3 style="font-weight:600;margin-bottom:1.25rem;font-size:1.125rem">
                <i data-lucide="file-text" style="width:18px;height:18px;display:inline;vertical-align:-3px"></i>
                Listing Details
            </h3>

            <div class="form-group">
                <label for="title" class="form-label">Title *</label>
                <input type="text" name="title" id="title" class="form-input"
                       placeholder="e.g. iPhone 15 Pro Max - Like New"
                       value="{{ old('title') }}" required>
                @error('title')
                    <span class="form-error">{{ $message }}</span>
                @enderror
            </div>

            <div class="form-group">
                <label for="category_id" class="form-label">Category *</label>
                <select name="category_id" id="category_id" class="form-select" required>
                    <option value="">Select a category</option>
                    @foreach($categories as $cat)
                        <optgroup label="{{ $cat->name }}">
                            <option value="{{ $cat->id }}" {{ old('category_id') == $cat->id ? 'selected' : '' }}>{{ $cat->name }}</option>
                            @foreach($cat->children as $child)
                                <option value="{{ $child->id }}" {{ old('category_id') == $child->id ? 'selected' : '' }}>&nbsp;&nbsp;{{ $child->name }}</option>
                            @endforeach
                        </optgroup>
                    @endforeach
                </select>
                @error('category_id')
                    <span class="form-error">{{ $message }}</span>
                @enderror
            </div>

            <div class="form-group">
                <label for="description" class="form-label">Description *</label>
                <textarea name="description" id="description" class="form-textarea" rows="5"
                          placeholder="Describe your item in detail — condition, features, reason for selling..."
                          required>{{ old('description') }}</textarea>
                @error('description')
                    <span class="form-error">{{ $message }}</span>
                @enderror
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label for="price" class="form-label">Price ({{ auth()->user()->business_currency?->code ?? \App\Helpers\CurrencyHelper::getBaseCurrencyCode() }})</label>
                    <input type="number" name="price" id="price" class="form-input"
                           placeholder="0.00" min="0" step="0.01"
                           value="{{ old('price') }}">
                    @error('price')
                        <span class="form-error">{{ $message }}</span>
                    @enderror
                </div>

                @php
                    $defaultLocation = $provider?->address ?: ($provider?->city ?? '');
                    $defaultLat      = $provider?->lat ?? $provider?->latitude ?? '';
                    $defaultLng      = $provider?->lng ?? $provider?->longitude ?? '';
                    $defaultPhone    = $provider?->phone ?: (auth()->user()->phone ?? '');
                @endphp
                <div class="form-group">
                    <label for="location" class="form-label">Location</label>
                    <div style="display:flex;gap:0.5rem">
                        <input type="text" name="location" id="location" class="form-input"
                               placeholder="e.g. Mumbai, Maharashtra"
                               value="{{ old('location', $defaultLocation) }}" style="flex-grow:1">
                        <button type="button" class="btn btn-secondary" onclick="getCurrentLocation()" title="Use Current Location" style="padding:0 0.75rem">
                            <i data-lucide="map-pin" style="width:18px;height:18px;"></i>
                        </button>
                    </div>
                    <input type="hidden" name="latitude" id="latitude" value="{{ old('latitude', $defaultLat) }}">
                    <input type="hidden" name="longitude" id="longitude" value="{{ old('longitude', $defaultLng) }}">
                    @error('location')
                        <span class="form-error">{{ $message }}</span>
                    @enderror
                </div>
            </div>

            <div class="form-group">
                <label for="phone" class="form-label">
                    Contact Phone Number
                </label>
                <div style="position:relative">
                    <i data-lucide="phone" style="position:absolute;left:0.875rem;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--text-muted);pointer-events:none"></i>
                    <input type="tel" name="phone" id="phone" class="form-input"
                           placeholder="+91 98765 43210"
                           style="padding-left:2.5rem"
                           value="{{ old('phone', $defaultPhone) }}">
                </div>
                @error('phone')
                    <span class="form-error">{{ $message }}</span>
                @enderror
            </div>
        </div>

        <div class="card" style="padding:1.5rem;margin-bottom:1.5rem">
            <h3 style="font-weight:600;margin-bottom:1.25rem;font-size:1.125rem">
                <i data-lucide="camera" style="width:18px;height:18px;display:inline;vertical-align:-3px"></i>
                Photos
            </h3>

            <div class="form-group">
                <div class="file-upload" id="file-upload-zone">
                    <input type="file" name="images[]" id="images" multiple accept="image/*">
                    <div style="pointer-events:none">
                        <i data-lucide="upload-cloud" style="width:32px;height:32px;margin:0 auto 0.75rem;display:block;color:var(--brand-400)"></i>
                        <p class="file-upload-text">
                            <strong>Click to upload</strong> or drag and drop<br>
                            <span style="font-size:0.8125rem">PNG, JPG, WEBP — up to 5 images, 2MB each</span>
                        </p>
                    </div>
                </div>
                <div class="image-preview-grid" id="image-preview-grid"></div>
                @error('images')
                    <span class="form-error">{{ $message }}</span>
                @enderror
                @error('images.*')
                    <span class="form-error">{{ $message }}</span>
                @enderror
            </div>
        </div>

        <div style="display:flex;gap:0.75rem;justify-content:flex-end">
            <a href="{{ route('provider.classified.listings.index') }}" class="btn btn-secondary">Cancel</a>
            <button type="submit" class="btn btn-primary btn-lg" id="submit-listing-btn">
                <i data-lucide="check-circle" style="width:18px;height:18px"></i>
                Publish Ad
            </button>
        </div>
    </form>
</div>

@push('scripts')
<script>
    window.gm_authFailure = function() {
        console.warn("Google Maps API authentication failed. Live location search fallback activated.");
    };

    let searchTimeout = null;

    function initMap() {
        const input = document.getElementById('location');
        if (!input) return;

        setupLocationAutocomplete(input);

        if (typeof google !== 'undefined' && google.maps && google.maps.places) {
            try {
                const autocomplete = new google.maps.places.Autocomplete(input);
                autocomplete.addListener('place_changed', function() {
                    const place = autocomplete.getPlace();
                    if (!place || !place.geometry) return;
                    document.getElementById('latitude').value = place.geometry.location.lat();
                    document.getElementById('longitude').value = place.geometry.location.lng();
                });
            } catch(e) {
                console.warn("Google Places Autocomplete exception:", e);
            }
        }
    }

    function setupLocationAutocomplete(input) {
        let listContainer = document.getElementById('location-suggestions-list');
        if (!listContainer) {
            listContainer = document.createElement('div');
            listContainer.id = 'location-suggestions-list';
            listContainer.style.cssText = 'position:absolute;z-index:1000;background:white;border:1px solid #cbd5e1;border-radius:0.5rem;box-shadow:0 10px 15px -3px rgba(0,0,0,0.1);max-height:200px;overflow-y:auto;width:100%;top:100%;left:0;display:none;margin-top:4px';
            input.parentElement.style.position = 'relative';
            input.parentElement.appendChild(listContainer);
        }

        input.addEventListener('input', function() {
            const query = this.value.trim();
            if (query.length < 3) {
                listContainer.style.display = 'none';
                return;
            }

            clearTimeout(searchTimeout);
            searchTimeout = setTimeout(() => {
                fetch(`https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(query)}&limit=5`)
                    .then(res => res.json())
                    .then(data => {
                        listContainer.innerHTML = '';
                        if (data && data.length > 0) {
                            data.forEach(item => {
                                const div = document.createElement('div');
                                div.style.cssText = 'padding:8px 12px;cursor:pointer;font-size:0.875rem;border-bottom:1px solid #f1f5f9;color:#334155';
                                div.textContent = item.display_name;
                                div.addEventListener('mouseover', () => div.style.background = '#f8fafc');
                                div.addEventListener('mouseout', () => div.style.background = 'white');
                                div.addEventListener('click', () => {
                                    input.value = item.display_name;
                                    document.getElementById('latitude').value = item.lat;
                                    document.getElementById('longitude').value = item.lon;
                                    listContainer.style.display = 'none';
                                });
                                listContainer.appendChild(div);
                            });
                            listContainer.style.display = 'block';
                        } else {
                            listContainer.style.display = 'none';
                        }
                    })
                    .catch(() => listContainer.style.display = 'none');
            }, 300);
        });

        document.addEventListener('click', function(e) {
            if (!input.contains(e.target) && !listContainer.contains(e.target)) {
                listContainer.style.display = 'none';
            }
        });
    }

    function getCurrentLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
                const lat = position.coords.latitude;
                const lng = position.coords.longitude;
                document.getElementById('latitude').value = lat;
                document.getElementById('longitude').value = lng;
                
                fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${lat}&lon=${lng}`)
                    .then(res => res.json())
                    .then(data => {
                        if (data && data.display_name) {
                            document.getElementById('location').value = data.display_name;
                        } else {
                            document.getElementById('location').value = lat.toFixed(4) + ', ' + lng.toFixed(4);
                        }
                    })
                    .catch(() => {
                        document.getElementById('location').value = lat.toFixed(4) + ', ' + lng.toFixed(4);
                    });
            }, function() {
                alert("Unable to retrieve your location. Please check browser location permissions.");
            });
        } else {
            alert("Geolocation is not supported by this browser.");
        }
    }

    function autoDetectLocationSilent() {
        const locationInput = document.getElementById('location');
        if (locationInput && !locationInput.value.trim()) {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function(position) {
                    const lat = position.coords.latitude;
                    const lng = position.coords.longitude;
                    document.getElementById('latitude').value = lat;
                    document.getElementById('longitude').value = lng;
                    
                    fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${lat}&lon=${lng}`)
                        .then(res => res.json())
                        .then(data => {
                            if (data && data.display_name && !locationInput.value.trim()) {
                                locationInput.value = data.display_name;
                            }
                        })
                        .catch(() => {});
                }, function(err) {
                    // Silently fail so field remains empty for manual entry
                }, { timeout: 6000 });
            }
        }
    }

    document.addEventListener('DOMContentLoaded', function() {
        initMap();
        autoDetectLocationSilent();
    });

    const fileInput = document.getElementById('images');
    const previewGrid = document.getElementById('image-preview-grid');

    fileInput?.addEventListener('change', function () {
        previewGrid.innerHTML = '';
        const files = Array.from(this.files).slice(0, 5);
        files.forEach((file, idx) => {
            const reader = new FileReader();
            reader.onload = function (e) {
                const div = document.createElement('div');
                div.className = 'image-preview-item';
                div.innerHTML = `<img src="${e.target.result}" alt="Preview ${idx + 1}">`;
                previewGrid.appendChild(div);
                lucide.createIcons();
            };
            reader.readAsDataURL(file);
        });
    });
</script>
@if(!empty(\App\Models\Setting::getValue('google_api_key')))
<script src="https://maps.googleapis.com/maps/api/js?key={{ \App\Models\Setting::getValue('google_api_key') }}&libraries=places&callback=initMap" async defer></script>
@endif
@endpush
@endsection