@extends('front.layouts.app-auth')

@push('page_css')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css">
@endpush

@section('content')

<!-- Breadcrumbs -->
@include('front.components.breadcrumbs', [
    'currentPage' => 'Join Requests',
    'breadcrumbs' => []
])

<!-- Top Bar with Title -->
<div class="campaigns-top-bar">
    <div class="campaigns-top-bar-left">
        <h1 class="campaigns-main-title">Join Requests</h1>
        <p class="campaigns-subtitle">Manage team membership requests between athletes and teams.</p>
    </div>
</div>

<div class="join-requests-container">
    <!-- Summary Statistics Cards -->
    <div class="stats">
        <div class="stat-card join-request-stat-card join-request-stat-pending">
            <div class="stat-top-row">
                <div>
                    <div class="stat-value">{{ $pendingCount ?? 0 }}</div>
                    <div class="stat-label">Pending Requests</div>
                    <div class="stat-subtext">Awaiting response</div>
                </div>
                <div class="stat-icon">
                    <i data-lucide="folder"></i>
                </div>
            </div>
        </div>

        <div class="stat-card join-request-stat-card join-request-stat-accepted">
            <div class="stat-top-row">
                <div>
                    <div class="stat-value">{{ $acceptedCount ?? 0 }}</div>
                    <div class="stat-label">Accepted</div>
                    <div class="stat-subtext">Successfully joined</div>
                </div>
                <div class="stat-icon">
                    <i data-lucide="user-check"></i>
                </div>
            </div>
        </div>

        <div class="stat-card join-request-stat-card join-request-stat-declined">
            <div class="stat-top-row">
                <div>
                    <div class="stat-value">{{ $declinedCount ?? 0 }}</div>
                    <div class="stat-label">Declined</div>
                    <div class="stat-subtext">Not accepted</div>
                </div>
                <div class="stat-icon">
                    <i data-lucide="user-x"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Tab Navigation -->
    <div class="join-requests-tabs">
        <a href="{{ route('profile.team-roster.index', ['tab' => 'received']) }}" 
           class="join-request-tab {{ ($tabType ?? 'received') === 'received' ? 'active' : '' }}">
            <i data-lucide="mail"></i>
            Received Requests
        </a>
        <a href="{{ route('profile.team-roster.index', ['tab' => 'sent']) }}" 
           class="join-request-tab {{ ($tabType ?? '') === 'sent' ? 'active' : '' }}">
            <i data-lucide="send"></i>
            Sent Requests
        </a>
    </div>

    <!-- Requests List -->
    <div class="join-requests-list">
        <h3 class="join-requests-section-title">
            @if(($tabType ?? 'received') === 'sent')
                Requests Sent
            @else
                Requests Received
            @endif
        </h3>

        @forelse($requests as $request)
            @php
                // Determine which user to display (inviter for received, invited for sent)
                $displayUser = ($tabType ?? 'received') === 'received' ? $request->inviter : $request->invitedUser;
                
                if (!$displayUser) {
                    continue;
                }
                
                // Get user info
                $userName = $displayUser->full_name ?? 'Unknown User';
                $initials = collect(explode(' ', $userName))->map(function($word) {
                    return strtoupper(substr($word, 0, 1));
                })->take(2)->join('');
                
                // Get user role
                $userRole = $displayUser->role_slug ?? 'athlete';
                $profile = ($userRole === 'team') ? $displayUser->teamProfile : $displayUser->athleteProfile;
                
                // Get sport
                $sport = 'N/A';
                $primarySport = $displayUser->sports->first();
                if ($primarySport && $primarySport->sport) {
                    $sport = $primarySport->sport->title;
                }
                
                // Determine request type text
                if (($tabType ?? 'received') === 'received') {
                    $requestTypeText = ($userRole === 'team') ? 'Team wants to invite you' : 'Athlete wants to join your team';
                    $requestTypeClass = ($userRole === 'team') ? 'team-invite' : 'athlete-join';
                } else {
                    $requestTypeText = ($userRole === 'team') ? 'You invited team' : 'You invited athlete';
                    $requestTypeClass = ($userRole === 'team') ? 'team-invite' : 'athlete-join';
                }
                
                // Avatar color
                $colors = ['#3b82f6', '#8b5cf6', '#10b981', '#f59e0b', '#ef4444', '#ec4899'];
                $avatarColor = $colors[($displayUser->id % 6)];
                
                // Format date
                $requestDate = $request->created_at ? \App\Helpers\Helper::showdate($request->created_at, false) : 'N/A';
                
                // Get note/message
                $note = $request->note ?? '';
            @endphp
            
            <div class="join-request-card">
                <div class="join-request-card-header">
                    <div class="join-request-avatar" style="background-color: {{ $avatarColor }};">
                        {{ $initials }}
                    </div>
                    <div class="join-request-user-info">
                        <div class="join-request-user-name">{{ $userName }}</div>
                        <div class="join-request-type {{ $requestTypeClass }}">{{ $requestTypeText }}</div>
                        <div class="join-request-sport">{{ $sport }}</div>
                    </div>
                    <div class="join-request-date">{{ $requestDate }}</div>
                </div>
                
                @if($note)
                <div class="join-request-message">
                    "{{ $note }}"
                </div>
                @endif
                
                @if(($tabType ?? 'received') === 'received' && $request->status === 'pending')
                <div class="join-request-actions">
                    <button type="button" 
                            class="btn-join-accept btn-request-action" 
                            data-request-id="{{ $request->id }}"
                            data-status="accepted">
                        <i data-lucide="user-plus"></i>
                        Accept
                    </button>
                    <button type="button" 
                            class="btn-join-decline btn-request-action" 
                            data-request-id="{{ $request->id }}"
                            data-status="cancelled">
                        <i data-lucide="user-x"></i>
                        Decline
                    </button>
                </div>
                @elseif(($tabType ?? 'received') === 'received')
                <div class="join-request-status">
                    <span class="join-request-status-badge join-request-status-{{ $request->status }}">
                        {{ ucfirst($request->status) }}
                    </span>
                </div>
                @else
                <div class="join-request-status">
                    <span class="join-request-status-badge join-request-status-{{ $request->status }}">
                        {{ ucfirst($request->status) }}
                    </span>
                </div>
                @endif
            </div>
        @empty
            @if(($tabType ?? 'received') === 'sent')
                <div class="join-requests-empty join-requests-empty-sent">
                    <i data-lucide="send"></i>
                    <p class="join-requests-empty-title">No Sent Requests</p>
                    <p class="join-requests-empty-subtitle">Visit athlete or team profiles to send join requests.</p>
                    <a href="{{ route('front.discover.index') }}" class="btn-discover-athletes-teams">
                        <i data-lucide="search"></i>
                        Discover Athletes & Teams
                    </a>
                </div>
            @else
                <div class="join-requests-empty">
                    <i data-lucide="inbox"></i>
                    <p>No requests found</p>
                </div>
            @endif
        @endforelse
    </div>
