@extends('layout.basic.main')
@push('css')
    <link rel="stylesheet" href="/css/tag/style.css?v={{config("sns-line.version")}}">
    <style>
        #back {
            background: #fff !important;
            color: #444 !important;
            padding: 3px 20px;
            float: left;
            border: 1px solid #bbb;
            border-radius: 5px;
        }
        #delete {
            background: #880000 !important;
            color: #fff !important;
            padding: 3px 20px;
            float: right;
            border: 1px solid #bbb;
            border-radius: 5px;
        }

        .btngroup {
            margin-top: 20px !important;
            width: 100% !important;
        }

        th {
            background: #444 !important;
            color: #fff !important;
        }
    </style>
@endpush
@section('content')
    <article class="sub">
        <section class="taglist_tagmem" id="item_vuelist_tag">
            <input type="hidden" class="group_id" name="group_id">
            <input type="hidden" class="tag_id" value="{{$tag_id}}" name="tag_id">
            <h2>タグメンバー一覧</h2>
            @foreach($get_name_tag as $v)
                <p style="font-weight: bold">タグ名：{{$v->name}}</p><br>
            @endforeach
            <form>
                <table>
                    <tbody>
                    <tr>
                        <th class="checkth"><input type="checkbox" name="choose[]" id="checkAll" value=""></th>
                        <th class="nameth">名前</th>
                        <th>タグ一覧</th>
                    </tr>
                    @foreach($get_tags as $key => $val)
                        <tr>
                            <td><input type="checkbox" name="choose[]" class="check_one" value="{{$val['id']}}"></td>
                            <td> <a href="{{url('basic/friendlist/my_page/'.$val['id'])}}">{{$val['name']}}</a></td>
                            <td>
                                                                {{$string}}
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </form>
            <div class="btngroup">
                <a href="{{route('tagHome')}}" id="back">戻る</a>
                <button id="delete">チェックしたメンバーを外す</button>
            </div>
        </section>
    </article>
    @push('js')
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <script>
            var tag_id = ''
            $("#checkAll").change(function() {
                if (this.checked) {
                    $(".check_one").each(function() {
                        this.checked=true;
                    });
                } else {
                    $(".check_one").each(function() {
                        this.checked=false;
                    });
                }
            });

            $(".check_one").click(function () {
                if ($(this).is(":checked")) {
                    var isAllChecked = 0;

                    $(".check_one").each(function() {
                        if (!this.checked)
                            isAllChecked = 1;
                    });

                    if (isAllChecked == 0) {
                        $("#checkAll").prop("checked", true);
                    }
                }
                else {
                    $("#checkAll").prop("checked", false);
                }
            });
        </script>
        <script>
            $('#delete').attr('disabled', 'disabled');
            $('#delete').css('background', '#d66e6e');
            $('input[type=checkbox]').on('change', function () {
                var searchIDs = $("input:checkbox:checked").map(function () {
                    return $(this).val();
                });
                if (searchIDs.length > 0) {
                    $('#delete').removeAttr('disabled');
                    $('#delete').css('background', '#a73030');
                } else {
                    $('#delete').attr('disabled', 'disabled');
                    $('#delete').css('background', '#d66e6e');
                }
            });
            //
            $('#delete').click(function () {
                var r = confirm('本当にメンバーを外しますか?');
                if (r == true) {
                    var searchIDs = [];
                    $('input[type=checkbox]:checked').each(function (key, item) {
                        if (item.value != "") {
                            searchIDs.push(item.value);
                        }
                    });
                    $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        }
                    });
                    $.ajax({
                        url: '/basic/tag/delete-user',
                        type: 'post',
                        data: {searchIDs: searchIDs, tag_id: tag_id},
                        success: function (data) {
                            location.reload();
                        }
                    })
                }
                return false;
            })
        </script>
    @endpush
@endsection