@extends('layouts.tab')
@section('planner_content')
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <style>
        #map {
            height: 600px;
            width: 100%;
        }
    </style>

    <div class="row">
        <!-- Locations List -->
        <div class="col-md-5">
            <div class="d-flex justify-content-between align-items-center my-4">
                <h4>Manage Locations</h4>
                <button class="btn btn-primary" data-bs-toggle="offcanvas" data-bs-target="#addLocationCanvas">Add</button>
            </div>

            <!-- Location List -->
            <ul class="list-unstyled">
                @forelse($locations as $location)
                    <li class="mb-3 p-3 shadow-sm rounded d-flex justify-content-between align-items-start bg-white">
                        <div class="d-flex align-items-start">
                            <i class="ri-map-pin-line text-primary fs-4 me-3"></i>
                            <div>
                                <h6 class="mb-0 fw-semibold"> <span
                                        class="mdi mdi-map-marker-radius btn-outline-warning"></span> {{ $location->name }}</h6>
                                <hr>
                                <small class="text-muted">{{ $location->latitude }}, {{ $location->longitude }}</small>
                            </div>
                        </div>
                        <div class="ms-3">
                            <button class="btn btn-sm btn-outline-warning me-1" data-bs-toggle="modal"
                                data-bs-target="#editLocationModal{{ $location->id }}">
                                Edit
                            </button>
                            <form action="{{ route('locations.destroy', $location->id) }}" method="POST" class="d-inline">
                                @csrf
                                @method('DELETE')
                                <button onclick="return confirm('Delete this location?')" class="btn btn-sm btn-outline-danger">
                                    Delete
                                </button>
                            </form>
                        </div>
                    </li>

                    <!-- Edit Modal -->
                    <div class="modal fade" id="editLocationModal{{ $location->id }}" tabindex="-1">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <form action="{{ route('locations.update', $location->id) }}" method="POST">
                                    @csrf
                                    <div class="modal-header">
                                        <h5 class="modal-title">Edit Location</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                    </div>
                                    <div class="modal-body">
                                        <input type="text" name="name" value="{{ $location->name }}" class="form-control mb-2"
                                            required>
                                        <input type="text" name="latitude" value="{{ $location->latitude }}"
                                            class="form-control mb-2" placeholder="Latitude">
                                        <input type="text" name="longitude" value="{{ $location->longitude }}"
                                            class="form-control" placeholder="Longitude">
                                    </div>
                                    <div class="modal-footer">
                                        <button type="submit" class="btn btn-primary">Update</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                @empty
                    <li class="text-center text-muted">No locations found.</li>
                @endforelse
            </ul>

        </div>

        <!-- Map Section -->
        <div class="col-md-7">
            <h4 class="my-4">Location Map</h4>
            <div id="map"></div>
        </div>
    </div>

    <!-- Add Location Offcanvas -->
    <div class="offcanvas offcanvas-end" tabindex="-1" id="addLocationCanvas">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title">Add New Location</h5>
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
        </div>
        <form action="{{ route('locations.store') }}" method="POST" class="offcanvas-body">
            @csrf
            <div class="mb-3">
                <label>Location Name</label>
                <input type="text" name="name" class="form-control" required>
            </div>
            <div class="mb-3">
                <label>Latitude</label>
                <input type="text" name="latitude" class="form-control" placeholder="e.g. 28.6139">
            </div>
            <div class="mb-3">
                <label>Longitude</label>
                <input type="text" name="longitude" class="form-control" placeholder="e.g. 77.2090">
            </div>
            <button type="submit" class="btn btn-success">Save</button>
        </form>
    </div>

    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
    <script>
        const map = L.map('map').setView([20.5937, 78.9629], 4); // India Center

        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19,
        }).addTo(map);

        @foreach($locations as $loc)
            @if($loc->latitude && $loc->longitude)
                L.marker([{{ $loc->latitude }}, {{ $loc->longitude }}])
                    .addTo(map)
                    .bindPopup("<b>{{ $loc->name }}</b><br>{{ $loc->latitude }}, {{ $loc->longitude }}");
            @endif
        @endforeach
    </script>
@endsection