@extends('admin.layouts.admin_master')  
@section('title', 'Buildings') 
 
 

 <style>

div#map {
    width: 100%;
}
    .select2-dropdown {
        z-index:99999;
    }
    span.select2-container {
        z-index:10050;
    }
   
 
   /* Toggle Switch CSS */
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}
.status-pending {
    margin-top: 10px;
    display: inline-block;
}
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    border-radius: 50%;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
}

input:checked + .slider {
    background-color: #4CAF50;
}

input:checked + .slider:before {
    transform: translateX(26px);
}

.status-approved {
    color: green;
}

.status-pending {
    color: orange;
}

table#buildingTable tr:nth-child(even) {
    box-shadow: none;
}
table#buildingTable tr:nth-child(odd) {
    box-shadow: none;
}
.table>:not(caption)>*>* {
    border:1px solid #d3d3d378;
    box-shadow: none!important;
    background-color: white!important;
}
/* Pending background color */
.status-pending {
    background-color: #ffc107; /* Yellow for pending */
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
}
.toggle-container {
    position: relative;
}

.toggle-checkbox {
    display: none;
}

.toggle-label {
    display: inline-block;
    width: 38px;
    height: 18px;
    background-color: #ccc;
    border-radius: 50px;
    position: relative;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.ak-upload {
    display: flex;
    align-items: center;
    gap: 8px;
}
.toggle-label::after {
    content: '';
    width: 14px;
    height: 14px;
    background-color: white;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: left 0.3s ease;
}

.toggle-checkbox:checked + .toggle-label {
    background-color: #4caf50;
}

.toggle-checkbox:checked + .toggle-label::after {
    left: 21px;
    
}


/* Custom CSS for Carousel Arrows */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    height: 50px; /* Set the height of the circular button */
    width: 50px;  /* Set the width of the circular button */
    background-color: transparent; /* Set transparent background for the arrow icon */
    border-radius: 50%; /* Make the buttons circular */
    border: 1px solid black; /* Add a black border */
    outline: none; /* Remove outline */
    display: flex;
    align-items: center; /* Center the content vertically */
    justify-content: center; /* Center the content horizontally */
    font-size: 30px; /* Set the font size for the arrows */
}

.carousel-control-prev-icon {
    background-image: none; /* Remove default arrow image */
}
.carousel-control-next-icon, .carousel-control-prev-icon {

    background: black;
}
.carousel-control-next-icon, .carousel-control-prev-icon
{
    background-size: 60% 60%!important;
}

.carousel-control-next-icon {
    background-image: none; /* Remove default arrow image */
}


/* Ensure carousel button positioning */
.carousel-control-prev,
.carousel-control-next {
    z-index: 1; /* Ensure arrows are above carousel images */
}
button.btn {
    margin-top: 10px;
}
</style> 
@section('content') 
<div class="row">     
    <div class="col-lg-12">         
        <div class="card">             
            <div class="card-header d-flex justify-content-between">                 
                <h4 class="card-title">Business List</h4>                 
                <button class="btn btn-success" id="openCreateModalBtn" data-bs-toggle="modal" data-bs-target="#createBuildingModal">                     
                    <i class="bi bi-plus-circle"></i> Add Business                 
                </button>             
            </div>             
            <div class="card-body">                 
                <div class="table-responsive">                     
                    <table class="table table-striped table-hover table-borderless table-primary align-middle" id="buildingTable">                         
                        <thead class="table-light">                             
                            <tr>                                 
                                <th>Sl No</th>                                 
                                                                 
                                <th>Address</th>    
                                <th>Suite/Unit Number</th>
                             
                                <th>Business Name</th>                            
                                <th>Total Floors</th>                              
                                <th>Floor</th> 
                                <th>Total Basement</th>   
                                <th>Basement</th>
                                <th>status</th>                                
                                <th>Action</th>                             
                            </tr>                         
                        </thead>                         
                        <tbody id="buildingsTableBody">
    @foreach($buildings as $index => $building)
        <tr id="building-row-{{ $building->id }}">
            <td>{{ $index + 1 }}</td>

            <td>{{ $building->building_address }}</td>
            <td>{{ $building->suite_number }}</td>
            <td>{{ $building->building_name }}</td>
            <td>{{ $building->total_floor }}</td>
            <td>{{ $building->total_floor }}</td>
<td>
    @if(count($building->floors) > 0)
        <p>{{ $building->floors[0]->floor_name }}</p>
        @if ($building->floors[0]->floor_image)
            <img src="{{ asset('storage/' . $building->floors[0]->floor_image) }}" alt="Floor Image" style="width: 100px; height: auto;">
        @else
            <p>No image available</p>
        @endif
    @else
        <p>No floors available</p>
    @endif
</td>
<td>{{ $building->total_basement }}</td>
<td>
    @if(count($building->basements) > 0)
        @foreach($building->basements as $basement)
            <p>{{ $basement->basement_name ?? 'No basement name' }}</p>
            @if ($basement->basement_image)
                <img src="{{ asset('storage/' . $basement->basement_image) }}" alt="Basement Image" style="width: 100px; height: auto;">
            @else
                <p>No image available</p>
            @endif
        @endforeach
    @else
        <p>No Basement available</p>
    @endif
</td>


            <td>
    <!-- Toggle Button -->
    <label class="switch">
        <input type="checkbox" class="status-toggle" data-id="{{ $building->id }}"
            {{ $building->status == 1 ? 'checked' : '' }}>
        <span class="slider round"></span>
    </label>
    <!-- Status Text -->
    <span id="status-text-{{ $building->id }}" class="ms-2 
        {{ $building->status == 1 ? 'status-approved' : 'status-pending' }}">
        {{ $building->status == 1 ? 'Approved' : 'Pending' }}
    </span>
