@extends('layouts.master')
@section('content')
    <style>
        .form-control {
            padding: 20px !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
                    @if (count($settings) > 0)
                        <input type="hidden" name="id" value="{{ $settings[0]->_id }}" />
                    @endif
                    <input type="hidden" name="camera" value="{{ $camera_id }}" />
                    <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="stop_stream" type="checkbox" role="switch"
                                        id="stop_stream"
                                        @if (count($settings) > 0) @if ($settings[0]->stop_stream)
                                          checked @endif
                                        @endif
                                    >
                                    <label class="form-check-label" for="stop_stream">Stop Stream</label>
                                </div>
                                <small>You will get notifictions when stream is not working or any techincal error during
                                    stream</small>
                            </div>

                        </div>
                        <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>
                                </div>
                                <small>You will get notifictions when some one start or stop stream</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">Black Screen</label>
                                </div>
                                <small>You will get notifictions when black screen 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="blur_screen" type="checkbox" role="switch"
                                        id="blur_screen" checked>
                                    <label class="form-check-label" for="blur_screen">Blur Screen</label>
                                </div>
                                <small>You will get notifictions when blur screen 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="threshhold" type="checkbox" role="switch"
                                        id="threshhold" checked>
                                    <label class="form-check-label" for="threshhold">Bitrate
                                        Threadhold</label>
                                </div>

                                <div class="col-md-6"
                                    style="margin-top: 10px;>
                                    <label class="form-check-label"
                                    for="threshhold">Select Bitrate
                                    Threadhold</label>
                                    <select name="threshhold_value"
                                        style="width: 100px; border: 0.5px solid #d9dee3; border-radius: 4px; padding: 5px; margin-left: 15px;">
                                        <option value="240p">240p</option>
                                        <option value="360p">360p</option>
                                        <option value="480p">480p</option>
                                        <option value="720p">720p</option>
                                        <option value="1080p">1080p</option>
                                        <option value="1440p">1440p</option>
                                        <option value="2160p">2160p</option>
                                    </select>
                                </div>
                                <small>You will get notifictions bitrate less or equal to selected bitrate</small>
                            </div>
                        </div>

                        <div class="col-md-12">
                            <div class="form-control">
                                <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