IMMREX7

<?php $__env->startSection('content'); ?>
<div id="map" style="height: 600px;"></div>
<div class="row clearfix">
    <div class="col-lg-12 col-md-12 col-sm-12">
        <div class="card">
            <div class="header">
                <h2><strong><?php if(isset($route)): ?>Edit <?php else: ?>  Add <?php endif; ?></strong>Route</h2>
            </div>
            <div class="body">
                <?php if(isset($route)): ?>
                <?php echo Form::model( $route, ['route' => ['routes.update', $route->idRoute], 'method' => 'put','class'=>'form-horizontal'] ); ?>

                <?php else: ?>
                <?php echo Form::open(['url' => 'school/routes','class'=>'form-horizontal','files'=>true]); ?>

                <?php endif; ?>
                
                <div class="row clearfix">
                    <div class="col-sm-2 form-control-label required">
                        <label for="classname">Route Name</label>
                    </div>
                    <div class="col-sm-4">
                        <div class="form-group">
                            <?php echo Form::text('routeName',null,['class' => 'form-control','required'=>'required']); ?>

                            <?php if($errors->has('routeName')): ?>
                            <label id="minmaxlength-error" class="error" for="minmaxlength">
                                <strong><?php echo e($errors->first('routeName')); ?></strong>
                            </label>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>
                <div class="row clearfix">
                    <div class="col-sm-2 form-control-label required">
                        <label for="classname">Trip Start Time</label>
                    </div>
                    <div class="col-sm-4">
                        <div class="form-group">
                            <?php echo Form::text('start_time',null,['class' => 'form-control timepicker','required'=>'required']); ?>

                            <?php if($errors->has('start_time')): ?>
                            <label id="minmaxlength-error" class="error" for="minmaxlength">
                                <strong><?php echo e($errors->first('start_time')); ?></strong>
                            </label>
                            <?php endif; ?>
                        </div>
                    </div>
                    <div class="col-sm-2 form-control-label required">
                        <label for="classname">Trip End Time</label>
                    </div>
                    <div class="col-sm-4">
                        <div class="form-group">
                            <?php echo Form::text('end_time',null,['class' => 'form-control timepicker','required'=>'required']); ?>

                            <?php if($errors->has('end_time')): ?>
                            <label id="minmaxlength-error" class="error" for="minmaxlength">
                                <strong><?php echo e($errors->first('end_time')); ?></strong>
                            </label>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>
                <p><b>On return / After School</b></p>
                <div class="row clearfix">
                    <div class="col-sm-2 form-control-label required">
                        <label for="classname">Trip Start Time</label>
                    </div>
                    <div class="col-sm-4">
                        <div class="form-group">
                            <?php echo Form::text('return_start',null,['class' => 'form-control timepicker','required'=>'required']); ?>

                            <?php if($errors->has('return_start')): ?>
                            <label id="minmaxlength-error" class="error" for="minmaxlength">
                                <strong><?php echo e($errors->first('return_start')); ?></strong>
                            </label>
                            <?php endif; ?>
                        </div>
                    </div>
                    <div class="col-sm-2 form-control-label required">
                        <label for="classname">Trip End Time</label>
                    </div>
                    <div class="col-sm-4">
                        <div class="form-group">
                            <?php echo Form::text('return_end',null,['class' => 'form-control timepicker','required'=>'required']); ?>

                            <?php if($errors->has('return_end')): ?>
                            <label id="minmaxlength-error" class="error" for="minmaxlength">
                                <strong><?php echo e($errors->first('return_end')); ?></strong>
                            </label>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>
                <div class="row clearfix">
                    <div class="col-sm-2 form-control-label">
                        <label for="classname">Stop Name</label>
                    </div>
                    <div class="col-sm-4">
                        <div class="form-group">
                            <?php echo Form::text('stopName',null,['class' => 'form-control','id' =>'stopName']); ?>

                            <?php if($errors->has('stopName')): ?>
                            <label id="minmaxlength-error" class="error" for="minmaxlength">
                                <strong><?php echo e($errors->first('stopName')); ?></strong>
                            </label>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>
                <div class="row clearfix">
                    <table class="table">
                    <thead>
                        <tr>
                            <th></th>
                            <th>Stop Name</th>
                            <th>Latitude</th>
                            <th>Longitude</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody  id="optional_list">
                        <?php if(isset($route)): ?>
                        <?php $j =1;?>
                        <?php $__currentLoopData = $route->stops; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $var): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <tr>
                            <td class="sno"><?php echo e($j); ?></td>
                            <td>
                                <?php echo Form::text('routes['.$j.'][stopName]',$var->stopName,['class' => 'form-control autocomplete','required'=>'required']); ?>

                                <input type="hidden" name="routes[<?php echo e($j); ?>][idStop]" value="<?php echo e($var->idStop); ?>">
                            </td>
                            <td>
                                <?php echo Form::text('routes['.$j.'][latitude]',$var->latitude,['class' => 'form-control' ,'readonly' => 'readonly']); ?>

                            </td>
                            <td>
                                <?php echo Form::text('routes['.$j.'][longitude]',$var->longitude,['class' => 'form-control','readonly' => 'readonly']); ?>

                            </td>
                            <td style="text-align:right;vertical-align: middle;"><input type="button" class="btn btn-sm btn-danger" value="Delete" data-id="<?php echo e($j); ?>" id="remove_row"></td>
                           
                        </tr>
                        <?php $j++ ; ?>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        <?php endif; ?>                        
                   </tbody>
                </table>
                </div>
                <div class="row clearfix">
                    <div class="col-sm-8 offset-sm-2">
                        <?php if(isset($route)): ?>
                        <?php echo Form::submit('UPDATE',['class' => 'btn btn-raised btn-primary btn-round waves-effect']); ?>

                        <?php else: ?>
                        <?php echo Form::submit('SAVE',['class' => 'btn btn-raised btn-primary btn-round waves-effect']); ?>

                        <?php endif; ?>
                        <?php echo Form::close(); ?> 
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<div class="row clearfix">
    <div class="col-sm-12">
        <div class="card">
            <div class="header">
                <h2><strong>List Of Routes</strong></h2>
            </div>
            <div class="body table-responsive">
                <table class="table table-bordered table-striped table-hover js-basic-example dataTable">
                    <thead>
                        <tr>
                            <th>S.NO.</th>
                            <th>Route Name</th>
                            <th>Stops</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody id="optional_list">
                        <?php $i = 1; ?>
                        <?php $__currentLoopData = $routes; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $var): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <tr>
                            <td><?php echo e($i); ?></td>
                            <td><?php echo e($var->routeName); ?></td>
                            <td>
                                <?php $__currentLoopData = $var->stops; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $value): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <span> <?php echo e($value->stopName); ?></span>,<br>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            </td>
                            <td>
                                <a href='<?php echo e(url('/school/routes/'.$var->idRoute.'/edit')); ?>'  class="btn btn-raised btn-info waves-effect btn-round"><i class="fa fa-edit"></i>Edit</a>
                                <button class="btn btn-raised btn-danger waves-effect btn-round js-sweetalert" data-id="<?php echo e($var->idRoute); ?>" data-type="confirm">DELETE</button>
                            </td>
                        </tr>
                        <?php $i++; ?>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<?php $__env->stopSection(); ?>
