@extends('portal.layouts.app')
@section('content')
@if(\Illuminate\Support\Facades\Auth::user()->hasRole('admin'))
    <div class="main-containerd">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <div class="contractHeading justify-content-center">
                        <h2 class="heading"><img src="{{ asset('assets/images/genealogy.png') }}" class="img-fluid"
                                                 alt="img">Genealogy</h2>
                        <button id="openPopupBtn" class="btn btn-primary ml-2">Invite Friends</button>
                        <div id="popupForm" style="display: none;">
                            <form id="emailForm" action="{{ route('send.referral.link') }}" method="POST">
                                @csrf
                                <input type="email" id="emailInput" name="email" placeholder="Enter Email">
                                <button type="submit">Send</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row justify-content-center">
                <div class="col-md-3">
                    <div class="parntdb">
                        <h2>Parent: {{$user->name ?? ''}}</h2>
                        <img src="{{ asset('profile-image/'.($user->userDetail->image ?? 'usrimg.png')) }}" class="img-fluid" alt="img">
                        <h4>{{$user->name ?? ''}}</h4>
                        <span>#{{$user->id ?? ''}}</span>
                    </div>
                </div>

                <!-- Details section -->
                <div class="col-md-7" id="userDetails">
                    <div class="skbCard">
                        <img id="userImage" width="200">
                        <div>
                            <h5 id="userName"></h5>
                            <ul>
                                <li id="userPhone"></li>
                                <li id="userEmail"></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="skbEnterprises">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <h2 class="heading justify-content-center mb-5">SKB Enterprises Llc <span>(
                                                Referrals )</span></h2>
                        <div class="row row-cols-5" id="userList">
                            @if($referralUsers->isEmpty())
                                <div class="col-12">
                                    <div style="text-align: center">
                                        <h1>No Referral User</h1>
                                    </div>
                                </div>
                            @endif
                            @foreach($referralUsers as $user)
                                <div class="col referral-user" data-user-id="{{ $user->id }}">
                                    <div class="parntdb">
                                        <img src="{{ asset('profile-image/'.($user->userDetail->image ?? 'usrimg.png')) }}" class="img-fluid" alt="img">
                                        <h4>{{$user->name ?? ''}}</h4>
                                        <span>#{{$user->id ?? ''}}</span>
                                    </div>
                                </div>
                            @endforeach
                        </div>


                        <div class="row">
                            <div class="col-md-12">
                                <div class="pagination justify-content-center mt-4">
                                    <ul>
                                        <li><a href="#">Previous</a></li>
                                        <li><a href="#">01</a></li>
                                        <li><a href="#">02</a></li>
                                        <li><a href="#">03</a></li>
                                        <li><a href="#">04</a></li>
                                        <li><a href="#">Next</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
