@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 / Create
                </h6>
            </div>

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

        {{-- FORM --}}
        <form
            action="{{ route('admin.projects.store') }}"
            method="POST"
            enctype="multipart/form-data"
        >
            @csrf

            {{-- 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') }}"
                    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') }}</textarea>
            </div>

            {{-- IMAGE --}}
            <div class="mb-3">
                <label for="image" class="form-label">Project Image</label>
                <input
                    type="file"
                    name="image"
                    id="image"
                    class="form-control"
                    accept="image/*"
                    required
                >
            </div>

            <!-- LOCATION -->
<!-- LOCATION -->
<div class="mb-3">
    <label class="form-label">Location</label>
    <input type="text" id="location" name="location" class="form-control" required>
</div>

<!-- LATITUDE -->
<input type="hidden" id="latitude" name="latitude">

<!-- LONGITUDE -->
<input type="hidden" id="longitude" name="longitude">

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

<!-- TYPE -->
<div class="mb-3">
    <label class="form-label">Map Type</label>
    <select name="type" class="form-control">
        <option value="project">Project</option>
        <option value="plant">Plant</option>
        <option value="head_office">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">Completed</option>
        <option value="ongoing">Ongoing</option>
    </select>
</div>

            {{-- BUTTON --}}
            <button type="submit" class="btn btn-primary">
                Upload Project
            </button>

        </form>

    </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() {
    const defaultLocation = { lat: 20.5937, lng: 78.9629 }; // India center

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

    marker = new google.maps.Marker({
        position: defaultLocation,
        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();

    // Reverse geocode (optional)
    const geocoder = new google.maps.Geocoder();
    geocoder.geocode({ location: location }, function (results, status) {
        if (status === "OK" && results[0]) {
            document.getElementById("location").value = results[0].formatted_address;
        }
    });
}

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