@extends('admin.layout')
@section('custom-style')
<style>
    .alert {
        padding: 2px 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 42%;
        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;
        padding-top: 10px;
        color: #2ea591;
        font-weight: 600;
        text-transform: capitalize;
        text-align: center;
    }


    /*for video process*/
    .progress {
        border: 1px solid #7F98B2;
    }

    #go-back-button {
        display: none;
    }

    #ajax-error {
        display: none;
    }

    /*for video process end*/
</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 40%;
        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;
    }

    .thumbnail-image {
        height: 30px;
        margin-left: auto;
        margin-right: auto;
        width: 40%;
    }

    .potrait-thumbnail-image {
        margin-left: auto;
        margin-right: auto;
        max-width: 50%;
        max-height: 50px;
    }

    #landscape-thumbnail-image {
        max-width: 100% !important;
    }

    /* additional table alignment */
    th,
    td {
        text-align: center;
    }

    .top label {
        display: flex;
        align-items: center;
    }

    .top label select {
        margin: 5px;
    }

    .top label input {
        margin: 5px;
    }

    .amount-col {
        text-align: right;
    }

    .thumbnail-image {
        display: block;
        margin-right: auto !important;
        margin-left: auto !important;
    }
</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>
        Videos
    </h1>
    <ol class="breadcrumb">
        <li><a><i class="fa fa-video-camera"></i> Video</a></li>
        <li class="active">New Video Part</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">Add New Video Part</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>Video Title*</label>
                                    <input type="text" name="title" class="form-control" placeholder="Enter Video Title"
                                        value="{{$video->title}}" required />
                                </div>
                            </div>

                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label>Video Sub Title</label>
                                    <input type="text" name="sub_title" class="form-control"
                                        placeholder="Enter Video Sub Title" value="{{$video->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 episode</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>Episode Description</label>
                                    <textarea class="textarea" name="description"
                                        placeholder="Enter the episode description here">{{old('description')}}</textarea>
                                </div>
                            </div>

                        </div>


                        <div class="box-body">
                            <div class="row">

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

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

                                <div class="col-sm-12">
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <div class="form-group files">
                                                <label>Episode Thumbnail (Landscape - 1280 * 720 MX - 2MB)*</label>
                                                <input type="file" name="landscape_thumbnail" class="form-control"
                                                    onchange="readURLLandscape(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="landscape-thumbnail-image"
                                                src="https://via.placeholder.com/1280x720" alt="Episode Thumbnail">
                                        </div>
                                    </div>
                                </div>

                                <div class="col-sm-12">
                                    <div class="form-group">
                                        <div class="form-group files">
                                            <input type="file" name="video" id="poster" class="form-control" required>
                                            <div class="progress progress-md active">
                                                <div class="progress-bar progress-bar-success progress-bar-striped"
                                                    role="progressbar">
                                                    <span class="percent">0%</span>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <!-- /.box-body -->
                        <div class="box-footer">
                            @if(isset($video->video_path))
                                <p>
                                    <b>Note: </b>
                                    Previous video will be change if you upload new video.
                                </p>
                            @endif
                            <!-- <button type="submit" class="btn btn-primary">Update &nbsp;<i class="fa fa-long-arrow-right"></i> </button> -->
                            <button type="submit" id="video-submit-button" class="btn btn-primary"
                                style="width: 100%;">Submit</button>
                            <a id="go-back-button" class="btn btn-info" style="width: 100%;">
                                Please Wait...<i class="fa fa-refresh fa-spin"></i>
                            </a>


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

                        </div> -->

                </form>
            </div>

        </div>
        <div class="box box-primary">
            <div class="box-header with-border">
                <h3 class="box-title">All Videos</h3>

            </div>
            <div class="box-body">
                <table id="example1" class="table table-bordered table-striped">
                    <thead class="bg-primary text-white">
                        <tr>
                            <th>S.No.</th>
                            <th>Title</th>
                            <th>Potrait Thumbnail</th>
                            <th>Landscape Thumbnail</th>
                            <th>Duration</th>
                            <th>PPV Type</th>
                            <th>Status</th>
                            <th>Total Views</th>
                            <th>Paid Views</th>
                            <th>Likes</th>
                            <th>Dislikes</th>
                            <th>Content Acceptance Commission (USD)</th>
                            <th>PPV Revenue (USD)</th>
                            <th>Ad Revenue (USD)</th>
                            <th>Created on</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @if(isset($videos))
                            @foreach($videos as $video)
                                <tr>
                                    <td>{{$loop->iteration}}</td>
                                    <td>{{$video->title . " - " . $video->sub_title}}
                                        @if(isset($video->getRating->image))
                                            <img class="img inline-block img-responsive" style="height:25px; float:right;"
                                                src="{{url('ratings' . '/' . $video->getRating->image)}}">
                                        @endif
                                    </td>
                                    <td> <img class="img img-responsive potrait-thumbnail-image" data-toggle="tooltip"
                                            title="Potrait Thumbnail" src="{{$video->potrait_thumbnail}}">
                                    </td>
                                    <td> <img class="img img-responsive thumbnail-image" data-toggle="tooltip"
                                            title="Landscape Thumbnail" src="{{$video->thumbnail}}">
                                    </td>
                                    <td>
                                        @if(isset($video->duration))
                                            @if($video->in_compression_mode)
                                                <button class="btn btn-info btn-xs" data-toggle="tooltip"
                                                    title="Video: {{$video->duration}}">Vd</button>
                                            @else
                                                <button class="btn btn-success btn-xs" data-toggle="tooltip"
                                                    title="Video: {{$video->duration}}">Vd</button>
                                            @endif
                                        @else
                                            <button class="btn btn-danger btn-xs" data-toggle="tooltip"
                                                title="Video not uploaded">Vd</button>
                                        @endif
                                    </td>
                                    <td>
                                        @if($video->ppv_listing_type == 'Free View')
                                            <button class="btn btn-xs btn-success">Free View</button>
                                        @elseif($video->ppv_listing_type == 'Pay Per View')
                                            <button class="btn btn-xs btn-warning">Pay Per View</button>
                                        @endif

                                    </td>
                                    <td>
                                        @if($video->status == 'Active')
                                            <button class="btn btn-success btn-xs">
                                                Live
                                            </button>
                                        @elseif($video->status == 'In Review')
                                            <button class="btn btn-warning btn-xs">
                                                {{$video->status}}
                                            </button>
                                        @elseif($video->status == 'Inactive')
                                            <button class="btn btn-secondary btn-xs text-white"
                                                style="background-color:#444333;color:#fff;">
                                                Paused
                                            </button>
                                        @else
                                            <button class="btn btn-danger btn-xs">
                                                {{$video->status}}
                                            </button>
                                        @endif

                                        @if($video->in_compression_mode)
                                            <br />
                                            <span class="text-info" style="width:100%;">
                                                <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> In Processing
                                            </span>
                                        @endif
                                        @if($video->status == 'Inactive' && is_null($video->video_path) && (!$video->in_compression_mode))
                                            <br />
                                            <span class="text-danger" style="width:100%;">
                                                <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> Upload a Video
                                            </span>
                                        @endif
                                    </td>
                                    <td>{{\app\Models\VideoPart::getViews($video->id)}}</td>
                                    <td>{{\app\Models\VideoPart::getPaidViews($video->id)}}</td>
                                    <td>@if($video->getLikesDislikes) {{$video->getLikesDislikes->likes}} @else 0 @endif</td>
                                    <td>@if($video->getLikesDislikes) {{$video->getLikesDislikes->dislikes}} @else 0 @endif</td>
                                    <td class="amount-col">
                                        @if(is_null($video->cac_status))
                                            {{number_format($video->cac_amount, 2, '.', ',')}}
                                        @else
                                            @if($video->cac_status == 'Pending')
                                                <button class="btn btn-secondary btn-xs text-white"
                                                    style="background-color:#D2D6DE;color:#111111;"> {{$video->cac_status}} </button>
                                                {{number_format($video->cac_amount, 2, '.', ',')}}
                                            @elseif($video->cac_status == 'Allocated')
                                                <button class="btn btn-secondary btn-xs text-white"
                                                    style="background-color:#444333;color:#fff;"> soon to be applied </button>
                                                {{number_format($video->cac_amount, 2, '.', ',')}}
                                            @elseif($video->cac_status == 'Applied')
                                                <button class="btn btn-info btn-xs text-white"> {{$video->cac_status}} </button>
                                                {{number_format($video->cac_amount, 2, '.', ',')}}
                                            @elseif($video->cac_status == 'Processed')
                                                <button class="btn btn-success btn-xs text-white"> {{$video->cac_status}} </button>
                                                {{number_format($video->cac_amount, 2, '.', ',')}}
                                            @endif
                                        @endif
                                    </td>
                                    <td class="amount-col">{{number_format($video->ppv_revenue, 2, '.', ',')}}</td>
                                    <td class="amount-col">{{number_format($video->ad_revenue, 2, '.', ',')}}</td>
                                    <td>{{$video->created_at->format('d M, Y')}}</td>
                                    <td>


                                        @if(check_Permission('Video Gallery', 'edit'))
                                            <a href="{{Route('admin.editVideoPart', $video->id)}}" data-toggle="tooltip"
                                                title="Edit">
                                                <button class="btn btn-xs btn-info"><i class="fa fa-pencil"></i></button>
                                            </a>
                                        @endif


                                        @if(check_Permission('Video Gallery', 'delete'))
                                            <a href="{{Route('admin.deleteVideoPart', $video->id)}}" data-toggle="tooltip"
                                                title="Delete" onclick='return confirm("Are you sure?")'>
                                                <button class="btn btn-xs btn-danger"><i class="fa fa-trash"></i></button>
                                            </a>
                                        @endif


                                    </td>
                                </tr>
                            @endforeach
                        @endif
                    </tbody>
                </table>
            </div>


        </div>
    </div>
    <!-- /.row -->
