

<?php $__env->startSection('title', 'Add Tracking Update'); ?>

<style>
    #map {
        height: 400px;
        width: 100%;
        margin-top: 1rem;
    }
    .map-search-box {
        width: 100%;
        margin-bottom: 1rem;
    }
</style>

<?php $__env->startSection('content'); ?>
<div class="container mx-auto px-4">
    <div class="max-w-3xl mx-auto">
        <div class="mb-6">
            <h1 class="text-2xl font-bold text-gray-900">
                Add Tracking Update for Shipment #<?php echo e($shipment->tracking_number); ?>

            </h1>
        </div>

        <div class="bg-white rounded-lg shadow-lg overflow-hidden">
            <form action="<?php echo e(route('admin.tracking-updates.store', $shipment)); ?>" method="POST" class="p-6">
                <?php echo csrf_field(); ?>

                <!-- Search Box -->
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700">Search Location</label>
                    <input id="pac-input" type="text" 
                           class="map-search-box mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
                           placeholder="Enter a location">
                </div>

                <!-- Map -->
                <div id="map" class="rounded-lg"></div>

                <!-- Hidden Location Fields -->
                <input type="hidden" name="latitude" id="latitude" value="">
                <input type="hidden" name="longitude" id="longitude" value="">

                <!-- Location Name -->
                <div class="mt-4">
                    <label for="location" class="block text-sm font-medium text-gray-700">Location Name</label>
                    <input type="text" name="location" id="location" required
                           class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                    <?php $__errorArgs = ['location'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                        <p class="mt-1 text-sm text-red-600"><?php echo e($message); ?></p>
                    <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                </div>

                <!-- Status -->
                <div class="mt-4">
                    <label for="status" class="block text-sm font-medium text-gray-700">Status</label>
                    <select name="status" id="status" required
                            class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        <option value="pending" <?php echo e($shipment->status == 'pending' ? 'selected' : ''); ?>>Pending</option>
                        <option value="in_transit" <?php echo e($shipment->status == 'in_transit' ? 'selected' : ''); ?>>In Transit</option>
                        <option value="delivered" <?php echo e($shipment->status == 'delivered' ? 'selected' : ''); ?>>Delivered</option>
                    </select>
                    <?php $__errorArgs = ['status'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                        <p class="mt-1 text-sm text-red-600"><?php echo e($message); ?></p>
                    <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                </div>

                <!-- Description -->
                <div class="mt-4">
                    <label for="description" class="block text-sm font-medium text-gray-700">Description</label>
                    <textarea name="description" id="description" rows="3" required
                              class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"></textarea>
                    <?php $__errorArgs = ['description'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                        <p class="mt-1 text-sm text-red-600"><?php echo e($message); ?></p>
                    <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                </div>

                <div class="mt-6 flex items-center justify-end">
                    <a href="<?php echo e(route('admin.shipments.show', $shipment)); ?>" 
                       class="bg-gray-100 text-gray-700 px-4 py-2 rounded-md mr-2">Cancel</a>
                    <button type="submit" 
                            class="bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700">
                        Add Update
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
<?php $__env->stopSection(); ?>

<script src="https://maps.googleapis.com/maps/api/js?key=<?php echo e(config('services.google.maps_api_key')); ?>&libraries=places"></script>
<script>
function initMap() {
    // Default coordinates (you can set this to your preferred initial location)
    const defaultLocation = {
        lat: 0,
        lng: 0
    };

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

    // Create the search box
    const input = document.getElementById("pac-input");
    const searchBox = new google.maps.places.SearchBox(input);

    // Bias the SearchBox results towards current map's viewport
    map.addListener("bounds_changed", () => {
        searchBox.setBounds(map.getBounds());
    });

    let currentMarker = null;

    // Function to update form fields
    function updateFormFields(lat, lng, locationName = '') {
        document.getElementById('latitude').value = lat;
        document.getElementById('longitude').value = lng;
        if (locationName) {
            document.getElementById('location').value = locationName;
        }
    }

    // Function to create or update marker
    function setMarker(position, map) {
        if (currentMarker) {
            currentMarker.setMap(null);
        }

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

        // Listen for marker drag events
        google.maps.event.addListener(currentMarker, 'dragend', function(event) {
            const lat = event.latLng.lat();
            const lng = event.latLng.lng();
            updateFormFields(lat, lng);

            // Get address for new position
            const geocoder = new google.maps.Geocoder();
            geocoder.geocode({ location: event.latLng }, (results, status) => {
                if (status === "OK" && results[0]) {
                    document.getElementById('location').value = results[0].formatted_address;
                }
            });
        });
    }

    // Listen for the event fired when the user selects a prediction from the search box
    searchBox.addListener("places_changed", () => {
        const places = searchBox.getPlaces();

        if (places.length == 0) {
            return;
        }

        const place = places[0];

        if (!place.geometry || !place.geometry.location) {
            console.log("Returned place contains no geometry");
            return;
        }

        // Set marker for the selected place
        const position = {
            lat: place.geometry.location.lat(),
            lng: place.geometry.location.lng()
        };

        setMarker(position, map);
        updateFormFields(position.lat, position.lng, place.formatted_address || place.name);

        // Adjust map bounds
        if (place.geometry.viewport) {
            map.fitBounds(place.geometry.viewport);
        } else {
            map.setCenter(place.geometry.location);
            map.setZoom(17);
        }
    });

    // Click on map to set marker
    map.addListener('click', function(event) {
        const position = {
            lat: event.latLng.lat(),
            lng: event.latLng.lng()
        };

        setMarker(position, map);
        updateFormFields(position.lat, position.lng);

        // Get address for clicked location
        const geocoder = new google.maps.Geocoder();
        geocoder.geocode({ location: position }, (results, status) => {
            if (status === "OK" && results[0]) {
                document.getElementById('location').value = results[0].formatted_address;
            }
        });
    });

    // Form validation before submit
    document.querySelector('form').addEventListener('submit', function(e) {
        const lat = document.getElementById('latitude').value;
        const lng = document.getElementById('longitude').value;
        const location = document.getElementById('location').value;

        if (!lat || !lng || !location) {
            e.preventDefault();
            alert('Please select a location on the map');
        }
    });
}

window.addEventListener('load', initMap);
</script>
<?php echo $__env->make('admin.layouts.app', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/waccoama/expressdeliveryfreight.com/resources/views/admin/tracking-updates/create.blade.php ENDPATH**/ ?>