@extends('layouts.app')

@section('title', 'Sales Commission Users')

@section('content')
<style>
    /* Reduce line heights globally for this page */
    .container-fluid {
        line-height: 1.2 !important;
    }
    
    .container-fluid * {
        line-height: 1.2 !important;
    }
    
    /* Reduce card padding and margins */
    .card-body {
        padding: 0.75rem !important;
    }
    
    .card-header {
        padding: 0.5rem 0.75rem !important;
    }
    
    .py-2, .py-3 {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }
    
    /* Reduce margins */
    .mb-1 {
        margin-bottom: 0.15rem !important;
    }
    
    .mb-2, .mb-3 {
        margin-bottom: 0.5rem !important;
    }
    
    .mb-4 {
        margin-bottom: 0.75rem !important;
    }
    
    /* Reduce table cell padding */
    .table td, .table th {
        padding: 0.4rem !important;
        line-height: 1.1 !important;
    }
    .table thead th {
        white-space: nowrap;
        vertical-align: middle !important;
        text-align: center;
    }
    .table td.actions-cell {
        white-space: nowrap;
        text-align: center;
        vertical-align: middle !important;
    }
    .actions-cell .btn { margin: 0 2px !important; }
    
    /* Reduce form element spacing */
    .form-group {
        margin-bottom: 0.5rem !important;
    }
    
    .form-label, label {
        margin-bottom: 0.2rem !important;
        line-height: 1.1 !important;
    }
    
    .form-control {
        padding: 0.3rem 0.5rem !important;
        line-height: 1.1 !important;
    }
    
    /* Reduce button padding */
    .btn {
        padding: 0.3rem 0.6rem !important;
        line-height: 1.1 !important;
    }
    
    .btn-sm {
        padding: 0.2rem 0.4rem !important;
        font-size: 0.75rem !important;
        line-height: 1 !important;
    }
    
    /* Reduce badge spacing */
    .badge {
        padding: 0.2rem 0.4rem !important;
        line-height: 1 !important;
    }
    
    /* Reduce heading margins */
    h1, h2, h3, h4, h5, h6 {
        margin-bottom: 0.3rem !important;
        line-height: 1.1 !important;
    }
    
    /* Reduce statistics card text spacing */
    .text-xs {
        line-height: 1 !important;
        margin-bottom: 0.2rem !important;
    }
    
    .h5, .h6 {
        line-height: 1.1 !important;
        margin-bottom: 0 !important;
    }
    
    /* Toggle button styles */
    .toggle-invoices-btn {
        transition: all 0.3s ease;
    }
    
    .invoices-container {
        transition: all 0.3s ease;
        display: none; /* Default hidden */
    }
    
    .toggle-invoices-btn:hover {
        transform: translateY(-1px);
    }
    
    /* Action buttons styling */
    .btn-sm {
        margin: 0 2px;
    }
    
    .btn-sm:hover {
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    /* Sub tag hyperlink styling to match client profile design */
    .sub-tag-link {
        color: #007bff !important;
        font-weight: 600 !important;
        text-decoration: none !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        padding: 4px 8px !important;
        border-radius: 6px !important;
        display: inline-block !important;
        margin: 0 2px !important;
        position: relative !important;
        background: linear-gradient(135deg, rgba(0, 123, 255, 0.05), rgba(0, 123, 255, 0.02)) !important;
        border: 1px solid rgba(0, 123, 255, 0.1) !important;
        font-size: 0.95em !important;
        letter-spacing: 0.025em !important;
    }
    
    .sub-tag-link:hover {
        color: #ffffff !important;
        background: linear-gradient(135deg, #007bff, #0056b3) !important;
        text-decoration: none !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3) !important;
        border-color: #0056b3 !important;
    }
    
    .sub-tag-link:focus {
        outline: 2px solid #007bff !important;
        outline-offset: 2px !important;
        text-decoration: none !important;
        box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2) !important;
    }
    
    /* Enhanced styling for better visual hierarchy */
    .sub-tag-link:active {
        transform: translateY(-1px) !important;
        box-shadow: 0 2px 6px rgba(0, 123, 255, 0.4) !important;
        background: linear-gradient(135deg, #0056b3, #004085) !important;
    }
    
    /* Add subtle animation for better UX */
    .sub-tag-link::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
        border-radius: 6px;
        opacity: 0;
        transition: opacity 0.3s ease;
        pointer-events: none;
    }
    
    .sub-tag-link:hover::before {
        opacity: 1;
    }
