@extends('layouts.template')
@section('header')
   <link rel="stylesheet" href="{{asset('css/video_replay.css')}}">
@stop
@section('content')
@include('video_replay.layout.menubtn')
    <div class="collapse" id="collapseExample" style="margin: 5%">
        <div class="card card-body border border-white"style="background-color:steelblue;padding-bottom: 5%">
            <form id="send" action="http://192.168.5.217:8001/insert_cam" method="POST"  onsubmit="return false">
                <div class="form-group">
                    <label for="cam_id">Camera_ID</label>
                    <input type="text" class="form-control" id="cam_id" name="camera_id" placeholder="XXXnnnn"required>
                </div>
                <div class="form-group">
                    <label for="cam_type">Camera_Type</label>
                    <select class="form-control" id="cam_type" name="camera_type"required>
                        @foreach($Types as $type)
                            <option> {{$type->type_id}} </option>
                        @endforeach
                    </select>
                </div>

                <div class="form-group row">
                    <div class="col-6">
                    <label for="cam_host">Camera_Host</label>
                    <input type="text" class="form-control" id="cam_host" name="camera_host" placeholder="nnn.nnn.nnn.nnn"required>
                    </div>
                    <div class="col-3">
                    <label for="cam_port">Port</label>
                    <input type="text" class="form-control" id="cam_port" name="camera_port" placeholder="nnnn" required>
                    </div>
                </div>

                <div class="form-group row">
                    <div class="col-4">
                        <label for="cam_user">User</label>
                        <input type="text" class="form-control" id="cam_user" name="camera_user" placeholder="XXXX" required>
                    </div>
                    <div class="col-4">
                        <label for="cam_pswd">Password</label>
                        <input type="text" class="form-control" id="cam_pswd" name="camera_pswd" placeholder="******" required>
                    </div>
                </div>

                <div class="form-group row">
                    <div class="col-auto">
                        <label for="camera_goup">Group</label>
                            <button style="width: 80%" class="btn-light rounded dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                <span id="seleted_goup">群組名稱</span>
                                <span class="caret"></span>
                            </button>
                            <ul id="goup_ids" class="dropdown-menu" aria-labelledby="dropdownMenu1">
                                @foreach($Goups as $goup)
                                    <li id="l"style="margin-left: 5%" onclick="camera_goup.value='{{$goup->goup_id}}',seleted_goup.innerHTML='{{$goup->goup_name}}'">{{$goup->goup_name}}</li>
                                @endforeach
                            </ul>
                            <input type="text"  hidden="hidden" class="form-control" id="camera_goup" name="camera_goup">
                    </div>
                    <div class="col-auto">
                        <label for="cam_path">Path</label>
                        <input style="width: 30%" type="text" class="form-control" id="cam_path" name="camera_path" placeholder="n" required>
                    </div>
                </div>

                <div class="form-group">
                    <label for="cam_note">Camera_Note</label>
                    <textarea class="form-control" id="cam_note" name="camera_note" rows="3"></textarea>
                </div>
                <div class="row">
                <input class="btn btn-success" style="position: absolute;right: 5%;font-size: 20pt;text-align: center;width: 100px;height: 50px" type="submit">
                </div>
            </form>
        </div>
    </div>

{{--    向API 請求新增攝影機--}}
    <script>
        $("#send").submit(function(e) {
            var form = $(this);
            var url = form.attr('action');
            $.ajax({
                type: "POST",
                url: url,
                data:form.serialize(),
                dataType: 'json',
                success: function(data)
                {
                    alert('伺服器回應：\n'+JSON.stringify(data))
                    // console.log(data.length);
                    // setTimeout(function(){
                    //     $('#menu').click();
                    // },1000)
                },
                error:function(data){
                    alert(JSON.stringify(data)+'\n'+'發生錯誤')
                }

            });
            e.preventDefault(); // avoid to execute the actual submit of the form.
        });
    </script>
@endsection
