@extends('admin.default')

@section('page-header')
    Review Videos
@endsection

@section('content')
                    <form action="{{url('admin/videos/processvideos')}}" method="post">
                    @csrf
                        <div class="modal fade" id="detailsModal" tabindex="-1" role="dialog"       aria-labelledby="detailsModalLabel" aria-hidden="true">
                            <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="detailsModalLabel">Select Details</h5>
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                    <div class="modal-body row">
                                        <div class="col-6">
                                            {!! Form::mySelect('category[]', 'Category', Arr::pluck($categories, 'category_name','category_id'), null, ['class' => 'form-control select2', 'multiple' => 'multiple']) !!}
                                        </div>
                                        <div class="col-6">
                                            {!! Form::mySelect('license_type','License type', config('variables.License'), null, ['class' => 'form-control select2']) !!}
                                        </div>
                                        <div class="col-6">
                                            {!! Form::mySelect('people','People type', config('variables.People'), null, ['class' => 'form-control select2']) !!}
                                        </div>
                                        <div class="col-6">
                                            {!! Form::myInput('text', 'Series', 'Series') !!}
                                        </div>
                                        <div class="col-12 d-flex mb-3">
                                            <div class="col-6 form-group form-check">
                                                <input name="smallcheck"  type="checkbox" class="form-check-input check" id="small">
                                                <label class="form-check-label" for="small-check">Small Image Price</label>
                                            </div>
                                            <input class="col-6 form-control" value="{{$site->small_image_price}}" name="smallprice" type="number" name="" id="small-price">
                                        </div>
                                        <div class="col-12 d-flex mb-3">
                                            <div class="col-6 form-group form-check">
                                                <input name="mediumcheck" type="checkbox" class="form-check-input check" id="medium">
                                                <label class="form-check-label" for="medium-check">Medium Image Price</label>
                                            </div>
                                            <input class="col-6 form-control" value="{{$site->medium_image_price}}" name="mediumprice" type="number"  id="medium-price">
                                        </div>
                                        <div class="col-12 d-flex">
                                            <div class="col-6 form-group form-check">
                                                <input name="largecheck" type="checkbox" class="form-check-input check" id="large">
                                                <label class="form-check-label"  for="large-check">Large Image Price </label>
                                            </div>
                                            <input class="col-6 form-control" value="{{$site->large_image_price}}" name="largeprice" type="number"  id="large-price">
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                                        <button type="submit" class="btn btn-primary">Change</button>   
                                    </div>
                                </div>
                            </div>
                        </div>

    <div class="bgc-white bd bdrs-3 p-20 mB-20">
        <div class="table-responsive">
            <table id="dataTable" class="table table-striped table-bordered" cellspacing="0" width="100%">
                <thead>
                    <tr>
                        <th><input type="checkbox" id="selectAll"></th>
                        <th>Video Name</th>
                        <th>Video Title</th>
                        <th>Video Keywords</th>
                        <th>Video</th>
                        <th>Video Size </th>
                        <th>Video play time</th>
                        <th>Video dimensions</th>
                        <th>Video Frame rate</th>
                        <th>Video format</th>
                    </tr>
                </thead>
                
                <tfoot>
                    <tr>
                        <th>Select</th>
                        <th>Video Name</th>
                        <th>Video Title</th>
                        <th>Video Keywords</th>
                        <th>Video</th>
                        <th>Video Size </th>
                        <th>Video play time</th>
                        <th>Video dimensions</th>
                        <th>Video Frame rate</th>
                        <th>Video format</th>
                    </tr>
                </tfoot>
                
                <tbody>
                    
                        <button disabled type="button" class="btn btn-primary mb-3 proccess" data-toggle="modal" data-target="#detailsModal">
                            <span  class="spinner-border spinner-border-sm loader-proccess "  role="status" aria-hidden="true"></span>
                            <span class="btn-text" >Add Selected videos</span>
                        </button>
                        @foreach ($items as $item)
                        <tr>
                            <td><input type="checkbox" class="video_checkbox" name="data[]" value="{{$item->file_path}}"></td>
                            
                            <td>{{ $item->file_name }}</td>
                            <td>{{ $item->file_title }}</td>
                            <td>{!! $item->keyword !!}</td>
                            <td>
                                <a href="/{{$item->file_path}}" target="_blank">
                                    <span class="ti-control-play">Play</span>
                                </a>
                            </td>
                            <td>{{ $item->file_size }}</td>
                            <td>{{ $item->file_play_time }}</td>
                            <td>{{ $item->file_height }} * {{ $item->file_width }}</td>
                            <td>{{ $item->file_frame_rate }}</td>
                            <td>{{ $item->file_format }}</td>
                            <td></td>
                        </tr>
                        @endforeach
                </tbody>
            
            </table>
        </div>
    </div>
</form>
    <script>

$('.check').change(function(){
	let id = '#' + this.id + '-price';
	$(id).prop('disabled',!this.checked).focus()

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

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

    reader.readAsDataURL(input.files[0]); // convert to base64 string
  }
}

$("#image-upload").change(function() {
  readURL(this);
});

setInterval(GetImageCount,1000)
function GetImageCount() {
    
        $.ajax({
            type : "GET",
            url : '/api/videoprocesscount',
            headers : {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },

            success : function(response)
            {
                console.log(response);
                if(response == 0){
                    $('.proccess').prop('disabled',false);
                    $('.loader-proccess').prop( "hidden",true)
                    $('.btn-text').html( "" );
                    $('.btn-text').html( "Add Selected videos" );
                }else{

                    console.log(response);
                    $('.proccess').prop('disabled',true);
                    $('.loader-proccess').removeClass( "hidden" );
                    $('.btn-text').html( "" );
                    $('.btn-text').html( response + " video(s) Under Proccess");
                    if(response == 1){
                        
                        setTimeout(function(){ location.reload(); },5000);
                    }
                }
                
            }
        });

}
$('#selectAll').click(function (e) {
    $(this).closest('table').find('td input:checkbox').prop('checked', this.checked);
});
</script>
@endsection