@extends('front.layouts.front')
@section('maincss')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">
@endsection
@section('content')
    <!-- page title -->
    <section class="section section--first section--last section--head" data-bg="{{ asset('assets/img/bg.jpg') }}">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="section__wrap">
                        <h2 class="section__title">Friends / Audience</h2>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- end page title -->

    <!-- section -->
    <section class="section">
        <div class="container">
            <ul class="nav nav-tabs profile__tabs border-bottom mb-5" id="profile__tabs" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" data-toggle="tab" href="#tab-1" role="tab" aria-controls="tab-1" aria-selected="true">Friends</a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#tab-2" role="tab" aria-controls="tab-2" aria-selected="false">Fans</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#tab-3" role="tab" aria-controls="tab-3" aria-selected="true">Request</a>
                </li>
            </ul>
            <!-- content tabs -->
            <div class="tab-content">
                <div class="tab-pane fade show active" id="tab-1" role="tabpanel">
                    <div class="row friend">
                        @foreach ($Friends as $key => $Friend)
                            {{-- @if($Friend->user_id == $user->id) --}}
                                <div class="col-xl-6 col-md-6 rm">
                                    <div class="fans-block">
                                        <div><img @if ($Friend->friend->profile_photo_path == null) src="{{ url('assets/img/user.svg') }}" @else src="{{ $Friend->friend->profile_photo_path }}" @endif alt="{{ $Friend->friend->first_name }}" ></div>
                                        <div>{{ $Friend->friend->first_name .' '. $Friend->friend->last_name }}</div>
                                        <button class="btn btn-follow approve" data-id="{{ $Friend->id }}" data-status="3">Unfriend</button>
                                    </div>
                                </div>
                            {{-- @else
                                <div class="col-xl-6 col-md-6 rm">
                                    <div class="fans-block">
                                        <div><img @if ($Friend->user->profile_photo_path == null) src="{{ url('assets/img/user.svg') }}" @else src="{{ $Friend->user->profile_photo_path }}" @endif alt="{{ $Friend->user->first_name }}" ></div>
                                        <div>{{ $Friend->user->first_name .' '. $Friend->user->last_name }}</div>
                                        <button class="btn btn-follow approve" data-id="{{ $Friend->id }}" data-status="3">Unfriend</button>
                                    </div>
                                </div>
                            @endif --}}
                        @endforeach
                    </div>
                </div>

                <div class="tab-pane fade" id="tab-2" role="tabpanel">
                    <div class="row fen">
                        @foreach ($Fens as $key => $Fen)
                            <div class="col-xl-6 col-md-6 rm">
                                <div class="fans-block">
                                    <div><img @if ($Fen->friend->profile_photo_path == null) src="{{ url('assets/img/user.svg') }}" @else src="{{ $Fen->friend->profile_photo_path }}" @endif alt="{{ $Fen->friend->first_name }}" ></div>
                                    <div>{{ $Fen->friend->first_name .' '. $Fen->friend->last_name }}</div>
                                    <button class="btn btn-follow approve" data-id="{{ $Fen->id }}" data-status="3">Unfollow</button>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>

                <div class="tab-pane fade" id="tab-3" role="tabpanel">
                    <form action="{{ route('front.friends-audience.search') }}" method="post" id="searchfriend">
                        <div class="sort justify-content-between">
                            <div class="filter__group filter__group--sort w-100 mr-3">
                                <label for="search" class="filter__label">Find People:</label>
                                <input class="filter__input" name="q" id="search" type="text" placeholder="Find People..." />
                            </div>

                            <div class="buttonWithLoder">
                                <button type="submit" class="btn header__login">
                                    <span>Search</span>
                                </button>
                            </div>
                        </div>
                    </form>
                    <div class="row searchlist"></div>
                    <div class="row ">
                        @foreach ($RequestGet as $key => $Requestg)
                            <div class="col-xl-6 col-md-6 rm">
                                <div class="fans-block">
                                    <div><img @if ($Requestg->user->profile_photo_path == null) src="{{ url('assets/img/user.svg') }}" @else src="{{ $Requestg->user->profile_photo_path }}" @endif alt="{{ $Requestg->user->first_name }}" ></div>
                                    <div>{{ $Requestg->user->first_name .' '. $Requestg->user->last_name }}</div>
                                    <button class="btn btn-delete-req ml-auto approve" data-id="{{ $Requestg->id }}" data-status="1">Reject</button>
                                    <button class="btn btn-follow ml-2 approve" data-id="{{ $Requestg->id }}" data-status="0">Accept</button>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
            <!-- end content tabs -->
        </div>
        </div>
    </section>
    <!-- end section -->
