@extends('layouts.master')
@section('content')
    <style>

    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

    <div class="container-xxl flex-grow-1 container-p-y">

        <div class="card">
            <div class="card-header">
                <h4 class="card-title">Stream Setting</h4>
            </div>

            <div class="card-body" id="top_layout">

                <div class="d-flex justify-content-end">
                    <a class="btn btn-secondary btn-sm" href="{{ route('admin_portal_index') }}"
                        @if ($camera_id == '') hidden @endif>Go Back</a>

                </div>

                <form action="{{ route('admin_portal_store') }}" method="post">

                    @csrf
                    @method('POST')
                    <input type="hidden" id="camera_id" name="camera_id">
                    <input type="hidden" id="region_id" name="region_id">


                    <div class="row" style="margin: 10px;">
                        <div class="col-md-12" style="margin-top: 10px; margin-bottom: 10px">
                            <label class="form-check-label" for="">
                                Select Camera</label>
                            <div>
                                <select id="camera_region" onchange="updateHiddenFields()" @disabled($camera_id != '')
                                    style=" border: 0.5px solid #d9dee3; border-radius: 4px; padding: 5px;">
                                    <option value=",">Please Select</option>

                                    @foreach ($cameras as $item)
                                        <option value="{{ $item->_id . ',' . $item->region_id }}"
                                            @selected($item->_id == $camera_id)>
                                            {{ $item->cameraname }}</option>
                                    @endforeach
                                </select>
                            </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="blur_detection" type="checkbox" role="switch"
                                        id="blur_detection" @checked($camera_settings != '' && $camera_settings->blur_detection == 1)>
                                    <label class="form-check-label" for="blur_detection">Blur Frame
                                        Detection</label>
                                </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_detection" type="checkbox" role="switch"
                                        id="black_detection" @checked($camera_settings != '' && $camera_settings->black_detection == 1)>
                                    <label class="form-check-label" for="black_detection">Black Frame
                                        Detection</label>
                                </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="motion_detection" type="checkbox" role="switch"
                                        id="motion_detection" @checked($camera_settings != '' && $camera_settings->motion_detection == 1)>
                                    <label class="form-check-label" for="motion_detection">Motion
                                        Frame Detection</label>
                                </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="enable_disable_stream" type="checkbox"
                                        role="switch" id="enable_disable_stream" @checked($camera_settings != '' && $camera_settings->enable_disable_stream == 1)>
                                    <label class="form-check-label" for="enable_disable_stream">Enable/Disabe Stream</label>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-12" style="margin-top: 10px;">
                            <div class="form-control" style="height: 6rem;">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" name="threshold" type="checkbox" role="switch"
                                        id="threshold" @checked($camera_settings != '' && $camera_settings->threshold == 1)>
                                    <label class="form-check-label" for="threshold">Bitrate
                                        Threadhold</label>
                                </div>

                                <div class="col-md-6"
                                    style="margin-top: 10px;>
                                    <label class="
                                    form-check-label"="" for="threshold">Select Bitrate Threadhold

                                    <select name="threshold_value" id="thresholdSelect" onchange="toggleInput('select')"
                                        style=" border: 0.5px solid #d9dee3; border-radius: 4px; padding: 5px; margin-left: 15px;">
                                        <option value="">Please Select</option>
                                        <option value="240" @selected($camera_settings != '' && $camera_settings->threshold_value == 250)>
                                            240p (250)
                                        </option>
                                        <option value="360" @selected($camera_settings != '' && $camera_settings->threshold_value == 600)>
                                            360p (600)
                                        </option>
                                        <option value="480" @selected($camera_settings != '' && $camera_settings->threshold_value == 1000)>
                                            480p (1000)
                                        </option>
                                        <option value="720" @selected($camera_settings != '' && $camera_settings->threshold_value == 2000)>
                                            720p (2000)
                                        </option>
                                        <option value="1080" @selected($camera_settings != '' && $camera_settings->threshold_value == 4000)>
                                            1080p (4000)
                                        </option>
                                        <option value="1440" @selected($camera_settings != '' && $camera_settings->threshold_value == 6000)>
                                            1440p (6000)
                                        </option>
                                        <option value="2160" @selected($camera_settings != '' && $camera_settings->threshold_value == 10000)>
                                            2160p (10000)
                                        </option>
                                    </select>
                                </div>

                            </div>
                        </div>

                        <div class="col-md-12" style="margin-top: 10px;">
                            <div class="form-control" style="height: 6.5rem;">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" name="latency" type="checkbox" role="switch"
                                        id="latency" @checked($camera_settings != '' && $camera_settings->latency == 1)>
                                    <label class="form-check-label" for="latency">latency
                                        Limit</label>
                                </div>

                                <div class="col-md-6"
                                    style="margin-top: 10px;>
                                    <label class="
                                    form-check-label"="" for="latency">Select time
                                    <select name="latency_value"
                                        style=" border: 0.5px solid #d9dee3; border-radius: 4px; padding: 5px; margin-left: 15px;">
                                        <option value="1" @selected($camera_settings != '' && $camera_settings->latency_value == 1)>1 Second
                                        </option>
                                        <option value="2" @selected($camera_settings != '' && $camera_settings->latency_value == 2)>2 Second
                                        </option>
                                        <option value="3" @selected($camera_settings != '' && $camera_settings->latency_value == 3)>3 Second
                                        </option>
                                        <option value="4" @selected($camera_settings != '' && $camera_settings->latency_value == 4)>Up to 3 seconds</option>
                                    </select>
                                </div>
                                <small></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="Save Settings">
                    </div>
                </form>
            </div>
        </div>

    </div>
    </div>
    <div class="row" style=" text-align: center; display: block; margin-top: 100px; margin-bottom: 65px; ">
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://js.pusher.com/8.2.0/pusher.min.js"></script>
    <link href="https://vjs.zencdn.net/7.20.3/video-js.css" rel="stylesheet" />
    {{-- <script src="https://vjs.zencdn.net/7.20.3/video.min.js"></script> --}}
    <script src="https://vjs.zencdn.net/7.20.3/video.js"></script>

    <script>
        function updateHiddenFields() {
            const select = document.getElementById('camera_region');
            const selectedValue = select.value.split(',');

            document.getElementById('camera_id').value = selectedValue[0];
            document.getElementById('region_id').value = selectedValue[1];
        }

        window.onload = function() {
            updateHiddenFields()
        }
    </script>
@endSection