<?php $__env->startSection('script'); ?>
<script>
  (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
    key: "AIzaSyA-e05D-p1SyTgAKH9_8yxyjjzJrAa-AcE",
    v: "weekly",
    // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
    // Add other bootstrap parameters as needed, using camel case.
  });

 let markers = []; 
 async function initMap() {
  // Request needed libraries.
  const { Map, InfoWindow } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
  const { Autocomplete } = await google.maps.importLibrary("places");
  const map = new Map(document.getElementById("map"), {
        center: { lat: 28.7041, lng: 77.1025 },
        zoom: 14,
        mapId: "4504f8b37365c3d0",
  });
  const input = document.getElementById("stopName");
  const options = {
    componentRestrictions: { country: "in" },
    fields: ["formatted_address", "geometry", "name"],
    strictBounds: false,
  };
  const autocomplete = new Autocomplete(input, options);
  autocomplete.addListener("place_changed", () => {
    const place = autocomplete.getPlace();

        if (!place.geometry || !place.geometry.location) {
        // User entered the name of a Place that was not suggested and
        // pressed the Enter key, or the Place Details request failed.
        window.alert("No details available for input: '" + place.name + "'");
        return;
        }

        const infoWindow = new InfoWindow();
        const draggableMarker = new AdvancedMarkerElement({
            map,
            position: { lat: place.geometry.location.lat(), lng: place.geometry.location.lng() },
            gmpDraggable: true,
            title: place.name,
        });
        markers.push(draggableMarker);
        draggableMarker.addListener("dragend", (event) => {
            const position = draggableMarker.position;
            console.log(position);
            console.log(event);
            infoWindow.close();
            infoWindow.setContent(
                `${place.name}`,
            );
            infoWindow.open(draggableMarker.map, draggableMarker);
            addPlaces()
        });

        addPlaces();
        map.setCenter({lat:place.geometry.location.lat(), lng:place.geometry.location.lng()});
        document.getElementById("stopName").value = "";
  });
  /*
  */

  <?php if(isset($route)): ?>
  <?php $p = 1;?>
  <?php $__currentLoopData = $route->stops; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $var): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
        const infoWindow_<?php echo e($p); ?> = new InfoWindow();
        const draggableMarker_<?php echo e($p); ?> = new AdvancedMarkerElement({
            map,
            position: { lat: <?php echo e($var->latitude); ?>, lng:  <?php echo e($var->longitude); ?>},
            gmpDraggable: true,
            title: "<?php echo e($var->stopName); ?>",
        });
        markers.push(draggableMarker_<?php echo e($p); ?>);
        addMarker("<?php echo e($var->stopName); ?>",draggableMarker_<?php echo e($p); ?>,infoWindow_<?php echo e($p); ?>)
        infoWindow_<?php echo e($p); ?>.setContent(
                `<?php echo e($var->stopName); ?>`,
            );
        infoWindow_<?php echo e($p); ?>.open(draggableMarker_<?php echo e($p); ?>.map, draggableMarker_<?php echo e($p); ?>);
        <?php $p++;?>
  <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        addPlaces();
        const position = markers[markers.length -1].position;
        map.setCenter({lat: position.lat, lng: position.lng});
  <?php endif; ?>
     
}
function addMarker(place,draggableMarker,infoWindow){
        draggableMarker.addListener("dragend", (event) => {
            const position = draggableMarker.position;
            console.log(position);
            console.log(event);
            infoWindow.close();
            infoWindow.setContent(
                `${place}`,
            );
            infoWindow.open(draggableMarker.map, draggableMarker);
            addPlaces()
        });
}

