@extends('layout.basic.main')
@section('title','フォーム作成（個別回答）')
@push('css')
<meta name="_token" content="{{csrf_token()}}" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.css" />
<link rel="stylesheet" href="{{asset('css/form_answer/form_result.css')}}?v={{config('sns-line.version')}}">
@endpush
@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-12">
        </div>
        <div class="row">
            <div class="col-sm-12">
                <div class="d-flex align-items-center">
                    <h2 style="font-size: 20px; color: #51595C; font-weight: bold; padding: 10px 10px 10px 0">@if(!empty($form_answer)) {!! $form_answer->name !!} @endif回答データ詳細</h2>
                    <div class="d-flex align-item-center" style="margin-left: 80px">
                        <div class="d-flex align-item-center">
                            <i class="fa-light fa-calendar" style="font-weight: normal !important; font-size: 25px; margin-right: 10px;margin-bottom: 5px"></i>回答日時
                        </div>
                        <div class="d-flex align-item-center" style="margin-left: 30px;">
                            <i class="fa-thin fa-clock" style="font-weight: 300 !important; font-size: 28px; margin-right: 10px;margin-bottom: 3px"></i> 推定ページ表示時間
                        </div>
                    </div>
                </div>
                <br/>
                <div class="list_result col-lg-8 col-sm-10">
                    @foreach($result as $answer)
                    <div class="item_result">
                        <div class="info-friend-reply">
                            <div class="time_answer">
                                <i class="fa-light fa-calendar" style="font-weight: normal !important;"></i> <span style="margin-left: 15px;">{{ \Carbon\Carbon::parse($answer->created_at)->format('Y-m-d H:i:s') }}</span>
                            </div>
                            <div class="duration_answer">
                                <i class="fa-thin fa-clock" style="font-weight: 300 !important;"></i> <span style="margin-left: 15px;">{{ $answer->duration_time_reply ? $answer->duration_time_reply : '--:--' }}</span>
                            </div>
                        </div>
                        <div class="friend">
                            <div class="avatar-friend">
                                <img src="{{ env('URL_SERVER_MEDIA').''.$answer->avatar_url  }}" alt="" style="width: 100%;" onerror="this.onerror=null;this.src='/images/blank_avatar.png'">
                            </div>
                            <a href="/basic/friendlist/my_page/{{ $answer->line_user_id }}">{{ $answer->name }}</a>
                        </div>
                        <div class="content-result">
                            @foreach($answer->data as $item)
                            <div class="row-result">
                                <div class="grid-cell-1">{{ $item->name }}</div>
                                <div class="grid-cell-2">
                                    @if($item->type == 'friend_info_file' && $item->value != '')
                                    <span>
                                        @if(!is_image(env('URL_SERVER_MEDIA').'/'.$item->value))
                                        <div>
                                            <a style="background-color: #00B401;border: 0;" class="btn btn-primary" onclick="downloadFile('{{$item->value}}')" href="#">
                                                ダウンロード <i class="fa fa-download" aria-hidden="true"></i>
                                            </a>
                                        </div>
                                        @else
                                        <div>
                                            <a data-fancybox data-src="{{ env('URL_SERVER_MEDIA').'/'.$item->value }}">
                                                <img src="{{ env('URL_SERVER_MEDIA').'/'. $item->value}}" width="120px">
                                            </a>
                                        </div>
                                        @endif
                                    </span>
                                    @else
                                    <span>{{ is_array($item->value) ? implode(',', $item->value) : $item->value }}</span>
                                    @endif
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>
                    @endforeach
                </div>
                <div style="clear: both">
                    <a  style="float: left; padding: 10px 50px;margin-top: 30px" class="btn btn-sns-line btn-sns-line-secondary font-weight-bold" href="/basic/form-answer/v2/result/{{ $form_answer ? $form_answer->id : null }}#2">戻る</a>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@push('js')
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js"></script>
<script src="/plugins/vuejs/vue-resource@1.3.4.js"></script>
<script src="/plugins/loadingoverlay/loadingoverlay.min.js"></script>
<script>
   function downloadFile(url) {
      let base64 = 'data:text/plain;base64,';
      $.ajax({
        url: `/ajax/get-file-url`,
        method: 'post',
        data: {
          link_url: url
        },
        beforeSend: function() {
          $.LoadingOverlay("show")
        },
        success: function (response) {
          $.LoadingOverlay("hide")
          if (response.success) {
            base64 += response.data
          }
        },
        error: function () {
          $.LoadingOverlay('hide');
        }
      }).then(function () {
        const link = document.createElement('a');
        link.href = base64;
        link.download = url.substring(parseInt(url.lastIndexOf('/')+1));

        // Append the link to the body
        document.body.appendChild(link);

        // Programmatically click the link to trigger the download
        link.click();

        // Remove the link after download
        document.body.removeChild(link);
      })
    }
</script>
@endpush