</div>



@push('page_script')
<script>
    $(document).ready(function() {
        // Initialize Lucide icons
        if (typeof lucide !== 'undefined') {
            lucide.createIcons();
        }
        
        // Handle request status update using event delegation
        $(document).on('click', '.btn-request-action', function(e) {
            e.preventDefault();
            
            var $button = $(this);
            
            // Prevent multiple clicks
            if ($button.hasClass('is-loading') || $button.prop('disabled')) {
                return false;
            }
            
            var requestId = $button.data('request-id');
            var status = $button.data('status');
            
            if (!requestId || !status) {
                showNotification('error', 'Invalid request data');
                return false;
            }
            
            // Determine messages based on status
            var confirmTitle = status === 'accepted' 
                ? 'Accept Request?' 
                : 'Decline Request?';
            var confirmMessage = status === 'accepted' 
                ? 'Are you sure you want to accept this request?' 
                : 'Are you sure you want to decline this request?';
            var confirmButtonText = status === 'accepted' ? 'Yes, Accept' : 'Yes, Decline';
            var confirmButtonColor = status === 'accepted' ? '#10B981' : '#EF4444';
            var loadingText = status === 'accepted' ? 'Accepting...' : 'Declining...';
            var successMessage = status === 'accepted' 
                ? 'Request accepted successfully' 
                : 'Request declined successfully';
            var errorMessage = status === 'accepted' 
                ? 'Failed to accept request' 
                : 'Failed to decline request';
            
            // Show SweetAlert confirmation popup
            Swal.fire({
                title: confirmTitle,
                text: confirmMessage,
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: confirmButtonText,
                cancelButtonText: 'Cancel',
                confirmButtonColor: confirmButtonColor,
                cancelButtonColor: '#6B7280',
                reverseButtons: true,
                allowOutsideClick: false,
                allowEscapeKey: true
            }).then(function(result) {
                // If user confirmed, proceed with AJAX call
                if (result.isConfirmed) {
                    var buttonEl = $button[0];
                    
                    // Show loader
                    if (typeof showLoader === 'function') {
                        showLoader(buttonEl, loadingText);
                    } else {
                        $button.prop('disabled', true).text(loadingText);
                    }
                    
                    var url = '{{ url("profile/team-roster") }}/' + requestId + '/status-update';
                    var csrfToken = $('meta[name="csrf-token"]').attr('content');
                    
                    $.ajax({
                        url: url,
                        type: 'POST',
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest',
                            'X-CSRF-TOKEN': csrfToken
                        },
                        data: {
                            status: status
                        },
                        dataType: 'json',
                        timeout: 30000, // 30 second timeout
                        success: function(data) {
                            // Hide loader
                            if (typeof hideLoader === 'function') {
                                hideLoader(buttonEl);
                            } else {
                                $button.prop('disabled', false);
                            }
                            
                            if (data && (data.status === 200 || data.success)) {
                                showNotification('success', data.message || successMessage);
                                setTimeout(function() {
                                    window.location.reload();
                                }, 1500);
                            } else {
                                var msg = (data && data.message) ? data.message : errorMessage;
                                showNotification('error', msg);
                            }
                        },
                        error: function(xhr, textStatus, errorThrown) {
                            // Hide loader
                            if (typeof hideLoader === 'function') {
                                hideLoader(buttonEl);
                            } else {
                                $button.prop('disabled', false);
                            }
                            
                            console.error('AJAX Error:', textStatus, errorThrown);
                            var errorMsg = 'An error occurred while updating the request';
                            
                            if (xhr.responseJSON && xhr.responseJSON.message) {
                                errorMsg = xhr.responseJSON.message;
                            } else if (xhr.status === 0) {
                                errorMsg = 'Network error. Please check your connection.';
                            } else if (xhr.status === 500) {
                                errorMsg = 'Server error. Please try again later.';
                            } else if (xhr.status === 404) {
                                errorMsg = 'Request not found.';
                            } else if (xhr.status === 403) {
                                errorMsg = 'You do not have permission to perform this action.';
                            }
                            
                            showNotification('error', errorMsg);
                        }
                    });
                }
            });
            
            return false;
        });
    });
</script>
@endpush


@endsection