@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: 57px;
        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 Streams
    </h1>
    <ol class="breadcrumb">
        <li><a><i class="fa fa-video-camera"></i>Live Streams </a></li>
        <li class="active">Create</li>
    </ol>
</section>

<!-- Main content -->
<section class="content">
    <!-- Info boxes -->
    <div class="row">
        <div class="col-md-12">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">Create Live Stream</h3>
                </div>
                @if ($errors->any())
                    <div>
                        @foreach ($errors->all() as $error)
                            <li class="alert alert-danger">{{ $error }}</li>
                        @endforeach
                    </div>
                @endif
                @if(\Session::has('error'))
                    <div>
                        <li class="alert alert-danger">{!! \Session::get('error') !!}</li>
                    </div>
                @endif
                @if(\Session::has('success'))
                    <div>
                        <li class="alert alert-success">{!! \Session::get('success') !!}</li>
                    </div>
                @endif
                <!-- /.box-header -->
                <!-- form start -->
                <form role="form" method="post" enctype="multipart/form-data">
                    {{csrf_field()}}
                    <div class="box-body">
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label>Select user to set up live stream for*</label>
                                    <select type="text" name="user_id" class="form-control" id="select-user" required>
                                        <option value="">None</option>
                                        @isset($all_staff)
                                            @foreach($all_staff as $user)
                                                @php $staff_no = $user->get_staff_details->staff_number; @endphp
                                                <option value="{{$user->id}}" @if($user->id == old('id')) selected @endif>
                                                    {{"$user->name $user->surname - $user->email ($staff_no)"}}
                                                </option>
                                            @endforeach
                                        @endisset
                                    </select>
                                </div>
                            </div>

                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label>Live Stream Title*</label>
                                    <input type="text" name="title" class="form-control"
                                        placeholder="Enter Live Stream Title" value="{{old('title')}}" required />
                                </div>
                            </div>

                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label>Live Stream Sub Title</label>
                                    <input type="text" name="sub_title" class="form-control"
                                        placeholder="Enter Video Sub Title" value="{{old('sub_title')}}" />
                                </div>
                            </div>

                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label>Viewer Age Rating*</label>
                                    <select name="rating" class="form-control" required>
                                        <option value="">Select Rating for Live Stream</option>
                                        @if(isset($ratings))
                                            @foreach($ratings as $rating)
                                                <option value="{{$rating->id}}" @if(old('rating') == $rating->id) selected @endif>
                                                    {{ $rating->name }}
                                                </option>
                                            @endforeach
                                        @endif
                                    </select>
                                </div>
                            </div>

                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label>PPV Listing Type*</label>
                                    <select name="ppv_listing_type" class="form-control" required>
                                        <option value="">Select video listing type</option>
                                        <option value="Pay Per View" @if(old('ppv_listing_type') == 'Pay Per View') selected @endif>Pay Per
                                            View</option>
                                        <option value="Free View" @if(old('ppv_listing_type') == 'Free View') selected @endif>Free View
                                        </option>
                                    </select>
                                </div>
                            </div>

                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label>Live Stream Description</label>
                                    <textarea class="textarea" name="description"
                                        placeholder="Enter the live stream description here">{{old('description')}}</textarea>
                                </div>
                            </div>

                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label>Channels*</label>
                                    <select type="text" name="channel_id" class="form-control">
                                        @if(isset($livebroadcasts))
                                            @foreach($livebroadcasts as $channel)
                                                <option value="{{$channel->id}}" @if(old('channel_id') == $channel->id) selected @endif> {{ $channel->channel_name }} </option>
                                            @endforeach
                                        @endif
                                    </select>
                                </div>
                            </div>

                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label>Live stream type*</label>
                                    <select type="text" name="stream_type_id" class="form-control">
                                        @if(isset($livestreamtypes))
                                            @foreach($livestreamtypes as $stream_type)
                                                <option value="{{$stream_type->id}}" @if(old('stream_type_id') == $stream_type->id) selected @endif> {{ $stream_type->live_stream_type_name }} </option>
                                            @endforeach
                                        @endif
                                    </select>
                                </div>
                            </div>

                            @if(check_Permission('Live Broadcast', 'set_calendar'))
                                <div class="col-sm-4">
                                    <div class="form-group">
                                        <label>Date 1*</label>
                                        <input type="date" id="mydate" class="form-control" onchange="onInputChanged()"
                                            name="date" value="{{old('date')}}" required>
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <div class="form-group">
                                        <label>Start Time 1*</label>
                                        <input type="time" class="form-control" name="start_time"
                                            value="{{old('start_time')}}" required>
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <div class="form-group">
                                        <label>End Time 1*</label>
                                        <input type="time" class="form-control" name="end_time" value="{{old('end_time')}}"
                                            required>
                                    </div>
                                </div>
                            @endif


                           

                            <div class="col-sm-12 mt-2">

                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <div class="form-group files">
                                            <label>Live Stream Thumbnail(Portrait - 1250 * 1333 MX - 2MB)*</label>
                                            <input type="file" name="potrait_thumbnail" class="form-control"
                                                onchange="readpotraitURL(this);" required>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-sm-6" id="show-image-div">
                                    <label style="width:100%;text-align:center;">Live Stream Preview (Portrait)</label>
                                    <div class="thubnail_img">
                                        <img id="potrait-image" src="https://via.placeholder.com/1250x1333"
                                            alt="Live Stream Thumbnail">
                                    </div>
                                </div>
                            </div>

                            <div class="col-sm-12">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <div class="form-group files">
                                            <label>Live Stream Thumbnail (Landscape - 1280 * 720 MX - 2MB)*</label>
                                            <input type="file" name="thumbnail" class="form-control"
                                                onchange="readURL(this);" required>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-sm-6" id="show-image-div">
                                    <label style="width:100%;text-align:center;">Live Stream Preview (Landscape)</label>
                                    <div class="thubnail_img">
                                        <img id="thumbnail-image" src="https://via.placeholder.com/1280x720"
                                            alt="Live Stream Thumbnail" style="max-width:100% !Important;">
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                    <!-- /.box-body -->
                    <div class="box-footer">
                        <button type="submit" class="btn btn-primary">Create &nbsp;<i
                                class="fa fa-long-arrow-right"></i> </button>

                    </div>

                </form>
            </div>
        </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]);
        }
    }

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

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

            reader.readAsDataURL(input.files[0]);
        }
    }

    // $(document).ready(function () {
    //     $('select').selectize({
    //         sortField: 'text'
    //     });
    // });
</script>
@endsection