@else
    <div class="main-containerd">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <div class="contractHeading justify-content-center">
                        <h2 class="heading"><img src="{{ asset('assets/images/genealogy.png') }}" class="img-fluid"
                                                 alt="img">Genealogy</h2>
                        <button id="openPopupBtn" class="btn btn-primary ml-2">Invite Friends</button>
                        <div id="popupForm" style="display: none;">
                            <form id="emailForm" action="{{ route('send.referral.link') }}" method="POST">
                                @csrf
                                <input type="email" id="emailInput" name="email" placeholder="Enter Email">
                                <button type="submit">Send</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row justify-content-center">
                <div class="col-md-3">
                    <div class="parntdb">
                        <h2>Parent: {{$user->name ?? ''}}</h2>
                        <img src="{{ asset('profile-image/'.($user->userDetail->image ?? 'usrimg.png')) }}" class="img-fluid" alt="img">
                        <h4>{{$user->name ?? ''}}</h4>
                        <span>#{{$user->id ?? ''}}</span>
                    </div>
                </div>

                <!-- Details section -->
                <div class="col-md-7" id="userDetails">
                    <div class="skbCard">
                        <img id="userImage" width="200">
                        <div>
                            <h5 id="userName"></h5>
                            <ul>
                                <li id="userPhone"></li>
                                <li id="userEmail"></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="skbEnterprises">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <h2 class="heading justify-content-center mb-5">SKB Enterprises Llc <span>(
                                                Referrals )</span></h2>
                        <div class="row row-cols-5" id="userList">
                            @if($referralUsers->isEmpty())
                                <div class="col-12">
                                    <div style="text-align: center">
                                        <h1>No Referral User</h1>
                                    </div>
                                </div>
                            @endif
                            @foreach($referralUsers as $user)
                                <div class="col referral-user" data-user-id="{{ $user->id }}">
                                    <div class="parntdb">
                                        <img src="{{ asset('profile-image/'.($user->userDetail->image ?? 'usrimg.png')) }}" class="img-fluid" alt="img">
                                        <h4>{{$user->name ?? ''}}</h4>
                                        <span>#{{$user->id ?? ''}}</span>
                                    </div>
                                </div>
                            @endforeach
                        </div>


                        <div class="row">
                            <div class="col-md-12">
                                <div class="pagination justify-content-center mt-4">
                                    <ul>
                                        <li><a href="#">Previous</a></li>
                                        <li><a href="#">01</a></li>
                                        <li><a href="#">02</a></li>
                                        <li><a href="#">03</a></li>
                                        <li><a href="#">04</a></li>
                                        <li><a href="#">Next</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    @endif
@endsection

@section('script')

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $('#openPopupBtn').click(function() {
            $('#popupForm').show();
        });

        $(document).ready(function() {
            $('.referral-user').click(function() {
                var userId = $(this).data('user-id');
                @php
                    $routeName = \Illuminate\Support\Facades\Auth::user()->hasRole('admin') ? 'admin.get.user.detail' : 'customer.get.user.detail';
                @endphp
                var url = "{{ route($routeName, ['id' => ':userId']) }}";
                url = url.replace(':userId', userId);

                $.ajax({
                    url:url,
                    type: 'GET',
                    success: function(response) {

                        // Fill in the user details dynamically
                        $('#userImage').attr('src', '{{ asset("profile-image") }}/' + ((response.user_detail && response.user_detail.image) ? response.user_detail.image : 'usrimg.png'));
                        $('#userName').text(response.name);
                        $('#userPhone').html('<a href="tel:' + ((response.user_detail && response.user_detail.phone) ? response.user_detail.phone : 'null') + '"><i class="fas fa-phone-alt"></i>' + ((response.user_detail && response.user_detail.phone) ? response.user_detail.phone : 'null') + '</a>');
                        $('#userEmail').html('<a href="mailto:' + response.email + '"><i class="fas fa-envelope"></i>' + response.email + '</a>');
                    },
                    error: function(xhr) {
                        console.log(xhr.responseText);
                    }
                });
            });
        });
        {{--$('#emailForm').submit(function(e) {--}}
        {{--    e.preventDefault(); // Prevent default form submission--}}

        {{--    var email = $('#emailInput').val();--}}

        {{--    // Send AJAX request to the backend--}}
        {{--    $.ajax({--}}
        {{--        method: 'POST',--}}
        {{--        url: '{{ route('send.referral.link') }}',--}}
        {{--        headers: {--}}
        {{--            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')--}}
        {{--        },--}}
        {{--        data: {--}}
        {{--            email: email--}}
        {{--        },--}}
        {{--        success: function(response) {--}}
        {{--            alert('Referral email sent successfully!');--}}
        {{--            $('#popupForm').hide(); // Hide the popup after sending email--}}
        {{--        },--}}
        {{--        error: function(xhr, status, error) {--}}
        {{--            // console.error(error);--}}
        {{--            alert('Error sending referral email. Please try again later.');--}}
        {{--        }--}}
        {{--    });--}}
        {{--});--}}

    </script>

@endsection