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

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

@section('content')
@php
    $get_user_data = $user;
    $meta_model = new \App\Users_meta();
    $picture = $meta_model->get_user_field($get_user_data['id'], 'profil_picture');
@endphp

<style>
/* Modern Gestionnaire Index Styles */
.admin-modern-header {
    background: linear-gradient(135deg, #000000 0%, #2c2c2c 100%);
    color: #FFFFFF;
    padding: 40px 30px;
    margin: -15px -15px 30px -15px;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

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

.admin-modern-header p {
    margin: 0;
    opacity: 0.9;
    font-size: 14px;
}

.admin-modern-header .header-actions {
    margin-top: 20px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

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

.admin-modern-header .btn-header:hover {
    background: rgba(255, 255, 255, 0.9);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    color: #000000;
    text-decoration: none;
}

.admin-modern-header .btn-header.btn-header-primary {
    background: #FFFFFF;
    color: #000000;
}

.admin-modern-header .btn-header.btn-header-success {
    background: #28A745;
    color: #FFFFFF;
}

.admin-modern-header .btn-header.btn-header-warning {
    background: #FFC107;
    color: #000000;
}

.admin-modern-header .btn-header.btn-header-info {
    background: rgba(255, 255, 255, 0.2);
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Wallet Cards */
.wallet-section {
    margin-bottom: 30px;
}

.wallet-card {
    background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
    color: #FFFFFF;
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 20px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;
}

.wallet-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    transform: translate(30%, -30%);
}

.wallet-card .wallet-icon {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

.wallet-card .wallet-icon img {
    width: 30px;
    height: 30px;
    filter: brightness(0) invert(1);
}

.wallet-card .wallet-label {
    font-size: 13px;
    opacity: 0.8;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.wallet-card .wallet-amount {
    font-size: 32px;
    font-weight: 700;
    margin: 0;
}

/* Referral Link Section */
.referral-section {
    background: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 30px;
}

.referral-section .section-title {
    font-size: 16px;
    font-weight: 600;
    color: #000000;
    margin: 0 0 15px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.referral-section .section-title i {
    color: #28A745;
}

.referral-info {
    background: rgba(40, 167, 69, 0.05);
    border: 1px solid rgba(40, 167, 69, 0.2);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    font-size: 13px;
    line-height: 1.6;
}

.referral-link-box {
    display: flex;
    gap: 10px;
    align-items: center;
}

.referral-link-box input {
    flex: 1;
    padding: 12px 15px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    font-size: 14px;
    font-family: monospace;
    background: rgba(0, 0, 0, 0.02);
}

.referral-link-box button {
    background: #000000;
    color: #FFFFFF;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.referral-link-box button:hover {
    background: #2c2c2c;
    transform: translateY(-2px);
}

/* Marketer Cards Section */
.marketers-section {
    background: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    padding: 25px;
}

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

.marketers-section .section-header h2 {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
    color: #000000;
}

.marketers-section .section-header .count-badge {
    background: rgba(0, 0, 0, 0.05);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}

/* Modern Marketer Card */
.marketer-card-modern {
    background: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 20px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.marketer-card-modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: #000000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.marketer-card-modern:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    border-color: #000000;
}

.marketer-card-modern:hover::before {
    opacity: 1;
}

.marketer-card-modern .marketer-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.marketer-card-modern .marketer-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid rgba(0, 0, 0, 0.1);
    margin-right: 20px;
    object-fit: cover;
}

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

.marketer-card-modern .marketer-info h3 a {
    color: #000000;
    text-decoration: none;
    transition: color 0.3s ease;
}

.marketer-card-modern .marketer-info h3 a:hover {
    color: #28A745;
}

.marketer-card-modern .marketer-info .remuneration {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.6);
    margin-bottom: 5px;
}

.marketer-card-modern .marketer-info .remuneration strong {
    color: #000000;
    font-weight: 600;
}

.marketer-card-modern .marketer-info .nationality {
    display: inline-block;
    background: rgba(0, 0, 0, 0.05);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.7);
}

.marketer-card-modern .marketer-social {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.marketer-card-modern .social-btn {
    width: 36px;
    height: 36px;
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000000;
    text-decoration: none;
    transition: all 0.3s ease;
}

.marketer-card-modern .social-btn:hover {
    background: #000000;
    color: #FFFFFF;
    border-color: #000000;
    transform: scale(1.1);
}

.marketer-card-modern .marketer-action {
    margin-top: 15px;
}

.marketer-card-modern .btn-define {
    background: #000000;
    color: #FFFFFF;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
    text-align: center;
}

.marketer-card-modern .btn-define:hover {
    background: #2c2c2c;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* 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 h2 {
    font-size: 24px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.6);
    margin-bottom: 10px;
}

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

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

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

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

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

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

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

    .admin-modern-header .header-actions {
        flex-direction: column;
    }

    .admin-modern-header .btn-header {
        width: 100%;
        justify-content: center;
    }

    .wallet-card {
        padding: 20px;
    }

    .marketer-card-modern .marketer-header {
        flex-direction: column;
        text-align: center;
    }

    .marketer-card-modern .marketer-avatar {
        margin-right: 0;
        margin-bottom: 15px;
    }

    .marketer-card-modern .marketer-social {
        justify-content: center;
    }

    .referral-link-box {
        flex-direction: column;
    }

    .referral-link-box button {
        width: 100%;
    }
}
</style>

<div class="right_col" role="main">
    <!-- Modern Header -->
    <div class="admin-modern-header">
        <h1><i class="fas fa-users-cog"></i> Gestionnaire SunGrocery</h1>
        <p>Gérez votre profil de gestionnaire et connectez-vous avec des commerçants</p>

        <div class="header-actions">
            <a href="#" data-toggle="modal" data-target="#moreaboutModal" class="btn-header btn-header-info">
                <i class="fas fa-info-circle"></i> En savoir plus
            </a>
            @if ($marketer != null)
                <a href="{{ route('visibility_sunmarketer') }}" class="btn-header btn-header-primary">
                    @if (!$marketer->visibility)
                        <i class="fa fa-globe"></i> Rendre mon profil public
                    @else
                        <i class="fa fa-lock"></i> Rendre mon profil privé
                    @endif
                </a>
            @endif
            <a href="{{ route('persoanl_profil_view') }}" class="btn-header btn-header-success">
                <i class="fas fa-user"></i>
                @if ($marketer != null)
                    Mon profil
                @else
                    Créer mon profil
                @endif
            </a>
            <a href="{{ route('demandeGestionnaireMake') }}" class="btn-header btn-header-primary">
                <i class="fas fa-paper-plane"></i> Mes demandes de gestion
            </a>
            <a href="{{ route('demandeGestionnaire') }}" class="btn-header btn-header-warning">
                <i class="fas fa-inbox"></i> Offres reçues
            </a>
        </div>
    </div>

    <div class="clearfix"></div>

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

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

    <!-- Wallet Section -->
    @if(count($portefeuilles) > 0)
    <div class="wallet-section">
        <div class="row">
            @foreach ($portefeuilles as $portefeuille)
            <div class="col-md-6">
                <div class="wallet-card">
                    <div class="wallet-icon">
                        <img src="{{ asset('images/portefeuille.png') }}" alt="Wallet">
                    </div>
                    <div class="wallet-label">Solde disponible</div>
                    <div class="wallet-amount">{{ $portefeuille->montant }} {{ $portefeuille->devise }}</div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
    @endif

    <!-- Referral Link Section -->
    @if ($marketer != null && $marketer->user_slug != null)
    <div class="referral-section">
        <div class="section-title">
            <i class="fas fa-link"></i>
            Votre lien de parrainage
        </div>
        <div class="referral-info">
            <strong><i class="fas fa-gift"></i> Programme de parrainage:</strong><br>
            • Gagnez <strong>20%</strong> du montant total au premier abonnement<br>
            • Recevez <strong>10% à vie</strong> sur tous les renouvellements<br>
            • Le montant est crédité après création de la boutique et souscription
        </div>
        <div class="referral-link-box">
            <input type="text"
                   id="marketer_link"
                   readonly
                   value="{{ url('/?agent=' . str_replace('user', 'sgyagi789200', $marketer->user_slug)) }}"
                   style="cursor: pointer;">
            <button onclick="clipboard(document.getElementById('marketer_link'),'Lien copié avec succès!')">
                <i class="fas fa-copy"></i> Copier
            </button>
        </div>
    </div>
    @endif

    <!-- Available Marketers Section -->
    <div class="marketers-section">
        <div class="section-header">
            <h2><i class="fas fa-users"></i> Gestionnaires disponibles</h2>
            <span class="count-badge">{{ count($marketers) }} gestionnaire(s)</span>
        </div>

        @if (count($marketers) > 0)
            <div class="row">
                @foreach ($marketers as $marketer_item)
                <div class="col-lg-4 col-md-6">
                    <div class="marketer-card-modern">
                        <div class="marketer-header">
                            <a href="{{ route('sunmarketer_single', $marketer_item->user_slug) }}">
                                @if ($marketer_item->photo != null)
                                    <img src="{{ asset('Profil_marketer/' . $marketer_item->photo) }}"
                                         alt="{{ $marketer_item->nom }}"
                                         class="marketer-avatar">
                                @else
                                    <img src="{{ asset('images/logo_mini.jpg') }}"
                                         alt="{{ $marketer_item->nom }}"
                                         class="marketer-avatar">
                                @endif
                            </a>
                            <div class="marketer-info">
                                <h3>
                                    <a href="{{ route('sunmarketer_single', $marketer_item->user_slug) }}">
                                        {{ $marketer_item->nom }} {{ $marketer_item->prenom }}
                                    </a>
                                </h3>
                                <div class="remuneration">
                                    {{ strtoupper(str_replace('_', ' ', $marketer_item->remuneration)) }}:
                                    <strong>{{ $marketer_item->montant }}
                                    {{ $marketer_item->remuneration == 'pourcentage_vente' ? '%' : $marketer_item->devise }}</strong>
                                </div>
                                <span class="nationality">
                                    <i class="fas fa-flag"></i> {{ $marketer_item->nationnalite }}
                                </span>
                            </div>
                        </div>

                        <div class="marketer-social">
                            @if ($marketer_item->numero_tel)
                                <a href="tel:{{ $marketer_item->numero_tel }}"
                                   class="social-btn"
                                   title="Téléphone"
                                   target="_blank">
                                    <i class="fa fa-phone"></i>
                                </a>
                            @endif
                            @if (isset($marketer_item->numero_whatsapp))
                                <a href="https://wa.me/{{ $marketer_item->numero_whatsapp }}"
                                   class="social-btn"
                                   title="WhatsApp"
                                   target="_blank">
                                    <i class="fab fa-whatsapp"></i>
                                </a>
                            @endif
                            @if (isset($marketer_item->twitter))
                                <a href="{{ $marketer_item->twitter }}"
                                   class="social-btn"
                                   title="Twitter"
                                   target="_blank">
                                    <i class="fab fa-twitter"></i>
                                </a>
                            @endif
                            @if (isset($marketer_item->linkedin))
                                <a href="{{ $marketer_item->linkedin }}"
                                   class="social-btn"
                                   title="LinkedIn"
                                   target="_blank">
                                    <i class="fab fa-linkedin"></i>
                                </a>
                            @endif
                            @if (isset($marketer_item->facebook))
                                <a href="{{ $marketer_item->facebook }}"
                                   class="social-btn"
                                   title="Facebook"
                                   target="_blank">
                                    <i class="fab fa-facebook"></i>
                                </a>
                            @endif
                        </div>

                        <div class="marketer-action">
                            <button class="btn-define marketerDefine"
                                    data-sunmarketer="{{ $marketer_item->user_slug }}">
                                <i class="fas fa-user-plus"></i> Définir en tant que gestionnaire
                            </button>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        @else
            <div class="empty-state">
                <i class="fas fa-users-slash"></i>
                <h2>Aucun gestionnaire trouvé</h2>
                <p>Il n'y a actuellement aucun gestionnaire disponible.</p>
            </div>
        @endif
    </div>
</div>

@include('dashboard.Marketer.gestionnaire_modal')
@include('dashboard.Marketer.about')
@endsection

@section('script')
<script type="text/javascript">
    function clipboard(element, message) {
        element.select();
        element.setSelectionRange(0, 99999);
        document.execCommand("copy");

        if (typeof $.notify !== 'undefined') {
            $.notify(message, 'success');
        } else {
            alert(message);
        }
    }

    $(document).ready(function() {
        // Existing scripts for form navigation
        $(document).on('click', '#suivant1', function() {
            if (check_error(['prenom', 'nom', 'nationnalite'])) {
                $('#etape1').slideUp(1000, function() {
                    $('#etape2').slideDown(1000);
                })
            }
        });

        $(document).on('click', '#suivant2', function() {
            $('#etape2').slideUp(1000, function() {
                $('#etape3').slideDown(1000);
            })
        });

        $(document).on('click', '#retour2', function() {
            $('#etape2').slideUp(1000, function() {
                $('#etape1').slideDown(1000);
            })
        });

        $(document).on('click', '#suivant3', function() {
            $('#etape3').slideUp(1000, function() {
                $('#etape4').slideDown(1000);
            })
        });

        $(document).on('click', '#retour3', function() {
            $('#etape3').slideUp(1000, function() {
                $('#etape2').slideDown(1000);
            })
        });

        $(document).on('click', '#suivant4', function() {
            $('#etape4').slideUp(1000, function() {
                $('#etape5').slideDown(1000);
            })
        });

        $(document).on('click', '#retour4', function() {
            $('#etape4').slideUp(1000, function() {
                $('#etape3').slideDown(1000);
            })
        });

        $(document).on('click', '#retour5', function() {
            $('#etape5').slideUp(1000, function() {
                $('#etape4').slideDown(1000);
            })
        });

        $(document).on('click', '#valider', function() {
            let form = $('#post_marketer_data'),
                url = form.attr('action'),
                $form = new FormData(form[0]),
                btn = $(this);
            btn.attr('disabled', true).html(
                '<img src="{{ asset('images/loader.gif') }}" width="20px"> veuillez patienter ...');
            $.ajax({
                url: url,
                method: "POST",
                data: $form,
                dataType: 'JSON',
                contentType: false,
                cache: false,
                processData: false,
                success: function(data) {
                    console.log(data)
                    btn.attr('disabled', false).html('Valider');
                    if (data.error) {
                        $.notify(data.message, 'error')
                        Swal.fire({
                            title: 'Echec mise à jour du profil',
                            text: data.message,
                            type: 'error',
                            showCancelButton: true,
                            confirmButtonColor: '#88b121',
                            cancelButtonColor: '#d33',
                            cancelButtonText: 'Réactualiser',
                            confirmButtonText: 'Reéssayer'
                        }).then((result) => {
                            if (!result.value) {
                                location.reload();
                            }
                        })
                    } else {
                        Swal.fire({
                            title: 'PROFIL SUNMARKETER',
                            text: data.message,
                            type: 'success',
                            showCancelButton: false,
                            confirmButtonColor: '#88b121',
                        }).then((result) => {
                            if (result.value) {
                                location.reload();
                            }
                        })
                    }
                },
                error: function(data) {
                    console.log(data)
                    btn.attr('disabled', false).html('Valider');
                    $.notify(
                        'Une erreur s\'est est survenue au cours du processus. Veuillez réactualiser la page et reéssayer si elle persiste.',
                        'error')
                }
            })
        });
    })
</script>
@endsection