@include('Partials.sidebar')

<section class="main_content dashboard_part large_header_bg">
    @include('Partials.header')

    <div class="main_content_iner default_main_contaner_iner">
        <div class="page-body">

            <div class="container-fluid">
                <div class="page-title">
                    <div class="row">
                        <div class="col-sm-6 ps-0"><h3>Edit Location</h3></div>
                        <div class="col-sm-6 pe-0">
                            <ol class="bc">
                                <li>
                                    <a href="/admin/dashboard" class="bc-home"><i class="fas fa-home"></i></a>
                                </li>
                                <li class="bc-sep">›</li>
                                <li>
                                    <a href="/location/dashboard" class="bc-link">Locations</a>
                                </li>
                                <li class="bc-sep">›</li>
                                <li class="bc-active">Edit</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>

            @if(session('success'))
                <div class="container-fluid">
                    <div class="alert alert-success alert-dismissible fade show">
                        <i class="fas fa-check-circle mr-2"></i>{{ session('success') }}
                        <button type="button" class="close" data-dismiss="alert"><span>&times;</span></button>
                    </div>
                </div>
            @endif

            @if($errors->any())
                <div class="container-fluid">
                    <div class="alert alert-danger alert-dismissible fade show">
                        <ul class="mb-0">
                            @foreach($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                        <button type="button" class="close" data-dismiss="alert"><span>&times;</span></button>
                    </div>
                </div>
            @endif

            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12">
                        <div class="location-form" style="width:100%">
                            <div class="location-form-header">
                                <h3>Edit Location</h3>
                            </div>
                            <div class="location-form-body">
                                <form action="{{ route('location.update', $location->id) }}"
                                      method="POST"
                                      enctype="multipart/form-data">
                                    @csrf @method('PUT')

                                    <div class="row">

                                        {{-- Project --}}
                                        <div class="col-xl-4 col-sm-6">
                                            <div class="form-group">
                                                <label class="font-weight-bold">
                                                    Project <span class="text-danger">*</span>
                                                </label>
                                                <select name="project" class="form-control" required>
                                                    <option value="">— Select Project —</option>
                                                    @foreach($projects as $project)
                                                        <option value="{{ $project->id }}"
                                                            {{ $location->project_id == $project->id ? 'selected' : '' }}>
                                                            {{ $project->project_name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>

                                        {{-- Place Name with Autocomplete --}}
                                        <div class="col-xl-4 col-sm-6">
                                            <div class="form-group">
                                                <label class="font-weight-bold">
                                                    Place Name <span class="text-danger">*</span>
                                                </label>
                                                <input type="text"
                                                       name="place_name"
                                                       id="place_name_input"
                                                       value="{{ old('place_name', $location->name) }}"
                                                       class="form-control"
                                                       placeholder="Type a place name to search..."
                                                       autocomplete="off"
                                                       required>
                                                <small class="text-muted">
                                                    <i class="fas fa-search mr-1"></i>
                                                    Start typing — select from suggestions to auto-fill coordinates
                                                </small>
                                            </div>
                                        </div>

                                        {{-- Latitude --}}
                                        <div class="col-xl-4 col-sm-6">
                                            <div class="form-group">
                                                <label class="font-weight-bold">
                                                    Latitude <span class="text-danger">*</span>
                                                </label>
                                                <input type="text"
                                                       id="lat_input"
                                                       name="latitude"
                                                       value="{{ old('latitude', $location->latitude) }}"
                                                       class="form-control"
                                                       placeholder="Auto-filled from map"
                                                       required>
                                            </div>
                                        </div>

                                        {{-- Longitude --}}
                                        <div class="col-xl-4 col-sm-6">
                                            <div class="form-group">
                                                <label class="font-weight-bold">
                                                    Longitude <span class="text-danger">*</span>
                                                </label>
                                                <input type="text"
                                                       id="lng_input"
                                                       name="longitude"
                                                       value="{{ old('longitude', $location->longitude) }}"
                                                       class="form-control"
                                                       placeholder="Auto-filled from map"
                                                       required>
                                            </div>
                                        </div>

                                        {{-- Location Image --}}
                                        <div class="col-xl-4 col-12">
                                            <div class="form-group">
                                                <label class="font-weight-bold">Location Image</label><br>

                                                @if($location->location_image)
                                                    <div class="mb-2">
                                                        <small class="text-muted d-block mb-1">Current:</small>
                                                        <img src="{{ asset('storage/location/' . $location->location_image) }}"
                                                             height="70"
                                                             style="border-radius:6px; border:1px solid #dee2e6;
                                                                    object-fit:contain; background:#f8f9fa;
                                                                    padding:4px;">
                                                    </div>
                                                @endif

                                                <div id="img_preview_box"
                                                     style="display:none; width:120px; height:80px;
                                                            background:#f8f9fa; border:1px solid #dee2e6;
                                                            border-radius:8px; overflow:hidden;
                                                            align-items:center; justify-content:center;
                                                            margin-bottom:8px;">
                                                    <img id="img_preview"
                                                         style="max-width:100%; max-height:100%;
                                                                object-fit:contain;">
                                                </div>

                                                <label for="location_image" class="custom-file-upload">
                                                    <i class="fas fa-cloud-upload-alt"></i>
                                                    {{ $location->location_image ? 'Replace Image' : 'Choose Image' }}
                                                </label>
                                                <input type="file"
                                                       id="location_image"
                                                       name="location_image"
                                                       class="file_input"
                                                       accept=".png,.jpg,.jpeg,.webp,.svg,.gif"
                                                       onchange="previewFile(this)">
                                                <small id="img_status" class="text-muted d-block mt-1"></small>
                                                <small class="text-muted">
                                                    PNG, JPG, SVG — max 10MB
                                                    @if($location->location_image)
                                                        · Leave empty to keep current
                                                    @endif
                                                </small>
                                            </div>
                                        </div>

                                        {{-- Map Picker --}}
                                        <div class="col-12">
                                            <div class="form-group">
                                                <label class="font-weight-bold">
                                                    Adjust on Map
                                                    <small class="text-muted font-weight-normal">
                                                        — type place name above, click map, or drag the marker
                                                    </small>
                                                </label>
                                                <div id="map_picker"
                                                     style="width:100%; height:350px;
                                                            border-radius:10px;
                                                            border:1px solid #dee2e6;
                                                            overflow:hidden;">
                                                </div>
                                            </div>
                                        </div>

                                    </div>

                                    <div class="d-flex mt-2" style="gap:10px;">
                                        <button type="submit" class="btn btn-primary">
                                            <i class="fas fa-save mr-1"></i> Update Location
                                        </button>
                                        <a href="/location/dashboard" class="btn btn-secondary">
                                            <i class="fas fa-times mr-1"></i> Cancel
                                        </a>
                                    </div>

                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</section>

<script>
// ── Image preview with SVG support ────────────
function previewFile(input) {
    if (!input.files || !input.files[0]) return;

    const file     = input.files[0];
    const img      = document.getElementById('img_preview');
    const box      = document.getElementById('img_preview_box');
    const statusEl = document.getElementById('img_status');
    const isSvg    = file.type === 'image/svg+xml' ||
                     file.name.toLowerCase().endsWith('.svg');

    const showPreview = (src) => {
        img.src           = src;
        box.style.display = 'flex';
    };

    const reader = new FileReader();
    if (isSvg) {
        reader.onload = e => {
            const blob = new Blob([e.target.result], { type: 'image/svg+xml;charset=utf-8' });
            showPreview(URL.createObjectURL(blob));
        };
        reader.readAsText(file);
    } else {
        reader.onload = e => showPreview(e.target.result);
        reader.readAsDataURL(file);
    }

    const sizeMB = (file.size / 1024 / 1024).toFixed(1);
    statusEl.className = 'text-success d-block mt-1';
    statusEl.innerHTML = `<i class="fas fa-check-circle mr-1"></i>${file.name} (${sizeMB} MB)`;
}

// ── Map picker ────────────────────────────────
function initMapPicker() {

    // Pre-load with existing coordinates
    const existingLat = {{ $location->latitude }};
    const existingLng = {{ $location->longitude }};
    const startCenter = { lat: existingLat, lng: existingLng };

    const map = new google.maps.Map(document.getElementById('map_picker'), {
        zoom:              15,
        center:            startCenter,
        mapTypeControl:    false,
        streetViewControl: false,
        fullscreenControl: false,
    });

    // Marker pre-placed on existing location, draggable
    let marker = new google.maps.Marker({
        position:  startCenter,
        map:       map,
        draggable: true,
        animation: google.maps.Animation.DROP,
    });

    // ── Helper: update inputs + move marker ───────
    function setLocation(lat, lng) {
        document.getElementById('lat_input').value = parseFloat(lat).toFixed(6);
        document.getElementById('lng_input').value = parseFloat(lng).toFixed(6);

        const pos = { lat: parseFloat(lat), lng: parseFloat(lng) };
        marker.setPosition(pos);
        map.panTo(pos);
        map.setZoom(16);
    }

    // ── Click map to reposition ───────────────────
    map.addListener('click', (e) => {
        setLocation(e.latLng.lat(), e.latLng.lng());
    });

    // ── Drag marker to reposition ─────────────────
    marker.addListener('dragend', (e) => {
        setLocation(e.latLng.lat(), e.latLng.lng());
    });

    // ── Places Autocomplete on place_name field ───
    const placeInput = document.getElementById('place_name_input');

    const autocomplete = new google.maps.places.Autocomplete(placeInput, {
        types: ['establishment', 'geocode'],
    });

    // Bias results toward current map area
    autocomplete.bindTo('bounds', map);

    autocomplete.addListener('place_changed', () => {
        const place = autocomplete.getPlace();

        if (!place.geometry || !place.geometry.location) {
            console.warn('No geometry found for:', place.name);
            return;
        }

        const lat = place.geometry.location.lat();
        const lng = place.geometry.location.lng();

        setLocation(lat, lng);

        // Show name + coords in InfoWindow
        const infoWindow = new google.maps.InfoWindow({
            content: `
                <div style="font-family:sans-serif; padding:4px 2px;">
                    <strong style="font-size:13px;">${place.name}</strong><br>
                    <small style="color:#666;">
                        ${lat.toFixed(6)}, ${lng.toFixed(6)}
                    </small>
                </div>
            `,
        });

        infoWindow.open(map, marker);
    });
}
</script>

<script
    src="https://maps.googleapis.com/maps/api/js?key={{ config('services.google_maps.key') }}&libraries=places&callback=initMapPicker"
    async defer>
</script>

@include('Partials.footer')