@extends('backend.layouts.app')

@section('content')
<style>
/* Modern Page Styles */
.commission-page-wrapper {
    background: #f8f9fa;
    min-height: 100vh;
    padding: 24px;
}

.page-header-modern {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px;
    padding: 32px;
    margin-bottom: 24px;
    color: white;
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.25);
}

.page-title-modern {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 8px;
    color: white;
}

.page-subtitle {
    font-size: 14px;
    opacity: 0.9;
    color: rgba(255,255,255,0.9);
}

/* Search & Filter Card */
.filter-card {
    background: white;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 2px solid #f0f0f0;
}

.filter-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-label {
    font-size: 13px;
    font-weight: 500;
    color: #555;
}

.filter-input, .filter-select {
    padding: 10px 14px;
    border: 2px solid #e5e5e5;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.3s ease;
}

.filter-input:focus, .filter-select:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.filter-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.btn-search {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 10px 24px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-search:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.btn-reset {
    background: white;
    color: #667eea;
    border: 2px solid #667eea;
    padding: 10px 24px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-reset:hover {
    background: #f8f9ff;
}

.btn-export {
    background: #10b981;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-export:hover {
    background: #059669;
    transform: translateY(-2px);
}

/* Table Card */
.table-card {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.table-info {
    font-size: 14px;
    color: #666;
}

/* Modern Table */
.modern-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.modern-table thead {
    background: #f8f9fa;
}

.modern-table thead th {
    padding: 16px;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #e5e5e5;
    white-space: nowrap;
}

.modern-table tbody tr {
    transition: all 0.3s ease;
    border-bottom: 1px solid #f0f0f0;
}

.modern-table tbody tr:hover {
    background: #f8f9ff;
    transform: scale(1.01);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1);
}

.modern-table tbody td {
    padding: 16px;
    font-size: 14px;
    color: #333;
}

/* Commission Breakdown */
.commission-amount {
    display: flex;
    align-items: center;
    gap: 8px;
}

.commission-value {
    font-size: 16px;
    font-weight: 600;
    color: #667eea;
}

.expand-btn {
    background: #667eea;
    color: white;
    border: none;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.3s ease;
}

.expand-btn:hover {
    background: #764ba2;
    transform: scale(1.1);
}

.expand-btn.expanded {
    transform: rotate(180deg);
}

/* Expanded Row */
.detail-row {
    display: none;
    background: #f8f9ff;
}

.detail-row.show {
    display: table-row;
}

.detail-content {
    padding: 24px;
}

.commission-breakdown {
    background: white;
    border-radius: 12px;
    padding: 20px;
    border: 2px solid #e5e5ff;
}

.breakdown-header {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid #f0f0f0;
}

.breakdown-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.breakdown-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    margin-bottom: 8px;
    background: #fafafa;
    border-radius: 8px;
    border-left: 4px solid transparent;
    transition: all 0.3s ease;
}

.breakdown-item:hover {
    background: #f0f0f0;
}

.breakdown-item.pincode {
    border-left-color: #3b82f6;
}

.breakdown-item.district {
    border-left-color: #8b5cf6;
}

.breakdown-item.state {
    border-left-color: #ec4899;
}

.breakdown-item.advisor {
    border-left-color: #10b981;
}

.partner-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.partner-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 14px;
}

.partner-details {
    display: flex;
    flex-direction: column;
}

.partner-name {
    font-weight: 600;
    color: #333;
    font-size: 14px;
}

.partner-type {
    font-size: 12px;
    color: #666;
    display: flex;
    align-items: center;
    gap: 4px;
}

.partner-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

.partner-badge.pincode {
    background: #dbeafe;
    color: #1e40af;
}

.partner-badge.district {
    background: #ede9fe;
    color: #6b21a8;
}

.partner-badge.state {
    background: #fce7f3;
    color: #9f1239;
}

.partner-badge.advisor {
    background: #d1fae5;
    color: #065f46;
}