@endsection

@section('script')
<script>
    $(document).on('submit', '#searchfriend', function (e){
        e.preventDefault();
        let search = $('#search').val();
        $.ajax({
            url: "{{ route('front.friends-audience.search') }}",
            type: "POST",
            dataType: "json",
            data: {
                'search' : search
            },
            cache: false,
            statusCode: {
                200: function (xhr) {
                    let searchlist = '';
                    xhr.data.forEach(element => {
                        searchlist += `<div class="col-xl-6 col-md-6 rm">
                            <div class="fans-block">
                                <div><img src="${element.profile_photo_path ?? "{{ url('assets/img/user.svg') }}" }"></div>
                                <div>${element.first_name} ${element.last_name}</div>
                                <button class="btn btn-follow ml-auto add" data-id="${element.id}" data-type="1">Add Friend</button>
                                <button class="btn btn-follow ml-2 add" data-id="${element.id}" data-type="2">Follow</button>
                            </div>
                        </div>`;
                    });
                    $('.searchlist').html(searchlist);
                }
            }
        });
    });

    $(document).on('click', '.add', function (e){
        e.preventDefault();
        let th = $(this);
        let friend_id = $(this).data('id');
        let type = $(this).data('type');
        $.ajax({
            url: "{{ route('front.friends-audience.store') }}",
            type: "POST",
            dataType: "json",
            data: {
                'friend_id' : friend_id,
                'type' : type
            },
            cache: false,
            statusCode: {
                200: function (xhr) {
                    if(type == 1) {
                        th.html('Friend request send');
                    }
                    if(type == 2) {
                        th.html('Followed');
                        let searchlist = `<div class="col-xl-6 col-md-6 rm">
                            <div class="fans-block">
                                <div><img src="${xhr.user.profile_photo_path ?? "{{ url('assets/img/user.svg') }}" }"></div>
                                <div>${xhr.user.first_name} ${xhr.user.last_name}</div>
                                <button class="btn btn-follow approve" data-id="${xhr.data.id}" data-status="3">Unfollow</button>
                            </div>
                        </div>`;
                        $('.fen').prepend(searchlist);
                        var notyf = new Notyf();
                        notyf.success({
                            message: xhr.message,
                            duration: 5000,
                            position: {
                                x: "center",
                                y: "top",
                            },
                        });
                    }
                },
                422: function (err) {
                    var notyf = new Notyf();
                    notyf.error({
                        message: "Already Follow",
                        duration: 5000,
                        position: {
                            x: "center",
                            y: "top",
                        },
                    });
                }
            }
        });
    });

    $(document).on('click', '.approve', function (e){
        e.preventDefault();
        let th = $(this);
        let id = $(this).data('id');
        let status = $(this).data('status');
        $.ajax({
            url: "{{ route('front.friends-audience.approve') }}",
            type: "POST",
            dataType: "json",
            data: {
                'id' : id,
                'status' : status
            },
            cache: false,
            statusCode: {
                200: function (xhr) {
                    if(status == 1) {
                        let searchlist = `<div class="col-xl-6 col-md-6 rm">
                            <div class="fans-block">
                                <div><img src="${xhr.user.profile_photo_path ?? "{{ url('assets/img/user.svg') }}" }"></div>
                                <div>${xhr.user.first_name} ${xhr.user.last_name}</div>
                                <button class="btn btn-follow approve" data-id="${xhr.data.id}" data-status="3">Unfriend</button>
                            </div>
                        </div>`;
                        $('.friend').prepend(searchlist);
                    }
                    th.closest('.rm').remove();
                }
            }
        });
    });
</script>
@endsection