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

@section('content')
<div class="splynx_top_nav">
    <div style="float: left">
        <ul class="splynx_breadcrumbs">
            <li><span>Traffic / Add</span></li>
        </ul>
    </div>
    <div class="clearfix"></div>
</div>
<div class="spl-page-panel">
    <div class="row">
        <div class="col-lg-12">
            ADD TRAFFIC DEVICE
        </div>
    </div>
    <br>
    <div class="col-lg-8 panel panel-default">
        <div class="panel-body p-3">
            <form id="admin_networking_traffic_add_form" class="form-horizontal" role="form" action="{{route('traffic.store')}}" 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="Traffic[name]" id="traffic-name" 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="Traffic[ip]" id="traffic-ip" value="">
                    </div>
                </div>

                <div class="form-group">
                    <label class="control-label col-lg-4 col-md-3">
                        Interface
                    </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="Traffic[interface]" id="traffic-interface" value="">
                    </div>
                </div>

                <div class="form-group">
                    <label class="control-label col-lg-4 col-md-3">
                        DNS
                    </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="Traffic[dns]" id="traffic-dns" value="">
                    </div>
                </div>

                <div class="form-group">
                    <label class="control-label col-lg-4 col-md-3">
                        BandWidth
                    </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="Traffic[bandwidth]" id="traffic-bandwidth" 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="8728" force-send="1" required="" class="form-control input-sm" autocomplete="off" name="Traffic[port]" id="traffic-port" value="8728">
                    </div>
                </div>

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

                    <div class="col-lg-8 col-md-9">
                        <input type="checkbox" class="custom-checkbox" name="Traffic[is_internet_point]" id="traffic-internet-point">
                    </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="Traffic[user]" id="traffic-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="password" id="traffic_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="passworkd_confirm" id="traffic_password_confirm">
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-lg-4 col-md-3">
                        Message Notification
                    </label>

                    <div class="col-lg-8 col-md-9">
                        <input type="checkbox" class="custom-checkbox" name="Traffic[is_notify]" id="notified">
                    </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_traffic_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_traffic_add_form").validate({
                    rules: {
                        password: "required",
                        passworkd_confirm: {
                            equalTo: "#traffic_password"
                        }
                    },
                    messages: {
                        password: " Enter Password",
                        passworkd_confirm: " Enter Confirm Password Same as Password"
                    },
                    submitHandler: function(form) {
                        form.submit();
                    }
            });
            });
    </script>
@endpush