@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');
         if(!isset($picture)){
                $picture="logo_mini.jpg";
         }
         $photo='/Profil_picture/'.$picture;
         $nom=$get_user_data['last_name'];
         $prenom=$get_user_data['first_name'];
         $sexe=$get_user_data['sexe'];
         $date_naissance='';
         $lieu_naissance='';
         $nationnalite=$get_user_data['country'];
         $city='';
         $region='';
         $cni_doc_recto='';
         $cni_doc_verso='';
         $cni='';
         $numero_tel=$get_user_data['telephone'];
         $numero_whatsapp=$get_user_data['telephone'];
         $email=$get_user_data['email'];
         $facebook='';
         $twitter='';
         $linkedin='';
         $lieu_residence='';
         $diplome_elever='';
         $diplome_elever_doc='';
         $formation='';
         $ancien_profession='';
         $information_supplementaire='';
         $remuneration='';
         $devise='';
         $remuneration_negociable='';
         $motivation='';
         $montant=0;
    if($marketers!=null){
        $photo=$marketers->photo==null ? '/Profil_picture/'.$picture : '/Profil_marketer/'.$marketers->photo;
         $nom=$marketers->nom;
         $prenom=$marketers->prenom;
         $sexe=$marketers->sexe;
         $date_naissance=$marketers->date_naissance;
         $lieu_naissance=$marketers->lieu_naissance;
         $nationnalite=$marketers->nationnalite!=null ? $get_user_data['country'] : $marketers->nationnalite ;
         $city=$marketers->ville;
         $region=$marketers->region;
         $cni_doc_recto=$marketers->cni_doc_recto;
         $cni_doc_verso=$marketers->cni_doc_verso;
         $cni=$marketers->cni;
         $numero_tel=$marketers->numero_tel==null ? $get_user_data['telephone'] : $marketers->numero_tel;
         $numero_whatsapp=$marketers->numero_whatsapp==null ? $get_user_data['telephone'] : $marketers->numero_whatsapp;
         $email=$marketers->email!=null  ? $marketers->email : $get_user_data['email'] ;
         $facebook=$marketers->facebook;
         $twitter=$marketers->twitter;
         $linkedin=$marketers->linkedin;
         $lieu_residence=$marketers->lieu_residence;
         $diplome_elever=$marketers->diplome_elever;
         $diplome_elever_doc=$marketers->diplome_elever_doc;
         $formation=$marketers->formation;
         $ancien_profession=$marketers->ancien_profession;
         $information_supplementaire=$marketers->information_supplementaire;
         $remuneration=$marketers->remuneration;
         $devise=$marketers->devise;
         $remuneration_negociable=$marketers->remuneration_negociable;
         $motivation=$marketers->motivation;
         $montant=$marketers->montant!=null ? $marketers->montant : 0 ;
    }
    @endphp

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

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

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

.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;
}

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

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

/* Progress Steps */
.steps-container {
    background: #FFFFFF;
    padding: 30px;
    border-radius: 12px;
    margin-bottom: 30px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.steps-progress {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    margin-bottom: 20px;
}

.steps-progress::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(0, 0, 0, 0.1);
    z-index: 0;
}

.step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
    flex: 1;
}

.step-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 2px solid rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
}

.step-item.active .step-circle {
    background: #000000;
    border-color: #000000;
    color: #FFFFFF;
}

.step-item.completed .step-circle {
    background: #28A745;
    border-color: #28A745;
    color: #FFFFFF;
}

.step-label {
    margin-top: 10px;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.6);
    text-align: center;
}

.step-item.active .step-label {
    color: #000000;
    font-weight: 600;
}

/* Modern Form Card */
.form-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);
    padding: 30px;
    margin-bottom: 30px;
}

.step-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid rgba(0, 0, 0, 0.1);
}

.step-number {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #000000;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
}

.step-title h2 {
    font-size: 22px;
    font-weight: 600;
    color: #000000;
    margin: 0;
}

.step-title p {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.6);
    margin: 5px 0 0 0;
}

/* Photo Upload */
.photo-upload-modern {
    text-align: center;
    margin-bottom: 30px;
}

.photo-preview {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin: 0 auto 20px;
    border: 4px solid rgba(0, 0, 0, 0.1);
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
}

.photo-preview:hover {
    border-color: #000000;
    transform: scale(1.05);
}

