@extends("../dashboard._blank")

@section("sidebar")
    @include("../dashboard._sidebar")
@endsection

@section("content")
<link rel="stylesheet" href="{{ asset('css/table-modern.blade.css') }}">

<style>
/* Modern Header Styles */
.admin-modern-header {
    background: linear-gradient(135deg, #000000 0%, #2c2c2c 100%);
    color: #FFFFFF;
    padding: 40px 30px;
    margin-bottom: 30px;
    border-radius: 0;
    position: relative;
}

.breadcrumb-modern {
    font-size: 14px;
    margin-bottom: 15px;
    color: rgba(255, 255, 255, 0.7);
}

.breadcrumb-modern a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.3s ease;
}

.breadcrumb-modern a:hover {
    color: #FFFFFF;
}

.breadcrumb-modern .separator {
    margin: 0 10px;
}

.admin-modern-header h1 {
    font-size: 28px;
    font-weight: 700;
    margin: 10px 0;
    color: #FFFFFF;
    letter-spacing: -0.5px;
}

.admin-modern-header p {
    font-size: 14px;
    margin: 10px 0 20px 0;
    color: rgba(255, 255, 255, 0.8);
}

.header-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.btn-header {
    background: #FFFFFF;
    color: #000000;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-header:hover {
    background: #000000;
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Statistics Cards */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.stat-card {
    background: #FFFFFF;
    padding: 25px;
    border-radius: 12px;
    border-left: 4px solid #000000;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.stat-icon {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

.stat-icon i {
    font-size: 24px;
    color: #000000;
}

.stat-value {
    font-size: 32px;
    font-weight: 700;
    color: #000000;
    margin-bottom: 5px;
}

.stat-label {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.6);
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.stat-change {
    margin-top: 10px;
    font-size: 12px;
    font-weight: 500;
}

.stat-change.positive {
    color: #28A745;
}

.stat-change.negative {
    color: #DC3545;
}

/* Modern Content Card */
.content-card-modern {
    background: #FFFFFF;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    margin-bottom: 30px;
}

.card-header-modern {
    padding: 20px 25px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-header-modern h3 {
    font-size: 18px;
    font-weight: 600;
    color: #000000;
    margin: 0;
}

.card-body-modern {
    padding: 25px;
}

/* Modern Alerts */
.alert-modern {
    padding: 15px 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.alert-modern i {
    font-size: 20px;
}

.alert-success-modern {
    background: rgba(40, 167, 69, 0.1);
    color: #155724;
    border-left: 4px solid #28A745;
}

.alert-danger-modern {
    background: rgba(220, 53, 69, 0.1);
    color: #721c24;
    border-left: 4px solid #DC3545;
}

/* Modern Badges */
.badge-modern {
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.badge-success {
    background: rgba(40, 167, 69, 0.1);
    color: #28A745;
}

.badge-danger {
    background: rgba(220, 53, 69, 0.1);
    color: #DC3545;
}

.badge-warning {
    background: rgba(255, 193, 7, 0.1);
    color: #856404;
}

.badge-info {
    background: rgba(0, 0, 0, 0.05);
    color: rgba(0, 0, 0, 0.7);
}

/* Action Buttons */
.btn-action-modern {
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}

.btn-accept {
    background: rgba(40, 167, 69, 0.1);
    color: #28A745;
    border: 1px solid #28A745;
}

.btn-accept:hover {
    background: #28A745;
    color: #FFFFFF;
    transform: translateY(-2px);
}

.btn-reject {
    background: rgba(220, 53, 69, 0.1);
    color: #DC3545;
    border: 1px solid #DC3545;
}

.btn-reject:hover {
    background: #DC3545;
    color: #FFFFFF;
    transform: translateY(-2px);
}

.btn-view {
    background: rgba(0, 0, 0, 0.05);
    color: #000000;
    border: 1px solid rgba(0, 0, 0, 0.2);
}

.btn-view:hover {
    background: #000000;
    color: #FFFFFF;
    transform: translateY(-2px);
}

/* Search and Filter */
.search-filter-section {
    margin-bottom: 25px;
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    align-items: center;
}

.search-box-modern {
    position: relative;
    flex: 1;
    min-width: 250px;
}

.search-box-modern input {
    width: 100%;
    padding: 12px 45px 12px 45px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.3s ease;
}

.search-box-modern input:focus {
    outline: none;
    border-color: #000000;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
}

.search-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(0, 0, 0, 0.4);
}

.clear-icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(0, 0, 0, 0.4);
    cursor: pointer;
    display: none;
}

.clear-icon:hover {
    color: #000000;
}

.filter-select {
    padding: 12px 15px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    font-size: 14px;
    min-width: 200px;
}

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

.empty-state i {
    font-size: 64px;
    color: rgba(0, 0, 0, 0.2);
    margin-bottom: 20px;
}

.empty-state h3 {
    font-size: 20px;
    color: #000000;
    margin-bottom: 10px;
}

.empty-state p {
    color: rgba(0, 0, 0, 0.6);
    font-size: 14px;
}

/* Responsive */
@media (max-width: 768px) {
    .admin-modern-header {
        padding: 30px 20px;
    }

    .admin-modern-header h1 {
        font-size: 24px;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .search-filter-section {
        flex-direction: column;
    }

    .search-box-modern {
        width: 100%;
    }

    .filter-select {
        width: 100%;
    }
}
</style>

<div class="right_col" role="main">
    <!-- Modern Header -->
    <div class="admin-modern-header">
        <div class="breadcrumb-modern">
            <a href="{{ route('home') }}"><i class="fa fa-home"></i> Accueil</a>
            <span class="separator">/</span>
            <a href="{{ route('sunmarketers') }}">Gestionnaires</a>
            <span class="separator">/</span>
            <span>Offres reçues</span>
        </div>
        <h1><i class="fas fa-inbox"></i> Offres de Gestion Reçues</h1>
        <p>Gérez les demandes de gestion de boutiques qui vous sont adressées</p>

        <div class="header-actions">
            <a href="{{ route('sunmarketers') }}" class="btn-header">
                <i class="fas fa-arrow-left"></i> Retour
            </a>
            <button class="btn-header" onclick="window.print()">
                <i class="fas fa-print"></i> Imprimer
            </button>
            <button class="btn-header" onclick="location.reload()">
                <i class="fas fa-sync-alt"></i> Actualiser
            </button>
        </div>
    </div>

    @php
        $total = count($marketers);
        $accepted = $marketers->where('marketer_accept', true)->count();
        $rejected = $marketers->where('marketer_accept', false)->count();
        $active = $marketers->where('status', true)->count();
    @endphp

    <!-- Statistics Cards -->
    <div class="stats-grid">
        <div class="stat-card">
            <div class="stat-icon">
                <i class="fas fa-inbox"></i>
            </div>
            <div class="stat-value">{{ $total }}</div>
            <div class="stat-label">Total Demandes</div>
        </div>

        <div class="stat-card">
            <div class="stat-icon">
                <i class="fas fa-check-circle"></i>
            </div>
            <div class="stat-value">{{ $accepted }}</div>
            <div class="stat-label">Acceptées</div>
            @if($total > 0)
                <div class="stat-change positive">
                    <i class="fas fa-arrow-up"></i> {{ round(($accepted / $total) * 100, 1) }}%
                </div>
            @endif
        </div>

        <div class="stat-card">
            <div class="stat-icon">
                <i class="fas fa-times-circle"></i>
            </div>
            <div class="stat-value">{{ $rejected }}</div>
            <div class="stat-label">Rejetées</div>
            @if($total > 0)
                <div class="stat-change negative">
                    <i class="fas fa-arrow-down"></i> {{ round(($rejected / $total) * 100, 1) }}%
                </div>
            @endif
        </div>

        <div class="stat-card">
            <div class="stat-icon">
                <i class="fas fa-play-circle"></i>
            </div>
            <div class="stat-value">{{ $active }}</div>
            <div class="stat-label">Actifs</div>
            @if($total > 0)
                <div class="stat-change positive">
                    <i class="fas fa-arrow-up"></i> {{ round(($active / $total) * 100, 1) }}%
                </div>
            @endif
        </div>
    </div>

    <!-- Alerts -->
    @if(session("success"))
        <div class="alert-modern alert-success-modern">
            <i class="fas fa-check-circle"></i>
            <span>{{ session('success') }}</span>
        </div>
    @endif

    @if(session("error"))
        <div class="alert-modern alert-danger-modern">
            <i class="fas fa-exclamation-circle"></i>
            <span>{{ session('error') }}</span>
        </div>
    @endif

    <!-- Content Card -->
    <div class="content-card-modern">
        <div class="card-header-modern">
            <h3><i class="fas fa-list"></i> Liste des Demandes</h3>
            <span class="badge-modern badge-info">{{ $total }} demandes</span>
        </div>

        <div class="card-body-modern">
            <!-- Search and Filter -->
            <div class="search-filter-section">
                <div class="search-box-modern">
                    <i class="fas fa-search search-icon"></i>
                    <input type="text" id="searchInput" placeholder="Rechercher une boutique, rémunération...">
                    <i class="fas fa-times clear-icon" id="clearSearch"></i>
                </div>

                <select class="filter-select" id="statusFilter">
                    <option value="all">Tous les statuts</option>
                    <option value="accepted">Acceptées</option>
                    <option value="rejected">Rejetées</option>
                    <option value="active">Actifs</option>
                    <option value="inactive">Inactifs</option>
                </select>
            </div>

            @if(count($marketers) > 0)
                <!-- Table -->
                <div class="table-wrapper-modern">
                    <table class="table table-bw table-striped" id="demandesTable">
                        <thead>
                            <tr>
                                <th><i class="fas fa-store"></i> Boutique</th>
                                <th><i class="fas fa-money-bill-wave"></i> Rémunération</th>
                                <th><i class="fas fa-wallet"></i> Solde</th>
                                <th><i class="fas fa-bullseye"></i> Objectif mensuel</th>
                                <th><i class="fas fa-envelope"></i> Statut demande</th>
                                <th><i class="fas fa-toggle-on"></i> Statut compte</th>
                                <th><i class="fas fa-cog"></i> Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                        @foreach($marketers as $marketer)
                            <tr data-status="{{ $marketer->marketer_accept ? 'accepted' : 'rejected' }}" data-active="{{ $marketer->status ? 'active' : 'inactive' }}">
                                <td>
                                    <a href="{{ route('boutique.index', $marketer->boutique->nom_boutique) }}" style="color: #000000; font-weight: 500; text-decoration: none;">
                                        <i class="fas fa-store-alt"></i> {{ strtoupper(str_replace('_', ' ', $marketer->boutique->nom_boutique)) }}
                                    </a>
                                </td>
                                <td style="text-transform: capitalize;">
                                    {{ str_replace('_', ' ', $marketer->remuneration) }}
                                </td>
                                <td>
                                    <strong>{{ $marketer->solde }}</strong> {{ $marketer->remuneration == 'pourcentage_vente' ? '%' : $marketer->devise }}
                                </td>
                                <td>
                                    <strong>{{ $marketer->solde_objectif_vente }}</strong> {{ $marketer->devise }}
                                </td>
                                <td>
                                    @if($marketer->marketer_accept)
                                        <span class="badge-modern badge-success">
                                            <i class="fas fa-check"></i> Accepté
                                        </span>
                                    @else
                                        <span class="badge-modern badge-danger">
                                            <i class="fas fa-times"></i> Rejeté
                                        </span>
                                    @endif
                                </td>
                                <td>
                                    @if($marketer->status)
                                        <span class="badge-modern badge-success">
                                            <i class="fas fa-check-circle"></i> Actif
                                        </span>
                                    @else
                                        <span class="badge-modern badge-danger">
                                            <i class="fas fa-times-circle"></i> Inactif
                                        </span>
                                    @endif
                                </td>
                                <td>
                                    <div style="display: flex; gap: 8px; flex-wrap: wrap;">
                                        @if(!$marketer->marketer_accept)
                                            <a href="{{ route('accept_be_sunmarketer', $marketer->admin_slug) }}" class="btn-action-modern btn-accept" onclick="return confirm('Êtes-vous sûr de vouloir accepter cette demande ?')">
                                                <i class="fa fa-check"></i> Accepter
                                            </a>
                                            <a href="{{ route('reject_be_sunmarketer', $marketer->admin_slug) }}" class="btn-action-modern btn-reject" onclick="return confirm('Êtes-vous sûr de vouloir rejeter cette demande ?')">
                                                <i class="fa fa-times"></i> Rejeter
                                            </a>
                                        @else
                                            @if($marketer->status)
                                                <span class="badge-modern badge-success">
                                                    <i class="fa fa-check-double"></i> Gestionnaire actif
                                                </span>
                                            @else
                                                <span class="badge-modern badge-info">
                                                    <i class="fa fa-pause"></i> En pause
                                                </span>
                                            @endif
                                        @endif
                                        <a href="{{ route('boutique.index', $marketer->boutique->nom_boutique) }}" class="btn-action-modern btn-view">
                                            <i class="fa fa-eye"></i> Voir boutique
                                        </a>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
            @else
                <!-- Empty State -->
                <div class="empty-state">
                    <i class="fas fa-inbox"></i>
                    <h3>Aucune demande reçue</h3>
                    <p>Vous n'avez pas encore reçu de demande de gestion de boutique.</p>
                    <a href="{{ route('sunmarketers') }}" class="btn-header" style="margin-top: 20px;">
                        <i class="fas fa-arrow-left"></i> Retour à l'accueil
                    </a>
                </div>
            @endif
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const searchInput = document.getElementById('searchInput');
    const clearSearch = document.getElementById('clearSearch');
    const statusFilter = document.getElementById('statusFilter');
    const table = document.getElementById('demandesTable');

    if (!table) return;

    const tbody = table.querySelector('tbody');
    const rows = Array.from(tbody.querySelectorAll('tr'));

    // Search functionality
    if (searchInput) {
        searchInput.addEventListener('input', function() {
            const searchTerm = this.value.toLowerCase();
            clearSearch.style.display = searchTerm ? 'block' : 'none';
            filterTable();
        });

        clearSearch.addEventListener('click', function() {
            searchInput.value = '';
            this.style.display = 'none';
            filterTable();
        });
    }

    // Filter functionality
    if (statusFilter) {
        statusFilter.addEventListener('change', filterTable);
    }

    function filterTable() {
        const searchTerm = searchInput ? searchInput.value.toLowerCase() : '';
        const filterValue = statusFilter ? statusFilter.value : 'all';

        rows.forEach(row => {
            const text = row.textContent.toLowerCase();
            const matchesSearch = text.includes(searchTerm);

            let matchesFilter = true;
            if (filterValue !== 'all') {
                const status = row.dataset.status;
                const active = row.dataset.active;

                if (filterValue === 'accepted') {
                    matchesFilter = status === 'accepted';
                } else if (filterValue === 'rejected') {
                    matchesFilter = status === 'rejected';
                } else if (filterValue === 'active') {
                    matchesFilter = active === 'active';
                } else if (filterValue === 'inactive') {
                    matchesFilter = active === 'inactive';
                }
            }

            row.style.display = (matchesSearch && matchesFilter) ? '' : 'none';
        });
    }
});
</script>

@endsection