.commission-amount-detail {
    font-size: 15px;
    font-weight: 700;
    color: #667eea;
}

/* Status Badges */
.status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.status-badge.active {
    background: #d1fae5;
    color: #065f46;
}

.status-badge.pending {
    background: #fef3c7;
    color: #92400e;
}

/* Package Badge */
.package-badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    background: linear-gradient(135deg, #667eea15 0%, #764ba215 100%);
    color: #667eea;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 60px 20px;
}

.empty-icon {
    font-size: 64px;
    color: #d1d5db;
    margin-bottom: 16px;
}

.empty-title {
    font-size: 18px;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 8px;
}

.empty-text {
    font-size: 14px;
    color: #9ca3af;
}

/* Pagination */
.modern-pagination {
    margin-top: 24px;
    display: flex;
    justify-content: center;
}

/* Responsive */
@media (max-width: 768px) {
    .commission-page-wrapper {
        padding: 16px;
    }
    
    .page-header-modern {
        padding: 24px 20px;
    }
    
    .filter-grid {
        grid-template-columns: 1fr;
    }
    
    .table-card {
        overflow-x: auto;
    }
    
    .modern-table {
        min-width: 800px;
    }
    
    .filter-actions {
        flex-direction: column;
    }
    
    .btn-search, .btn-reset, .btn-export {
        width: 100%;
    }
}

/* Loading Animation */
.loading-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Stats Cards */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border-left: 4px solid #667eea;
}

.stat-label {
    font-size: 13px;
    color: #666;
    margin-bottom: 8px;
}

.stat-value {
    font-size: 24px;
    font-weight: 700;
    color: #333;
}
</style>

