@extends('layouts.master')
@section('content')
    <style>
        .form-control {
            height: 67px !important;
            margin-bottom: 20px !important;
        }
    </style>
    <div class="container-xxl flex-grow-1 container-p-y">

        <div class="card">
            <h5 class="card-header" style="color:black;">Alarm settings</h5>
            <div class="table-responsive text-nowrap">
                <form action="{{ route('save.alarm.setting') }}" method="POST">
                    @csrf
                   
                    <div class="row" style="margin: 10px;">
                        <div class="col-md-12">
                            <div class="form-control">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" name="enable_disable_stream" type="checkbox"
                                        role="switch" id="enable_disable_stream" checked>
                                    <label class="form-check-label" for="enable_disable_stream">Enable/Disabe
                                        Stream</label>
                                        <br>
                                <small>You will get notifictions when some one start or stop stream</small>
                                        
                                </div>
                            </div>
                        </div>

                        <div class="col-md-12" style="margin-top: 10px;">
                            <div class="form-control">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" name="black_screen" type="checkbox" role="switch"
                                        id="black_screen" checked>
                                    <label class="form-check-label" for="black_screen">Stream Errors</label>
                                </div>
                                <small>You will get notifictions when error detected</small>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-control">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" name="black_screen" type="checkbox" role="switch"
                                        id="black_screen" checked>
                                    <label class="form-check-label" for="black_screen"> No Data Received</label>
                                </div>
                                <small>You will get notifictions when no data received</small>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-control" style="height: 107px !important;">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" name="latancy" type="checkbox" role="switch"
                                        id="latancy" checked>
                                    <label class="form-check-label" for="latancy">latency Limit</label>
                                </div>
                               
                                <div class="col-md-6"
                                    style="margin-top: 10px;>
                                    <label class="form-check-label"
                                    for="latancy">Select time </label>
                                    <select name="latency_value"
                                        style="width: 100px; border: 0.5px solid #d9dee3; border-radius: 4px; padding: 5px; margin-left: 15px;">
                                        <option value="1">1 Second</option>
                                        <option value="2">2 Second</option>
                                        <option value="3">3 Second</option>
                                        <option value="4">Up to 3 seconds</option>
                                    </select>
                                </div>
                                <small>You will get notifictions when latency great than or equal selected value</small>
                            </div>
                        </div>

                    </div>
                    <div class="row"
                        style=" text-align: center; display: block; margin-top: 100px; margin-bottom: 65px; ">
                        <input style="width: max-content;" type="submit" class="btn btn-primary"
                            value="Update Settings" />
                    </div>
                </form>

            </div>
        </div>

    </div>
@endSection