@extends('admin.layouts.app')

@section('content')

<div class="container">
    <div class="page-inner">

        <div class="d-flex align-items-left align-items-md-center flex-column flex-md-row pt-2 pb-4">
            <div>
                <h6 class="op-7 mb-2">
                    Dashboard / Projects / Edit
                </h6>
            </div>

            <div class="ms-md-auto py-2 py-md-0">
                {{-- FIXED BACK BUTTON --}}
                <a href="{{ route('admin.projects.index') }}" class="btn btn-primary btn-round">
                    ← Back
                </a>
            </div>
        </div>


        {{-- SUCCESS MESSAGE --}}
        @if(session('success'))
            <div class="alert alert-success">
                {{ session('success') }}
            </div>
        @endif

        <div class="container py-4">
            <h3 class="mb-4">Edit Project</h3>

            <form action="{{ route('admin.projects.update', $project->id) }}" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')

                {{-- TITLE --}}
                <div class="mb-3">
                    <label for="title" class="form-label">Project Title</label>
                    <input 
                        type="text"
                        name="title"
                        id="title"
                        class="form-control"
                        value="{{ old('title', $project->title) }}"
                        required
                    >
                </div>

                {{-- DESCRIPTION --}}
                <div class="mb-3">
                    <label for="description" class="form-label">Project Description</label>
                    <textarea 
                        name="description"
                        id="description"
                        rows="4"
                        class="form-control"
                        required
                    >{{ old('description', $project->description) }}</textarea>
                </div>

                {{-- IMAGE --}}
                <div class="mb-3">
                    @if($project->image)
                        <img src="{{ asset('assets/uploads/' . $project->image) }}" width="150" class="mb-2">
                    @endif

                    <input type="file" name="image" class="form-control">
                </div>

                <!-- LOCATION -->
<div class="mb-3">
    <label class="form-label">Location</label>
    <input type="text" name="location" class="form-control"
        value="{{ old('location', $project->location) }}" required>
</div>

<div class="mb-3">
    <label class="form-label">Select Location on Map</label>
    <div id="map" style="height: 400px; border-radius:10px;"></div>
</div>

<!-- LATITUDE -->

    <input type="hidden" id="latitude" name="latitude" value="{{ old('latitude', $project->latitude) }}">



    <input type="hidden" id="longitude" name="longitude" value="{{ old('longitude', $project->longitude) }}">




<!-- TYPE -->
<div class="mb-3">
    <label class="form-label">Map Type</label>
    <select name="type" class="form-control">
        <option value="project" {{ $project->type == 'project' ? 'selected' : '' }}>Project</option>
        <option value="plant" {{ $project->type == 'plant' ? 'selected' : '' }}>Plant</option>
        <option value="head_office" {{ $project->type == 'head_office' ? 'selected' : '' }}>Head Office</option>
    </select>
</div>

<!-- STATUS -->
<div class="mb-3">
    <label class="form-label">Status</label>
    <select name="status" class="form-control">
        <option value="completed" {{ $project->status == 'completed' ? 'selected' : '' }}>Completed</option>
        <option value="ongoing" {{ $project->status == 'ongoing' ? 'selected' : '' }}>Ongoing</option>
    </select>
</div>

                {{-- BUTTON --}}
                <button type="submit" class="btn btn-lg btn-primary">
                    Update
                </button>

            </form>
        </div>

    </div>
</div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBlg6-nFcxlCCH_IOuU0uqx9SaWKh7px6Q&&libraries=places"></script>
<script>

let map;
let marker;

function initMap() {

    // ✅ USE EXISTING PROJECT LOCATION
    const existingLat = parseFloat(document.getElementById("latitude").value) || 20.5937;
    const existingLng = parseFloat(document.getElementById("longitude").value) || 78.9629;

    const currentLocation = { lat: existingLat, lng: existingLng };

    map = new google.maps.Map(document.getElementById("map"), {
        zoom: existingLat ? 10 : 5,
        center: currentLocation,
    });

    marker = new google.maps.Marker({
        position: currentLocation,
        map: map,
        draggable: true,
    });

    // Click on map
    map.addListener("click", function (event) {
        placeMarker(event.latLng);
    });

    // Drag marker
    marker.addListener("dragend", function () {
        updateInputs(marker.getPosition());
    });
}

function placeMarker(location) {
    marker.setPosition(location);
    updateInputs(location);
}

function updateInputs(location) {
    document.getElementById("latitude").value = location.lat();
    document.getElementById("longitude").value = location.lng();

    const geocoder = new google.maps.Geocoder();
    geocoder.geocode({ location: location }, function (results, status) {
        if (status === "OK" && results[0]) {
            document.querySelector("input[name='location']").value = results[0].formatted_address;
        }
    });
}

window.onload = initMap;
</script>
@endsection