.photo-preview::after {
    content: '\f030';
    font-family: 'FontAwesome';
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 35px;
    height: 35px;
    background: #000000;
    color: #FFFFFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.photo-upload-modern input[type="file"] {
    display: none;
}

.photo-upload-label {
    display: inline-block;
    padding: 10px 20px;
    background: rgba(0, 0, 0, 0.05);
    color: #000000;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s ease;
}

.photo-upload-label:hover {
    background: #000000;
    color: #FFFFFF;
}

/* Modern Form Controls */
.form-group-modern {
    margin-bottom: 25px;
}

.form-group-modern label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #000000;
    font-size: 14px;
}

.form-group-modern label .required {
    color: #DC3545;
    margin-left: 3px;
}

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

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

select.form-control-modern {
    cursor: pointer;
}

textarea.form-control-modern {
    min-height: 100px;
    resize: vertical;
}

/* Modern Buttons */
.btn-modern {
    padding: 12px 30px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

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

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

.btn-secondary-modern {
    background: rgba(0, 0, 0, 0.1);
    color: #000000;
}

.btn-secondary-modern:hover {
    background: rgba(0, 0, 0, 0.2);
}

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

.btn-success-modern:hover {
    background: #218838;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
}

.form-actions {
    display: flex;
    gap: 15px;
    justify-content: flex-end;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

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

.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;
}

/* Info Box */
.info-box-modern {
    background: rgba(0, 123, 255, 0.05);
    border-left: 4px solid #007BFF;
    padding: 15px 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 14px;
    color: #004085;
}

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

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

    .steps-container {
        padding: 20px;
    }

    .steps-progress {
        flex-wrap: wrap;
    }

    .step-item {
        margin-bottom: 20px;
    }

    .step-label {
        display: none;
    }

    .form-card-modern {
        padding: 20px;
    }

    .form-actions {
        flex-direction: column;
    }

    .btn-modern {
        width: 100%;
        justify-content: center;
    }
}
</style>