</td>

            <td>
                <button class="btn btn-info btn-sm viewAllFloorsBtn" data-id="{{ $building->id }}" data-floors="{{ json_encode($building->floors) }}" data-bs-toggle="modal" data-bs-target="#viewAllFloorsModal">View Floors </button>
                <button class="btn btn-info btn-sm viewAllBasementBtn" data-id="{{ $building->id }}" data-basement="{{ json_encode($building->basements) }}" data-bs-toggle="modal" data-bs-target="#viewAllBasementModal">View Basement</button>

                <button class="btn btn-warning btn-sm editBuildingBtn" data-id="{{ $building->id }}" data-building_name="{{ $building->building_name }}" data-building_address="{{ $building->building_address }}" data-total_floor="{{ $building->total_floor }}" data-suite_number="{{ $building->suite_number }}" data-floors="{{ json_encode($building->floors) }}" data-bs-toggle="modal" data-bs-target="#editBuildingModal">Edit</button>


                <form action="{{ route('admin.buildings.destroy', $building->id) }}" method="POST" class="d-inline deleteForm">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-danger btn-sm deleteButton">Delete</button>
                    <button class="btn btn-primary btn-sm galleryBtn" data-id="{{ $building->id }}" 
        data-floors="{{ json_encode($building->floors) }}" 
        data-basement="{{ json_encode($building->basements) }}" 
        data-bs-toggle="modal" data-bs-target="#galleryModal">Gallery</button>

                </form>
            </td>
        </tr>
    @endforeach
</tbody>

                    </table>                 
                </div>             
            </div>         
        </div>     
    </div> 
</div>

<!-- View All Floors Modal -->
<div id="viewAllFloorsModal" class="modal fade" tabindex="-1" aria-labelledby="viewAllFloorsModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="viewAllFloorsModalLabel">All Floors</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>Floor Name</th>
                            <th>Floor Image</th>
                        </tr>
                    </thead>
                    <tbody id="viewAllFloorsModalBody">
                        <!-- Floors will be populated here dynamically -->
                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>


<!---View All Basement -->
<div id="viewAllBasementModal" class="modal fade" tabindex="-1" aria-labelledby="viewAllBasementModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="viewAllBasementModalLabel">All Basement</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>Basement Name</th>
                            <th>Basement Image</th>
                        </tr>
                    </thead>
                    <tbody id="viewAllBasementModalBody">
                        <!-- Floors will be populated here dynamically -->
                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<!-- Basement Image Preview Modal -->
<div class="modal fade" id="imagePreviewModal" tabindex="-1" aria-labelledby="imagePreviewModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="imagePreviewModalLabel">Image Preview</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <img id="imagePreview" src="" alt="Image Preview" class="img-fluid" />
            </div>
        </div>
    </div>
</div>