initMap();
function addPlaces(){
    $("#optional_list").empty();
    var i = 1;
    for (k = 0; k < markers.length; ++k) {
        if(markers[k].map == null) continue;
        const position = markers[k].position;
        console.log(position);
        var markup = '<tr><td class="sno">'+i+'</td>\
                    <td><input class="form-control" type="text" id="place_'+i+'" name="routes['+i+'][stopName]" required="required" value="'+markers[k].title+'"></td>\n\
    \n\             <td><input class="form-control" type="text" id="lng_'+i+'" name="routes['+i+'][latitude]" value="'+position.lat+'" readonly></td>\n\
    \n\             <td><input class="form-control" type="text" id="lat_'+i+'" name="routes['+i+'][longitude]" value="'+position.lng+'" required="required" readonly></td>\n\
                    <td style="text-align:right;vertical-align: middle;"><input type="button" class="btn btn-sm btn-danger" value="Delete" data-id="'+i+'" id="remove_row"></td></tr>';

        i++;  
        $("#optional_list").append(markup);
    }
    //remove marker
    $('#optional_list').on('click', 'input[type="button"]', function () {
            for (var i = markers.length - 1; i >= 0; --i) {
                if($('#place_'+$(this).data('id')).val() != undefined){
                    if (markers[i].title == $('#place_'+$(this).data('id')).val()) {
                        markers[i].map = null;
                        break;
                    }
                }
            }
            $(this).closest('tr').remove();
        });
}
$(document).on('click', '.js-sweetalert', function (e) {
    $.ajaxSetup({
        headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    e.preventDefault();
    var id = $(this).data('id');
    swal({
            title: "Are you sure?",
            text: "Are You sure you want to delete this Route with all stops!",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "Yes, delete it!",
            closeOnConfirm: true
        },
        function() {
         //   console.log('here');
            $.ajax({
                type: "DELETE",
                url: "<?php echo e(url('/school/routes/')); ?>" +"/"+id,
                data: {id:id}
                       
            })
            .done(function(data) {
                swal({
                    title: "Deleted", 
                    text: "Route has been successfully deleted", 
                    type: "success"
                },function() {
                    window.location.href = "<?php echo e(url('/school/routes')); ?>";
                });
            })
            .error(function(data) {
              swal("Oops", "We couldn't connect to the server!", "error");
            });
            return false;
    });
});
$(function(){
    $('.timepicker').bootstrapMaterialDatePicker({
        format: 'HH:mm',
        clearButton: true,
        date: false
    });
});
</script>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('schools.school_layout', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>