<div class="right_col" role="main">
    <!-- Modern Header -->
    <div class="profile-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>Mon profil</span>
        </div>
        <h1><i class="fas fa-user-edit"></i> Mon Profil Gestionnaire</h1>
        <p>Complétez votre profil en 5 étapes pour attirer les employeurs</p>
        <p style="font-size: 13px; margin-top: 10px;"><i class="fas fa-info-circle"></i> Veuillez fournir des informations crédibles et complètes</p>
    </div>

    <!-- Progress Steps -->
    <div class="steps-container">
        <div class="steps-progress">
            <div class="step-item active" data-step="1">
                <div class="step-circle">1</div>
                <div class="step-label">Informations personnelles</div>
            </div>
            <div class="step-item" data-step="2">
                <div class="step-circle">2</div>
                <div class="step-label">Localisation & Contact</div>
            </div>
            <div class="step-item" data-step="3">
                <div class="step-circle">3</div>
                <div class="step-label">Parcours professionnel</div>
            </div>
            <div class="step-item" data-step="4">
                <div class="step-circle">4</div>
                <div class="step-label">Rémunération</div>
            </div>
            <div class="step-item" data-step="5">
                <div class="step-circle">5</div>
                <div class="step-label">Finalisation</div>
            </div>
        </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

    <!-- Form -->
    <form action="{{ route('createProfilSunmarketers') }}" id="post_marketer_data" method="post" class="form-horizontal form-label-left" enctype="multipart/form-data">
        @csrf
        <input type="hidden" name="user_id" value="{{ $get_user_data['id'] }}">

        <!-- Step 1: Personal Information -->
        <fieldset id="etape1">
            <div class="form-card-modern">
                <div class="step-header">
                    <div class="step-number">1</div>
                    <div class="step-title">
                        <h2>Informations Personnelles</h2>
                        <p>Vos informations de base et documents d'identité</p>
                    </div>
                </div>

                <!-- Photo Upload -->
                <div class="photo-upload-modern">
                    <div class="photo-preview" style="background-image: url('{{ asset($photo) }}')" onclick="document.getElementById('photo-input').click()"></div>
                    <label for="photo-input" class="photo-upload-label">
                        <i class="fas fa-camera"></i> Choisir une photo
                    </label>
                    <input type="file" id="photo-input" name="photo" accept="image/*">
                </div>

                <div class="row">
                    <div class="col-md-4 col-sm-12">
                        <div class="form-group-modern">
                            <label for="prenom">Prénom <span class="required">*</span></label>
                            <input type="text" id="prenom" name="prenom" data-input_name="prenom" onblur="check_error(['prenom'])" placeholder="Votre prénom" required class="form-control-modern" value="{{ $prenom }}">
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-12">
                        <div class="form-group-modern">
                            <label for="nom">Nom <span class="required">*</span></label>
                            <input type="text" id="nom" name="nom" data-input_name="nom" onblur="check_error(['nom'])" placeholder="Votre nom" required class="form-control-modern" value="{{ $nom }}">
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-12">
                        <div class="form-group-modern">
                            <label for="sexe">Sexe</label>
                            <select name="sexe" class="form-control-modern" id="sexe">
                                <option value="Homme" @if($sexe=='Homme') selected @endif>Homme</option>
                                <option value="Femme" @if($sexe=='Femme') selected @endif>Femme</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6 col-sm-12">
                        <div class="form-group-modern">
                            <label for="date_naissance">Date de naissance</label>
                            <input id="date_naissance" class="form-control-modern" type="date" name="date_naissance" value="{{ $date_naissance }}">
                        </div>
                    </div>
                    <div class="col-md-6 col-sm-12">
                        <div class="form-group-modern">
                            <label for="lieu_naissance">Lieu de naissance</label>
                            <input id="lieu_naissance" class="form-control-modern" type="text" name="lieu_naissance" placeholder="Ville/Pays de naissance" value="{{ $lieu_naissance }}">
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-4 col-sm-12">
                        <div class="form-group-modern">
                            <label for="pays">Pays <span class="required">*</span></label>
                            <select name="nationnalite" data-placeholder="Choisissez le pays" class="form-control-modern pays choosen" @if($get_user_data['country']!=null) data-country="{{ $get_user_data['country'] }}" @endif>
                                @foreach ($pays as $country)
                                    <option value="{{ $country->id }}" @if($get_user_data['country']!=null && $get_user_data['country']==$country->name) selected @endif>{{ $country->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-12 regions-container">
                        <div style="text-align: center;display: none" class="regions-loader text-center">
                            <img style="width: 50px;" src="{{ asset('images/loader2.gif') }}">
                            <br> chargement régions
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-12 villes-container">
                        <div style="text-align: center;display: none" class="villes-loader text-center">
                            <img style="width: 50px;" src="{{ asset('images/loader2.gif') }}">
                            <br> chargement des villes
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-4 col-sm-12">
                        <div class="form-group-modern">
                            <label for="cni">Numéro CNI / Passport</label>
                            <input id="cni" class="form-control-modern" type="text" name="cni" placeholder="Ex: 123456789" value="{{ $cni }}">
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-12">
                        <div class="form-group-modern">
                            <label for="cnir">CNI / Passport (Recto)</label>
                            <input id="cnir" class="form-control-modern" type="file" name="cni_doc_recto" accept="image/*">
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-12">
                        <div class="form-group-modern">
                            <label for="cniv">CNI / Passport (Verso)</label>
                            <input id="cniv" class="form-control-modern" type="file" name="cni_doc_verso" accept="image/*">
                        </div>
                    </div>
                </div>

                <div class="form-actions">
                    <button type="button" class="btn-modern btn-primary-modern" id="suivant1">
                        Suivant <i class="fas fa-arrow-right"></i>
                    </button>
                </div>
            </div>
        </fieldset>

        <!-- Step 2: Location & Contact -->
        <fieldset id="etape2" style="display: none">
            <div class="form-card-modern">
                <div class="step-header">
                    <div class="step-number">2</div>
                    <div class="step-title">
                        <h2>Localisation & Contact</h2>
                        <p>Vos coordonnées et réseaux sociaux</p>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-4 col-sm-12">
                        <div class="form-group-modern">
                            <label for="tel">Numéro de téléphone</label>
                            <input id="tel" class="form-control-modern myphone" data-full="numero_tel" type="text" name="telephone" placeholder="+XXX XXXXXXXXX" value="{{ $numero_tel }}">
                            <input type="hidden" name="numero_tel" id="numero_tel" value="{{ $numero_tel }}">
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-12">
                        <div class="form-group-modern">
                            <label for="phone">Numéro WhatsApp</label>
                            <input id="phone" data-full="numero_whatsapp" class="form-control-modern myphone" type="text" placeholder="+XXX XXXXXXXXX" value="{{ $numero_whatsapp }}">
                            <input type="hidden" name="numero_whatsapp" id="numero_whatsapp" value="{{ $numero_whatsapp }}">
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-12">
                        <div class="form-group-modern">
                            <label for="email">Email</label>
                            <input id="email" class="form-control-modern" type="email" name="email" placeholder="exemple@email.com" value="{{ $email }}">
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-4 col-sm-12">
                        <div class="form-group-modern">
                            <label for="facebook"><i class="fab fa-facebook"></i> Lien Facebook</label>
                            <input id="facebook" class="form-control-modern" type="text" name="facebook" placeholder="https://facebook.com/..." value="{{ $facebook }}">
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-12">
                        <div class="form-group-modern">
                            <label for="twitter"><i class="fab fa-twitter"></i> Lien Twitter</label>
                            <input id="twitter" class="form-control-modern" type="text" name="twitter" placeholder="https://twitter.com/..." value="{{ $twitter }}">
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-12">
                        <div class="form-group-modern">
                            <label for="linkedin"><i class="fab fa-linkedin"></i> Lien LinkedIn</label>
                            <input id="linkedin" class="form-control-modern" type="text" name="linkedin" placeholder="https://linkedin.com/..." value="{{ $linkedin }}">
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-12">
                        <div class="form-group-modern">
                            <label for="lieu_residence">Adresse de résidence</label>
                            <input id="lieu_residence" class="form-control-modern" type="text" name="lieu_residence" placeholder="Ville, Quartier, Rue..." value="{{ $lieu_residence }}">
                        </div>
                    </div>
                </div>

                <div class="form-actions">
                    <button type="button" class="btn-modern btn-secondary-modern" id="retour2">
                        <i class="fas fa-arrow-left"></i> Retour
                    </button>
                    <button type="button" class="btn-modern btn-primary-modern" id="suivant2">
                        Suivant <i class="fas fa-arrow-right"></i>
                    </button>
                </div>
            </div>
        </fieldset>

        <!-- Step 3: Professional Background -->
        <fieldset id="etape3" style="display: none">
            <div class="form-card-modern">
                <div class="step-header">
                    <div class="step-number">3</div>
                    <div class="step-title">
                        <h2>Parcours Professionnel</h2>
                        <p>Votre formation et expérience professionnelle</p>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-4 col-sm-12">
                        <div class="form-group-modern">
                            <label for="diplome_elever">Niveau d'étude</label>
                            <select name="diplome_elever" id="diplome_elever" class="form-control-modern">
                                <option value="bepc" @if($diplome_elever=='bepc') selected @endif>BEPC</option>
                                <option value="cap" @if($diplome_elever=='cap') selected @endif>CAP</option>
                                <option value="bac" @if($diplome_elever=='bac') selected @endif>Bac</option>
                                <option value="licence" @if($diplome_elever=='licence') selected @endif>Licence</option>
                                <option value="master" @if($diplome_elever=='master') selected @endif>Master</option>
                                <option value="ingenieur" @if($diplome_elever=='ingenieur') selected @endif>Ingénieur</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-12">
                        <div class="form-group-modern">
                            <label for="formation">Nom de la formation / Série</label>
                            <input id="formation" class="form-control-modern" type="text" name="formation" placeholder="Ex: Commerce, Gestion..." value="{{ $formation }}">
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-12">
                        <div class="form-group-modern">
                            <label for="diplome_elever_doc">Document du diplôme</label>
                            <input id="diplome_elever_doc" class="form-control-modern" type="file" name="diplome_elever_doc" accept="image/*,application/pdf">
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12 col-sm-12">
                        <div class="form-group-modern">
                            <label for="ancien_profession">Profession antérieure</label>
                            <input id="ancien_profession" class="form-control-modern" type="text" name="ancien_profession" placeholder="Votre dernière profession" value="{{ $ancien_profession }}">
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-12">
                        <div class="form-group-modern">
                            <label for="information_supplementaire">Avez-vous déjà été vendeur ? Parlez-nous de votre parcours</label>
                            <textarea id="information_supplementaire" class="form-control-modern" name="information_supplementaire" placeholder="Décrivez votre expérience en vente...">{{ $information_supplementaire }}</textarea>
                        </div>
                    </div>
                </div>

                <div class="form-actions">
                    <button type="button" class="btn-modern btn-secondary-modern" id="retour3">
                        <i class="fas fa-arrow-left"></i> Retour
                    </button>
                    <button type="button" class="btn-modern btn-primary-modern" id="suivant3">
                        Suivant <i class="fas fa-arrow-right"></i>
                    </button>
                </div>
            </div>
        </fieldset>

        <!-- Step 4: Salary Expectations -->
        <fieldset id="etape4" style="display: none">
            <div class="form-card-modern">
                <div class="step-header">
                    <div class="step-number">4</div>
                    <div class="step-title">
                        <h2>Prétention Salariale</h2>
                        <p>Définissez votre mode et montant de rémunération</p>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12 col-sm-12">
                        <div class="form-group-modern">
                            <label for="remuneration">Comment souhaitez-vous être rémunéré ?</label>
                            <select name="remuneration" id="remuneration" class="form-control-modern">
                                <option value="pourcentage_vente" @if($remuneration=='pourcentage_vente') selected @endif>Pourcentage par vente</option>
                                <option value="salaire_mensuel" @if($remuneration=='salaire_mensuel') selected @endif>Salaire mensuel</option>
                                <option value="salaire_annuel" @if($remuneration=='salaire_annuel') selected @endif>Salaire annuel</option>
                                <option value="salaire_hebdomadaire" @if($remuneration=='salaire_hebdomadaire') selected @endif>Salaire hebdomadaire</option>
                                <option value="salaire_journalier" @if($remuneration=='salaire_journalier') selected @endif>Salaire journalier</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6 col-sm-12">
                        <div class="form-group-modern">
                            <label for="montant">Montant / Pourcentage</label>
                            <input id="montant" class="form-control-modern" type="number" name="montant" placeholder="Ex: 150000 ou 10" value="{{ $montant }}">
                            <small style="color: rgba(0,0,0,0.6); font-size: 12px;">Montant net ou pourcentage si rémunération par pourcentage</small>
                        </div>
                    </div>
                    <div class="col-md-6 col-sm-12">
                        <div class="form-group-modern">
                            <label for="devise">Devise</label>
                            <select name="devise" id="devise" class="form-control-modern">
                                <option value="XOF" @if($devise=='XOF') selected @endif>XOF (Franc CFA)</option>
                                <option value="USD" @if($devise=='USD') selected @endif>USD (Dollar)</option>
                                <option value="EUR" @if($devise=='EUR') selected @endif>EUR (Euro)</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12 col-sm-12">
                        <div class="form-group-modern">
                            <label for="remuneration_negociable">Le montant est-il négociable ?</label>
                            <select name="remuneration_negociable" id="remuneration_negociable" class="form-control-modern">
                                <option value="1" @if($remuneration_negociable==1) selected @endif>Oui</option>
                                <option value="0" @if($remuneration_negociable==0) selected @endif>Non</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="form-actions">
                    <button type="button" class="btn-modern btn-secondary-modern" id="retour4">
                        <i class="fas fa-arrow-left"></i> Retour
                    </button>
                    <button type="button" class="btn-modern btn-primary-modern" id="suivant4">
                        Suivant <i class="fas fa-arrow-right"></i>
                    </button>
                </div>
            </div>
        </fieldset>

        <!-- Step 5: Additional Information -->
        <fieldset id="etape5" style="display: none">
            <div class="form-card-modern">
                <div class="step-header">
                    <div class="step-number">5</div>
                    <div class="step-title">
                        <h2>Informations Supplémentaires</h2>
                        <p>Dernière étape avant de finaliser votre profil</p>
                    </div>
                </div>

                <div class="row">
                    <div class="col-12">
                        <div class="form-group-modern">
                            <label for="motivation">Qu'est-ce qui vous motive à être gestionnaire/vendeur ?</label>
                            <textarea id="motivation" class="form-control-modern" name="motivation" placeholder="Expliquez ce qui vous motive...">{{ $motivation }}</textarea>
                        </div>
                    </div>
                </div>

                <div class="info-box-modern">
                    <i class="fas fa-info-circle"></i>
                    En cliquant sur "Valider", vous acceptez toutes les conditions et politiques de confidentialité liées au gestionnaire SunGrocery.
                    <br><br>
                    <strong>Documents à lire :</strong>
                    <a href="{{ route('politique_confidentialite') }}" target="_blank" style="color: #007BFF; text-decoration: underline;">Politique de confidentialité</a> |
                    <a href="{{ route('condition_generale') }}" target="_blank" style="color: #007BFF; text-decoration: underline;">Conditions générales</a>
                </div>

                <div class="form-actions">
                    <button type="button" class="btn-modern btn-secondary-modern" id="retour5">
                        <i class="fas fa-arrow-left"></i> Retour
                    </button>
                    <button type="button" class="btn-modern btn-success-modern" id="valider">
                        <i class="fas fa-check"></i> Valider mon profil
                    </button>
                </div>
            </div>
        </fieldset>
    </form>
</div>

<script type="text/javascript">
$(document).ready(function() {
    let currentStep = 1;

    // Update progress steps
    function updateProgressSteps(step) {
        $('.step-item').each(function() {
            const itemStep = parseInt($(this).data('step'));
            $(this).removeClass('active completed');

            if (itemStep < step) {
                $(this).addClass('completed');
            } else if (itemStep === step) {
                $(this).addClass('active');
            }
        });
    }

    // Photo upload preview
    $('#photo-input').on('change', function(e) {
        const file = e.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                $('.photo-preview').css('background-image', 'url(' + e.target.result + ')');
            }
            reader.readAsDataURL(file);
        }
    });

    // Step navigation
    $('#suivant1').on('click', function() {
        if (check_error(['prenom', 'nom', 'nationnalite'])) {
            currentStep = 2;
            updateProgressSteps(2);
            $('#etape1').slideUp(400, function() {
                $('#etape2').slideDown(400);
                $('html, body').animate({ scrollTop: 0 }, 300);
            });
        }
    });

    $('#suivant2').on('click', function() {
        currentStep = 3;
        updateProgressSteps(3);
        $('#etape2').slideUp(400, function() {
            $('#etape3').slideDown(400);
            $('html, body').animate({ scrollTop: 0 }, 300);
        });
    });

    $('#retour2').on('click', function() {
        currentStep = 1;
        updateProgressSteps(1);
        $('#etape2').slideUp(400, function() {
            $('#etape1').slideDown(400);
            $('html, body').animate({ scrollTop: 0 }, 300);
        });
    });

    $('#suivant3').on('click', function() {
        currentStep = 4;
        updateProgressSteps(4);
        $('#etape3').slideUp(400, function() {
            $('#etape4').slideDown(400);
            $('html, body').animate({ scrollTop: 0 }, 300);
        });
    });

    $('#retour3').on('click', function() {
        currentStep = 2;
        updateProgressSteps(2);
        $('#etape3').slideUp(400, function() {
            $('#etape2').slideDown(400);
            $('html, body').animate({ scrollTop: 0 }, 300);
        });
    });

    $('#suivant4').on('click', function() {
        currentStep = 5;
        updateProgressSteps(5);
        $('#etape4').slideUp(400, function() {
            $('#etape5').slideDown(400);
            $('html, body').animate({ scrollTop: 0 }, 300);
        });
    });

    $('#retour4').on('click', function() {
        currentStep = 3;
        updateProgressSteps(3);
        $('#etape4').slideUp(400, function() {
            $('#etape3').slideDown(400);
            $('html, body').animate({ scrollTop: 0 }, 300);
        });
    });

    $('#retour5').on('click', function() {
        currentStep = 4;
        updateProgressSteps(4);
        $('#etape5').slideUp(400, function() {
            $('#etape4').slideDown(400);
            $('html, body').animate({ scrollTop: 0 }, 300);
        });
    });

    // Submit form
    $('#valider').on('click', 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('<i class="fas fa-check"></i> Valider mon profil');

                if (data.error) {
                    $.notify(data.message, 'error');
                    Swal.fire({
                        title: 'Échec mise à jour du profil',
                        text: data.message,
                        type: 'error',
                        showCancelButton: true,
                        confirmButtonColor: '#000000',
                        cancelButtonColor: '#d33',
                        cancelButtonText: 'Réactualiser',
                        confirmButtonText: 'Réessayer'
                    }).then((result) => {
                        if (!result.value) {
                            location.reload();
                        }
                    });
                } else {
                    Swal.fire({
                        title: 'PROFIL SUNMARKETER',
                        text: data.message,
                        type: 'success',
                        showCancelButton: false,
                        confirmButtonColor: '#28A745',
                    }).then((result) => {
                        if (result.value) {
                            location.href = '{{ route('sunmarketers') }}';
                        }
                    });
                }
            },
            error: function(data) {
                console.log(data);
                btn.attr('disabled', false).html('<i class="fas fa-check"></i> Valider mon profil');
                $.notify('Une erreur s\'est produite. Veuillez réactualiser la page et réessayer.', 'error');
            }
        });
    });
});
</script>
@endsection