<div class="commission-page-wrapper">
    <!-- Page Header -->
    <div class="page-header-modern">
        <h1 class="page-title-modern">💰 {{ translate('Commission History') }}</h1>
        <p class="page-subtitle">{{ translate('Track and manage all commission payments and breakdowns') }}</p>
    </div>

    <!-- Stats Cards -->
    <div class="stats-grid">
        <div class="stat-card">
            <div class="stat-label">{{ translate('Total Commissions') }}</div>
            <div class="stat-value">{{ single_price($paymentHistory->sum('amount')) }}</div>
        </div>
        <div class="stat-card" style="border-left-color: #8b5cf6;">
            <div class="stat-label">{{ translate('Total Transactions') }}</div>
            <div class="stat-value">{{ $paymentHistory->total() }}</div>
        </div>
        <div class="stat-card" style="border-left-color: #10b981;">
            <div class="stat-label">{{ translate('This Month') }}</div>
            <div class="stat-value">{{ single_price($paymentHistory->where('created_at', '>=', now()->startOfMonth())->sum('amount')) }}</div>
        </div>
        <div class="stat-card" style="border-left-color: #f59e0b;">
            <div class="stat-label">{{ translate('Average Commission') }}</div>
            <div class="stat-value">{{ single_price($paymentHistory->avg('amount')) }}</div>
        </div>
    </div>

    <!-- Search & Filter Card -->
    <div class="filter-card">
        <div class="filter-header">
            <div class="filter-title">
                <i class="las la-filter" style="font-size: 20px;"></i>
                {{ translate('Search & Filters') }}
            </div>
            <button class="btn-export" onclick="exportData()">
                <i class="las la-download"></i> {{ translate('Export') }}
            </button>
        </div>

        <form action="{{ route('admin.commission') }}" method="GET" id="filterForm">
            <div class="filter-grid">
                <!-- Seller Name Search -->
                <div class="filter-group">
                    <label class="filter-label">{{ translate('Seller Name') }}</label>
                    <input type="text" name="seller_name" class="filter-input" 
                           placeholder="{{ translate('Search by seller name...') }}" 
                           value="{{ request('seller_name') }}">
                </div>

                <!-- Email Search -->
                <div class="filter-group">
                    <label class="filter-label">{{ translate('Email') }}</label>
                    <input type="email" name="email" class="filter-input" 
                           placeholder="{{ translate('Search by email...') }}" 
                           value="{{ request('email') }}">
                </div>

                <!-- Phone Search -->
                <div class="filter-group">
                    <label class="filter-label">{{ translate('Phone Number') }}</label>
                    <input type="text" name="phone" class="filter-input" 
                           placeholder="{{ translate('Search by phone...') }}" 
                           value="{{ request('phone') }}">
                </div>

                <!-- Package Type Filter -->
                <div class="filter-group">
                    <label class="filter-label">{{ translate('Package Type') }}</label>
                    <select name="package_type" class="filter-select">
                        <option value="">{{ translate('All Packages') }}</option>
                        <option value="Corporate" {{ request('package_type') == 'Corporate' ? 'selected' : '' }}>Corporate</option>
                        <option value="Professional" {{ request('package_type') == 'Professional' ? 'selected' : '' }}>Professional</option>
                        <option value="Basic" {{ request('package_type') == 'Basic' ? 'selected' : '' }}>Basic</option>
                    </select>
                </div>

                <!-- Partner Type Filter -->
                <div class="filter-group">
                    <label class="filter-label">{{ translate('Partner Type') }}</label>
                    <select name="partner_type" class="filter-select">
                        <option value="">{{ translate('All Partners') }}</option>
                        <option value="pincode_partner" {{ request('partner_type') == 'pincode_partner' ? 'selected' : '' }}>Pincode Partner</option>
                        <option value="district_partner" {{ request('partner_type') == 'district_partner' ? 'selected' : '' }}>District Partner</option>
                        <option value="state_partner" {{ request('partner_type') == 'state_partner' ? 'selected' : '' }}>State Partner</option>
                        <option value="advisor" {{ request('partner_type') == 'advisor' ? 'selected' : '' }}>Advisor</option>
                    </select>
                </div>

                <!-- Date From -->
                <div class="filter-group">
                    <label class="filter-label">{{ translate('From Date') }}</label>
                    <input type="date" name="date_from" class="filter-input" 
                           value="{{ request('date_from') }}">
                </div>

                <!-- Date To -->
                <div class="filter-group">
                    <label class="filter-label">{{ translate('To Date') }}</label>
                    <input type="date" name="date_to" class="filter-input" 
                           value="{{ request('date_to') }}">
                </div>

                <!-- Amount Range -->
                <div class="filter-group">
                    <label class="filter-label">{{ translate('Min Amount') }}</label>
                    <input type="number" name="min_amount" class="filter-input" 
                           placeholder="₹ 0" 
                           value="{{ request('min_amount') }}">
                </div>

                <div class="filter-group">
                    <label class="filter-label">{{ translate('Max Amount') }}</label>
                    <input type="number" name="max_amount" class="filter-input" 
                           placeholder="₹ 99999" 
                           value="{{ request('max_amount') }}">
                </div>
            </div>

            <div class="filter-actions">
                <button type="button" class="btn-reset" onclick="resetFilters()">
                    <i class="las la-redo"></i> {{ translate('Reset') }}
                </button>
                <button type="submit" class="btn-search">
                    <i class="las la-search"></i> {{ translate('Search') }}
                </button>
            </div>
        </form>
    </div>

    <!-- Table Card -->
    @if(count($paymentHistory) > 0)
        <div class="table-card">
            <div class="table-header">
                <div class="table-info">
                    {{ translate('Showing') }} {{ $paymentHistory->firstItem() }} - {{ $paymentHistory->lastItem() }} 
                    {{ translate('of') }} {{ $paymentHistory->total() }} {{ translate('results') }}
                </div>
            </div>

            <table class="modern-table">
                <thead>
                    <tr>
                        <th>{{ translate('S.No') }}</th>
                        <th>{{ translate('Seller Details') }}</th>
                        <th>{{ translate('Contact Info') }}</th>
                        <th>{{ translate('Commission') }}</th>
                        <th>{{ translate('Package') }}</th>
                        <th>{{ translate('Package Amount') }}</th>
                        <th>{{ translate('Date') }}</th>
                        <th>{{ translate('Details') }}</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($paymentHistory as $key => $value)
                        @php
                            $sellerPackagePaymentId = isset($value->seller_package_payment_id) ? $value->seller_package_payment_id : '';
                            $sellerPackagePaymentHistory = \App\Models\SellerPackagePayment::with('seller_package')->where('id',$sellerPackagePaymentId)->first();
                            $affilatePaymentHistory = \App\Models\AffiliatePaymentHistory::with('affilateUser','partnerName')->where('parent_id',$value->id)->get();
                        @endphp
                        
                        <tr>
                            <td>{{ $paymentHistory->firstItem() + $key }}</td>
                            
                            <!-- Seller Details -->
                            <td>
                                <div style="display: flex; align-items: center; gap: 12px;">
                                    <div class="partner-avatar">
                                        {{ substr($value->user->name ?? 'U', 0, 1) }}
                                    </div>
                                    <div>
                                        <div style="font-weight: 600; color: #333;">
                                            {{ $value->user->name ?? '-' }}
                                        </div>
                                        <div style="font-size: 12px; color: #666;">
                                            ID: #{{ $value->id }}
                                        </div>
                                    </div>
                                </div>
                            </td>

                            <!-- Contact Info -->
                            <td>
                                <div style="font-size: 13px;">
                                    <div style="margin-bottom: 4px;">
                                        <i class="las la-phone" style="color: #667eea;"></i> 
                                        {{ $value->user->phone ?? '-' }}
                                    </div>
                                    <div>
                                        <i class="las la-envelope" style="color: #667eea;"></i> 
                                        {{ $value->user->email ?? '-' }}
                                    </div>
                                </div>
                            </td>

                            <!-- Commission -->
                            <td>
                                <div class="commission-value">
                                    {{ single_price($value->amount) }}
                                </div>
                            </td>

                            <!-- Package -->
                            <td>
                                <span class="package-badge">
                                    {{ $sellerPackagePaymentHistory->seller_package->name ?? '-' }}
                                </span>
                            </td>

                            <!-- Package Amount -->
                            <td style="font-weight: 600; color: #10b981;">
                                {{ isset($sellerPackagePaymentHistory->seller_package->amount) ? single_price($sellerPackagePaymentHistory->seller_package->amount) : '-' }}
                            </td>

                            <!-- Date -->
                            <td>
                                <div style="font-size: 13px;">
                                    <div style="font-weight: 600; color: #333;">
                                        {{ date('d M Y', strtotime($value->created_at)) }}
                                    </div>
                                    <div style="color: #666; font-size: 12px;">
                                        {{ date('h:i A', strtotime($value->created_at)) }}
                                    </div>
                                </div>
                            </td>

                            <!-- Expand Button -->
                            <td>
                                @if(count($affilatePaymentHistory) > 0)
                                    <button class="expand-btn" onclick="toggleDetails({{ $value->id }})">
                                        <i class="las la-angle-down"></i>
                                    </button>
                                @else
                                    <span style="color: #999; font-size: 12px;">-</span>
                                @endif
                            </td>
                        </tr>

                        <!-- Detail Row -->
                        @if(count($affilatePaymentHistory) > 0)
                            <tr class="detail-row" id="detail-{{ $value->id }}">
                                <td colspan="8">
                                    <div class="detail-content">
                                        <div class="commission-breakdown">
                                            <div class="breakdown-header">
                                                <i class="las la-chart-pie"></i> 
                                                {{ translate('Commission Breakdown') }}
                                                <span style="float: right; font-size: 14px; color: #667eea;">
                                                    {{ translate('Total:') }} {{ single_price($value->amount) }}
                                                </span>
                                            </div>
                                            
                                            <ul class="breakdown-list">
                                                @foreach ($affilatePaymentHistory as $data)
                                                    @php
                                                        $userId = isset($data->affilateUser->id) ? $data->affilateUser->id : '';
                                                        $partnerType = 'advisor';
                                                        $partnerLocation = '';
                                                        
                                                        if(isset($data->partnerName->partner_type)) {
                                                            if($data->partnerName->partner_type == 'pincode_partner') {
                                                                $partnerType = 'pincode';
                                                                $partnerLocation = $data->partnerName->pincode;
                                                            } elseif($data->partnerName->partner_type == 'district_partner') {
                                                                $partnerType = 'district';
                                                                $partnerLocation = $data->partnerName->city;
                                                            } elseif($data->partnerName->partner_type == 'state_partner') {
                                                                $partnerType = 'state';
                                                                $partnerLocation = $data->partnerName->state;
                                                            }
                                                        }
                                                    @endphp
                                                    
                                                    <li class="breakdown-item {{ $partnerType }}">
                                                        <div class="partner-info">
                                                            <div class="partner-avatar">
                                                                {{ substr($data->affilateUser->name ?? 'U', 0, 1) }}
                                                            </div>
                                                            <div class="partner-details">
                                                                <div class="partner-name">
                                                                    {{ $data->affilateUser->name ?? '-' }}
                                                                </div>
                                                                <div class="partner-type">
                                                                    <span class="partner-badge {{ $partnerType }}">
                                                                        @if($partnerType == 'pincode')
                                                                            <i class="las la-map-pin"></i> Pincode: {{ $partnerLocation }}
                                                                        @elseif($partnerType == 'district')
                                                                            <i class="las la-city"></i> District: {{ $partnerLocation }}
                                                                        @elseif($partnerType == 'state')
                                                                            <i class="las la-map"></i> State: {{ $partnerLocation }}
                                                                        @else
                                                                            <i class="las la-user-tie"></i> Advisor
                                                                        @endif
                                                                    </span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="commission-amount-detail">
                                                            {{ single_price($data->amount) }}
                                                        </div>
                                                    </li>
                                                @endforeach
                                            </ul>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        @endif
                    @endforeach
                </tbody>
            </table>

            <!-- Pagination -->
            <div class="modern-pagination">
                {{ $paymentHistory->appends(request()->input())->links() }}
            </div>
        </div>
    @else
        <div class="table-card">
            <div class="empty-state">
                <div class="empty-icon">📊</div>
                <div class="empty-title">{{ translate('No Commission Records Found') }}</div>
                <div class="empty-text">{{ translate('Try adjusting your search filters or check back later') }}</div>
            </div>
        </div>
    @endif
</div>

@endsection

@section('script')
<script type="text/javascript">
    // Toggle Detail Row
    function toggleDetails(id) {
        const detailRow = document.getElementById('detail-' + id);
        const btn = event.currentTarget;
        
        if (detailRow.classList.contains('show')) {
            detailRow.classList.remove('show');
            btn.classList.remove('expanded');
        } else {
            detailRow.classList.add('show');
            btn.classList.add('expanded');
        }
    }

    // Reset Filters
    function resetFilters() {
        document.getElementById('filterForm').reset();
        window.location.href = "{{ route('admin.commission') }}";
    }

    // Export Data
    function exportData() {
        const params = new URLSearchParams(window.location.search);
        params.append('export', 'excel');
        window.location.href = "{{ route('admin.commission') }}?" + params.toString();
    }

    // Auto-submit on date change
    document.querySelectorAll('.filter-input[type="date"]').forEach(input => {
        input.addEventListener('change', function() {
            // Optional: Auto-submit form on date change
            // document.getElementById('filterForm').submit();
        });
    });
</script>
@endsection