@extends('layouts.app', ['pageSlug' => 'deviceAdd'])

@section('content')
<div class="splynx_top_nav">
    <div style="float: left">
        <ul class="splynx_breadcrumbs">
            <li><span>Networking / Monitoring / Add</span></li>
        </ul>
    </div>
    <div class="clearfix"></div>
</div>
<div class="spl-page-panel">
    <div class="row">
        <div class="col-lg-12">
            ADD MONITORING DEVICE
        </div>
    </div>
    <br>
    <div class="col-lg-8 panel panel-default">
        <div class="panel-body p-3">
            <form id="admin_networking_monitoring_add_form" class="form-horizontal" role="form" action="{{route('network.monitor.register')}}" method="POST">
                @csrf
                <fieldset>
                <div class="form-group">
                    <label class="control-label col-lg-4 col-md-3">
                        Name
                    </label>
                    <div class="col-lg-8 col-md-9">
                        <input type="text" style="width: 100%;" original-value="" force-send="1" required="" class="form-control input-sm" autocomplete="off" name="Monitoring[name]" id="monitoring-name" value="">
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-lg-4 col-md-3">
                        Parent
                    </label>
                    <div class="col-lg-8 col-md-9">
                        <select type="select" style="width: 100%;" original-value="0" force-send="1" class="select2 select2-hidden-accessible" name="Monitoring[parent_id]" id="monitoring-parent_id" tabindex="-1" aria-hidden="true">
                            <option value="0" selected="">None</option>
                            @foreach ($parents as $item)
                            <option value="{{$item->id}}">{{$item->name}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="form-group">
                    <label class="control-label col-lg-4 col-md-3">
                        Make
                    </label>

                    <div class="col-lg-8 col-md-9">
                        <select type="select" style="width: 100%;" original-value="" force-send="1" class="select2 select2-hidden-accessible" name="Monitoring[make_id]" id="monitoring-make_id" tabindex="-1" aria-hidden="true">
                            <option value="1">MikroTik</option>
                            <option value="0">Other</option>
                        </select>
                    </div>
                </div>

                <div class="form-group">
                    <label class="control-label col-lg-4 col-md-3">
                        Model
                    </label>

                    <div class="col-lg-8 col-md-9">
                        <input type="text" style="width: 100%;" original-value="" force-send="1" class="form-control input-sm" autocomplete="off" name="Monitoring[model]" id="monitoring-model" value="">
                    </div>
                </div>

                <div class="form-group">
                    <label class="control-label col-lg-4 col-md-3">
                        IP address
                    </label>

                    <div class="col-lg-8 col-md-9">
                        <input type="text" style="width: 100%;" original-value="" force-send="1" required="" class="form-control input-sm" autocomplete="off" name="Monitoring[ip]" id="monitoring-ip" value="">
                    </div>
                </div>

                <div class="form-group">
                    <label class="control-label col-lg-4 col-md-3">
                        Port
                    </label>

                    <div class="col-lg-8 col-md-9">
                        <input type="text" style="width: 100%;" original-value="161" force-send="1" required="" class="form-control input-sm" autocomplete="off" name="Monitoring[port]" id="monitoring-port" value="161">
                    </div>
                </div>

                <div class="form-group">
                    <label class="control-label col-lg-4 col-md-3">
                        User
                    </label>

                    <div class="col-lg-8 col-md-9">
                        <input type="text" style="width: 100%;"  required="" class="form-control input-sm" autocomplete="off" name="Monitoring[user]" id="monitoring-user">
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-lg-4 col-md-3">
                        Password
                    </label>

                    <div class="col-lg-8 col-md-9">
                        <input type="password" style="width: 100%;"  required="" class="form-control input-sm" autocomplete="off" name="Monitoring[password]" id="monitoring-password">
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-lg-4 col-md-3">
                        Password Confirm
                    </label>

                    <div class="col-lg-8 col-md-9">
                        <input type="password" style="width: 100%;"  required="" class="form-control input-sm" autocomplete="off" name="Monitoring[passworkd_confirm]" id="monitoring-password_confirm">
                    </div>
                </div>
                
                <div class="form-group">
                    <div class="col-lg-12 col-md-12">
                        <input type="submit" value="Add" class="btn btn-primary btn-sm pull-right" id="admin_networking_monitoring_add_button">
                    </div>
                </div>

            </fieldset>

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

@push('js')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
    <script>
            $(".select2").select2();
            $(function() {
  
                $("form#admin_networking_monitoring_add_form").validate({
                        submitHandler: function(form) {
                            form.submit();
                        }
                });
            });
    </script>
@endpush