@extends('layout.basic.main')
@section('content')
    <style>
        #my .close, #audio .close, #video .close {
            opacity: 1;
        }
        #progressbox {
            border: 1px solid #0099CC;
            padding: 1px;
            position:relative;
            width:100%;
            border-radius: 3px;
            margin-bottom: 20px;
            display:none;
            text-align:left;
        }
        #progressbar {
            height:20px;
            border-radius: 3px;
            background-color: #003333;
            width:1%;
        }
        #statustxt {
            top:3px;
            left:50%;
            position:absolute;
            display:inline-block;
            color: #000000;
        }
    </style>
    <div class="container-fluid pc-body">
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 main">
                <div class="row">
                    <div class="col-sm-12">
                    </div>
                    <div class="row">
                        <div class="col-sm-12">
                            <h2 style="font-size: 30px;">登録メディア一覧</h2>
                            <p class="lm-current-description">
                                登録した画像や動画などの一覧を管理することが出来ます。
                            </p>
                            <div class="pull-right">
                                <form method="post" action="{{route('filter-media')}}" accept-charset="UTF-8"
                                      class="form-inline">
                                    {{ csrf_field() }}
                                    <div class="checkbox-inline">
                                        <label>
                                            <input type="checkbox" value="1" name="types[]"> 画像
                                        </label>
                                    </div>
                                    <div class="checkbox-inline">
                                        <label>
                                            <input type="checkbox" value="2" name="types[]"> 音声
                                        </label>
                                    </div>
                                    <div class="checkbox-inline">
                                        <label>
                                            <input type="checkbox" value="3" name="types[]"> 動画
                                        </label>
                                    </div>
                                    <input class="btn btn-default" type="submit" value="表示変更">
                                </form>
                            </div>
                            <button type="button" class="btn btn-info" data-toggle="modal" data-target="#mediaClientV1"
                                    data-type="photo" data-callback="mediaUploaded" data-editor="upload"
                                    style="margin-bottom: 0.5em;">
                                画像アップロード
                            </button>
                            <button type="button" class="btn btn-info" data-toggle="modal" data-target="#mediaClientV2"
                                    data-type="audio" data-callback="mediaUploaded" data-editor="upload"
                                    style="margin-bottom: 0.5em;">
                                音声アップロード
                            </button>
                            <button type="button" class="btn btn-info" data-toggle="modal" data-target="#mediaClientV3"
                                    data-type="video" data-callback="mediaUploaded" data-editor="upload"
                                    style="margin-bottom: 0.5em;">
                                動画アップロード
                            </button>
                            <hr>
                            <form method="POST" action="{{route('hidden-media')}}" accept-charset="UTF-8">
                                {{ csrf_field() }}
                                <div class="ps-gallery">
                                    <div class="row">
                                        @if(!empty($media))
                                            @foreach($media as $med)
                                                @if($med->media_type == 'video')
                                                    <div class="col-sm-2">
                                                        <label for="media_id_12067" style="display: block;">
                                                            <div class="panel panel-default panel-media panel-media-video">
                                                                <div class="panel-body text-center">
                                                                    <video preload="metadata" class="show-video"
                                                                           data-original-src-width="1040"
                                                                           data-original-src-height="613"
                                                                           style="max-width: 100%;" controls
                                                                           src="{{asset($med->media_path)}}"></video>
                                                                </div>
                                                                <div class="panel-footer">
                                                                    <input class="memberchecks pull-right panel-media-check"
                                                                           name="media_ids[]" type="checkbox"
                                                                           id="media_id_{{$med->id}}"
                                                                           value="{{$med->id}}">
                                                                    登録：<b>{{$med->created_at}}</b>
                                                                    <br>
                                                                    <a href="{{asset($med->media_path)}}"
                                                                       target="_blank">ダウンロード</a>
                                                                </div>
                                                            </div>
                                                        </label>
                                                    </div>
                                                @endif
                                                @if($med->media_type == 'audio')
                                                    <div class="col-sm-2">
                                                        <label for="media_id_12067" style="display: block;">
                                                            <div class="panel panel-default panel-media panel-media-video">
                                                                <div class="panel-body text-center">
                                                                    <audio class="show-audio"
                                                                           preload="metadata"
                                                                           data-original-src-width="1040"
                                                                           data-original-src-height="613"
                                                                           style="max-width: 100%;" controls
                                                                           src="{{asset($med->media_path)}}"></audio>
                                                                </div>
                                                                <div class="panel-footer">
                                                                    <input class="memberchecks pull-right panel-media-check"
                                                                           name="media_ids[]" type="checkbox"
                                                                           id="media_id_{{$med->id}}"
                                                                           value="{{$med->id}}">
                                                                    登録：<b>{{$med->created_at}}</b>
                                                                    <br>
                                                                    <a href="{{asset($med->media_path)}}"
                                                                       target="_blank">ダウンロード</a>
                                                                </div>
                                                            </div>
                                                        </label>
                                                    </div>
                                                @endif
                                                @if($med->media_type == 'image')
                                                    <div class="col-sm-2">
                                                        <label for="media_id_12061" style="display: block;">
                                                            <div class="panel panel-default panel-media panel-media-image">
                                                                <div class="panel-body text-center">
                                                                    <div class="gallery-item ">
                                                                        <img id="{{$med->id}}"
                                                                             data-id="{{$med->id}}"
                                                                             class="show"
                                                                             src="{{asset($med->media_path)}}"
                                                                             data-original-src="">
                                                                    </div>
                                                                </div>
                                                                <div class="panel-footer">
                                                                    <input class="memberchecks pull-right panel-media-check"
                                                                           id="media_id_{{$med->id}}"
                                                                           value="{{$med->id}}" name="media_ids[]"
                                                                           type="checkbox">
                                                                    登録：<b>{{$med->created_at}}</b>
                                                                    <br>
                                                                </div>
                                                            </div>
                                                        </label>
                                                    </div>
                                                @endif
                                            @endforeach
                                        @endif
                                    </div>
                                    <div class="pull-right">
                                        <label for="membercheck_all">
                                            <input id="membercheck_all" name="dammy" type="checkbox" value="1">
                                            全てのメディアをチェック
                                        </label>
                                        <input class="btn btn-danger btn-sm" type="submit" value="チェックしたメディアを削除する">
                                    </div>
                                    <div class="simple-pager">
                                        @if($current_page > 1 && $total_page >1)
                                            <a class="btn btn-success"
                                               href="{{url('basic/filter-media/?page='.($current_page-1))}}" rel="prev">
                                                <span class="glyphicon glyphicon-arrow-left"></span> 次の36件へ</a>
                                        @endif
                                        @if ($current_page < $total_page && $total_page > 1)
                                            <a class="btn btn-success"
                                               href="{{url('basic/filter-media/?page='.($current_page+1))}}" rel="next">
                                                次の36件へ <span class="glyphicon glyphicon-arrow-right"></span></a>
                                        @endif
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{--Modal show media--}}
    <div id="my" class="modal-show">
        <button type="button" class="close close-show" data-dismiss="modal">&times;</button>
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body" style="padding: 0 !important;">
                    <img class="modal-content" src="" alt="" id="fullimg" style="width: 100%">
                </div>
            </div>
        </div>
    </div>
    <div id="audio" class="modal-show">
        <button type="button" class="close close-show" data-dismiss="modal">&times;</button>
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body" style="padding: 0 !important;">
                    <audio preload="metadata" class="modal-content" data-original-src-width="1040" data-original-src-height="613" controls
                           src="" id="fullaudio" style="width: 100%;">
                    </audio>
                </div>
            </div>
        </div>
    </div>
    <div id="video" class="modal-show">
        <button type="button" class="close close-show" data-dismiss="modal">&times;</button>
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body" style="padding: 0 !important;">
                    <video preload="metadata" class="modal-content" data-original-src-width="1040"
                           data-original-src-height="613" controls
                           src="" id="fullvideo" style="width: 100%;"></video>
                </div>
            </div>
        </div>
    </div>
    {{--Modal Upload Image --}}
    <div class="modal fade media-modal-v1 in" id="mediaClientV1" tabindex="-1" role="dialog"
         aria-labelledby="mediaModalv1">
        <div role="document" id="mediaClientEl" class="modal-dialog  modal-lg">
            <div class="modal-content">
                <div id="" class="modal-header">
                    <span id="media_modal_v1">画像アップロード</span>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <form action="{{route('media-image')}}" method="post" enctype="multipart/form-data">
                    {{ csrf_field() }}
                    <div id="media_modal_body" class="modal-body modal-body-main">
                        <div>
                            <div class="dropZone">
                                <div class="fine-uploader-dropzone-container">

                                    <label for="media_client_dropinput">
                                        <span class="btn btn-info">ファイルを選択する</span>
                                    </label>
                                    <input type="file" name="upload_image" id="media_client_dropinput"
                                           style="display: none;">
                                    <br>
                                    <br>
                                    <p style="font-size: 80%;">10MBまでのファイルをアップロードできます</p>
                                    <div hidden="hidden" class="vue-fine-uploader-total-progress-bar-container">
                                        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="0" role="progressbar"
                                             class="vue-fine-uploader-total-progress-bar" style="width: 0%;"></div>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <img id="profile-img-tag" width="200px" /><br>
                    <div id="name_image"></div>
                    <div class="modal-footer">
                        <div class="selected_foot">
                        <span class="media_client_finishers">
                            <button type="submit" data-save="update"
                                    class="btn btn-primary media-modal-finisher" id="upload-image">
                                <i class="fa fa-close"></i> 完了
                            </button>
                        </span>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    {{-- End Modal Upload Image--}}

    {{--Modal Upload Audio --}}
    <div class="modal fade media-modal-v1 in" id="mediaClientV2" tabindex="-1" role="dialog"
         aria-labelledby="mediaModalv2">
        <div role="document" id="mediaClientEl" class="modal-dialog  modal-lg">
            <div class="modal-content">
                <div id="" class="modal-header">
                    <span id="media_modal_v1">音声アップロード</span>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <form action="{{route('media-audio')}}" method="post" enctype="multipart/form-data">
                    {{ csrf_field() }}
                    <div id="media_modal_body" class="modal-body modal-body-main">
                        <div>
                            <div class="dropZone">
                                <div class="fine-uploader-dropzone-container">
                                    {{--<span class="dropzone_description">ここにファイルをドロップ</span>--}}
                                    {{--<span class="dropzone_or">または</span>--}}
                                    <div class="vue-fine-uploader-file-input">
                                        <label for="media_client_dropinput_audio">
                                            <span class="btn btn-info">ファイルを選択する</span>
                                        </label>
                                        <input type="file" name="media_audio" id="media_client_dropinput_audio" style="display: none;">
                                    </div>
                                    <br>
                                    <br>
                                    <p style="font-size: 80%;">200MBまでのファイルをアップロードできます</p>
                                    <div hidden="hidden" class="vue-fine-uploader-total-progress-bar-container">
                                        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="0" role="progressbar"
                                             class="vue-fine-uploader-total-progress-bar" style="width: 0%;"></div>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <div>

                                </div>
                            </div>
                        </div>
                    </div>
                    <video preload="metadata" controls id="audio_here" style="display: none"></video><br>
                    <div id="name_audio"></div>
                    <div class="modal-footer">
                        <div class="selected_foot">
                        <span class="media_client_finishers">
                            <button type="submit" data-save="update" id="upload-audio" class="btn btn-primary media-modal-finisher"><i class="fa fa-close"></i> 完了</button>
                        </span>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    {{-- End Modal Upload Audio--}}

    {{--Modal Upload Video --}}
    <div class="modal fade media-modal-v1 in" id="mediaClientV3" tabindex="-1" role="dialog"
         aria-labelledby="mediaModalv3">
        <div role="document" id="mediaClientEl" class="modal-dialog  modal-lg">
            <div class="modal-content">
                <div id="" class="modal-header">
                    <span id="media_modal_v1">動画アップロード</span>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <form action="{{route('media-video')}}" id="form_upload_ajax" method="post" enctype="multipart/form-data">
                    {{ csrf_field() }}
                    <div id="media_modal_body" class="modal-body modal-body-main">
                        <div>
                            <div class="dropZone">
                                <div class="fine-uploader-dropzone-container">
                                    {{--<span class="dropzone_description">ここにファイルをドロップ</span>--}}
                                    {{--<span class="dropzone_or">または</span>--}}
                                    <div class="vue-fine-uploader-file-input">
                                        <label for="media_client_dropinput_video">
                                            <span class="btn btn-info">ファイルを選択する</span>
                                        </label>
                                        <input type="file" name="upload_video" id="media_client_dropinput_video"
                                               style="display: none;">
                                    </div>
                                    <br>
                                    <br>
                                    <p style="font-size: 80%;">200MBまでのファイルをアップロードできます</p>
                                    <div hidden="hidden" class="vue-fine-uploader-total-progress-bar-container">
                                        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="0" role="progressbar"
                                             class="vue-fine-uploader-total-progress-bar" style="width: 0%;"></div>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <video preload="metadata" controls width="200px" id="video_here" style="display: none">
                    </video>
                    <div id="name_video"></div>
                    <div class="modal-footer">
                        <div class="selected_foot">
                            <span class="media_client_finishers">
                                <button type="submit" data-save="update" id="upload-video" class="btn btn-primary media-modal-finisher">
                                    <i class="fa fa-close"></i> 完了
                                </button>
                            </span>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    {{-- End Modal Upload Video--}}
    <script src="/js/jquery.min.js"></script>
    <script src="https://demo.phpgang.com/upload-image-progress-with-jquery/js/jquery.form.js"></script>
    <script src="/js/media/index.js?v={{config("sns-line.version")}}"></script>
    <script src="/js/media/alertify.min.js"></script>
    <script src="/js/plugins/datepicker/bootstrap-datepicker.js"></script>
    <script src="/js/plugins/timepicker/bootstrap-timepicker.js"></script>

    @if(session('message'))
        <script>
            $(document).ready(function () {
                alertify.confirm('{{session("message")}}');
            })
        </script>
    @endif

    @if(session('error'))
        <script>
            $(document).ready(function () {
                alertify.confirm('<span style="color:red;">{{session("error")}}</span>');
            })
        </script>
    @endif
@endsection