</style>
<div class="container-fluid">
    <!-- Success/Error Messages -->
    @if(session('success'))
        <div class="row mb-3">
            <div class="col-12">
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    <i class="fas fa-check-circle mr-2"></i>{{ session('success') }}
                    <button type="button" class="close" data-dismiss="alert">
                        <span>&times;</span>
                    </button>
                </div>
            </div>
        </div>
    @endif

    @if(session('error'))
        <div class="row mb-3">
            <div class="col-12">
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <i class="fas fa-exclamation-circle mr-2"></i>{{ session('error') }}
                    <button type="button" class="close" data-dismiss="alert">
                        <span>&times;</span>
                    </button>
                </div>
            </div>
        </div>
    @endif

    @if(isset($message))
        <div class="row mb-3">
            <div class="col-12">
                <div class="alert alert-warning alert-dismissible fade show" role="alert">
                    <i class="fas fa-info-circle mr-2"></i>{{ $message }}
                    <button type="button" class="close" data-dismiss="alert">
                        <span>&times;</span>
                    </button>
                </div>
            </div>
        </div>
    @endif

    <!-- Page Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="h3 mb-0 text-gray-800">
                        <i class="fas fa-user-tag mr-2"></i>Sales Commission Users
                    </h1>
                    <p class="text-muted">Users assigned to Sales Commission tag</p>
                    @if(isset($salesComissionTag))
                        <span class="badge badge-info">Tag: {{ $salesComissionTag->name }}</span>
                    @endif
                </div>
            </div>
        </div>
    </div>

    @if(isset($salesComissionTag))
        <!-- Summary Statistics Cards -->
        <div class="row mb-4">
            <!-- Total Users -->
            <div class="col-xl-3 col-md-6 mb-4">
                <div class="card border-left-primary shadow h-100 py-2">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                    Total Users
                                </div>
                                <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $stats['total_users'] }}</div>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-users fa-2x text-gray-300"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Active Users -->
            <div class="col-xl-3 col-md-6 mb-4">
                <div class="card border-left-success shadow h-100 py-2">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                    Active Users
                                </div>
                                <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $stats['active_users'] }}</div>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-check-circle fa-2x text-gray-300"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Inactive Users -->
            <div class="col-xl-3 col-md-6 mb-4">
                <div class="card border-left-warning shadow h-100 py-2">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                                    Inactive Users
                                </div>
                                <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $stats['inactive_users'] }}</div>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-pause-circle fa-2x text-gray-300"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Total Assignments -->
            <div class="col-xl-3 col-md-6 mb-4">
                <div class="card border-left-info shadow h-100 py-2">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                                    Total Assignments
                                </div>
                                <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $stats['total_assignments'] }}</div>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-tags fa-2x text-gray-300"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Filters -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="card shadow">
                    <div class="card-body">
                        <form method="GET" action="{{ route('reseller.sales-comission-users') }}">
                            <div class="row">
                                <div class="col-md-4 mb-3">
                                    <label for="search" class="form-label">Search</label>
                                    <input type="text" class="form-control" id="search" name="search" 
                                           value="{{ request('search') }}" placeholder="Search users...">
                                </div>
                                <div class="col-md-3 mb-3">
                                    <label for="status" class="form-label">Status</label>
                                    <select class="form-control" id="status" name="status">
                                        <option value="all" {{ request('status') == 'all' ? 'selected' : '' }}>All Status</option>
                                        <option value="active" {{ request('status') == 'active' ? 'selected' : '' }}>Active</option>
                                        <option value="inactive" {{ request('status') == 'inactive' ? 'selected' : '' }}>Inactive</option>
                                    </select>
                                </div>
                                <div class="col-md-3 mb-3">
                                    <label for="sub_tag" class="form-label">Sub Tag</label>
                                    <select class="form-control" id="sub_tag" name="sub_tag">
                                        <option value="all">All Sub Tags</option>
                                        @foreach($subTags as $subTag)
                                            <option value="{{ $subTag->id }}" {{ request('sub_tag') == $subTag->id ? 'selected' : '' }}>
                                                {{ $subTag->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-2 mb-3">
                                    <label class="form-label">&nbsp;</label>
                                    <div>
                                        <button type="submit" class="btn btn-warning btn-block">
                                            <i class="fas fa-search mr-2"></i>Search
                                        </button>
                                        <a href="{{ route('reseller.sales-comission-users') }}" class="btn btn-secondary btn-block mt-1">
                                            <i class="fas fa-times mr-2"></i>Clear
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!-- Users Table -->
        <div class="row">
            <div class="col-12">
                <div class="card shadow">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-warning">Users with Sales Commission Tag</h6>
                    </div>
                    <div class="card-body">
                        @if($users->count() > 0)
                            <div class="table-responsive">
                                <table class="table table-bordered table-hover">
                                    <thead class="thead-light">
                                        <tr>
                                            <th>ID</th>
                                            <th>Name</th>
                                            <th>Company Name</th>
                                            <th>Email</th>
                                            <th>Phone</th>
                                            <th>Role</th>
                                            <th>Sub Tags</th>
                                            <th>Status</th>
                                            <th>Active</th>
                                            <th>Created</th>
                                            <th class="actions-cell">Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($users as $user)
                                            <tr>
                                                <td>{{ $user->id }}</td>
                                                <td>{{ $user->name }}</td>
                                                <td>{{ $user->company_name ?? 'N/A' }}</td>
                                                <td>{{ $user->email }}</td>
                                                <td>{{ $user->phone ?? 'N/A' }}</td>
                                                <td>
                                                    <span class="badge badge-secondary">{{ ucfirst($user->role) }}</span>
                                                </td>
                                                <td>
                                                    @if(isset($user->tagAssignments) && $user->tagAssignments->count() > 0)
                                                        @foreach($user->tagAssignments as $assignment)
                                                            @if($assignment->subTag)
                                                                <span class="badge badge-info">{{ $assignment->subTag->name }}</span>
                                                            @endif
                                                        @endforeach
                                                    @else
                                                        <span class="text-muted">None</span>
                                                    @endif
                                                </td>
                                                <td>
                                                    @if($user->status == 'active')
                                                        <span class="badge badge-success">Active</span>
                                                    @else
                                                        <span class="badge badge-danger">Inactive</span>
                                                    @endif
                                                </td>
                                                <td>
                                                    @if($user->is_active)
                                                        <span class="badge badge-success">Yes</span>
                                                    @else
                                                        <span class="badge badge-danger">No</span>
                                                    @endif
                                                </td>
                                                <td>{{ $user->created_at ? $user->created_at->format('Y-m-d') : 'N/A' }}</td>
                                                <td class="actions-cell">
                                                    <a href="{{ route('reseller.users.show', $user->id) }}" 
                                                       class="btn btn-sm btn-info" 
                                                       title="View Details">
                                                        <i class="fas fa-eye"></i>
                                                    </a>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        @else
                            <div class="alert alert-info">
                                <i class="fas fa-info-circle mr-2"></i>No users found with Sales Commission tag.
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <!-- Sub Tags Summary with Clients and Invoices -->
        @if($subTags->count() > 0)
        <div class="row mt-4">
            <div class="col-12">
                <div class="card shadow">
                    <div class="card-header py-3 bg-info text-white">
                        <h6 class="m-0 font-weight-bold">Sub Tags with Clients and Invoices</h6>
                    </div>
                    <div class="card-body">
                        @foreach($subTags as $subTag)
                            <!-- Sub Tag Header -->
                            <div class="mb-4">
                                <div class="d-flex justify-content-between align-items-center">
                                    <h5 class="text-primary mb-0">
                                        <i class="fas fa-tag mr-2"></i>
                                        @if($subTag->users->count() > 0)
                                            @php
                                                // Handle different separators (comma, semicolon, or pipe)
                                                $subTagNames = preg_split('/[,;|]/', $subTag->name);
                                                $users = $subTag->users;
                                            @endphp
                                            @foreach($subTagNames as $index => $name)
                                                @php
                                                    $trimmedName = trim($name);
                                                    $matchingUser = $users->first(function($user) use ($trimmedName) {
                                                        return stripos($user->name, $trimmedName) !== false || 
                                                               stripos($user->company_name ?? '', $trimmedName) !== false;
                                                    });
                                                    $userId = $matchingUser ? $matchingUser->id : $users->first()->id;
                                                @endphp
                                                <a href="{{ route('reseller.sub-tag.profile', $subTag->id) }}" 
                                                   class="sub-tag-link" 
                                                   title="View {{ $subTag->name }} sub tag profile"
                                                   data-bs-toggle="tooltip" 
                                                   data-bs-placement="top"
                                                   data-subtag-id="{{ $subTag->id }}"
                                                   data-subtag-name="{{ $subTag->name }}">
                                                    <i class="fas fa-tag me-1" style="font-size: 0.8em; opacity: 0.7;"></i>
                                                    {{ $trimmedName }}
                                                </a>
                                                @if($index < count($subTagNames) - 1)
                                                    <span class="text-muted">, </span>
                                                @endif
                                            @endforeach
                                        @else
                                            {{ $subTag->name }}
                                        @endif
                                        <span class="badge badge-info ml-2">{{ $subTag->users->count() }} Clients</span>
                                        @if($subTag->status == 'active')
                                            <span class="badge badge-success ml-2">Active</span>
                                        @else
                                            <span class="badge badge-secondary ml-2">Inactive</span>
                                        @endif
                                    </h5>
                                     @if($subTag->users->count() > 0)
                                         <div class="d-flex align-items-center">
                                             <button type="button" 
                                                     class="btn btn-primary btn-sm mr-2" 
                                                     data-toggle="modal" 
                                                     data-target="#migrateModal"
                                                     data-subtag-id="{{ $subTag->id }}"
                                                     data-subtag-name="{{ $subTag->name }}"
                                                     data-client-count="{{ $subTag->users->count() }}"
                                                     title="Migrate all clients in this sub tag to sales_commission_person users">
                                                 <i class="fas fa-user-plus mr-1"></i>Migrate to User
                                             </button>
                                             <button type="button" 
                                                     class="btn btn-outline-primary btn-sm toggle-invoices-btn" 
                                                     data-target="subtag-{{ $subTag->id }}"
                                                     title="Toggle invoice visibility">
                                                 <i class="fas fa-eye-slash mr-1"></i><span class="toggle-text">Show</span>
                                             </button>
                                         </div>
                                     @endif
                                </div>
                                <hr>
                                
                                @if($subTag->users->count() > 0)
                                    <div id="subtag-{{ $subTag->id }}" class="invoices-container">
                                        @foreach($subTag->users as $user)
                                            <!-- Client Info -->
                                            <div class="card mb-3 border-left-primary">
                                            <div class="card-header bg-light">
                                                <div class="d-flex justify-content-between align-items-center">
                                                    <div>
                                                        <h6 class="mb-0">
                                                            <i class="fas fa-user mr-2"></i>{{ $user->name }}
                                                            @if($user->company_name)
                                                                <small class="text-muted">({{ $user->company_name }})</small>
                                                            @endif
                                                        </h6>
                                                        <small class="text-muted">
                                                            <i class="fas fa-envelope mr-1"></i>{{ $user->email }}
                                                            @if($user->phone)
                                                                | <i class="fas fa-phone mr-1"></i>{{ $user->phone }}
                                                            @endif
                                                        </small>
                                                    </div>
                                                    <div>
                                                        <span class="badge badge-primary">{{ $user->salesInvoices->count() }} Invoices</span>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            @if($user->salesInvoices->count() > 0)
                                                <div class="card-body p-0">
                                                    <div class="table-responsive">
                                                        @php
                                                            $commissioned = $user->salesInvoices->filter(function($inv){
                                                                return ($inv->commissionInvoices && $inv->commissionInvoices->count() > 0) || $inv->status === 'commissioned';
                                                            });
                                                            $pendingCommission = $user->salesInvoices->filter(function($inv){
                                                                return ($inv->commissionInvoices && $inv->commissionInvoices->count() === 0) && $inv->status !== 'commissioned';
                                                            });
                                                        @endphp
                                                        @if($commissioned->count() > 0)
                                                        <div class="px-3 pt-3">
                                                            <h6 class="text-success mb-2"><i class="fas fa-check-circle mr-1"></i>Commission Created Invoices</h6>
                                                        </div>
                                                        <table class="table table-sm table-hover mb-3">
                                                            <thead class="thead-light">
                                                                <tr>
                                                                    <th>Invoice No</th>
                                                                    <th>Customer Invoice</th>
                                                                    <th>Invoice Date</th>
                                                                    <th>Amount</th>
                                                                    <th>Payment Status</th>
                                                                    <th>Status</th>
                                                                    <th>Actions</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                @foreach($commissioned as $invoice)
                                                                    <tr>
                                                                        <td><strong>{{ $invoice->invoice_no }}</strong></td>
                                                                        <td>{{ $invoice->customer_invoice ?? 'N/A' }}</td>
                                                                        <td>{{ \Carbon\Carbon::parse($invoice->invoice_date)->format('d M, Y') }}</td>
                                                                        <td>৳ {{ number_format($invoice->invoice_amount, 2) }}</td>
                                                                        <td>
                                                                            @if($invoice->payment_status == 'paid')
                                                                                <span class="badge badge-success">Paid</span>
                                                                            @elseif($invoice->payment_status == 'partial')
                                                                                <span class="badge badge-warning">Partial</span>
                                                                            @else
                                                                                <span class="badge badge-danger">Unpaid</span>
                                                                            @endif
                                                                        </td>
                                                                        <td>
                                                                            @if($invoice->status == 'due')
                                                                                <span class="badge badge-warning">Due</span>
                                                                            @elseif($invoice->status == 'paid')
                                                                                <span class="badge badge-success">Paid</span>
                                                                            @elseif($invoice->status == 'commissioned')
                                                                                <span class="badge badge-primary">Commissioned</span>
                                                                            @else
                                                                                <span class="badge badge-secondary">{{ ucfirst($invoice->status) }}</span>
                                                                            @endif
                                                                        </td>
                                                                        <td>
                                                                            <a href="{{ route('reseller.sales-invoices.show', $invoice->id) }}" 
                                                                               class="btn btn-sm btn-info mr-1" 
                                                                               title="View Invoice">
                                                                                <i class="fas fa-eye"></i>
                                                                            </a>
                                                                            @if($invoice->commissionInvoices && $invoice->commissionInvoices->count() > 0)
                                                                                <a href="{{ route('reseller.commission-invoices.show', $invoice->commissionInvoices->first()->id) }}" 
                                                                                   class="btn btn-sm btn-primary" 
                                                                                   title="View Commission Invoice">
                                                                                    <i class="fas fa-receipt"></i>
                                                                                </a>
                                                                            @endif
                                                                        </td>
                                                                    </tr>
                                                                @endforeach
                                                            </tbody>
                                                            <tfoot class="bg-light">
                                                                <tr>
                                                                    <td colspan="3" class="text-right"><strong>Total Invoices:</strong></td>
                                                                    <td colspan="4"><strong>{{ $commissioned->count() }}</strong> | <strong>Total Amount: ৳ {{ number_format($commissioned->sum('invoice_amount'), 2) }}</strong></td>
                                                                </tr>
                                                            </tfoot>
                                                        </table>
                                                        @endif
                                                        
                                                        @if($pendingCommission->count() > 0)
                                                        <div class="px-3 pt-2">
                                                            <h6 class="text-warning mb-2"><i class="fas fa-hourglass-half mr-1"></i>Pending Commission</h6>
                                                        </div>
                                                        <table class="table table-sm table-hover mb-0">
                                                            <thead class="thead-light">
                                                                <tr>
                                                                    <th>Invoice No</th>
                                                                    <th>Customer Invoice</th>
                                                                    <th>Invoice Date</th>
                                                                    <th>Amount</th>
                                                                    <th>Payment Status</th>
                                                                    <th>Status</th>
                                                                    <th>Actions</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                @foreach($pendingCommission as $invoice)
                                                                    <tr>
                                                                        <td><strong>{{ $invoice->invoice_no }}</strong></td>
                                                                        <td>{{ $invoice->customer_invoice ?? 'N/A' }}</td>
                                                                        <td>{{ \Carbon\Carbon::parse($invoice->invoice_date)->format('d M, Y') }}</td>
                                                                        <td>৳ {{ number_format($invoice->invoice_amount, 2) }}</td>
                                                                        <td>
                                                                            @if($invoice->payment_status == 'paid')
                                                                                <span class="badge badge-success">Paid</span>
                                                                            @elseif($invoice->payment_status == 'partial')
                                                                                <span class="badge badge-warning">Partial</span>
                                                                            @else
                                                                                <span class="badge badge-danger">Unpaid</span>
                                                                            @endif
                                                                        </td>
                                                                        <td>
                                                                            @if($invoice->status == 'due')
                                                                                <span class="badge badge-warning">Due</span>
                                                                            @elseif($invoice->status == 'paid')
                                                                                <span class="badge badge-success">Paid</span>
                                                                            @else
                                                                                <span class="badge badge-secondary">{{ ucfirst($invoice->status) }}</span>
                                                                            @endif
                                                                        </td>
                                                                        <td>
                                                                            <a href="{{ route('reseller.sales-invoices.show', $invoice->id) }}" 
                                                                               class="btn btn-sm btn-info mr-1" 
                                                                               title="View Invoice">
                                                                                <i class="fas fa-eye"></i>
                                                                            </a>
                                                                            <a href="{{ route('reseller.commission-invoices.create', ['sales_invoice_id' => $invoice->id]) }}" 
                                                                               class="btn btn-sm btn-success" 
                                                                               title="Create Commission Invoice">
                                                                                <i class="fas fa-plus-circle"></i>
                                                                            </a>
                                                                        </td>
                                                                    </tr>
                                                                @endforeach
                                                            </tbody>
                                                            <tfoot class="bg-light">
                                                                <tr>
                                                                    <td colspan="3" class="text-right"><strong>Total Invoices:</strong></td>
                                                                    <td colspan="4"><strong>{{ $pendingCommission->count() }}</strong> | <strong>Total Amount: ৳ {{ number_format($pendingCommission->sum('invoice_amount'), 2) }}</strong></td>
                                                                </tr>
                                                            </tfoot>
                                                        </table>
                                                        @endif
                                                    </div>
                                                </div>
                                            @else
                                                <div class="card-body">
                                                    <p class="text-muted mb-0">
                                                        <i class="fas fa-info-circle mr-2"></i>No invoices found for this client.
                                                    </p>
                                                </div>
                                            @endif
                                        </div>
                                        @endforeach
                                    </div>
                                @else
                                    <div class="alert alert-info">
                                        <i class="fas fa-info-circle mr-2"></i>No clients assigned to this sub tag.
                                    </div>
                                @endif
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
        @endif
    @endif
</div>

<!-- Migration Modal -->
<div class="modal fade" id="migrateModal" tabindex="-1" role="dialog" aria-labelledby="migrateModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title" id="migrateModalLabel">
                    <i class="fas fa-user-plus mr-2"></i>Migrate Sub Tag to Users
                </h5>
                <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="migrateForm" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="alert alert-info">
                        <i class="fas fa-info-circle mr-2"></i>
                        <span id="migrationInfo">Select migration settings below</span>
                    </div>
                    
                    <input type="hidden" id="subTagId" name="sub_tag_id" value="">
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="isp_id" class="form-label">
                                    <i class="fas fa-building mr-1"></i>
                                    ISP <span class="text-danger">*</span>
                                </label>
                                <select class="form-control @error('isp_id') is-invalid @enderror" 
                                        id="isp_id" name="isp_id" required 
                                        onchange="console.log('ISP changed to:', this.value); loadBranchesForISP(this.value);">
                                    <option value="">Select ISP</option>
                                    @foreach($ispBranches ?? [] as $isp)
                                        <option value="{{ $isp->id }}" {{ old('isp_id') == $isp->id ? 'selected' : '' }}>
                                            {{ $isp->name }} ({{ $isp->code }})
                                        </option>
                                    @endforeach
                                </select>
                                @error('isp_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <button type="button" class="btn btn-sm btn-info mt-1" onclick="testBranchLoading()">
                                    <i class="fas fa-test-tube mr-1"></i>Test Branch Loading
                                </button>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="branch_id" class="form-label">
                                    <i class="fas fa-sitemap mr-1"></i>
                                    Target Branch <span class="text-danger">*</span>
                                </label>
                                <select class="form-control @error('branch_id') is-invalid @enderror" 
                                        id="branch_id" name="branch_id" required>
                                    <option value="">Select Branch</option>
                                </select>
                                @error('branch_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="email" class="form-label">
                                    <i class="fas fa-envelope mr-1"></i>
                                    Email <span class="text-danger">*</span>
                                </label>
                                <input type="email" class="form-control @error('email') is-invalid @enderror" 
                                       id="email" name="email" value="{{ old('email') }}" 
                                       placeholder="Enter email address" required>
                                @error('email')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="password" class="form-label">
                                    <i class="fas fa-lock mr-1"></i>
                                    Default Password <span class="text-danger">*</span>
                                </label>
                                <input type="password" class="form-control @error('password') is-invalid @enderror" 
                                       id="password" name="password" value="{{ old('password') }}" 
                                       placeholder="Enter default password" required>
                                @error('password')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="role" class="form-label">
                                    <i class="fas fa-user-tag mr-1"></i>
                                    Default Role <span class="text-danger">*</span>
                                </label>
                                <select class="form-control @error('role') is-invalid @enderror" 
                                        id="role" name="role" required>
                                    <option value="">Select Role</option>
                                    @foreach($roles ?? [] as $role)
                                        <option value="{{ $role->slug }}" {{ old('role') == $role->slug ? 'selected' : '' }}>
                                            {{ $role->name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('role')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">
                        <i class="fas fa-times mr-1"></i>Cancel
                    </button>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-user-plus mr-1"></i>Migrate Users
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
// Test function to manually test branch loading
function testBranchLoading() {
    const ispSelect = document.getElementById('isp_id');
    const selectedISP = ispSelect.value;
    
    if (!selectedISP) {
        alert('Please select an ISP first');
        return;
    }
    
    console.log('Testing branch loading for ISP:', selectedISP);
    loadBranchesForISP(selectedISP);
}

// Function to load branches for selected ISP
function loadBranchesForISP(ispId) {
    const branchSelect = document.getElementById('branch_id');
    
    if (!ispId) {
        branchSelect.innerHTML = '<option value="">Select Branch</option>';
        return;
    }
    
    console.log('Loading branches for ISP ID:', ispId);
    
    // Show loading state
    branchSelect.innerHTML = '<option value="">Loading branches...</option>';
    branchSelect.disabled = true;
    
    // Fetch branches from API
    fetch(`/api/branches/by-isp/${ispId}`, {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || ''
        }
    })
    .then(response => {
        console.log('Response status:', response.status);
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        return response.json();
    })
    .then(branches => {
        console.log('Branches loaded:', branches);
        branchSelect.innerHTML = '<option value="">Select Branch</option>';
        
        if (branches && branches.length > 0) {
            branches.forEach(function(branch) {
                const option = document.createElement('option');
                option.value = branch.id;
                option.textContent = branch.name;
                branchSelect.appendChild(option);
            });
        } else {
            const option = document.createElement('option');
            option.value = '';
            option.textContent = 'No branches found';
            branchSelect.appendChild(option);
        }
        
        branchSelect.disabled = false;
    })
    .catch(error => {
        console.error('Error loading branches:', error);
        branchSelect.innerHTML = '<option value="">Error loading branches</option>';
        branchSelect.disabled = false;
    });
}

// Wait for DOM to be ready
document.addEventListener('DOMContentLoaded', function() {
    // Handle modal show event
    const migrateModal = document.getElementById('migrateModal');
    if (migrateModal) {
        migrateModal.addEventListener('show.bs.modal', function (event) {
            const button = event.relatedTarget;
            const subTagId = button.getAttribute('data-subtag-id');
            const subTagName = button.getAttribute('data-subtag-name');
            const clientCount = button.getAttribute('data-client-count');
            
            // Set form data
            document.getElementById('subTagId').value = subTagId;
            document.getElementById('migrationInfo').textContent = `Migrate ${clientCount} clients from "${subTagName}" sub tag to sales_commission_person users`;
            
            // Set form action
            document.getElementById('migrateForm').action = '{{ route("reseller.migrate-subtag-to-users") }}';
            
            // Reset form
            document.getElementById('migrateForm').reset();
            document.getElementById('branch_id').innerHTML = '<option value="">Select Branch</option>';
        });
    }
    
    // Handle ISP selection change
    const ispSelect = document.getElementById('isp_id');
    if (ispSelect) {
        ispSelect.addEventListener('change', function() {
            const ispId = this.value;
            console.log('ISP changed to:', ispId);
            loadBranchesForISP(ispId);
        });
    }
    
    // Handle form submission
    const migrateForm = document.getElementById('migrateForm');
    if (migrateForm) {
        migrateForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            const subTagId = document.getElementById('subTagId').value;
            const migrationInfo = document.getElementById('migrationInfo').textContent;
            const subTagName = migrationInfo.match(/"([^"]+)"/)?.[1] || 'selected sub tag';
            const clientCount = migrationInfo.match(/(\d+) clients/)?.[1] || '0';
            
            if (confirm(`Are you sure you want to migrate all ${clientCount} clients in "${subTagName}" sub tag to sales_commission_person users?\n\nThis will:\n- Change their role to 'sales_commission_person'\n- Keep all their existing data\n- This action can be reversed by changing their role back`)) {
                // Show loading state
                const submitBtn = this.querySelector('button[type="submit"]');
                const originalHTML = submitBtn.innerHTML;
                submitBtn.disabled = true;
                submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-1"></i>Migrating...';
                
                // Submit form
                this.submit();
            }
        });
    }
});

// Toggle invoices visibility
document.addEventListener('DOMContentLoaded', function() {
    const toggleButtons = document.querySelectorAll('.toggle-invoices-btn');
    
    toggleButtons.forEach(button => {
        button.addEventListener('click', function() {
            const targetId = this.getAttribute('data-target');
            const targetElement = document.getElementById(targetId);
            const toggleText = this.querySelector('.toggle-text');
            const toggleIcon = this.querySelector('i');
            
            if (targetElement) {
                if (targetElement.style.display === 'none' || targetElement.style.display === '') {
                    // Show invoices
                    targetElement.style.display = 'block';
                    toggleText.textContent = 'Hide';
                    toggleIcon.className = 'fas fa-eye mr-1';
                    this.classList.remove('btn-outline-primary');
                    this.classList.add('btn-outline-secondary');
                } else {
                    // Hide invoices
                    targetElement.style.display = 'none';
                    toggleText.textContent = 'Show';
                    toggleIcon.className = 'fas fa-eye-slash mr-1';
                    this.classList.remove('btn-outline-secondary');
                    this.classList.add('btn-outline-primary');
                }
            }
        });
    });
});

// jQuery fallback (if jQuery is available)
$(document).ready(function() {
    // Handle modal show event
    $('#migrateModal').on('show.bs.modal', function (event) {
        const button = $(event.relatedTarget);
        const subTagId = button.data('subtag-id');
        const subTagName = button.data('subtag-name');
        const clientCount = button.data('client-count');
        
        // Set form data
        $('#subTagId').val(subTagId);
        $('#migrationInfo').text(`Migrate ${clientCount} clients from "${subTagName}" sub tag to sales_commission_person users`);
        
        // Set form action
        $('#migrateForm').attr('action', '{{ route("reseller.migrate-subtag-to-users") }}');
        
        // Reset form
        $('#migrateForm')[0].reset();
        $('#branch_id').html('<option value="">Select Branch</option>');
    });
    
    // Handle ISP selection change (jQuery version)
    $('#isp_id').on('change', function() {
        const ispId = $(this).val();
        console.log('ISP changed to (jQuery):', ispId);
        loadBranchesForISP(ispId);
    });
    
    // Handle form submission (jQuery version)
    $('#migrateForm').on('submit', function(e) {
        e.preventDefault();
        
        const subTagId = $('#subTagId').val();
        const subTagName = $('#migrationInfo').text().match(/"([^"]+)"/)?.[1] || 'selected sub tag';
        const clientCount = $('#migrationInfo').text().match(/(\d+) clients/)?.[1] || '0';
        
        if (confirm(`Are you sure you want to migrate all ${clientCount} clients in "${subTagName}" sub tag to sales_commission_person users?\n\nThis will:\n- Change their role to 'sales_commission_person'\n- Keep all their existing data\n- This action can be reversed by changing their role back`)) {
            // Show loading state
            const submitBtn = $(this).find('button[type="submit"]');
            const originalHTML = submitBtn.html();
            submitBtn.prop('disabled', true);
            submitBtn.html('<i class="fas fa-spinner fa-spin mr-1"></i>Migrating...');
            
            // Submit form
            this.submit();
        }
    });
    
    // Toggle invoices visibility (jQuery version)
    $('.toggle-invoices-btn').on('click', function() {
        const targetId = $(this).data('target');
        const targetElement = $('#' + targetId);
        const toggleText = $(this).find('.toggle-text');
        const toggleIcon = $(this).find('i');
        
        if (targetElement.length) {
            if (targetElement.is(':visible')) {
                // Hide invoices
                targetElement.hide();
                toggleText.text('Show');
                toggleIcon.removeClass('fa-eye').addClass('fa-eye-slash');
                $(this).removeClass('btn-outline-secondary').addClass('btn-outline-primary');
            } else {
                // Show invoices
                targetElement.show();
                toggleText.text('Hide');
                toggleIcon.removeClass('fa-eye-slash').addClass('fa-eye');
                $(this).removeClass('btn-outline-primary').addClass('btn-outline-secondary');
            }
        }
    });
});

// Keep the old function for backward compatibility (if needed elsewhere)
function migrateSubTagToUsers(subTagId, subTagName, clientCount) {
    if (confirm(`Are you sure you want to migrate all ${clientCount} clients in "${subTagName}" sub tag to sales_commission_person users?\n\nThis will:\n- Change their role to 'sales_commission_person'\n- Keep all their existing data\n- This action can be reversed by changing their role back`)) {
        // Show loading state
        const button = event.target.closest('button');
        const originalHTML = button.innerHTML;
        button.disabled = true;
        button.innerHTML = '<i class="fas fa-spinner fa-spin mr-1"></i>Migrating...';
        
        // Create form to submit
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = '{{ route("reseller.migrate-subtag-to-users") }}';
        
        // Add CSRF token
        const csrfToken = document.createElement('input');
        csrfToken.type = 'hidden';
        csrfToken.name = '_token';
        csrfToken.value = '{{ csrf_token() }}';
        form.appendChild(csrfToken);
        
        // Add sub tag ID
        const subTagInput = document.createElement('input');
        subTagInput.type = 'hidden';
        subTagInput.name = 'sub_tag_id';
        subTagInput.value = subTagId;
        form.appendChild(subTagInput);
        
        // Submit form
        document.body.appendChild(form);
        form.submit();
    }
}

// Initialize tooltips for sub tag hyperlinks
document.addEventListener('DOMContentLoaded', function() {
    // Initialize Bootstrap tooltips if available
    if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip) {
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
        var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl);
        });
    }
    
    // Add click tracking for sub tag links
    const subTagLinks = document.querySelectorAll('.sub-tag-link');
    subTagLinks.forEach(function(link) {
        link.addEventListener('click', function(e) {
            const subTagId = this.getAttribute('data-subtag-id');
            const subTagName = this.getAttribute('data-subtag-name');
            
            // Add a subtle loading state
            const originalText = this.innerHTML;
            this.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Loading...';
            this.style.pointerEvents = 'none';
            
            // Reset after a short delay (in case of slow navigation)
            setTimeout(() => {
                this.innerHTML = originalText;
                this.style.pointerEvents = 'auto';
            }, 2000);
            
            // Optional: Track the click for analytics
            console.log('Navigating to sub tag profile:', { subTagId, subTagName });
        });
    });
});
</script>
@endsection