@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;
        }

        .pdf-pull-right {
            float: right;
            margin-right: 2px;
        }

        .thumbnail-footer {
            text-align: right;
            border-top: 1px solid #cccccc;
            padding: 7px 3px 3px;
            cursor: default;
        }

        .panel-media-img-pdf {
            position: absolute;
            color: #263441;
            opacity: 0.7;
            line-height: 150px;
            font-size: 100px;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
        }

        .panel-media-pdf .panel-media-pdf-btns {
            position: absolute;
            bottom: 0;
            left: 0;
        }

        .panel-media .panel-footer {
            height: unset !important;
        }

        .slow-spin {
            -webkit-animation: fa-spin 1s infinite linear;
            animation: fa-spin 1s infinite linear;
            float: right;
            margin-right: 5px;
            margin-top: 2px;
        }

    </style>
    <div class="container-fluid pc-body">
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12">
                <div class="row">
                    <div class="row">
                        <div class="col-sm-12">
                            <h2 style="font-size: 20px; color: #222222; font-weight: bold; padding: 10px 10px 10px 0">
                                登録メディア一覧</h2>
                            <p style="margin-bottom: 15px; font-size: 15px; color: #222222">
                                画像・音声・動画をアップロードしたり、アップロード済みのものを管理することができます。</p>
                            <form action="{{route('filter-media')}}" method="get">

                                <div class="pull-right">
                                    <div class="checkbox-inline">
                                        <label>
                                            <input type="checkbox"
                                                   @if(isset($_GET['types']) && in_array(1,$_GET['types'])) checked
                                                   @endif value="1" name="types[]"> 画像
                                        </label>
                                    </div>
                                    <div class="checkbox-inline">
                                        <label>
                                            <input type="checkbox"
                                                   @if(isset($_GET['types']) && in_array(2,$_GET['types'])) checked
                                                   @endif value="2" name="types[]"> 音声
                                        </label>
                                    </div>
                                    <div class="checkbox-inline">
                                        <label>
                                            <input type="checkbox"
                                                   @if(isset($_GET['types']) && in_array(3,$_GET['types'])) checked
                                                   @endif value="3" name="types[]"> 動画
                                        </label>
                                    </div>
                                    <div class="checkbox-inline">
                                        <label>
                                            <input type="checkbox"
                                                   @if(isset($_GET['types']) && in_array(4,$_GET['types'])) checked
                                                   @endif value="4" name="types[]"> PDF
                                        </label>
                                    </div>
                                    <input class="btn btn-default" type="submit" id="filter" value="表示変更">
                                </div>
                            </form>
                            <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>
                            <button type="button" class="btn btn-info" data-toggle="modal" data-target="#mediaClientV4"
                                    data-type="pdf" data-callback="mediaUploaded" data-editor="upload"
                                    style="margin-bottom: 0.5em;">
                                PDFアップロード
                            </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 class="show-video"
                                                                           preload="metadata"
                                                                           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
                                                @if($med->media_type == 'pdf')
                                                    <div class="col-sm-2">
                                                        <label for="media_id_12061" style="display: block;">
                                                            <div class="panel panel-default panel-media panel-media-pdf">
                                                                <div class="panel-body text-center"
                                                                     style="background-color: #a7b3c1">
                                                                    <i class="fa fa-file-pdf-o panel-media-img-pdf"></i>
                                                                    <div class="input-group input-group-sm panel-media-pdf-btns">
                                                                        <input type="text"
                                                                               value="{{asset($med->media_path)}}"
                                                                               id="media_copy_{{ $med->id }}"
                                                                               autocomplete="off"
                                                                               class="form-control input-sm"
                                                                               style="position: unset">
                                                                        <span class="input-group-btn">
                                                                                <button value="{{ $med->id }}"
                                                                                        type="button"
                                                                                        class="btn btn-default copy-btn"
                                                                                        style="position: unset">
                                                                                    <span class="glyphicon glyphicon-copy"></span>
                                                                                    コピー
                                                                                </button>
                                                                            </span>
                                                                    </div>
                                                                </div>
                                                                <div class="panel-footer" id="pdf-footer" style="padding-bottom: 0.5em">
                                                                    <input class="memberchecks pull-right panel-media-check"
                                                                           id="media_id_{{$med->id}}"
                                                                           value="{{$med->id}}" name="media_ids[]"
                                                                           type="checkbox" style="margin-right: unset;margin-left: 1px">
                                                                    <div class=" panel-media-title" style="word-break: break-all;">
                                                                        <b id="media_name" style="font-weight: 600"><span class="name-pdf" id="name_pdf_{{$med->id}}">{{$med->media_name}}</span></b>
                                                                    </div>
                                                                    <textarea rows="3" class="edit-form-area rename-pdf" style="margin-top: 10px;resize: none;font-size: 12px" id="rename_pdf_{{$med->id}}" name="rename_pdf_{{$med->id}}" hidden>{{ $med->media_name }}</textarea>
                                                                    登録：<b>{{$med->created_at}}</b>
                                                                    <div style="height: 27px; padding-top: 5px;" id="footer_pdf_{{$med->id}}" class="footer-pdf">
                                                                        <a href="{{asset($med->media_path)}}" target="_blank">ダウンロード</a>
                                                                        <div style="float: right;margin-right: 5px">
                                                                            <button type="button" class="btn btn-xs btn-warning" onclick="showRenamePdf({{ $med->id }})">表示名編集</button>
                                                                        </div>
                                                                    </div>
                                                                    <div style="height: 27px; padding-top: 5px;" id="footer_rename_pdf_{{$med->id}}" class="footer-rename-pdf" hidden>
                                                                        <button type="button" onclick="cancelRenamePdf({{$med->id}})"
                                                                                style="float: left; border: 0"><span>×</span></button>
                                                                        <span class="btn btn-xs btn-success" onclick="saveRenamePdf({{ $med->id }})" style="float: right">登録</span>
                                                                        <i class=" fa fa-refresh slow-spin spin_pdf_{{ $med->id }} " hidden></i>
                                                                    </div>
                                                                    <div class="clearfix"></div>
                                                                </div>
                                                            </div>
                                                        </label>
                                                    </div>
                                                @endif
                                                @if((@$loop->index+1) % 6 == 0)
                                                        <div class="clearfix"></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/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/media/?page='.($current_page+1))}}" rel="next">
                                                次の36件へ <span class="glyphicon glyphicon-arrow-right"></span></a>
                                        @endif
                                    </div>
                                </div>
                                <div class="filter_list_gallery"></div>
                                <div class="pagination_media" style="clear: both">

                                </div>
                                <div class="pull-right-filter" style="float: right;">

                                </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">
                                    {{--<span class="dropzone_description">ここにファイルをドロップ</span>--}}
                                    {{--<span class="dropzone_or">または</span>--}}

                                    <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--}}

    {{--Modal Upload PDF --}}
    <div class="modal fade media-modal-v1 in" id="mediaClientV4" tabindex="-1" role="dialog"
         aria-labelledby="mediaModalv4">
        <div role="document" id="mediaClientEl" class="modal-dialog  modal-lg">
            <div class="modal-content">
                <div id="" class="modal-header">
                    <span id="media_modal_v1">PDFアップロード</span>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <form action="{{route('media-pdf')}}" 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_pdf">
                                            <span class="btn btn-info">ファイルを選択する</span>
                                        </label>
                                        <input type="file" name="media_pdf" id="media_client_dropinput_pdf"
                                               accept="application/pdf" style="display: none;">
                                    </div>
                                    <br>
                                    <br>
                                    <p style="font-size: 80%;">10MBまでのファイルをアップロードできます</p>
                                    <b style="color: red; font-size: 80%">※公開リンクが作成されるため、個人情報の取扱にご注意ください※</b>
                                    <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>
                    <div>
                        <div id="show_url_pdf" class="col-sm-6" style="padding-bottom: 20px;display: none">
                            <span class="thumbnail selected">
                                <span style="display: block; padding-bottom: 0.5em;">
                                    <div class="pdfwrap">
{{--                                        <button type="button" id="copy_url-pdf"--}}
{{--                                                class="btn btn-default btn-sm pdf-pull-right">--}}
{{--                                            <span class="glyphicon glyphicon-copy"></span>コピー--}}
{{--                                        </button>--}}
{{--                                        <input type="text" id="pdf_here" class="form-control input-sm pdf-pull-right"--}}
{{--                                               style="width: 12em">--}}
                                        <span id="date_time_pdf"></span>
                                        <p style="margin-bottom: 10px"></p>
                                        <span id="name_pdf"></span>
                                        <textarea rows="3" class="edit-form-area" style="margin-top: 10px;resize: none"
                                                  id="rename_pdf" name="rename_pdf" hidden></textarea>
                                    </div>
                                    </span>
                                <div class="thumbnail-footer">
                                    <span class="btn btn-xs btn-warning" id="show_rename_pdf">表示名編集</span>
                                </div>
                                 <div class="thumbnail-footer" id="footer_rename_pdf" hidden>
                                     <button type="button" id="cancel_rename_pdf"
                                             style="float: left; border: 0"><span>×</span></button>
                                     <span class="btn btn-xs btn-success" id="save_rename_pdf">登録</span>
                                      <i class=" fa fa-refresh slow-spin spin_pdf " hidden></i>
                                 </div>
                            </span>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="modal-footer">
                        <div class="selected_foot">
                        <span class="media_client_finishers">
                            <button type="submit" data-save="update" id="upload-pdf"
                                    class="btn btn-primary media-modal-finisher"><i class="fa fa-close"></i> 完了</button>
                        </span>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    {{-- End Modal Upload PDF--}}

    <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/alertify.min.js"></script>
    <script src="/js/plugins/datepicker/bootstrap-datepicker.js"></script>
    <script src="/js/plugins/timepicker/bootstrap-timepicker.js"></script>
    <script src="/js/media/index.js?v={{config("sns-line.version")}}"></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
    <script>
        $(document).ready(function () {
            var namePdf = '';
            $(document).on('change', '#media_client_dropinput_pdf', function (d) {
                // var b = $('#pdf_here');
                namePdf = d.target.files[0].name;
                var currentdate = new Date();
                var dateNow = currentdate.getFullYear() + "-"
                    + (currentdate.getMonth() + 1) + "-"
                    + currentdate.getDate() + " "
                    + currentdate.getHours() + ":"
                    + currentdate.getMinutes() + ":"
                    + currentdate.getSeconds();
                var a = $('#media_client_dropinput_pdf').val().replace(/^.*\./, '');
                if(a == 'pdf'){
                    $('#show_url_pdf').css('display', 'unset');
                    $("#date_time_pdf").text(dateNow);
                    // b[0].value = URL.createObjectURL(this.files[0]);
                    $('#name_pdf').html(namePdf);
                    // b.parent()[0].load();
                }else{
                    alert('ァイルの形式が正しくありません。');
                };
            });
            $('#copy_url-pdf').click(function () {
                copyToClipboardMsg(document.getElementById("pdf_here"));
            });

            function copyToClipboardMsg(elem) {
                var urlPdf = $(elem).val();
                var succeed = copyToClipboard(elem);
                if (!succeed) {
                    alert("エラーはコピーできません");
                } else {
                    alert(urlPdf + " をコピーしました");
                }
            }

            function copyToClipboard(elem) {
                var isInput = elem.tagName === "INPUT" || elem.tagName === "TEXTAREA";
                var origSelectionStart, origSelectionEnd;
                target = elem;
                origSelectionStart = elem.selectionStart;
                origSelectionEnd = elem.selectionEnd;

                var currentFocus = document.activeElement;
                target.focus();
                target.setSelectionRange(0, target.value.length);
                var succeed;
                try {
                    succeed = document.execCommand("copy");
                } catch (e) {
                    succeed = false;
                }
                if (currentFocus && typeof currentFocus.focus === "function") {
                    currentFocus.focus();
                }
                if (isInput) {
                    elem.setSelectionRange(origSelectionStart, origSelectionEnd);
                } else {
                    target.textContent = "";
                }
                return succeed;
            }

            $('#show_rename_pdf').click(function () {
                $('#rename_pdf').show();
                $('#name_pdf').hide()
                $('#footer_rename_pdf').show();
                $('#show_rename_pdf').hide();
                $('#rename_pdf').val(namePdf);

            });
            $('#save_rename_pdf').click(function () {
                $('#spin_pdf').show();
                namePdf = $('#rename_pdf').val();
                if(namePdf.length <= 30) {
                    $.ajax({
                        url: "/basic/test-name-pdf",
                        type: "POST",
                        data: { name_media_pdf: namePdf },
                        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}
                    }).done(function (respdataonse, textStatus, jqXHR) {
                        console.log(respdataonse);
                        $('#spin_pdf').hide();
                        if (respdataonse.success == !0){
                            $('#name_pdf').html(namePdf);
                            $('#rename_pdf').hide();
                            $('#footer_rename_pdf').hide();
                            $('#show_rename_pdf').show();
                            $('#name_pdf').show();
                        };
                        if (respdataonse.success == !1) alert('表示名は既に使用されています。');
                    }).fail(function (jqXHR, textStatus, errorThrown) {
                        console.log(errorThrown);
                        $('#spin_pdf').hide();
                    }).always(function (jqXHR, textStatus) {
                    })
                }else{
                    alert('表示名は30文字以下にしてください。');
                }
            });
            $('#cancel_rename_pdf').click(function () {
                $('#rename_pdf').hide();
                $('#name_pdf').show()
                $('#footer_rename_pdf').hide();
                $('#show_rename_pdf').show();
            });
            $('#upload-pdf').bind('click', function () {
                if ($('#media_client_dropinput_pdf')[0].files !== void 0) {
                    var a = parseFloat($('#media_client_dropinput_pdf')[0].files[0].size / 1024).toFixed(2);
                    if (a / 1024 > 10)
                        return alert('ファイルが大きすぎます\u300210.0MB以下の容量のもののみアップロードできます\u3002'), !1;
                }
            });
            $('.copy-btn').click(function () {
                var urlCopyId = 'media_copy_' + $(this).val();
                copyToClipboardMsg(document.getElementById(urlCopyId));
            });
        });
        function showRenamePdf(id) {
            $('.rename-pdf').hide();
            $('.footer-rename-pdf').hide();
            $('.footer-pdf').show();
            $('.name-pdf').show();
            $('#footer_pdf_'+id).hide();
            $('#name_pdf_'+id).hide();
            $('#rename_pdf_'+id).show();
            $('#footer_rename_pdf_'+id).show();
        };

        function cancelRenamePdf(id){
            var namePdfInList = $('#name_pdf_'+id).text();
            $('#rename_pdf_' + id).val(namePdfInList);
            $('#rename_pdf_'+id).hide();
            $('#footer_rename_pdf_'+id).hide();
            $('#footer_pdf_'+id).show();
            $('#name_pdf_'+id).show();
        }

        function saveRenamePdf(id){
            $('#spin_pdf_'+id).show();
            var namePdfInList = $('#rename_pdf_'+id).val();
            if(namePdfInList.length <= 30) {
                $('#name_pdf_' + id).html(namePdfInList);
                $.ajax({
                    url: "/basic/rename-pdf",
                    type: "POST",
                    data: { media_pdf_id: id, rename_pdf: namePdfInList },
                    headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}
                }).done(function (respdataonse, textStatus, jqXHR) {
                    console.log(respdataonse);
                    $('#spin_pdf_'+id).hide();
                    if (respdataonse.success == !0){
                        $('#rename_pdf_' + id).hide();
                        $('#footer_rename_pdf_' + id).hide();
                        $('#footer_pdf_' + id).show();
                        $('#name_pdf_' + id).show();
                    };
                    if (respdataonse.success == !1) alert('表示名は既に使用されています。');
                }).fail(function (jqXHR, textStatus, errorThrown) {
                    console.log(errorThrown);
                    $('#spin_pdf_'+id).hide();
                }).always(function (jqXHR, textStatus) {
                })
            }else{
                alert('表示名は30文字以下にしてください。');
            }
        }
    </script>
@endsection