@extends('../../master_layout/website_master')

@section('title')
<title>{{env('APP_NAME')}} :: Profile Media</title>
@endsection

@section('custom_css')
<link rel="stylesheet" href="{{asset('public/frontend_assets/plugins/fileuploader/font/font-fileuploader.css')}}">
<link rel="stylesheet" href="{{asset('public/frontend_assets/plugins/fileuploader/jquery.fileuploader.min.css')}}">
<link rel="stylesheet" href="{{asset('public/frontend_assets/plugins/fileuploader/jquery.fileuploader-theme-thumbnails.css')}}">
<link rel="stylesheet" href="{{asset('public/frontend_assets/plugins/fileuploader/jquery.fileuploader-theme-dragdrop.css')}}">
@endsection
@section('heading')
<section class="page-heading">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="content flex-column flex-sm-row">
                    <h1 class="py-2 py-sm-0">Upload Media - {{$profile->display_name}}</h1>
                    <!-- breadcrumb -->
                    @php
                    if($edit) {
                        $breadcrumb = array(
                            array('title'=>'My Profiles', 'url'=>route('profile')),
                            array('title'=>$profile->display_name, 'url'=>route('profile.link',['slug'=>$profile->slug])),
                            array('title'=> 'Edit Profile', 'url'=>'', 'active'=>'1')
                        );
                    } else {
                        $breadcrumb = array(
                            array('title'=>'My Profiles', 'url'=>route('profile')),
                            array('title'=> 'Add Profile', 'url'=>'', 'active'=>'1')
                        );
                    }                    
                    @endphp
                    @include('website_view.component.breadcrumb',  compact("breadcrumb"))
                    <!-- \breadcrumb -->
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@section('content')
<section class="profile-two py-2">
    <div class="container-fluid">
        @if (session('errors'))
        <div class="alert alert-danger alert-dismissible">
            @foreach($errors->all() as $message)
            <li class="text-danger">{{$message}}</li>
            @endforeach
        </div>
        @endif

        <div class="row">
            <!-- Message-->
            @if (session('message'))
            <div class="col-12">
                <div class="alert alert-{{session('message.type')}} alert-dismissible fade show" role="alert">
                    @if(session('message.type')=='danger')
                    <strong>Oops!</strong> {!! session('message.text') !!}
                    @else
                    <strong>Success!</strong> {!! session('message.text') !!}
                    @endif
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            </div>
            @endif
            <!--end message-->
            <div class="col-12">
                <nav class="slidemenu">
        
                    <!-- Item 1 -->
                    @php
                    if($edit) {
                        $profile_info = "window.location='".route('profile.edit',['slug'=>$profile->slug])."'";
                        $upload_media = "window.location='".route('profile.media',['slug'=>$profile->slug])."'";
                    } else {
                        $profile_info = "window.location='".route('profile.add')."'";
                        $upload_media = "alert('Save Profile detail to Upload Media.');return false;";
                    }
                    @endphp
                    <input type="radio" name="slideItem" id="slide-item-1" class="slide-toggle" onclick="{{$profile_info}}"/>
                    <label for="slide-item-1"><p class="icon"><i class="fas fa-building" aria-hidden="true"></i></p><span>Profile Information</span></label>
                    
                    <!-- Item 2 -->
                    <input type="radio" name="slideItem" id="slide-item-2" class="slide-toggle" checked onclick="{{$upload_media}}"/>
                    <label for="slide-item-2"><p class="icon"><i class="fas fa-images"></i></p><span>Upload Media</span></label>
                    
                    <div class="clearfix"></div>

                    <!-- Bar -->
                    <div class="slider">
                        <div class="bar"></div>
                    </div>
                    
                </nav>
            </div>
            
            <div class="col-12">
                <form id="addProfile" action="{{route('profile.add.process')}}" method="post" enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="advertiser_id" id="advertiser_id" value="{{($edit)?$profile->advertiser_id:0}}">

                    <!-- Upload photos -->
                    <div class="row mb-1 mt-3">
                        <div class="col-12">
                            <div class="heading-three">
                                <h2><i class="fas fa-images mr-2"></i>Upload Photos (<span class="upload_counts">@if(isset($images) && !empty($images)) {{count($images)}} @else 0 @endif</span> / 15)</h2>
                            </div>
                        </div>
                    </div>
                    <div class="box-one mb-3">
                        <div class="row"> 
                            <div class="col-12">
                                <p>
                                    Please upload high-quality images only. Only post pictures of yourself or of a person who has given you explicit permission to do so. If you post fake photos, your profile will be deleted and your account blocked - <a href="{{route('cms.content',['slug'=>'help-for-advertisers'])}}">more information</a>. 
                                    <br>
                                    <span style="color:#ffff00;">New rule: Photos with full frontal nudity, genitalia or sexually explicit conduct are prohibited.</span>
                                </p>
                            </div>
                        </div>
                        @php
                        $preload_images = array();                        
                        if(isset($images) && !empty($images)){
                            foreach($images as $image){
                                $file = getStorageFile(config('path.escort').$image->advertiser_id.'/'.$image->advertiser_image_url, 'b2');
                                if($image->is_main == 1 ){
                                    $is_main = 'checked';
                                } else {
                                    $is_main = '';
                                }
                                $preload_images[] = array(
                                                            'name' => $image->advertiser_image_url,
                                                            'type' => "image/webp",
                                                            'size' => 0,
                                                            'file' => $file,
                                                            'data' => array('advertiser_image_id' => $image->advertiser_image_id, 'is_main' => $is_main)
                                                        );
                            }                            
                        }        
                        @endphp
                        <div class="row"> 
                            <div class="col-12">
                                <input type="file" name="photo[]" id="filePhoto" accept="image/*" multiple class="visibility-hidden filepond" data-fileuploader-files='{{json_encode($preload_images)}}'>
                            </div>
                        </div>
                        <div class="row"> 
                            <div class="col-md-12">
                                <small>Maximum <b>15</b> files are allowed to upload.</small>
                            </div>
                        </div>
                    </div>
                    <!-- \Upload photos -->
                     
                    <!-- Video -->
                    <div class="row mb-1 mt-3">
                        <div class="col-12">
                            <div class="heading-three">
                                <h2><i class="fas fa-video mr-2"></i>Add Video</h2>
                            </div>
                        </div>
                    </div>                    
                    <div class="box-one">
                        
                        <div class="row">
                            <div class="col-12">
                                <div class="form-group">
                                    <label class="radio-one">Upload Video
                                    <input type="radio" name="video_option" id="video_option" value="upload" class="video_option" @if(empty($profile->video_url)) checked @endif>
                                    <span class="checkmark"></span>

                                    <label class="radio-one ml-4">Video URL
                                    <input type="radio" name="video_option" id="video_option" class="video_option" value="url" @if(isset($profile->video_url) && $profile->video_url !='') checked @endif>
                                    <span class="checkmark"></span>
                                </div>
                                <div class="form-group vid_url" @if(empty($profile->video_url)) style="display:none;" @endif>
                                    <div class="form-inline align-items-center">
                                        <div class="input-group col-md-6">
                                            <input type="text" class="form-control" placeholder="Video URL" name="video_url" id="video_url" value="{{($edit)?$profile->video_url:old('video_url')}}">                                           
                                        </div>
                                        <a href="https://vimeo.com/" target="_blank">
                                            <img src="{{asset('public/frontend_assets/images/icon/vimeo.png')}}" height="20" alt="">
                                        </a>
                                        <a href="https://www.dailymotion.com/" target="_blank">
                                            <img src="{{asset('public/frontend_assets/images/icon/dailymotion-logo.png')}}" height="20" alt="">
                                        </a>
                                    </div>                                   
                                </div>
                                
                                <div class="form-group vid_upload" @if(isset($profile->video_url) && $profile->video_url !='') style="display:none;" @endif>
                                    @php
                                    $preload_video = array();                        
                                    if(isset($profile->video_file) && $profile->video_file !='') {                                        
                                        $file = getStorageFile(config('path.escort').$profile->advertiser_id.'/video/'.$profile->video_file, 'b2');
                                        //$file = asset('public/uploads/temp/file_example1_MP4_480_1_5MG.mp4');
                                        $preload_video[] = array(
                                                                    'name' => $profile->video_file,
                                                                    'type' => "video/mp4",
                                                                    'size' => 0,
                                                                    'file' => $file,
                                                                    'data' => array('advertiser_id' => $profile->advertiser_id, 'readerCrossOrigin' => 'anonymous')
                                                                );                                                                 
                                    }   
                                    @endphp
                                    <div class="row"> 
                                        <div class="col-12">
                                            <input type="file" name="video" id="fileVideo" accept="video/mp4" class="filepond" data-fileuploader-files='{{json_encode($preload_video)}}'>
                                        </div>
                                    </div>
                                    <div class="row"> 
                                        <div class="col-md-12">
                                            <small>Allowed file types are <b>MP4</b> and file size max <b>50MB</b>.</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Video -->
                </form>
            </div>
        </div>
    </div>
