@extends('admin.layout')
@section('custom-style')
    <style>
        .alert{
            padding: 2px 10px;
        }
        .textarea{
            width: 100%; height: 300px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;
        }

        .thubnail_img {
            width:100%;
            height:207px;
            text-align: center;
        }

        .thubnail_img img {
            height:100%;
            object-fit:contain;
            border-radius:10px;
        }

        .files input {
            outline: 2px dashed #92b0b3;
            outline-offset: -10px;
            -webkit-transition: outline-offset .15s ease-in-out, background-color .15s linear;
            transition: outline-offset .15s ease-in-out, background-color .15s linear;
            padding: 120px 0px 85px 35%;
            text-align: center !important;
            margin: 0;
            width: 100% !important;
        }
        .files input:focus{     outline: 2px dashed #92b0b3;  outline-offset: -10px;
            -webkit-transition: outline-offset .15s ease-in-out, background-color .15s linear;
            transition: outline-offset .15s ease-in-out, background-color .15s linear; border:1px solid #92b0b3;
        }
        .files{ position:relative}
        .files:after {  pointer-events: none;
            position: absolute;
            top: 60px;
            left: 0;
            width: 50px;
            right: 0;
            height: 56px;
            content: "";
            background-image: url(https://image.flaticon.com/icons/png/128/109/109612.png);
            display: block;
            margin: 0 auto;
            background-size: 100%;
            background-repeat: no-repeat;
        }
        .files:before {
            position: absolute;
            bottom: 10px;
            left: 0;  pointer-events: none;
            width: 100%;
            right: 0;
            height: 40px;
            content: " or drag it here. ";
            display: block;
            margin: 0 auto;
            color: #2ea591;
            font-weight: 600;
            text-transform: capitalize;
            text-align: center;
        }

        .input-group
        {
            margin-bottom: 2px;
        }
        #category-div-id
        {
            background: #f4f4f4;
            padding:10px;
            border:1px solid #ddd;
            margin-left:-10px;
        }

    </style>
    <!-- bootstrap wysihtml5 - text editor -->
    <link rel="stylesheet" href="{{url('admin-assets/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css')}}">
@endsection
@section('content')
    <section class="content-header">
        <h1>
            Live Stream credentials
        </h1>
        <ol class="breadcrumb">
            <li><a><i class="fa fa-video-camera"></i>Live stream set up</a></li>
            <li class="active">credentials</li>
        </ol>
    </section>

    <!-- Main content -->
    <section class="content">
        <!-- Info boxes -->
        <div class="row">
            <div class="col-md-12">
                <!-- Social Share Modal -->
                    <div class="card p-3" style="background-color:#fff;box-shadow:2px 2px 2px rgba(0,0,0,.8);border-radius:10px;padding:10px 20px;font-size:1.2em;">
                      <h5 class="card-header" style="border-bottom:1px solid #ccc;font-size:1.2em;color:blue;padding-bottom:1vh;">Your stream credentials</h5>
                      <div class="card-body">
                        <h5 class="card-title" style="padding-top:1.5vh;font-size:1em;font-weight:bold;">Your live stream was scheduled successfully!</h5>
                        <p class="card-text" style="font-size:0.8em;font-size:0.8em;">Use the below credentials when it's time to go live</p>
                        
                        
                            <div class="form-group" style="margin-top:5vh;display:none;">
                                <label>Stream Token*</label>
                                <input type="text" name="stream_token" class="form-control"  value="{{$live_stream_token}}"/ readonly>
                            </div>
                            
                            <div class="form-group" style="margin-top:2vh;">
                                <label>Stream Key*</label>
                                <input type="text" name="stream_channel" class="form-control"  value="{{$live_stream_key}}"/ readonly>
                            </div>
                            
                            <div class="form-group" style="margin-top:2vh;">
                                <label>Stream Channel*</label>
                                <input type="text" name="display_stream_channel" class="form-control"  value="{{$display_stream_channel}}"/ readonly>
                            </div>
                            
                            
                            
                            <div class="form-group" style="margin-top:5vh;">
                                <h6 class="card-title" style="padding-top:1vh;font-size:0.8em;font-weight:bold;color:#3C8DBC;">here's how to use them</h6>
                                <p class="card-text" style="font-size:0.8em;font-size:0.8em;">Your complete rtmp stream url should be fromatted this way:</p>
                                <input type="text" name="title" class="form-control"  value="rtmp://verity.live/{{$live_stream_channel}}" style="border:1px solid #3C8DBC;border-radius:5px;" readonly>
                                
                                <p class="card-text" style="font-size:0.8em;font-size:0.8em;margin-top:1.8vh;">Your streaming key:</p>
                                <input type="text" name="title" class="form-control"  value="{{$live_stream_key}}" style="border:1px solid #3C8DBC;border-radius:5px;" readonly>
                            </div>
                            
                             <div class="form-group" style="margin-top:5vh;">
                                <h6 class="card-title" style="padding-top:1vh;font-size:0.8em;font-weight:bold;color:#3C8DBC;">Your credentials are only valid on :  {{$date}}</h6>
                                
                                <div class="d-flex" style="display:flex;justify-content:space-even;align-items:center;">
                                    <div class="start_date_block" style="margin:1vh 2%; 1vh 0">
                                        <p class="card-text" style="font-size:0.8em;font-size:0.8em;">Start time:</p>
                                        <input type="text" name="start_time" class="form-control"  value="{{ $start_time }}" style="border:1px solid #3C8DBC;border-radius:5px;" readonly>
                                    </div>
                                    
                                     <div class="end_date_block" style="margin:1vh 2%;">
                                        <p class="card-text" style="font-size:0.8em;font-size:0.8em;">End time:</p>
                                        <input type="text" name="end_time" class="form-control"  value="{{ $end_time }}" style="border:1px solid #3C8DBC;border-radius:5px;" readonly>
                                    </div>
                                    
                                </div>
                            </div>
                      
                        
                      </div>
                    </div>
                <!-- Social Share Modal -->
            </div>
        </div>
        <!-- /.row -->
    </section>
@endsection

@section('custom-scripts')
    <!-- CK Editor -->
    <script src="{{url('admin-assets/bower_components/ckeditor/ckeditor.js')}}"></script>
    <!-- Bootstrap WYSIHTML5 -->
    <script src="{{url('admin-assets/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js')}}"></script>
    <script>
        $(function () {
            // Replace the <textarea id="editor1"> with a CKEditor
            // instance, using default configuration.
            CKEDITOR.replace('editor1')
            //bootstrap WYSIHTML5 - text editor
            $('.textarea').wysihtml5()
        })

        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    $('#thumbnail-image')
                        .attr('src', e.target.result);
                };

                reader.readAsDataURL(input.files[0]);
            }
        }
    </script>
@endsection