<!-- Create Building Modal -->
<div id="createBuildingModal" class="modal fade" tabindex="-1" aria-labelledby="createBuildingModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="createBuildingModalLabel">Add New Business</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="createBuildingForm" action="{{ route('admin.buildings.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="modal-body">
                    <!-- Business Address -->
                    <div class="mb-3">
                        <label for="building_address">Business Address</label>
                        <input type="text" name="building_address" id="building_address" class="form-control" required>
                    </div>

                    <!-- Map Location -->
                    <div id="mapContainer" class="mb-3">
                        <label for="building_address">Locate Business on Map</label>
                        <div id="map" style="height: 300px;width:100%!important;"></div>
                    </div>
    
                        <!-- Suite / Unit Number -->
                        <div class="mb-3">
                            <label for="suite_number">Suite / Unit Number</label>
                            <input type="text" name="suite_number" id="suite_number" class="form-control">
                        </div>

                    <!-- Business Name -->
                    <div class="mb-3">
                        <label for="building_name">Business Name</label>
                        <input type="text" name="building_name" id="building_name" class="form-control" required>
                    </div>

                    

                   <div class="mb-3">                         
                        <label for="zipcode">Zip Code</label>                         
                        <input type="text" name="zipcode" id="zipcode" class="form-control">                     
                    </div>  
                    
                    <!-- Total Floors Input -->
                   <!-- <div class="mb-3">
                        <label for="total_floor">Total Floors</label>
                        <input type="number" name="total_floor" id="total_floor" class="form-control" min="1">
                    </div>-->

                    <!-- Add Floor Detail Button -->
                    <div id="addFloorButtonContainer" class="mb-3"></div>

                    <!-- Floor Fields -->
                    <div id="floorFields"></div>

                    <!-- Total Basements Input -->
                   <!-- <div class="mb-3">
    <label for="total_basement">Total Basements</label>
    <input type="number" name="total_basement" id="total_basement" class="form-control" min="0">
</div>-->

<!-- Add Basement Detail Button -->
<div id="addBasementButtonContainer" class="mb-3"></div>

<!-- Basement Fields (if any) -->
<div id="basementFields"></div>

                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">Save Business</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </form>
        </div>
    </div>
</div>
</div>
<!-- Edit Building Modal -->
<div id="editBuildingModal" class="modal fade" tabindex="-1" aria-labelledby="editBuildingModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editBuildingModalLabel">Edit Business</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="editBuildingForm" action="{{ route('admin.buildings.update', ['building' => $building->id]) }}" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')
                <div class="modal-body">
                    <!-- Business Address -->
                    <div class="mb-3">
                        <label for="building_address">Business Address</label>
                        <input type="text" name="building_address" id="building_address" class="form-control" required value="{{ $building->building_address }}">
                    </div>

                    <!-- Suite / Unit Number -->
                    <div class="mb-3">
                        <label for="suite_number">Suite / Unit Number</label>
                        <input type="text" name="suite_number" id="suite_number" class="form-control" value="{{ $building->suite_number }}">
                    </div>

                    <!-- Business Name -->
                    <div class="mb-3">
                        <label for="building_name">Business Name</label>
                        <input type="text" name="building_name" id="building_name" class="form-control" required value="{{ $building->building_name }}">
                    </div>

                    <div class="mb-3">
                        <label for="zipcode">Zip Code</label>
                        <input type="text" name="zipcode" id="zipcode" class="form-control" value="{{ $building->zipcode }}">
                    </div>

                    <!-- Total Floors Input -->
                    <div class="mb-3">
                        <label for="total_floor">Total Floors</label>
                        <input type="number" name="total_floor" id="edit_total_floor" class="form-control" min="1" value="{{ $building->total_floor }}">
                    </div>

                    <!-- Floor Fields (Dynamically Added) -->
                    <div id="editFloorFields"></div>

                    <!-- Add Floor Detail Button -->
                    <div id="editAddFloorButtonContainer" class="mb-3"></div>

                    <!-- Basement Fields (If any) -->
                    <div id="editBasementFields"></div>

                    <!-- Add Basement Detail Button -->
                    <div id="editAddBasementButtonContainer" class="mb-3"></div>
                </div>

                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">Save Changes</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </form>
        </div>
    </div>
</div>





<!-- Gallery Modal -->
<div class="modal fade" id="galleryModal" tabindex="-1" aria-labelledby="galleryModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="galleryModalLabel">Building Gallery</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="galleryModalBody">
                <!-- Gallery content will be inserted here by JavaScript -->
            </div>
        </div>
    </div>
</div>

<!-- Modal for displaying the full-screen image -->
<div id="fullScreenImageModal" class="modal fade" tabindex="-1" aria-labelledby="fullScreenImageModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="fullScreenImageModalLabel">Floor Image</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body text-center">
                <img id="fullScreenImage" src="" alt="Full Screen Floor Image" style="width: 100%; max-height: 80vh; object-fit: contain;">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>





@endsection  

@section('script') 
<!-- Mapbox Geocoder CSS -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>


    <!-- Include the required Select2 CSS -->
   

 
 <script>
    // Function to handle the delete confirmation with SweetAlert
    $(document).ready(function () {

// Handle delete action with SweetAlert
$('.delete-btn').on('click', function(e) {
    e.preventDefault();
    const deleteForm = $(this).closest('form');
    
    Swal.fire({
        title: 'Are you sure?',
        text: 'You won\'t be able to revert this!',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: 'Yes, delete it!',
        cancelButtonText: 'No, keep it'
    }).then((result) => {
        if (result.isConfirmed) {
            // Submit the form to delete the building
            deleteForm.submit();
            Swal.fire(
                'Deleted!',
                'The building has been deleted.',
                'success'
            );
        } else {
            Swal.fire(
                'Cancelled',
                'The building is safe.',
                'info'
            );
        }
    });
});

// Toggle building status (pending/approved) with SweetAlert confirmation
$('.status-toggle').on('change', function () {
    const buildingId = $(this).data('id');
    const newStatus = $(this).prop('checked') ? 1 : 0;  // 1 for Approved, 0 for Pending
    const statusText = newStatus === 1 ? 'Approved' : 'Pending';

    // Show SweetAlert for confirmation
    Swal.fire({
        title: 'Are you sure?',
        text: `Do you want to change this building's status to ${statusText}?`,
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: 'Yes, change it!',
        cancelButtonText: 'No, keep it'
    }).then((result) => {
        if (result.isConfirmed) {
            // Proceed with the status update via AJAX
            $.ajax({
                url: `/admin/buildings/status/${buildingId}`,
                method: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    status: newStatus
                },
                success: function (response) {
                    if (response.success) {
                        // Update status text dynamically
                        $('#status-text-' + buildingId).text(statusText);

                        // Update background color dynamically based on status
                        if (newStatus === 1) {
                            $('#status-text-' + buildingId).removeClass('status-pending').addClass('status-approved');
                        } else {
                            $('#status-text-' + buildingId).removeClass('status-approved').addClass('status-pending');
                        }

                        Swal.fire(
                            'Success!',
                            'The building status has been updated.',
                            'success'
                        );
                    } else {
                        Swal.fire(
                            'Error',
                            'Failed to update status!',
                            'error'
                        );
                    }
                },
                error: function () {
                    Swal.fire(
                        'Error',
                        'Something went wrong. Please try again.',
                        'error'
                    );
                }
            });
        } else {
            // Revert the toggle if the user cancels the action
            $(this).prop('checked', !$(this).prop('checked'));
        }
    });
});

});

 
</script>

<script>     
   let selectedLat = null;
    let selectedLng = null;
    let currentMarker = null; // To store the current marker

    // Function to initialize Mapbox and search functionality
    function initializeMap(inputId, mapId, isEdit = false, preselectedLat = null, preselectedLng = null) {
        const input = document.getElementById(inputId);
        const mapElement = document.getElementById(mapId);

        // Initialize Mapbox
        mapboxgl.accessToken = 'pk.eyJ1IjoiZXdlYi1hMXBybyIsImEiOiJjbTg0YjM4Nm0wd2N0MmtxdmI4c2V2YnYwIn0.rMjLBRncoD9LHriGHYNg6Q'; // Replace with your Mapbox access token
        const map = new mapboxgl.Map({
            container: mapId,
            style: 'mapbox://styles/mapbox/streets-v11',
            center: [preselectedLng || 150.644, preselectedLat || -34.397],
            zoom: 10,
        });

        // Create a geocoder instance
        const geocoder = new MapboxGeocoder({
            accessToken: mapboxgl.accessToken,
            mapboxgl: mapboxgl
        });

        // Add geocoder to the map
        map.addControl(geocoder);

        // Handle place selection from geocoder
        geocoder.on('result', function(e) {
            const location = e.result.geometry.coordinates;
            selectedLat = location[1];
            selectedLng = location[0];

            if (currentMarker) {
                currentMarker.remove();
            }

            map.setCenter(location);
            map.setZoom(15);

            currentMarker = new mapboxgl.Marker()
                .setLngLat(location)
                .addTo(map);

            input.value = e.result.place_name;
        });

        // Handle map click event to update marker and address input
        map.on('click', function(event) {
            selectedLat = event.lngLat.lat;
            selectedLng = event.lngLat.lng;

            // Reverse geocode to get the address from the clicked location
            const reverseGeocodeUrl = `https://api.mapbox.com/geocoding/v5/mapbox.places/${selectedLng},${selectedLat}.json?access_token=${mapboxgl.accessToken}`;

            fetch(reverseGeocodeUrl)
                .then(response => response.json())
                .then(data => {
                    if (data.features && data.features.length > 0) {
                        input.value = data.features[0].place_name; // Set the text input with the address
                    } else {
                        alert("Failed to retrieve address for this location.");
                    }
                })
                .catch(error => {
                    alert("Error in reverse geocoding.");
                    console.error(error);
                });

            // If a marker already exists, remove it
            if (currentMarker) {
                currentMarker.remove();
            }

            // Create a new marker at the clicked location
            currentMarker = new mapboxgl.Marker({
                color: 'red' // Pinpoint marker color
            })
                .setLngLat(event.lngLat)
                .addTo(map);
        });

        // Handle Enter key press to search and center the map on the address
        input.addEventListener('keydown', function(e) {
            if (e.key === 'Enter') {
                e.preventDefault(); // Prevent form submission
                const address = input.value;

                if (address) {
                    geocoder.query(address, function(err, data) {
                        if (data && data.features.length > 0) {
                            const location = data.features[0].geometry.coordinates;
                            map.setCenter(location);
                            map.setZoom(15);

                            if (currentMarker) {
                                currentMarker.remove();
                            }

                            currentMarker = new mapboxgl.Marker({
                                color: 'red' // Pinpoint marker color
                            })
                                .setLngLat(location)
                                .addTo(map);

                            input.value = data.features[0].place_name; // Update the input with the place name
                        } else {
                            alert("Address not found. Please try again.");
                        }
                    });
                }
            }
        });
    }
// Initialize the map on page load
document.addEventListener('DOMContentLoaded', function () {
    initializeMap('building_address', 'map');

    // When the modal is shown, force the map to resize
    const modal = document.getElementById('createBuildingModal');
    modal.addEventListener('shown.bs.modal', function () {
        setTimeout(() => {
            if (map) {
                map.resize();
            }
        }, 300); // Add a slight delay to ensure modal transition is complete
    });
});

    // Function to dynamically add floor fields for Create form

// Function to dynamically add floor fields for Create form


let selectedFloors = []; // Array to track selected floor numbers
let floorCount = 0; // Track how many floor details have been added

// Function to display the floor form (number input and inputs for floor name & image)
function showFloorForm() {
    // Prevent adding more floors if already selected enough (optional, based on your requirements)
    if (floorCount >= 10) { // Or set a limit here if needed
        alert('You have already added the maximum number of floors.');
        return;
    }

    const floorFieldsContainer = document.getElementById("floorFields");

    // Create a new div to hold the floor form
    const floorDetailDiv = document.createElement('div');
    floorDetailDiv.classList.add('mb-3');
    floorDetailDiv.id = `floor_detail_${floorCount}`; // Assign a unique ID for the delete functionality

    // Create input field for selecting floor number (this will not be restricted)
    const floorInput = document.createElement('input');
    floorInput.type = 'number';
    floorInput.classList.add('form-control', 'floor-input');
    floorInput.name = `floor_number[${floorCount}]`;
    floorInput.id = `floor_number_${floorCount + 1}`;
    floorInput.min = 1;
    floorInput.placeholder = `Enter floor number (1 and above)`;
    floorInput.required = true;

    // Create input fields for floor name and floor image (both optional)
    const floorNameInput = document.createElement('input');
    floorNameInput.type = 'text';
    floorNameInput.name = `floor_name[${floorCount}]`;
    floorNameInput.id = `floor_name_${floorCount + 1}`;
    floorNameInput.placeholder = 'Enter floor name (optional)';
    floorNameInput.classList.add('form-control', 'mb-2');

    const floorImageInput = document.createElement('input');
    floorImageInput.type = 'file';
    floorImageInput.name = `floor_image[${floorCount}]`;
    floorImageInput.id = `floor_image_${floorCount + 1}`;
    floorImageInput.accept = 'image/*';
    floorImageInput.classList.add('form-control', 'mb-2');

    // Add event listener to handle floor selection change
    floorInput.addEventListener('input', function () {
        let selectedFloorNumber = parseInt(floorInput.value);

        // Ensure the floor number is within the valid range
        if (selectedFloorNumber < 1) {
            floorInput.setCustomValidity('Please enter a valid floor number (1 and above).');
            return;
        } else {
            floorInput.setCustomValidity('');
        }

        // Check if the entered floor number is already selected
        if (selectedFloors.includes(selectedFloorNumber)) {
            alert(`Floor number ${selectedFloorNumber} has already been entered.`);
            floorInput.value = ''; // Clear the input field if duplicate is entered
        } else {
            selectedFloors.push(selectedFloorNumber); // Add it to the selectedFloors array
        }
    });

    // Event listener for deleting the floor number to remove it from the selectedFloors array
    floorInput.addEventListener('change', function () {
        let selectedFloorNumber = parseInt(floorInput.value);

        // If the user clears the input (deletes the floor number), remove it from selectedFloors array
        if (selectedFloorNumber && selectedFloors.includes(selectedFloorNumber)) {
            selectedFloors = selectedFloors.filter(floor => floor !== selectedFloorNumber);
        }
    });

    // Create a delete button for this floor detail div
    const deleteButton = document.createElement('button');
    deleteButton.classList.add('btn', 'btn-danger', 'mt-2');
    deleteButton.textContent = 'Delete Floor';
    deleteButton.addEventListener('click', function () {
        // Remove the current floor detail div from the DOM
        floorFieldsContainer.removeChild(floorDetailDiv);
        floorCount--; // Decrease floor count
        selectedFloors = selectedFloors.filter(floor => floor !== parseInt(floorInput.value)); // Remove floor number from selectedFloors
        showAddFloorButton(); // Show the "Add Floor Detail" button again if needed
    });

    // Append all elements to the floor form container
    floorDetailDiv.appendChild(floorInput); // Add the floor number input
    floorDetailDiv.appendChild(floorNameInput); // Add floor name input
    floorDetailDiv.appendChild(floorImageInput); // Add floor image input
    floorDetailDiv.appendChild(deleteButton); // Add delete button

    // Add the floor form to the floor fields container
    floorFieldsContainer.appendChild(floorDetailDiv);

    // Increment the floor count
    floorCount++;

    // Move the "Add Floor Detail" button below the last entered floor form
    showAddFloorButton();
}

// Function to show the "Add Floor Detail" button again after each floor form
function showAddFloorButton() {
    const addFloorButtonContainer = document.getElementById("addFloorButtonContainer");

    // Clear previous buttons if any
    addFloorButtonContainer.innerHTML = '';

    // Create a new "Add Floor Detail" button that shifts below after each floor form
    const addButton = document.createElement('button');
    addButton.classList.add('btn', 'btn-primary', 'mt-3');
    addButton.textContent = `Add Floor Detail`;
    addButton.addEventListener('click', function (event) {
        event.preventDefault();
        showFloorForm();
    });

    addFloorButtonContainer.appendChild(addButton);
}

// Initialize the page
document.addEventListener('DOMContentLoaded', function () {
    // Initialize by displaying the "Add Floor Detail" button
    showAddFloorButton();
});

// Initialize the map on page load
document.addEventListener('DOMContentLoaded', function () {
    initializeMap('building_address', 'map'); 
});

// Prevent the floor form from being triggered when clicking on the map input field
document.getElementById("building_address").addEventListener("click", function(event) {
    event.stopPropagation(); // Prevent the event from bubbling up to parent elements
});

// Prevent the floor form from being triggered when typing in the map input field
document.getElementById("building_address").addEventListener("input", function(event) {
    event.stopPropagation(); // Prevent the event from bubbling up to parent elements
});

// Prevent the form from being triggered when clicking on the map input field
document.getElementById("building_address").addEventListener("focus", function(event) {
    event.stopPropagation(); // Prevent the event from bubbling up to parent elements
});




      // Function to dynamically add basement fields for Create form
      function updateBasementFields() {
        const totalBasements = parseInt(document.getElementById("total_basement").value);
        const basementFieldsContainer = document.getElementById("basementFields");
        basementFieldsContainer.innerHTML = ''; // Clear previous basement fields

        for (let i = 1; i <= totalBasements; i++) {
            const basementField = document.createElement('div');
            basementField.classList.add('mb-3');
            basementField.innerHTML = `<label for="basement_name_${i}">Basement ${i} Name</label>
            <input type="text" name="basement_name[${i}]" id="basement_name_${i}" class="form-control" required>

            <label for="basement_image_${i}">Basement ${i} Image</label>
            <input type="file" name="basement_image[${i}]" id="basement_image_${i}" class="form-control" accept="image/*">`;
            basementFieldsContainer.appendChild(basementField);
        }
    }



    
    // Function to populate fields for the Edit Building Modal
    function updateEditFloorFields(floorsData) {
    const totalFloors = parseInt(document.getElementById("edit_total_floor").value);
    const floorFieldsContainer = document.getElementById("editFloorFields");
    floorFieldsContainer.innerHTML = '';  

    for (let i = 1; i <= totalFloors; i++) {
        const floorField = document.createElement('div');
        floorField.classList.add('mb-3');
        
        floorField.innerHTML = `
            <label for="edit_floor_name_${i}">Floor ${i} Name</label>
            <input type="text" name="floor_name[${i}]" id="edit_floor_name_${i}" class="form-control" required>

            <label for="edit_floor_image_${i}">Floor ${i} Image</label>
            <input type="file" name="floor_image[${i}]" id="edit_floor_image_${i}" class="form-control" accept="image/*">
            
            <input type="hidden" name="floor_id[${i}]" id="edit_floor_id_${i}" value="${floorsData[i - 1]?.id || ''}">
        `;
        
        floorFieldsContainer.appendChild(floorField);

        // Prepopulate data for edit mode
        if (floorsData[i - 1]) {
            // Set the floor name
            document.getElementById(`edit_floor_name_${i}`).value = floorsData[i - 1].floor_name || '';

            // Check if there is an existing image
            const floorImage = floorsData[i - 1].floor_image;
            if (floorImage) {
                // Prepend the base URL or storage path before displaying the image
                const imageUrl = `${window.location.origin}/storage/${floorImage}`;
                
                // Display the current floor image if available
                const imageElement = document.createElement('img');
                imageElement.src = imageUrl;
                imageElement.alt = "Floor Image";
                imageElement.style = "width: 100px; height: auto; margin-top: 5px;";
                floorField.appendChild(imageElement);
            } else {
                // Show a message when no image is available
                floorField.innerHTML += '<p>No image available</p>';
            }
        }
    }
}

 let selectedBasements = []; // Array to track selected basement numbers
let basementCount = 0; // Track how many basement details have been added

// Function to handle the basement number input change (to avoid duplicates)
function handleBasementNumberChange(event, basementIndex) {
    const inputValue = parseInt(event.target.value);
    const basementNumber = inputValue;

    if (isNaN(basementNumber) || basementNumber < 1 || basementNumber > 100) {  // You can adjust this limit if needed
        alert(`Basement number must be between 1 and 100`);
        event.target.value = ''; // Clear the invalid input
        return;
    }

    // Check if the basement number has already been selected
    if (selectedBasements.includes(basementNumber)) {
        alert(`Basement number ${basementNumber} is already selected.`);
        event.target.value = ''; // Clear the duplicate input
        return;
    }

    // If all checks are passed, add to selectedBasements and proceed
    selectedBasements.push(basementNumber);
}

// Function to display the basement form (number input and other details for basement)
function showBasementForm() {
    const basementFieldsContainer = document.getElementById("basementFields");

    // Create a new div to hold the basement form
    const basementDetailDiv = document.createElement('div');
    basementDetailDiv.classList.add('mb-3');
    basementDetailDiv.classList.add('basement-detail');

    // Create input for selecting basement number (1 to 100, or a different limit if needed)
    const basementNumberInput = document.createElement('input');
    basementNumberInput.classList.add('form-control');
    basementNumberInput.type = 'number';
    basementNumberInput.name = `basement_number[${basementCount}]`;
    basementNumberInput.id = `basement_number_${basementCount + 1}`;
    basementNumberInput.placeholder = 'Enter basement number (1 to 100)';
    basementNumberInput.min = 1;
    basementNumberInput.max = 100; // Set the upper limit as needed
    basementNumberInput.addEventListener('change', function (event) {
        handleBasementNumberChange(event, basementCount);
    });

    // Create input fields for basement name and basement image (both optional)
    const basementNameInput = document.createElement('input');
    basementNameInput.type = 'text';
    basementNameInput.name = `basement_name[${basementCount}]`;
    basementNameInput.id = `basement_name_${basementCount + 1}`;
    basementNameInput.placeholder = 'Enter basement name (optional)';
    basementNameInput.classList.add('form-control', 'mb-2');

    const basementImageInput = document.createElement('input');
    basementImageInput.type = 'file';
    basementImageInput.name = `basement_image[${basementCount}]`;
    basementImageInput.id = `basement_image_${basementCount + 1}`;
    basementImageInput.accept = 'image/*';
    basementImageInput.classList.add('form-control', 'mb-2');

    // Create the delete button for removing the basement form
    const deleteButton = document.createElement('button');
    deleteButton.classList.add('btn', 'btn-danger', 'mt-2');
    deleteButton.textContent = 'Delete Basement Detail';
    deleteButton.addEventListener('click', function () {
        basementFieldsContainer.removeChild(basementDetailDiv);
        basementCount--; // Decrement basement count
        showAddBasementButton(); // Update the "Add Basement Detail" button visibility
    });

    // Append all elements to the basement form container
    basementDetailDiv.appendChild(basementNumberInput); // Add the basement number input
    basementDetailDiv.appendChild(basementNameInput); // Add basement name input
    basementDetailDiv.appendChild(basementImageInput); // Add basement image input
    basementDetailDiv.appendChild(deleteButton); // Add delete button

    // Add the basement form to the basement fields container
    basementFieldsContainer.appendChild(basementDetailDiv);

    // Increment the basement count and update the "Add Basement Detail" button visibility
    basementCount++;

    // Update the "Add Basement Detail" button visibility
    showAddBasementButton();
}

// Function to show the "Add Basement Detail" button again after each basement form
function showAddBasementButton() {
    const addBasementButtonContainer = document.getElementById("addBasementButtonContainer");

    // Clear previous buttons if any
    addBasementButtonContainer.innerHTML = '';

    // Create a new "Add Basement Detail" button that shifts below after each basement form
    const addButton = document.createElement('button');
    addButton.classList.add('btn', 'btn-primary', 'mt-3');
    addButton.textContent = `Add Basement Detail`;
    addButton.addEventListener('click', function (event) {
        event.preventDefault();
        showBasementForm();
    });

    addBasementButtonContainer.appendChild(addButton);
}

// Initialize the page
document.addEventListener('DOMContentLoaded', function () {
    // Directly show the "Add Basement Detail" button on page load without the total_basement input
    showAddBasementButton();
});
// Basement add details div closed



// Function to initialize and populate the floor fields for editing
function updateEditFloorFields(floorsData) {
    const totalFloors = floorsData.length;
    const floorFieldsContainer = document.getElementById("editFloorFields");
    floorFieldsContainer.innerHTML = '';  // Clear existing fields

    floorsData.forEach((floor, index) => {
        const floorField = document.createElement('div');
        floorField.classList.add('mb-3');
        floorField.innerHTML = `
            <label for="edit_floor_name_${index}">Floor ${index + 1} Name</label>
            <input type="text" name="floor_name[${index}]" id="edit_floor_name_${index}" class="form-control" required value="${floor.floor_name}">
            
            <label for="edit_floor_image_${index}">Floor ${index + 1} Image</label>
            <input type="file" name="floor_image[${index}]" id="edit_floor_image_${index}" class="form-control" accept="image/*">
            
            <input type="hidden" name="floor_id[${index}]" id="edit_floor_id_${index}" value="${floor.id}">
        `;
        floorFieldsContainer.appendChild(floorField);
    });

    showEditAddFloorButton();
}

// Function to initialize and populate the basement fields for editing
function updateEditBasementFields(basementsData) {
    const basementFieldsContainer = document.getElementById("editBasementFields");
    basementFieldsContainer.innerHTML = '';  // Clear existing fields

    basementsData.forEach((basement, index) => {
        const basementField = document.createElement('div');
        basementField.classList.add('mb-3');
        basementField.innerHTML = `
            <label for="edit_basement_name_${index}">Basement ${index + 1} Name</label>
            <input type="text" name="basement_name[${index}]" id="edit_basement_name_${index}" class="form-control" value="${basement.basement_name}">
            
            <label for="edit_basement_image_${index}">Basement ${index + 1} Image</label>
            <input type="file" name="basement_image[${index}]" id="edit_basement_image_${index}" class="form-control" accept="image/*">
            
            <input type="hidden" name="basement_id[${index}]" id="edit_basement_id_${index}" value="${basement.id}">
        `;
        basementFieldsContainer.appendChild(basementField);
    });

    showEditAddBasementButton();
}

// Populate the modal with data when opening it
document.addEventListener('DOMContentLoaded', function () {
    const editButtons = document.querySelectorAll('.editBuildingBtn');
    editButtons.forEach(button => {
        button.addEventListener('click', function () {
            const buildingData = button.dataset;

            // Pre-fill building data
            document.getElementById('building_name').value = buildingData.building_name;
            document.getElementById('building_address').value = buildingData.building_address;
            document.getElementById('suite_number').value = buildingData.suite_number;
            document.getElementById('zipcode').value = buildingData.zipcode;
            document.getElementById('edit_total_floor').value = buildingData.total_floor;

            // Parse floors and basements data from JSON and update fields
            const floorsData = JSON.parse(buildingData.floors);
            updateEditFloorFields(floorsData);

            const basementsData = JSON.parse(buildingData.basements || '[]');
            updateEditBasementFields(basementsData);
        });
    });
});


</script> 

<script>
    // Function to handle the "View All" button click for Floors
    $('.viewAllFloorsBtn').on('click', function () {
        const floorsData = $(this).data('floors');  // Existing floor data for the building
        const modalBody = $('#viewAllFloorsModalBody');
        
        modalBody.empty();  // Clear the modal body before adding new content

        if (floorsData.length > 0) {
            floorsData.forEach((floor) => {
                // Remove the 'public/' part from the image path if it exists
                let imagePath = floor.floor_image.replace(/^public\//, '');
                
                const floorRow = $(`
                    <tr>
                        <td>${floor.floor_name}</td>
                        <td>
                            ${floor.floor_image ? 
                                `<img src="{{ asset('storage/${imagePath}') }}" alt="Floor Image" style="width: 100px; height: auto;">` : 
                                '<p>No image available</p>'
                            }
                        </td>
                    </tr>
                `);
                modalBody.append(floorRow);
            });
        } else {
            modalBody.append('<tr><td colspan="2">No floors available.</td></tr>');
        }
    });

   // Function to handle the "View All" button click for Basement
$('.viewAllBasementBtn').on('click', function () {
    const basementData = $(this).data('basement');  // Existing basement data for the building
    const modalBody = $('#viewAllBasementModalBody');
    
    modalBody.empty();  // Clear the modal body before adding new content

    if (basementData.length > 0) {
        basementData.forEach((basement) => {
            // Remove the 'public/' part from the image path if it exists
            let basementImagePath = basement.basement_image.replace(/^public\//, '');
            
            const basementRow = $(`
                <tr>
                    <td>${basement.basement_name || 'No name available'}</td>
                    <td>
                        ${basement.basement_image ? 
                            `<img src="{{ asset('storage/${basementImagePath}') }}" alt="Basement Image" style="width: 100px; height: auto;">` : 
                            '<p>No image available</p>'
                        }
                    </td>
                </tr>
            `);
            modalBody.append(basementRow);
        });
    } else {
        modalBody.append('<tr><td colspan="2">No Basement available.</td></tr>');
    }
});



$('.viewAllBasementBtn').on('click', function () {
    const basementData = $(this).data('basement');  // Existing basement data for the building
    const modalBody = $('#viewAllBasementModalBody');
    
    modalBody.empty();  // Clear the modal body before adding new content

    if (basementData.length > 0) {
        basementData.forEach((basement) => {
            // Remove the 'public/' part from the image path if it exists
            let basementImagePath = basement.basement_image.replace(/^public\//, '');
            
            const basementRow = $(`
                <tr>
                    <td>${basement.basement_name || 'No name available'}</td>
                    <td>
                        ${basement.basement_image ? 
                            `<img class="basement-image" src="{{ asset('storage/${basementImagePath}') }}" alt="Basement Image" style="width: 100px; height: auto;">` : 
                            '<p>No image available</p>'
                        }
                    </td>
                </tr>
            `);
            modalBody.append(basementRow);
        });
    } else {
        modalBody.append('<tr><td colspan="2">No Basement available.</td></tr>');
    }
});

// Image preview functionality
$(document).on('click', '.basement-image', function() {
    const imageUrl = $(this).attr('src');  // Get the URL of the clicked image
    $('#imagePreview').attr('src', imageUrl);  // Set the source of the preview image
    $('#imagePreviewModal').modal('show');  // Show the image preview modal
});

</script>
    
<script>
    // Function to handle the "Gallery" button click
    $('.galleryBtn').on('click', function (event) {
        event.preventDefault();  // Prevent default behavior (like form submission or navigation)
        
        const floorsData = $(this).data('floors');  // Existing floor data for the building
        const basementsData = $(this).data('basement'); // Existing basement data for the building
        const modalBody = $('#galleryModalBody');
        
        modalBody.empty();  // Clear the modal body before adding new content

        let carouselIndicators = '';
        let carouselItems = '';

        // Check if there are floor images and add the heading for Floor Images
        if (floorsData.length > 0) {
            modalBody.append(' ');  // Heading for floor images

            floorsData.forEach((floor, index) => {
                let floorImagePath = floor.floor_image.replace(/^public\//, '');  // Remove 'public/' part

                // Carousel indicator for each floor
                carouselIndicators += `
                    <li data-bs-target="#galleryCarousel" data-bs-slide-to="${index}" ${index === 0 ? 'class="active"' : ''}></li>
                `;

                // Carousel item for each floor
                carouselItems += `
                    <div class="carousel-item ${index === 0 ? 'active' : ''}">
                        <img src="{{ asset('storage/${floorImagePath}') }}" alt="Floor Image" class="d-block w-100" style="height: 400px; object-fit: contain;">
                        <div class="carousel-caption d-none d-md-block">
                            <h5>${floor.floor_name || 'No floor name available'}</h5>
                        </div>
                    </div>
                `;
            });
        }

        // Check if there are basement images and add the heading for Basement Images
        if (basementsData.length > 0) {
            if (floorsData.length > 0) {
                modalBody.append('<hr>');  // Add a separator between floors and basements
            }
            modalBody.append('');  // Heading for basement images

            basementsData.forEach((basement, index) => {
                let basementImagePath = basement.basement_image.replace(/^public\//, '');  // Remove 'public/' part

                // Carousel indicator for each basement (continues from the last index of floors)
                const floorCount = floorsData.length;
                carouselIndicators += `
                    <li data-bs-target="#galleryCarousel" data-bs-slide-to="${floorCount + index}" ${index === 0 && floorsData.length === 0 ? 'class="active"' : ''}></li>
                `;

                // Carousel item for each basement
                carouselItems += `
                    <div class="carousel-item ${index === 0 && floorsData.length === 0 ? 'active' : ''}">
                        <img src="{{ asset('storage/${basementImagePath}') }}" alt="Basement Image" class="d-block w-100" style="height: 400px; object-fit: contain;">
                        <div class="carousel-caption d-none d-md-block">
                            <h5>${basement.basement_name || 'No basement name available'}</h5>
                        </div>
                    </div>
                `;
            });
        }

        // If no floors or basements, show a message
        if (carouselItems === '') {
            modalBody.append('<p>No floor or basement images available.</p>');
        } else {
            // Build the carousel structure for the gallery
            const carouselHTML = `
                <div id="galleryCarousel" class="carousel slide" data-bs-ride="carousel">
                    <ol class="carousel-indicators">
                        ${carouselIndicators}
                    </ol>
                    <div class="carousel-inner">
                        ${carouselItems}
                    </div>
                    <button class="carousel-control-prev" type="button" data-bs-target="#galleryCarousel" data-bs-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Previous</span>
                    </button>
                    <button class="carousel-control-next" type="button" data-bs-target="#galleryCarousel" data-bs-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Next</span>
                    </button>
                </div>
            `;

            // Append the carousel HTML to the gallery modal body
            modalBody.append(carouselHTML);
        }
    });
</script>



<script>
    // Function to handle the "View All" button click
    $('.viewAllFloorsBtn').on('click', function () {
        const floorsData = $(this).data('floors');  // Existing floor data for the building
        const modalBody = $('#viewAllFloorsModalBody');
        
        modalBody.empty();  // Clear the modal body before adding new content

        if (floorsData.length > 0) {
            floorsData.forEach((floor) => {
                // Remove the 'public/' part from the image path if it exists
                let imagePath = floor.floor_image.replace(/^public\//, '');
                
                const floorRow = $(`
                    <tr>
                        <td>${floor.floor_name}</td>
                        <td>
                            ${floor.floor_image ? 
                                `<img src="{{ asset('storage/${imagePath}') }}" alt="Floor Image" style="width: 100px; height: auto; cursor: pointer;" class="floor-image">` : 
                                '<p>No image available</p>'
                            }
                        </td>
                    </tr>
                `);
                modalBody.append(floorRow);
            });
        } else {
            modalBody.append('<tr><td colspan="2">No floors available.</td></tr>');
        }
    });

    // Function to handle the image click event and show it in the full-screen modal
    $(document).on('click', '.floor-image', function () {
        const imageSrc = $(this).attr('src');  // Get the source of the clicked image
        //alert(imageSrc);
        $('#fullScreenImage').attr('src', imageSrc);  // Set the source of the full-screen image
          // Hide backdrop to ensure only the active modal has a backdrop
        $('.modal-backdrop').last().remove();
        $('#fullScreenImageModal').modal('show');  // Show the full-screen image modal
    });
</script>
 
<script>

$(document).ready(function() {
    var table = $('#buildingTable').DataTable({
        lengthChange: true,  // Allow length change
        pageLength: 10,      // Default number of rows per page
        lengthMenu: [
            [10, 20, 50, -1],  // Values for rows per page (10, 20, 50, and -1 for "All")
            ['10', '20', '50', 'All']  // Custom labels for the options
        ],  // Options for rows per page: 10, 20, 50, and "All"
        buttons: ['copy', 'excel', 'pdf', 'print'],  // Export buttons
        //dom: 'Bfrtip'  // Display buttons (B) at the top of the table
    });

    // Append buttons to the table
    //table.buttons().container().appendTo('#buildingTable_wrapper .col-md-6:eq(0)');
});


</script>
@endsection