</section>

@endsection

@section('custom_js')
<script src="{{ asset('public/frontend_assets/plugins/fileuploader/jquery.fileuploader.min.js') }}"></script>
<script src="{{ asset('public/frontend_assets/plugins/fileuploader/fileuploader-post.js?v=1') }}"></script>
<script>
    $(function() {       
        $(document).on("change", '.is_main', function() {            
            advertiser_image_id = $("input[name = 'is_main']:checked").val();
            $.ajax({
                url: "{{url('change-main/media')}}",
                type: "POST",
                data: {
                    advertiser_id: $('#advertiser_id').val(),
                    advertiser_image_id: advertiser_image_id,
                    _token: '{{csrf_token()}}'
                },
                dataType: 'json',
                success: function (response) {      
                    console.log(response);
                }
            });            
        });

        $('.video_option').change(function(){
            selected_value = $("input[name = 'video_option']:checked").val();

            if(selected_value == 'url'){
                $(".vid_url").show();
                $(".vid_upload").hide();
            } else {
                $(".vid_url").hide();
                $(".vid_upload").show();
            }            
        });

        $(document).on("change", '#video_url', function() { 
            if($('#video_url').val() !='' && !isUrlValid($('#video_url').val())){                
                var error = '<span class="error invalid-feedback">Enter valid URL</span>';
                $(this).addClass('is-invalid');
                $(this).closest('.input-group').append(error);
                return false;
            } else {
                $(this).removeClass('is-invalid');
            }
            $.ajax({
                url: "{{url('change/video-url')}}",
                type: "POST",
                data: {
                    advertiser_id: $('#advertiser_id').val(),
                    video_url: $('#video_url').val(),
                    _token: '{{csrf_token()}}'
                },
                dataType: 'json',
                success: function (response) {      
                    alert('Video URL updated successfully.')
                }
            });            
        });
    });

    function isUrlValid(url) {
        return /^(https?|s?ftp):\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i.test(url);
    }
</script>
@endsection