@extends('layouts.master')
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js"
integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
</style>
@section('content')
    <div class="right_col" role="main">
        <div class="">
            <div class="page-title">
                <div class="title_left">
                    <h3>Monitor Settings</h3>
                </div>
            </div>
            <div class="clearfix"></div>
            <div class="row">
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <div class="x_panel">
                        <div class="x_title">
                            <div class="clearfix"></div>
                            <div class="row">
                                <button type="button" id="addNewMonitor" class="btn btn-success">
                                  Add Coverage
                                  </button>
                                <table class="table table-hover">
                                    <thead>
                                        <tr>
                                            {{-- <th scope="col">ID</th> --}}
                                            <th scope="col">Latitude</th>
                                            <th scope="col">Longitude</th>
                                            <th scope="col">Radius (Meters)</th>
                                            <th scope="col">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                     
                                      
                                        @foreach ($data as $setting)
                                            <tr>
                                                {{-- <td>{{ $setting['id'] }}</td> --}}
                                                <td>{{ $setting['latitude'] }}</td>
                                                <td>{{ $setting['longitude'] }}</td>
                                                <td>{{ $setting['radius'] }}</td>
                                                <td>
                                                    <a href="javascript:void(0)" class="btn btn-primary edit"
                                                        data-id="{{ $setting['id'] }}">Edit</a>
                                                    <a href="javascript:void(0)" class="btn btn-danger delete"
                                                        data-id="{{ $setting['id'] }}">Delete</a>
                                                </td>
                                            </tr>
                                        @endforeach

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

    </div>
    <!-- boostrap model -->
    <div class="modal fade" id="ajax-monitor-model" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="ajaxMonitorModel"></h4>
                </div>
                <div class="modal-body">
                    <form action="javascript:void(0)" id="addEditMonitorForm" name="addEditMonitorForm"
                        class="form-horizontal" method="POST">
                        <input type="hidden" name="id" id="id">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>Latitude</label>
                                    <input type="text" class="form-control" id="latitude" name="latitude"
                                        placeholder="Enter Latitude" value="" maxlength="50" required="">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>Longitude</label>
                                    <input type="text" class="form-control" id="longitude" name="longitude"
                                        placeholder="Enter Longitude" value="" maxlength="50" required="">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>Radius (Meters)</label>
                                    <input type="text" class="form-control" id="radius" name="radius"
                                        placeholder="Enter radius " value="" required="">
                                </div>
                            </div>
                        </div>

                        <button type="submit" class="btn btn-primary" id="btn-save" value="addNewMonitor">Save
                            changes
                        </button>

                    </form>
                </div>
                <div class="modal-footer">

                </div>
            </div>
        </div>
    </div>
@endsection

<script type="text/javascript" language="javascript">
    $(document).ready(function($) {

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $('#addNewMonitor').click(function(e) {
            e.preventDefault();
            $('#addEditMonitorForm').trigger("reset");
            $('#ajaxMonitorModel').html("Add Route 66 Coverage");
            $('#ajax-monitor-model').modal('show');

        });

        $('body').on('click', '.edit', function() {

            var id = $(this).data('id');

            // ajax
            $.ajax({
                type: "POST",
                url: "{{ url('edit-monitor') }}",
                data: {
                    id: id
                },
                dataType: 'json',
                success: function(res) {
                    $('#ajaxMonitorModel').html("Edit Route 66 Coverage");
                    $('#ajax-monitor-model').modal('show');
                    $('#id').val(res.id);
                    $('#longitude').val(res.longitude);
                    $('#latitude').val(res.latitude);
                    $('#radius').val(res.radius);
                }
            });

        });

        $('body').on('click', '.delete', function() {

            if (confirm("Delete Record?") == true) {
                var id = $(this).data('id');

                // ajax
                $.ajax({
                    type: "POST",
                    url: "{{ url('delete-monitor') }}",
                    data: {
                        id: id
                    },
                    dataType: 'json',
                    success: function(res) {

                        window.location.reload();
                    }
                });
            }

        });

        $('body').on('click', '#btn-save', function(event) {

            var id = $("#id").val();
            var longitude = $("#longitude").val();
            var latitude = $("#latitude").val();
            var radius = $("#radius").val();

            if (longitude && latitude && radius) {
                $("#btn-save").html('Please Wait...');
                $("#btn-save").attr("disabled", true);
            }

            // ajax
            $.ajax({
                type: "POST",
                url: "{{ url('add-update-monitor') }}",
                data: {
                    id: id,
                    longitude: longitude,
                    latitude: latitude,
                    radius: radius,
                },
                dataType: 'json',
                success: function(res) {
                    window.location.reload();
                    $("#btn-save").html('Submit');
                    $("#btn-save").attr("disabled", false);
                }
            });

        });

    });
</script>