@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>Add Location</h3></div>
                        <div class="col-sm-6 pe-0">
                            <ol class="bc">
                                <li>
                                    <a href="/{{ $tenantSlug }}/admin/dashboard" class="bc-home"><i class="fas fa-home"></i></a>
                                </li>
                                <li class="bc-sep">›</li>
                                <li>
                                    <a href="/{{ $tenantSlug }}/admin/location/dashboard" class="bc-link">Locations</a>
                                </li>
                                <li class="bc-sep">›</li>
                                <li class="bc-active">Add</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>Add Location</h3>
                            </div>
                            <div class="location-form-body">
                                <form action="/{{ $tenantSlug }}/admin/location/store"
                                      method="POST"
                                      enctype="multipart/form-data">
                                    @csrf
                                    <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 }}"
                                                            {{ old('project') == $project->id ? 'selected' : '' }}>
                                                            {{ $project->project_name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>

                                        {{-- Place Name --}}
                                        <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') }}"
                                                       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') }}"
                                                       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') }}"
                                                       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
                                                    <small class="text-muted font-weight-normal">
                                                        (optional)
                                                    </small>
                                                </label><br>

                                                <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> 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</small>
                                            </div>
                                        </div>

                                        {{-- Map Picker --}}
                                        <div class="col-12">
                                            <div class="form-group">
                                                <label class="font-weight-bold">
                                                    Pick on Map
                                                    <small class="text-muted font-weight-normal">
                                                        (click map to set lat/lng automatically)
                                                    </small>
                                                </label>
                                                <div id="map_picker"
                                                     style="width:100%; height:300px;
                                                            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-plus mr-1"></i> Add Location
                                        </button>
                                        <a href="/{{ $tenantSlug }}/admin/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>
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)`;
}

function initMapPicker() {
    const defaultCenter = { lat: 13.0827, lng: 80.2707 };

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

    const initialLat = parseFloat(document.getElementById('lat_input')?.value) || defaultCenter.lat;
    const initialLng = parseFloat(document.getElementById('lng_input')?.value) || defaultCenter.lng;

    let marker = new google.maps.Marker({
        position:  { lat: initialLat, lng: initialLng },
        map:       map,
        draggable: true,
        animation: google.maps.Animation.DROP,
    });

    if (document.getElementById('lat_input')?.value) {
        map.setCenter({ lat: initialLat, lng: initialLng });
        map.setZoom(15);
    }

    function setLocation(lat, lng) {
        const latEl = document.getElementById('lat_input') ||
                      document.querySelector('input[name="latitude"]');
        const lngEl = document.getElementById('lng_input') ||
                      document.querySelector('input[name="longitude"]');

        latEl.value = parseFloat(lat).toFixed(6);
        lngEl.value = parseFloat(lng).toFixed(6);

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

    map.addListener('click', (e) => {
        setLocation(e.latLng.lat(), e.latLng.lng());
    });

    marker.addListener('dragend', (e) => {
        setLocation(e.latLng.lat(), e.latLng.lng());
    });

    const placeInput = document.querySelector('input[name="place_name"]');

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

        autocomplete.bindTo('bounds', map);

        const infoWindow = new google.maps.InfoWindow();

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

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

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

            setLocation(lat, lng);

            infoWindow.close();
            infoWindow.setContent(`
                <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);
        });

        placeInput.addEventListener('input', () => {
            infoWindow.close();
        });
    }
}
</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')