@extends('layout.basic.main')
@push('css')
    <link rel="stylesheet" href="/css/tag/style.css?v={{config("sns-line.version")}}" xmlns:v-on="http://www.w3.org/1999/xhtml">
    <link rel="stylesheet" href="/css/url/style.css?v={{config("sns-line.version")}}">
    <style>
        table {
            margin-bottom: 40px !important;
        }

        #errorURL {
            color: red;
            font-weight: bold;
        }

        .grn {
            padding: 5px 120px;
            margin-top: 4px;
        }

        .tag_left .btn {
            width: 80%;
        }

        .btn a.ylw {
            padding: 7px;
        }

        /*.table{*/
        /*!*max-width: 1000px!important;*!*/
        /*width: 100%;*/
        /*}*/
        .table tr td {
            max-width: 100% !important;
            word-break: break-all;
            /*width: 1000px!important;*/
        }

        #item_vuelist_url {
            /*overflow: hidden;*/
        }

        .tag_right td .btn {
            margin: 0;
        }

        .choice {
            height: 34px;
        }

        .btn-primary {
            color: #fff !important;
            background-color: #337ab7 !important;
            border-color: #2e6da4 !important;
        }

        table td .btn:first-child {
            margin-bottom: 0px;
        }
    </style>
@endpush
@section('content')
    <article class="sub">
        <section class="taglist urlclick sub">
            <h2 style="font-size: 18px">短縮URL</h2>
            <br><br>
            <div role="tabpanel" class="tab-pane" id="site_pure">
                <div class="">
                    <div class="row">
                        <div class="col-sm-6">
                            <form method="POST" action="{{route('addQrUrl')}}"
                                  accept-charset="UTF-8">
                                <input name="_token" type="hidden" value="{!! csrf_token() !!}">
                                <input class="btn btn-primary" type="submit" value="新しく短縮URLを発行">
                            </form>
                        </div>
                        <div class="col-sm-6">
                            <p style="margin-top: 0.5em;font-weight: bold;color:red;">※短縮URL(外部用)のクリック数は配信の統計に含まれません</p>
                        </div>
                    </div>

                    <hr>
                    <div class="panel panel-default">
                        @if(count($get_urls) > 0)
                            @foreach($get_urls as $k => $v)
                                <div class="panel-body">
                                    <div class="row">
                                        <div class="col-sm-5">
                                            <h4 style="margin-top: 0; font-size: 18px;" class="diff">#{{$k + 1}}
                                                <small>
                                                    ({{\Carbon\Carbon::createFromTimestamp(strtotime($v['created_at']))->format('Y.m.d')}}
                                                    発行)
                                                </small>
                                            </h4>
                                            <table class="table table-striped table-bordered table-hover table-responsive">
                                                <tbody>
                                                <tr>
                                                    <th style="vertical-align: middle; width: 39%;">クリック数</th>
                                                    <td>
                                                        {{$v['visit']}}回
                                                    </td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                        <div class="col-sm-6 col-sm-offset-1">
                                            <div class="input-group input-group-sm" style="margin-bottom: 10px;">
                                                <label>メッセージ定型</label>
                                                <input type="text" value="{{$v['message']}}" class="form-control"
                                                       id="message">
                                            </div>
                                            <div class="input-group input-group-sm">
                                                <input type="text" value="{{$v['url']}}" class="form-control"
                                                       id="url_code">
                                                <span class="input-group-btn">
                                                    <button class="btn btn-default copy-btn"
                                                            data-clipboard-target="#url_code"
                                                            type="button">
                                                        <span class="glyphicon glyphicon-copy"></span> コピー
                                                    </button>
                                                </span>
                                            </div>
                                            <div class="row" style="margin-top: 0.5em;">
                                                <div class="col-sm-6">
                                                    <a onclick="saveQrUrl({{$v['id']}})"
                                                       class="btn btn-warning btn-block">
                                                        保存
                                                    </a>
                                                </div>
                                                <div class="col-sm-4">
                                                    <a href="https://chart.apis.google.com/chart?chs=300x300&cht=qr&chl={{$v['url']}}"
                                                       target="_blank" class="btn btn-info btn-block">
                                                        QRコード
                                                    </a>
                                                </div>
                                                <div class="col-sm-2">
                                                    <form method="POST"
                                                          action="{{route('deleteQrUrl', ['id' => $v['id']])}}"
                                                          accept-charset="UTF-8"
                                                          onsubmit="return confirm('リストから削除します。よろしいですか？');">
                                                        <input name="_token" type="hidden" value="{!! csrf_token() !!}">
                                                        <input class="btn btn-danger btn-block" type="submit"
                                                               value="削除">
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        @endif
                    </div>
                </div>
            </div>
        </section>
    </article>

@endsection
@push('js')
    <script src="/js/plugins/clipboard.min.js"></script>
    <script>
        let clipboard = new Clipboard('.copy-btn');

        clipboard.on('success', function (e) {
            alert(e.text + "をコピーしました");
        });

        clipboard.on('error', function () {
            alert("コピーに失敗しました");
        });

        function saveQrUrl(id) {
            let message = $('#message').val();
            let url = $('#url_code').val();
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                url: `/basic/qr_url/edit/${id}`,
                method: 'post',
                data: {message: message, url: url},
                beforeSend: function () {
                    $.LoadingOverlay('show');
                },
                success: function (response) {
                    $.LoadingOverlay('hide');
                    if (response.success) {
                        window.location.reload();
                    }
                },
                error: function () {
                    $.LoadingOverlay('hide');
                }
            });
        }
    </script>
@endpush