<div class="row" style="margin: 10px;">

    <input type="hidden" name="region"
        @foreach ($allRegions as $list)
                               value="{{ $list->_id }}" @endforeach" />

    {{-- <div class="col-md-6">
                            <label>Select Origin</label>
                            <div class="form-group" style="display: flex;">
                                <input class="form-control" readonly disabled
                                    @foreach ($regions as $list)
                                    value="{{ $list->region }}" /> @endforeach
                                    </div>
                            </div> --}}


    <div class="col-md-4">
        <div class="form-group">
            <label>Camera Name</label>
            <input type="text" placeholder="Enter Camera Name" required
                class="form-control @error('camera') is-invalid @enderror" name="camera" value="{{ old('camera') }}" />
            @if ($errors->has('camera'))
                <b style="color:#ff3e1d;">{{ $errors->first('camera') }} </b>
            @endif
        </div>
    </div>

    <div class="col-md-4">
        <div class="form-group">
            <label>Stream Url
                {{-- <small style="color: red;">(format=http://192.168.10.2:80)</small> --}}
            </label>
            <input type="url" placeholder="Enter Streamming URL" required value="{{ old('url') }}"
                class="form-control @error('url') is-invalid @enderror" name="url" id="stream_url" />
            <div id="show_url_msg" class="glowing-text"></div>
            @if ($errors->has('url'))
                <b style="color:#ff3e1d;">{{ $errors->first('url') }} </b>
            @endif
        </div>
    </div>
    <div class="col-md-4 d-flex align-items-center">
        <div class="form-group" style="margin-top: 10px">
            <button type="button" class="btn btn-default" style="width:150px;" id="verify_btn">Validate URL </button>
        </div>
    </div>
    <div class="col-md-4" style="margin-top: 10px">
        <div class="form-group">
            <label>Port no

            </label>
            <input type="text" placeholder="Enter port no" class="form-control" />

        </div>
    </div>
    <div class="col-md-4" style="margin-top: 10px">
        <div class="form-group">
            <label>Password

            </label>
            <input type="password" placeholder="Enter password" class="form-control" />

        </div>
    </div>

    <input type="text" hidden name="video_type" id="video_type_inpt">

    <div class="col-md-12" style="margin-top: 20px;">
        <div class="form-check form-switch mb-1" style="display: inline-block; margin-right: 10px;">
            <input class="form-check-input custom-switch" type="checkbox" id="flexSwitchCheckStreaming" checked=""
                name="status" style="height: 20px; width: 40px;">
            <label style="margin-left: 5px; font-size: 14px;" class="form-check-label"
                for="flexSwitchCheckStreaming">On/Off Streaming Session</label>
        </div>

        <div class="form-check form-switch mb-1" style="display: inline-block; margin-right: 10px;">
            <input class="form-check-input " type="checkbox" id="flexSwitchCheckFaceDetection"
                name="is_allow_face_detection" style="height: 20px; width: 40px;">
            <label style="margin-left: 5px; font-size: 14px;" class="form-check-label"
                for="flexSwitchCheckFaceDetection">Allow Face Detection</label>
        </div>

        <div class="form-check form-switch mb-1" style="display: inline-block; margin-right: 10px;">
            <input class="form-check-input " type="checkbox" id="flexSwitchCheckEmotionDetection"
                name="is_allow_emotion_detection" style="height: 20px; width: 40px;">
            <label style="margin-left: 5px; font-size: 14px;" class="form-check-label"
                for="flexSwitchCheckEmotionDetection">Allow Motion Detection</label>
        </div>

        <div class="form-check form-switch mb-1" style="display: inline-block; margin-right: 10px;">
            <input class="form-check-input " type="checkbox" id="allow_attenance_match" name="is_allow_attendance"
                style="height: 20px; width: 40px;">
            <label style="margin-left: 5px; font-size: 14px;" class="form-check-label" for="allow_attenance_match">Allow
                Attendance/Match Face</label>
        </div>


    </div>
    <div class="col-md-12" style="margin-top: 20px;">


        {{-- <div class="form-check form-switch mb-1" style="display: inline-block; margin-right: 10px;">
            <input class="form-check-input " type="checkbox" id="counting_attendees"
                name="is_allow_count_attendees" style="height: 20px; width: 40px;">
            <label style="margin-left: 5px; font-size: 14px;" class="form-check-label"
                for="counting_attendees">Count Attendees</label>
        </div> --}}
    </div>

    <!-- Object Count Div -->
    <div class="col-md-12" style="margin-top: 20px;">

        <div class="form-check form-switch mb-1" style="display: inline-block; margin-right: 10px;">
            <input class="form-check-input " type="checkbox" id="object_count_switch" name=""
                style="height: 20px; width: 40px;">
            <label style="margin-left: 5px; font-size: 14px;" class="form-check-label"
                for="object_count_switch">Object
                Count</label>
        </div>

        <div id="object_count_div" style="display: none; margin-top: 20px;">

            <div class="form-check mb-1" style="display: inline-block; margin-right: 10px;">
                <input class="form-check-input" type="checkbox" id="counting_attendees"
                    name="is_allow_count_attendees" style="height: 20px; width: 20px;">
                <label style="margin-left: 5px; font-size: 14px;" class="form-check-label"
                    for="counting_attendees">People Count</label>
            </div>

            <div class="form-check mb-1" style="display: inline-block; margin-right: 10px;">
                <input class="form-check-input" type="checkbox" id="vehicles_counter" name="is_allow_count_vehicles"
                    style="height: 20px; width: 20px;">
                <label style="margin-left: 5px; font-size: 14px;" class="form-check-label"
                    for="vehicles_counter">Vehicles Counter</label>
            </div>

            <div class="form-check mb-1" style="display: inline-block; margin-right: 10px;">
                <input class="form-check-input" type="checkbox" id="other_objects_counter"
                    name="is_allow_count_other_objects" style="height: 20px; width: 20px;">
                <label style="margin-left: 5px; font-size: 14px;" class="form-check-label"
                    for="other_objects_counter">Other Objects Counter</label>
            </div>
        </div>

    </div>



    <div class="col-md-12" style="margin-top: 20px;" id="showStreamContent">

    </div>
</div>