</section>
@endsection

@section('custom-scripts')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.2.2/jquery.form.js"></script>

<!-- 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 type="text/javascript">

    //initialize the text editor
    $(function () {
        // Replace the <textarea id="editor1"> with a CKEditor
        // instance, using default configuration.
        CKEDITOR.replace('editor1')
        //bootstrap WYSIHTML5 - text editor
        $('.textarea').wysihtml5()
    })


    var SITEURL = "{{URL('/')}}";
    $(function () {
        $(document).ready(function () {
            var bar = $('.progress-bar');
            var percent = $('.percent');
            var videoButton = $('#video-submit-button');
            var goBackButton = $('#go-back-button');
            $('form').ajaxForm({
                beforeSend: function () {
                    var percentVal = '0%';
                    bar.width(percentVal)
                    percent.html(percentVal);
                    videoButton.css('display', 'none');
                    goBackButton.css('display', 'block');
                },
                uploadProgress: function (event, position, total, percentComplete) {
                    var percentVal = percentComplete + '%';
                    bar.width(percentVal)
                    percent.html(percentVal);
                },
                error: function (res) {
                    console.log(`here is the returned response from server ${res}`);
                    if (res.status === 422) {
                        bar.css('display', 'none');
                        $('#ajax-error').css('display', 'block');
                        var error = ((JSON.parse(res.responseText)).errors)['video'];
                        videoButton.css('display', 'block');
                        goBackButton.css('display', 'none');
                        $('#ajax-error').append('<li class="alert alert-danger">' + error + '</li>');
                    }
                },
                success: function (res) {

                    goBackButton.attr('href', '#').click(function (event) {
                        event.preventDefault();
                        location.reload();
                    });
                    goBackButton.html('Video Uploaded Successfully. It will be reviewed and pushed live after approval. Approval process might take up to 72hrs. Click to Go Back');
                    goBackButton.removeClass('btn-info');
                    goBackButton.addClass('btn-success');
                }
            });
        });
    });


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

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

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

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

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

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