@extends('admin_pages_master')

@section('content')
<main class="main">
    <!-- Start of Breadcrumb -->
    <nav class="breadcrumb-nav">
        <div class="container">
            <ul class="breadcrumb account-breadcrumb">
                <li><a href="/">Home</a></li>
                <li><a href="{{ route('admin-dashboard') }}">Dashboard</a></li>
                <li><a href="{{ url()->previous() }}">Marketers</a></li>
                <li>{{ $marketer->first_name }}'s Commissions</li>
            </ul>
        </div>
    </nav>
    <!-- End of Breadcrumb -->

    <!-- Start of Page Content -->
    <div class="page-content pt-2">
        <div class="container">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2 class="title">{{ $marketer->first_name }} {{ $marketer->last_name }}'s Commission</h2>
                <a class="back-btn d-flex align-items-center" onclick="goBack()">
                    <i class="w-icon-long-arrow-left"></i>
                    <div>Back</div>
                </a>
            </div>

            @include('alert')

            <!-- Marketer Info Card -->
            <div class="marketer-info-card mb-4">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h5>Marketer Information</h5>
                            <p><strong>Name:</strong> {{ $marketer->first_name }} {{ $marketer->last_name }}</p>
                            <p><strong>Email:</strong> {{ $marketer->email }}</p>
                            <p><strong>Type:</strong> {{ ucfirst($marketer->type) }}</p>
                            <p><strong>Total Referrals:</strong> {{ $totalReferrals }} vendors</p>
                        </div>
                        <div class="col-md-6">
                            <h5>Lifetime Stats</h5>
                            <p><strong>Total Lifetime Earnings:</strong> <span class="text-success">₦{{ number_format($lifetimeEarnings, 2) }}</span></p>
                            <p><strong>Member Since:</strong> {{ $marketer->created_at->format('M d, Y') }}</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Summary Cards -->
            <div class="row mb-4">
                <div class="col-md-4 mb-3">
                    <div class="summary-card bg-primary">
                        <div class="card-body text-white">
                            <h5 class="card-title text-white">This Month Total</h5>
                            <h2 class="card-amount text-white">₦{{ number_format($totalEarnings, 2) }}</h2>
                            <small>{{ date('F Y', mktime(0, 0, 0, $currentMonth, 1, $currentYear)) }}</small>
                        </div>
                    </div>
                </div>

                <div class="col-md-4 mb-3">
                    <div class="summary-card bg-success">
                        <div class="card-body text-white">
                            <h5 class="card-title text-white">Paid This Month</h5>
                            <h2 class="card-amount text-white">₦{{ number_format($paidEarnings, 2) }}</h2>
                            <small>Successfull</small>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Month Filter -->
            <div class="filter-card mb-4">
                <div class="card-body">
                    <form method="GET" class="filter-form">
                        <div class="row align-items-end">
                            <div class="col-md-3 col-6 mb-2">
                                <label class="form-label">Month:</label>
                                <select name="month" class="form-control">
                                    @for($i = 1; $i <= 12; $i++)
                                        <option value="{{ $i }}" {{ $currentMonth == $i ? 'selected' : '' }}>
                                            {{ date('F', mktime(0, 0, 0, $i, 1)) }}
                                        </option>
                                    @endfor
                                </select>
                            </div>
                            <div class="col-md-3 col-6 mb-2">
                                <label class="form-label">Year:</label>
                                <select name="year" class="form-control">
                                    @for($year = date('Y'); $year >= 2020; $year--)
                                        <option value="{{ $year }}" {{ $currentYear == $year ? 'selected' : '' }}>
                                            {{ $year }}
                                        </option>
                                    @endfor
                                </select>
                            </div>
                            <div class="col-md-6 col-12 mb-2">
                                <button type="submit" class="btn btn-primary btn-filter">
                                    <i class="w-icon-filter"></i> Filter
                                </button>
                                <a href="{{ route('admin-view-marketer-commissions', $marketer->id) }}" class="btn btn-primary btn-filter ml-2">
                                    <i class="w-icon-refresh"></i> Reset
                                </a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Commission Details Table -->
            <div class="earnings-card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="w-icon-dollar"></i>
                        Commission Details - {{ date('F Y', mktime(0, 0, 0, $currentMonth, 1, $currentYear)) }}
                    </h5>
                </div>
                <div class="card-body">
                    @if($monthlyCommissions->count() > 0)
                        <!-- Desktop Table -->
                        <div class="table-responsive d-none d-md-block">
                            <table class="earnings-table">
                                <thead>
                                    <tr>
                                        <th>Date</th>
                                        <th>Vendor</th>
                                        <th>Subscription</th>
                                        <th>Commission Rate</th>
                                        <th>Commission Earned</th>
                                        <th>Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($monthlyCommissions as $commission)
                                        <tr>
                                            <td>
                                                <span class="date-badge">
                                                    {{ $commission->earned_date->format('M d, Y') }}
                                                </span>
                                            </td>
                                            <td>
                                                @if($commission->vendor)
                                                    <div class="vendor-info">
                                                        <strong>{{ $commission->vendor->first_name }} {{ $commission->vendor->last_name }}</strong>
                                                        <br><small class="text-muted">{{ $commission->vendor->email }}</small>
                                                    </div>
                                                @else
                                                    <span class="text-muted">N/A</span>
                                                @endif
                                            </td>
                                            <td>
                                                <span class="amount-badge subscription">
                                                    ₦{{ number_format($commission->subscription_amount, 2) }}
                                                </span>
                                            </td>
                                            <td>{{ $commission->commission_rate }}%</td>
                                            <td>
                                                <span class="amount-badge commission">
                                                    ₦{{ number_format($commission->commission_amount, 2) }}
                                                </span>
                                            </td>
                                            <td>
                                                @if($commission->status == 'pending')
                                                    <span class="status-badge pending">Pending</span>
                                                @else
                                                    <span class="status-badge paid">Paid</span>
                                                @endif
                                            </td>

                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>

                        <!-- Mobile Cards -->
                        <div class="d-md-none">
                            @foreach($monthlyCommissions as $commission)
                                <div class="mobile-commission-card">
                                    <div class="commission-header">
                                        <span class="commission-date">{{ $commission->earned_date->format('M d, Y') }}</span>
                                        @if($commission->status == 'pending')
                                            <span class="status-badge pending">Pending</span>
                                        @else
                                            <span class="status-badge paid">Paid</span>
                                        @endif
                                    </div>
                                    <div class="commission-vendor">
                                        @if($commission->vendor)
                                            <strong>{{ $commission->vendor->first_name }} {{ $commission->vendor->last_name }}</strong>
                                            <br><small class="text-muted">{{ $commission->vendor->email }}</small>
                                        @else
                                            <span class="text-muted">N/A</span>
                                        @endif
                                    </div>
                                    <div class="commission-amounts">
                                        <div class="amount-row">
                                            <span class="amount-label">Subscription:</span>
                                            <span class="amount-value">₦{{ number_format($commission->subscription_amount, 2) }}</span>
                                        </div>
                                        <div class="amount-row">
                                            <span class="amount-label">Commission ({{ $commission->commission_rate }}%):</span>
                                            <span class="amount-value commission">₦{{ number_format($commission->commission_amount, 2) }}</span>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <div class="empty-state">
                            <div class="empty-icon">
                                <i class="w-icon-dollar"></i>
                            </div>
                            <h4>No commissions yet</h4>
                            <p>No commissions found for {{ date('F Y', mktime(0, 0, 0, $currentMonth, 1, $currentYear)) }}.</p>
                            <p class="text-muted">Commissions will appear here when this marketer's referred vendors make subscription payments.</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</main>

