@extends('layouts.app')

@section('content')
<div class="container py-5">
    <!-- Page Title -->
    <h1 class="fw-bold text-dark">Property Lists</h1>

    <!-- Success Message -->
    @if(session('success'))
    <div class="alert alert-success alert-dismissible fade show mt-4" role="alert">
        {{ session('success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    @endif

    <form action="{{ route('property-lists.store') }}" method="POST">
        @csrf

        <!-- Name Field -->
        <div class="mb-4">
            <label for="name" class="form-label fw-semibold">List Name</label>
            <input type="text" name="name" id="name" class="form-control" placeholder="Enter your property list name" required>
        </div>

        <div class="row">
            <!-- Filters Section -->
            <div class="col-md-8">
                <!-- Geography Filters -->
                <h4 class="fw-bold text-dark">Geography Filters</h4>
                <div class="bg-primary text-white py-2 px-3 rounded shadow-sm mb-4">
                    <p class="mb-0 fs-6">Please select Geo Filter first.</p>
                </div>

                <div class="row align-items-center mb-4">
                    <div class="col-md-4">
                        <label for="city" class="form-label fw-semibold">City</label>
                        <select name="city" id="city" class="form-select">
                            <option selected>Ignore It</option>
                            <option value="map">Show Map</option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label for="zip" class="form-label fw-semibold">Zip</label>
                        <select name="zip" id="zip" class="form-select">
                            <option selected>Ignore It</option>
                            <option value="map">Show Map</option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label for="geo_area" class="form-label fw-semibold">Geo Area</label>
                        <select name="geo_area" id="geo_area" class="form-select">
                            <option selected>Ignore It</option>
                            <option value="map">Show Map</option>
                        </select>
                    </div>
                </div>

                <!-- Google Map Section -->
                <div class="mb-4">
                    <div id="map" style="width: 100%; height: 400px; border: 1px solid #ccc;"></div>
                </div>

                <!-- Property Type -->
                <h4 class="fw-bold text-dark">Property Type</h4>
                <div class="mb-4">
                    <label class="form-label fw-semibold">Property Type</label>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" name="property_types[]" id="house" value="House">
                        <label class="form-check-label" for="house">House</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" name="property_types[]" id="condo" value="Condo">
                        <label class="form-check-label" for="condo">Condo/Apartment</label>
                    </div>
                </div>

                <!-- Save Button -->
                <div class="d-flex justify-content-end">
                    <button type="submit" class="btn btn-primary">Save List</button>
                </div>
            </div>

            <!-- Matching Properties Table -->
            <div class="col-md-4">
                <h4 class="fw-bold text-dark">Matching Properties</h4>

                <!-- Table -->
                <div class="table-responsive shadow-sm rounded" id="propertiesTableContainer">
                    <table class="table table-hover align-middle mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>City</th>
                                <th>Address</th>
                                <th>Status</th>
                                <th>Exclude</th>
                            </tr>
                        </thead>
                        <tbody id="propertiesTable">
                            <tr>
                                <td colspan="4" class="text-center text-muted">No properties available.</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </form>
</div>

<!-- Include Google Maps -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCBiUC3ab2fOiBfOQGD0VZcdIbmqqlHtq8
&libraries=drawing"></script>
<script>
    let map;
    let polygon;
    const propertiesTable = document.getElementById("propertiesTable");

    function initMap() {
        map = new google.maps.Map(document.getElementById("map"), {
            zoom: 10,
            center: { lat: 37.7749, lng: -122.4194 }, // Example: San Francisco
        });

        const drawingManager = new google.maps.drawing.DrawingManager({
            drawingMode: google.maps.drawing.OverlayType.POLYGON,
            drawingControl: true,
            drawingControlOptions: {
                position: google.maps.ControlPosition.TOP_CENTER,
                drawingModes: ["polygon"],
            },
        });

        google.maps.event.addListener(drawingManager, "overlaycomplete", (event) => {
            if (polygon) {
                polygon.setMap(null); // Remove the previous polygon
            }
            polygon = event.overlay;

            // Fetch properties based on drawn boundaries
            const path = polygon.getPath().getArray();
            const boundaries = path.map((point) => ({
                lat: point.lat(),
                lng: point.lng(),
            }));

            fetchProperties(boundaries);
        });

        drawingManager.setMap(map);
    }

    function fetchProperties(boundaries) {
        fetch("{{ route('property-lists.fetch-properties') }}", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "X-CSRF-TOKEN": "{{ csrf_token() }}",
            },
            body: JSON.stringify({ boundaries }),
        })
        .then((response) => response.json())
        .then((data) => {
            if (data.error) {
                alert(data.error);
                return;
            }

            // Populate the table with properties
            populateTable(data.properties);
        })
        .catch((error) => {
            console.error("Error fetching properties:", error);
            alert("An error occurred while fetching properties. Please try again.");
        });
    }

    function populateTable(properties) {
        propertiesTable.innerHTML = "";

        if (properties.length > 0) {
            properties.forEach((property) => {
                const row = `<tr>
                    <td>${property.city}</td>
                    <td><a href="${property.detailsUrl}" target="_blank">${property.address}</a></td>
                    <td>${property.status}</td>
                    <td><button class="btn btn-danger btn-sm">Exclude</button></td>
                </tr>`;
                propertiesTable.innerHTML += row;
            });
        } else {
            propertiesTable.innerHTML = '<tr><td colspan="4" class="text-center text-muted">No properties available.</td></tr>';
        }
    }

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