<style>
/* Card Styling */
.summary-card, .filter-card, .earnings-card, .marketer-info-card {
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border: none;
    margin-bottom: 20px;
}

.marketer-info-card {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
}

.summary-card .card-body {
    padding: 25px;
    text-align: center;
}

.card-amount {
    font-size: 2.2rem;
    font-weight: 700;
    margin: 10px 0;
}

.bg-primary {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%) !important;
}

.bg-warning {
    background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%) !important;
}

.bg-success {
    background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%) !important;
}

/* Filter Card */
.filter-card {
    background: #f8f9fa;
}

.filter-form .form-label {
    font-weight: 600;
    color: #495057;
    margin-bottom: 5px;
}

.btn-filter {
    background: linear-gradient(135deg, #f08237 0%, #e67015 100%);
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
}

/* Table Styling */
.earnings-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
}

.earnings-table th {
    background: #f8f9fa;
    color: #495057;
    font-weight: 600;
    padding: 15px 12px;
    text-align: left;
    border-bottom: 2px solid #dee2e6;
}

.earnings-table td {
    padding: 15px 12px;
    border-bottom: 1px solid #eee;
    vertical-align: middle;
}

.earnings-table tr:hover {
    background-color: #f8f9fa;
}

/* Badges */
.date-badge {
    background: #e9ecef;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 0.9rem;
    color: #495057;
}

.amount-badge {
    padding: 6px 12px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.95rem;
}

.amount-badge.subscription {
    background: #e3f2fd;
    color: #1976d2;
}

.amount-badge.commission {
    background: #e8f5e8;
    color: #2e7d32;
    font-size: 1.1rem;
}

.status-badge {
    padding: 6px 15px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
}

.status-badge.pending {
    background: #fff3cd;
    color: #856404;
}

.status-badge.paid {
    background: #d4edda;
    color: #155724;
}

/* Mobile Cards */
.mobile-commission-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 15px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border: 1px solid #eee;
}

.commission-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.commission-date {
    font-weight: 600;
    color: #495057;
}

.commission-vendor {
    margin-bottom: 15px;
}

.commission-amounts {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 15px;
}

.amount-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.amount-row:last-child {
    margin-bottom: 0;
    padding-top: 8px;
    border-top: 1px solid #dee2e6;
    font-weight: 600;
}

.amount-label {
    color: #6c757d;
    font-size: 0.9rem;
}

.amount-value {
    font-weight: 600;
    color: #495057;
}

.amount-value.commission {
    color: #28a745;
    font-size: 1.1rem;
}

.commission-action {
    text-align: center;
}

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

.empty-icon {
    font-size: 4rem;
    color: #dee2e6;
    margin-bottom: 20px;
}

.empty-state h4 {
    color: #495057;
    margin-bottom: 10px;
}

/* Back button styling */
.back-btn {
    color: #f08237;
    text-decoration: none;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 5px;
}

.back-btn:hover {
    color: #e67015;
    text-decoration: none;
}

/* Responsive */
@media (max-width: 768px) {
    .container {
        padding: 0 15px;
    }

    .card-amount {
        font-size: 1.8rem;
    }

    .summary-card .card-body {
        padding: 20px;
    }

    .btn-filter, .btn-secondary {
        width: 100%;
        margin: 5px 0;
    }

    .d-flex.justify-content-between {
        flex-direction: column;
        align-items: flex-start;
    }

    .title {
        margin-bottom: 10px;
    }
}
</style>
@endsection

@section('scripts')
<script>
function goBack() {
    window.history.back();
}


</script>
@endsection