@extends('layouts.seller')

@section('title', 'Mon Profil')
@section('page-title', 'Mon Profil')

@push('styles')
<style>
    .profile-header {
        background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
        border-radius: 24px;
        padding: 40px;
        color: white;
        position: relative;
        overflow: hidden;
        margin-bottom: 30px;
    }
    .profile-header::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -20%;
        width: 60%;
        height: 200%;
        background: rgba(255,255,255,0.1);
        transform: rotate(30deg);
        pointer-events: none;
    }
    .profile-avatar {
        width: 120px;
        height: 120px;
        border-radius: 24px;
        background: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 48px;
        color: #6366f1;
        box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        overflow: hidden;
    }
    .profile-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .shop-info h1 {
        font-size: 2rem;
        font-weight: 700;
        margin-bottom: 8px;
    }
    .shop-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: rgba(255,255,255,0.2);
        padding: 6px 14px;
        border-radius: 20px;
        font-size: 0.85rem;
        backdrop-filter: blur(10px);
    }
    .profile-stats {
        display: flex;
        gap: 30px;
        margin-top: 20px;
    }
    .profile-stat {
        text-align: center;
    }
    .profile-stat-value {
        font-size: 1.5rem;
        font-weight: 700;
    }
    .profile-stat-label {
        font-size: 0.8rem;
        opacity: 0.8;
    }

    .modern-card {
        background: white;
        border-radius: 20px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.08);
        border: 1px solid rgba(0,0,0,0.05);
        overflow: hidden;
        margin-bottom: 24px;
    }
    .modern-card-header {
        padding: 20px 24px;
        border-bottom: 1px solid rgba(0,0,0,0.08);
        display: flex;
        align-items: center;
        gap: 12px;
    }
    .modern-card-header h5 {
        margin: 0;
        font-weight: 600;
        font-size: 1.1rem;
    }
    .modern-card-header .header-icon {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
    }
    .modern-card-header .header-icon.primary { background: rgba(99, 102, 241, 0.15); color: #6366f1; }
    .modern-card-header .header-icon.success { background: rgba(34, 197, 94, 0.15); color: #22c55e; }
    .modern-card-header .header-icon.warning { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
    .modern-card-header .header-icon.info { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
    .modern-card-body {
        padding: 24px;
    }

    .form-floating-modern {
        position: relative;
        margin-bottom: 20px;
    }
    .form-floating-modern label {
        font-size: 0.85rem;
        font-weight: 600;
        color: #64748b;
        margin-bottom: 8px;
        display: block;
    }
    .form-floating-modern .form-control,
    .form-floating-modern .form-select {
        border-radius: 12px;
        border: 2px solid #e2e8f0;
        padding: 12px 16px;
        font-size: 0.95rem;
        transition: all 0.3s ease;
    }
    .form-floating-modern .form-control:focus,
    .form-floating-modern .form-select:focus {
        border-color: #6366f1;
        box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
    }

    .btn-modern {
        padding: 12px 28px;
        border-radius: 12px;
        font-weight: 600;
        transition: all 0.3s ease;
    }
    .btn-modern-primary {
        background: linear-gradient(135deg, #6366f1, #8b5cf6);
        color: white;
        border: none;
    }
    .btn-modern-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4);
        color: white;
    }
    .btn-modern-outline {
        background: transparent;
        border: 2px solid #e2e8f0;
        color: #64748b;
    }
    .btn-modern-outline:hover {
        border-color: #6366f1;
        color: #6366f1;
    }

    .address-card {
        background: #f8fafc;
        border-radius: 16px;
        padding: 20px;
        border: 2px solid transparent;
        transition: all 0.3s ease;
        margin-bottom: 16px;
    }
    .address-card:hover {
        border-color: #6366f1;
        box-shadow: 0 4px 15px rgba(99, 102, 241, 0.15);
    }
    .address-card.default {
        border-color: #22c55e;
        background: rgba(34, 197, 94, 0.05);
    }
    .address-card .address-header {
        display: flex;
        justify-content: space-between;
        align-items: start;
        margin-bottom: 12px;
    }
    .address-card .address-label {
        font-weight: 600;
        font-size: 1rem;
        color: #1e293b;
    }
    .address-card .address-default-badge {
        background: #22c55e;
        color: white;
        padding: 4px 10px;
        border-radius: 20px;
        font-size: 0.75rem;
        font-weight: 600;
    }
    .address-card .address-detail {
        color: #64748b;
        font-size: 0.9rem;
        line-height: 1.6;
    }
    .address-card .address-actions {
        display: flex;
        gap: 8px;
        margin-top: 12px;
    }

    .upload-zone {
        border: 2px dashed #e2e8f0;
        border-radius: 16px;
        padding: 30px;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s ease;
        background: #f8fafc;
    }
    .upload-zone:hover {
        border-color: #6366f1;
        background: rgba(99, 102, 241, 0.05);
    }
    .upload-zone i {
        font-size: 2.5rem;
        color: #6366f1;
        margin-bottom: 10px;
    }
    .upload-zone p {
        margin: 0;
        color: #64748b;
    }

    .nav-pills-modern {
        background: #f1f5f9;
        padding: 6px;
        border-radius: 14px;
        display: inline-flex;
        gap: 4px;
    }
    .nav-pills-modern .nav-link {
        border-radius: 10px;
        padding: 10px 20px;
        font-weight: 600;
        color: #64748b;
        border: none;
    }
    .nav-pills-modern .nav-link.active {
        background: white;
        color: #6366f1;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
</style>
@endpush

@section('content')
<!-- Profile Header -->
<div class="profile-header">
    <div class="d-flex align-items-center gap-4 flex-wrap">
        <div class="profile-avatar">
            @if($seller->logo)
                <img src="{{ Storage::url($seller->logo) }}" alt="{{ $seller->shop_name }}">
            @else
                <i class="bi bi-shop"></i>
            @endif
        </div>
        <div class="shop-info flex-grow-1">
            <h1>{{ $seller->shop_name }}</h1>
            <div class="d-flex flex-wrap gap-2 align-items-center">
                <span class="shop-badge">
                    <i class="bi bi-geo-alt"></i>
                    {{ $seller->city }}, {{ $seller->country }}
                </span>
                @if($seller->kyc_status === 'approved')
                <span class="shop-badge">
                    <i class="bi bi-patch-check-fill"></i>
                    Verifie
                </span>
                @endif
                <span class="shop-badge">
                    <i class="bi bi-calendar3"></i>
                    Membre depuis {{ $seller->created_at->format('M Y') }}
                </span>
            </div>
            <div class="profile-stats">
                <div class="profile-stat">
                    <div class="profile-stat-value">{{ $seller->total_products ?? 0 }}</div>
                    <div class="profile-stat-label">Produits</div>
                </div>
                <div class="profile-stat">
                    <div class="profile-stat-value">{{ $seller->total_sales ?? 0 }}</div>
                    <div class="profile-stat-label">Ventes</div>
                </div>
                <div class="profile-stat">
                    <div class="profile-stat-value">{{ number_format($seller->rating ?? 0, 1) }}<i class="bi bi-star-fill ms-1" style="font-size: 0.8rem;"></i></div>
                    <div class="profile-stat-label">Note</div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Navigation Tabs -->
<ul class="nav nav-pills-modern mb-4" id="profileTabs" role="tablist">
    <li class="nav-item">
        <button class="nav-link active" data-bs-toggle="pill" data-bs-target="#shop-info">
            <i class="bi bi-shop me-2"></i>Boutique
        </button>
    </li>
    <li class="nav-item">
        <button class="nav-link" data-bs-toggle="pill" data-bs-target="#business-info">
            <i class="bi bi-building me-2"></i>Business
        </button>
    </li>
    <li class="nav-item">
        <button class="nav-link" data-bs-toggle="pill" data-bs-target="#payment-methods-tab">
            <i class="bi bi-credit-card me-2"></i>Paiement
        </button>
    </li>
    <li class="nav-item">
        <button class="nav-link" data-bs-toggle="pill" data-bs-target="#addresses-tab">
            <i class="bi bi-geo-alt me-2"></i>Adresses
        </button>
    </li>
    <li class="nav-item">
        <button class="nav-link" data-bs-toggle="pill" data-bs-target="#security-tab">
            <i class="bi bi-shield-lock me-2"></i>Securite
        </button>
    </li>
</ul>

<div class="tab-content">
    <!-- Shop Info Tab -->
    <div class="tab-pane fade show active" id="shop-info">
        <form action="{{ route('seller.profile.update') }}" method="POST" enctype="multipart/form-data">
            @csrf
            @method('PUT')
            
            <div class="row">
                <div class="col-lg-8">
                    <div class="modern-card">
                        <div class="modern-card-header">
                            <div class="header-icon primary"><i class="bi bi-shop"></i></div>
                            <h5>Informations de la Boutique</h5>
                        </div>
                        <div class="modern-card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-floating-modern">
                                        <label>Nom de la Boutique *</label>
                                        <input type="text" name="shop_name" class="form-control" value="{{ old('shop_name', $seller->shop_name) }}" required>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-floating-modern">
                                        <label>Categorie</label>
                                        <select name="category" class="form-select">
                                            <option value="mode" {{ $seller->category == 'mode' ? 'selected' : '' }}>Mode & Vetements</option>
                                            <option value="bijoux" {{ $seller->category == 'bijoux' ? 'selected' : '' }}>Bijoux & Accessoires</option>
                                            <option value="electronique" {{ $seller->category == 'electronique' ? 'selected' : '' }}>Electronique</option>
                                            <option value="maison" {{ $seller->category == 'maison' ? 'selected' : '' }}>Maison & Decoration</option>
                                            <option value="beaute" {{ $seller->category == 'beaute' ? 'selected' : '' }}>Beaute & Soins</option>
                                            <option value="alimentation" {{ $seller->category == 'alimentation' ? 'selected' : '' }}>Alimentation</option>
                                            <option value="services" {{ $seller->category == 'services' ? 'selected' : '' }}>Services</option>
                                            <option value="autre" {{ $seller->category == 'autre' ? 'selected' : '' }}>Autre</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="form-floating-modern">
                                <label>Description de la Boutique</label>
                                <textarea name="description" class="form-control" rows="4" placeholder="Decrivez votre boutique et vos produits...">{{ old('description', $seller->description) }}</textarea>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-floating-modern">
                                        <label>Email *</label>
                                        <input type="email" name="email" class="form-control" value="{{ old('email', $seller->email) }}" required>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-floating-modern">
                                        <label>Telephone *</label>
                                        <input type="tel" name="phone" class="form-control" value="{{ old('phone', $seller->phone) }}" required>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="form-floating-modern">
                                <label>WhatsApp</label>
                                <input type="tel" name="whatsapp" class="form-control" value="{{ old('whatsapp', $seller->whatsapp) }}">
                            </div>
                        </div>
                    </div>

                    <div class="modern-card">
                        <div class="modern-card-header">
                            <div class="header-icon info"><i class="bi bi-geo-alt"></i></div>
                            <h5>Localisation</h5>
                        </div>
                        <div class="modern-card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-floating-modern">
                                        <label>Pays *</label>
                                        <select name="country" id="country" class="form-select" required>
                                            <option value="">Selectionnez un pays</option>
                                            @foreach(config('countries') as $country => $code)
                                                <option value="{{ $country }}" {{ old('country', $seller->country) == $country ? 'selected' : '' }}>{{ $country }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-floating-modern">
                                        <label>Ville *</label>
                                        <select name="city" id="city" class="form-select" required>
                                            <option value="{{ $seller->city }}">{{ $seller->city }}</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="form-floating-modern">
                                <label>Adresse Complete *</label>
                                <textarea name="address" class="form-control" rows="2" required>{{ old('address', $seller->address) }}</textarea>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-4">
                    <div class="modern-card">
                        <div class="modern-card-header">
                            <div class="header-icon warning"><i class="bi bi-image"></i></div>
                            <h5>Images</h5>
                        </div>
                        <div class="modern-card-body">
                            <div class="form-floating-modern">
                                <label>Logo de la Boutique</label>
                                <div class="upload-zone" onclick="document.getElementById('logo-input').click()">
                                    @if($seller->logo)
                                        <img src="{{ Storage::url($seller->logo) }}" alt="Logo" style="max-width: 100px; border-radius: 12px; margin-bottom: 10px;">
                                    @else
                                        <i class="bi bi-cloud-upload"></i>
                                    @endif
                                    <p>Cliquez pour changer le logo</p>
                                    <small class="text-muted">JPG, PNG - Max 2MB</small>
                                </div>
                                <input type="file" name="logo" id="logo-input" class="d-none" accept=".jpg,.jpeg,.png">
                            </div>
                            
                            <div class="form-floating-modern mt-4">
                                <label>Banniere</label>
                                <div class="upload-zone" onclick="document.getElementById('banner-input').click()">
                                    @if($seller->banner)
                                        <img src="{{ Storage::url($seller->banner) }}" alt="Banner" style="max-width: 100%; border-radius: 12px; margin-bottom: 10px;">
                                    @else
                                        <i class="bi bi-card-image"></i>
                                    @endif
                                    <p>Cliquez pour changer la banniere</p>
                                    <small class="text-muted">JPG, PNG - Max 5MB</small>
                                </div>
                                <input type="file" name="banner" id="banner-input" class="d-none" accept=".jpg,.jpeg,.png">
                            </div>
                        </div>
                    </div>

                    <button type="submit" class="btn btn-modern btn-modern-primary w-100">
                        <i class="bi bi-check2-circle me-2"></i>Enregistrer les modifications
                    </button>
                </div>
            </div>
        </form>
    </div>
    
    <!-- Business Info Tab -->
    <div class="tab-pane fade" id="business-info">
        <form action="{{ route('seller.profile.update') }}" method="POST">
            @csrf
            @method('PUT')
            
            <div class="modern-card">
                <div class="modern-card-header">
                    <div class="header-icon success"><i class="bi bi-building"></i></div>
                    <h5>Informations Business</h5>
                </div>
                <div class="modern-card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-floating-modern">
                                <label>Type d'activite</label>
                                <select name="business_type" class="form-select">
                                    <option value="">Selectionnez</option>
                                    <option value="individual" {{ old('business_type', $seller->business_type) == 'individual' ? 'selected' : '' }}>Individuel / Particulier</option>
                                    <option value="company" {{ old('business_type', $seller->business_type) == 'company' ? 'selected' : '' }}>Societe / Entreprise</option>
                                    <option value="association" {{ old('business_type', $seller->business_type) == 'association' ? 'selected' : '' }}>Association / ONG</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-floating-modern">
                                <label>Nom de l'entreprise</label>
                                <input type="text" name="business_name" class="form-control" value="{{ old('business_name', $seller->business_name) }}" placeholder="Ex: SARL Ma Boutique">
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-floating-modern">
                                <label>N° Registre de Commerce (RCCM)</label>
                                <input type="text" name="business_registration" class="form-control" value="{{ old('business_registration', $seller->business_registration) }}" placeholder="Ex: RCCM-KIN-2024-B-12345">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-floating-modern">
                                <label>N° Identification Fiscale (NIF)</label>
                                <input type="text" name="tax_id" class="form-control" value="{{ old('tax_id', $seller->tax_id) }}" placeholder="Ex: A1234567B">
                            </div>
                        </div>
                    </div>
                    
                    <!-- Hidden fields to preserve other data -->
                    <input type="hidden" name="shop_name" value="{{ $seller->shop_name }}">
                    <input type="hidden" name="phone" value="{{ $seller->phone }}">
                    <input type="hidden" name="email" value="{{ $seller->email }}">
                    <input type="hidden" name="address" value="{{ $seller->address }}">
                    <input type="hidden" name="city" value="{{ $seller->city }}">
                    <input type="hidden" name="country" value="{{ $seller->country }}">
                    
                    <button type="submit" class="btn btn-modern btn-modern-primary mt-3">
                        <i class="bi bi-check2-circle me-2"></i>Enregistrer les informations business
                    </button>
                </div>
            </div>
        </form>
    </div>
    
    <!-- Payment Methods Tab -->
    <div class="tab-pane fade" id="payment-methods-tab">
        <form action="{{ route('seller.profile.update-payment') }}" method="POST">
            @csrf
            @method('PUT')
            
            <div class="row">
                <div class="col-lg-8">
                    <div class="modern-card">
                        <div class="modern-card-header">
                            <div class="header-icon success"><i class="bi bi-credit-card"></i></div>
                            <h5>Methodes de Paiement</h5>
                        </div>
                        <div class="modern-card-body">
                            <div class="alert alert-info mb-4" style="border-radius: 12px; border: none; background: rgba(59, 130, 246, 0.1);">
                                <i class="bi bi-info-circle me-2"></i>
                                <strong>Important:</strong> Ces informations seront utilisees pour vos demandes de retrait. Assurez-vous qu'elles sont correctes.
                            </div>
                            
                            <div class="form-floating-modern">
                                <label>Mode de paiement prefere *</label>
                                <select name="payment_method" id="paymentMethodSelect" class="form-select" required>
                                    <option value="">Selectionnez un mode</option>
                                    <option value="mobile_money" {{ old('payment_method', $seller->payment_method) == 'mobile_money' ? 'selected' : '' }}>Mobile Money (MTN/Moov)</option>
                                    <option value="wave" {{ old('payment_method', $seller->payment_method) == 'wave' ? 'selected' : '' }}>Wave</option>
                                    <option value="orange_money" {{ old('payment_method', $seller->payment_method) == 'orange_money' ? 'selected' : '' }}>Orange Money</option>
                                    <option value="bank_transfer" {{ old('payment_method', $seller->payment_method) == 'bank_transfer' ? 'selected' : '' }}>Virement Bancaire</option>
                                </select>
                            </div>
                            
                            <!-- Mobile Money Section -->
                            <div id="mobileMoneySection" class="payment-section" style="display: none;">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-floating-modern">
                                            <label>Operateur</label>
                                            <select name="mobile_money_provider" class="form-select">
                                                <option value="">Selectionnez</option>
                                                <option value="mtn" {{ old('mobile_money_provider', $seller->mobile_money_provider) == 'mtn' ? 'selected' : '' }}>MTN Mobile Money</option>
                                                <option value="moov" {{ old('mobile_money_provider', $seller->mobile_money_provider) == 'moov' ? 'selected' : '' }}>Moov Money</option>
                                                <option value="wave" {{ old('mobile_money_provider', $seller->mobile_money_provider) == 'wave' ? 'selected' : '' }}>Wave</option>
                                                <option value="orange" {{ old('mobile_money_provider', $seller->mobile_money_provider) == 'orange' ? 'selected' : '' }}>Orange Money</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-floating-modern">
                                            <label>Numero de telephone</label>
                                            <input type="tel" name="mobile_money_number" class="form-control" value="{{ old('mobile_money_number', $seller->mobile_money_number) }}" placeholder="Ex: 07 XX XX XX XX">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Bank Transfer Section -->
                            <div id="bankTransferSection" class="payment-section" style="display: none;">
                                <div class="form-floating-modern">
                                    <label>Nom de la banque</label>
                                    <input type="text" name="bank_name" class="form-control" value="{{ old('bank_name', $seller->bank_name) }}" placeholder="Ex: SGBCI, BOA, Ecobank...">
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-floating-modern">
                                            <label>Numero de compte / IBAN</label>
                                            <input type="text" name="bank_account_number" class="form-control" value="{{ old('bank_account_number', $seller->bank_account_number) }}" placeholder="Numero de compte">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-floating-modern">
                                            <label>Nom du titulaire</label>
                                            <input type="text" name="bank_account_name" class="form-control" value="{{ old('bank_account_name', $seller->bank_account_name) }}" placeholder="Nom complet du titulaire">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="form-floating-modern">
                                <label>Notes supplementaires</label>
                                <textarea name="payment_details" class="form-control" rows="3" placeholder="Instructions particulieres pour le paiement...">{{ old('payment_details', $seller->payment_details) }}</textarea>
                            </div>
                            
                            <button type="submit" class="btn btn-modern btn-modern-primary mt-3">
                                <i class="bi bi-check2-circle me-2"></i>Enregistrer les informations de paiement
                            </button>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-4">
                    <div class="modern-card">
                        <div class="modern-card-header">
                            <div class="header-icon warning"><i class="bi bi-lightbulb"></i></div>
                            <h5>Conseils</h5>
                        </div>
                        <div class="modern-card-body">
                            <ul class="list-unstyled mb-0" style="color: #64748b; font-size: 0.9rem; line-height: 1.8;">
                                <li class="mb-3">
                                    <i class="bi bi-check-circle text-success me-2"></i>
                                    Verifiez que le numero de telephone est correct
                                </li>
                                <li class="mb-3">
                                    <i class="bi bi-check-circle text-success me-2"></i>
                                    Le nom doit correspondre au titulaire du compte
                                </li>
                                <li class="mb-3">
                                    <i class="bi bi-check-circle text-success me-2"></i>
                                    Les retraits sont traites sous 24-48h
                                </li>
                                <li>
                                    <i class="bi bi-info-circle text-primary me-2"></i>
                                    Frais de retrait: 3% du montant
                                </li>
                            </ul>
                        </div>
                    </div>
                    
                    @if($seller->payment_method)
                    <div class="modern-card">
                        <div class="modern-card-header">
                            <div class="header-icon primary"><i class="bi bi-wallet2"></i></div>
                            <h5>Configuration actuelle</h5>
                        </div>
                        <div class="modern-card-body">
                            <div class="d-flex align-items-center gap-3 p-3" style="background: #f8fafc; border-radius: 12px;">
                                <div style="width: 50px; height: 50px; background: linear-gradient(135deg, #10b981, #34d399); border-radius: 12px; display: flex; align-items: center; justify-content: center;">
                                    <i class="bi bi-check-lg text-white fs-4"></i>
                                </div>
                                <div>
                                    <div style="font-weight: 600; color: #1e293b;">
                                        {{ ucfirst(str_replace('_', ' ', $seller->payment_method)) }}
                                    </div>
                                    <div style="font-size: 0.85rem; color: #64748b;">
                                        @if($seller->mobile_money_number)
                                            {{ $seller->mobile_money_number }}
                                        @elseif($seller->bank_name)
                                            {{ $seller->bank_name }}
                                        @else
                                            Configure
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endif
                </div>
            </div>
        </form>
    </div>
    
    <!-- Addresses Tab -->
    <div class="tab-pane fade" id="addresses-tab">
        <div class="row">
            <div class="col-lg-8">
                <div class="modern-card">
                    <div class="modern-card-header">
                        <div class="header-icon info"><i class="bi bi-geo-alt"></i></div>
                        <h5>Mes Adresses</h5>
                    </div>
                    <div class="modern-card-body">
                        @forelse($addresses as $address)
                        <div class="address-card {{ $address->is_default ? 'default' : '' }}">
                            <div class="address-header">
                                <span class="address-label">
                                    <i class="bi bi-geo me-2"></i>{{ $address->label }}
                                </span>
                                @if($address->is_default)
                                <span class="address-default-badge">Par defaut</span>
                                @endif
                            </div>
                            <div class="address-detail">
                                <strong>{{ $address->full_name }}</strong><br>
                                {{ $address->address }}<br>
                                {{ $address->city }}, {{ $address->country }}<br>
                                <i class="bi bi-telephone me-1"></i> {{ $address->phone }}
                            </div>
                            <div class="address-actions">
                                @if(!$address->is_default)
                                <form action="{{ route('seller.addresses.default', $address) }}" method="POST" class="d-inline">
                                    @csrf
                                    <button type="submit" class="btn btn-sm btn-modern btn-modern-outline">
                                        <i class="bi bi-check2"></i> Par defaut
                                    </button>
                                </form>
                                @endif
                                <button type="button" class="btn btn-sm btn-modern btn-modern-outline" onclick="editAddress({{ $address->id }}, '{{ $address->label }}', '{{ $address->full_name }}', '{{ $address->phone }}', '{{ $address->country }}', '{{ $address->city }}', '{{ $address->address }}')">
                                    <i class="bi bi-pencil"></i>
                                </button>
                                <form action="{{ route('seller.addresses.destroy', $address) }}" method="POST" class="d-inline" onsubmit="return confirm('Supprimer cette adresse ?')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-sm btn-outline-danger">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </form>
                            </div>
                        </div>
                        @empty
                        <div class="text-center py-5">
                            <i class="bi bi-geo-alt text-muted" style="font-size: 3rem;"></i>
                            <p class="text-muted mt-3">Aucune adresse enregistree</p>
                        </div>
                        @endforelse
                    </div>
                </div>
            </div>
            
            <div class="col-lg-4">
                <div class="modern-card">
                    <div class="modern-card-header">
                        <div class="header-icon success"><i class="bi bi-plus-lg"></i></div>
                        <h5>Ajouter une adresse</h5>
                    </div>
                    <div class="modern-card-body">
                        <form action="{{ route('seller.addresses.store') }}" method="POST">
                            @csrf
                            <div class="form-floating-modern">
                                <label>Libelle *</label>
                                <input type="text" name="label" class="form-control" placeholder="Ex: Bureau, Entrepot..." required>
                            </div>
                            <div class="form-floating-modern">
                                <label>Nom complet *</label>
                                <input type="text" name="full_name" class="form-control" required>
                            </div>
                            <div class="form-floating-modern">
                                <label>Telephone *</label>
                                <input type="tel" name="phone" class="form-control" required>
                            </div>
                            <div class="form-floating-modern">
                                <label>Pays *</label>
                                <select name="country" class="form-select addr-country" required>
                                    <option value="">Selectionnez</option>
                                    @foreach(config('countries') as $country => $code)
                                        <option value="{{ $country }}">{{ $country }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-floating-modern">
                                <label>Ville *</label>
                                <select name="city" class="form-select addr-city" required>
                                    <option value="">Selectionnez d'abord un pays</option>
                                </select>
                            </div>
                            <div class="form-floating-modern">
                                <label>Adresse complete *</label>
                                <textarea name="address" class="form-control" rows="2" required></textarea>
                            </div>
                            <div class="form-check mb-3">
                                <input type="checkbox" name="is_default" value="1" class="form-check-input" id="is_default">
                                <label class="form-check-label" for="is_default">Definir comme adresse par defaut</label>
                            </div>
                            <button type="submit" class="btn btn-modern btn-modern-primary w-100">
                                <i class="bi bi-plus-lg me-2"></i>Ajouter l'adresse
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Security Tab -->
    <div class="tab-pane fade" id="security-tab">
        <div class="row">
            <div class="col-lg-6">
                <div class="modern-card">
                    <div class="modern-card-header">
                        <div class="header-icon warning"><i class="bi bi-key"></i></div>
                        <h5>Changer le mot de passe</h5>
                    </div>
                    <div class="modern-card-body">
                        <form action="{{ route('seller.profile.password') }}" method="POST">
                            @csrf
                            @method('PUT')
                            
                            <div class="form-floating-modern">
                                <label>Mot de passe actuel *</label>
                                <input type="password" name="current_password" class="form-control" required>
                            </div>
                            <div class="form-floating-modern">
                                <label>Nouveau mot de passe *</label>
                                <input type="password" name="password" class="form-control" required>
                                <small class="text-muted">Minimum 6 caracteres</small>
                            </div>
                            <div class="form-floating-modern">
                                <label>Confirmer le nouveau mot de passe *</label>
                                <input type="password" name="password_confirmation" class="form-control" required>
                            </div>
                            
                            <button type="submit" class="btn btn-modern btn-modern-primary">
                                <i class="bi bi-shield-check me-2"></i>Modifier le mot de passe
                            </button>
                        </form>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-6">
                <div class="modern-card">
                    <div class="modern-card-header">
                        <div class="header-icon info"><i class="bi bi-info-circle"></i></div>
                        <h5>Informations du compte</h5>
                    </div>
                    <div class="modern-card-body">
                        <div class="d-flex justify-content-between py-3 border-bottom">
                            <span class="text-muted">Email</span>
                            <span class="fw-bold">{{ Auth::user()->email }}</span>
                        </div>
                        <div class="d-flex justify-content-between py-3 border-bottom">
                            <span class="text-muted">Code Vendeur</span>
                            <span class="fw-bold">{{ Auth::user()->member_code ?? 'N/A' }}</span>
                        </div>
                        <div class="d-flex justify-content-between py-3 border-bottom">
                            <span class="text-muted">Statut KYC</span>
                            <span>
                                @if($seller->kyc_status === 'approved')
                                    <span class="badge bg-success">Verifie</span>
                                @elseif($seller->kyc_status === 'submitted')
                                    <span class="badge bg-info">En attente</span>
                                @else
                                    <span class="badge bg-warning">Non verifie</span>
                                @endif
                            </span>
                        </div>
                        <div class="d-flex justify-content-between py-3">
                            <span class="text-muted">Membre depuis</span>
                            <span class="fw-bold">{{ Auth::user()->created_at->format('d/m/Y') }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    // City loading based on country selection
    const citiesData = @json(config('cities'));
    
    function loadCities(countrySelect, citySelect) {
        const country = countrySelect.value;
        citySelect.innerHTML = '<option value="">Selectionnez une ville</option>';
        
        if (citiesData[country]) {
            citiesData[country].forEach(city => {
                const option = document.createElement('option');
                option.value = city;
                option.textContent = city;
                citySelect.appendChild(option);
            });
        }
    }
    
    // Main form country/city
    document.getElementById('country')?.addEventListener('change', function() {
        loadCities(this, document.getElementById('city'));
    });
    
    // Address form country/city
    document.querySelectorAll('.addr-country').forEach(select => {
        select.addEventListener('change', function() {
            const citySelect = this.closest('form').querySelector('.addr-city');
            loadCities(this, citySelect);
        });
    });
    
    // Edit address function
    function editAddress(id, label, fullName, phone, country, city, address) {
        Swal.fire({
            title: 'Modifier l\'adresse',
            html: `
                <form id="edit-address-form" action="/seller/addresses/${id}" method="POST">
                    <input type="hidden" name="_token" value="{{ csrf_token() }}">
                    <input type="hidden" name="_method" value="PUT">
                    <div class="mb-3 text-start">
                        <label class="form-label">Libelle</label>
                        <input type="text" name="label" class="form-control" value="${label}" required>
                    </div>
                    <div class="mb-3 text-start">
                        <label class="form-label">Nom complet</label>
                        <input type="text" name="full_name" class="form-control" value="${fullName}" required>
                    </div>
                    <div class="mb-3 text-start">
                        <label class="form-label">Telephone</label>
                        <input type="tel" name="phone" class="form-control" value="${phone}" required>
                    </div>
                    <div class="mb-3 text-start">
                        <label class="form-label">Pays</label>
                        <input type="text" name="country" class="form-control" value="${country}" required>
                    </div>
                    <div class="mb-3 text-start">
                        <label class="form-label">Ville</label>
                        <input type="text" name="city" class="form-control" value="${city}" required>
                    </div>
                    <div class="mb-3 text-start">
                        <label class="form-label">Adresse</label>
                        <textarea name="address" class="form-control" rows="2" required>${address}</textarea>
                    </div>
                </form>
            `,
            showCancelButton: true,
            confirmButtonText: 'Enregistrer',
            cancelButtonText: 'Annuler',
            preConfirm: () => {
                document.getElementById('edit-address-form').submit();
            }
        });
    }
    
    // Preview uploaded images
    document.getElementById('logo-input')?.addEventListener('change', function(e) {
        if (e.target.files[0]) {
            const reader = new FileReader();
            reader.onload = function(event) {
                const zone = e.target.closest('.form-floating-modern').querySelector('.upload-zone');
                zone.innerHTML = `<img src="${event.target.result}" style="max-width: 100px; border-radius: 12px; margin-bottom: 10px;"><p>Logo selectionne</p>`;
            };
            reader.readAsDataURL(e.target.files[0]);
        }
    });
    
    document.getElementById('banner-input')?.addEventListener('change', function(e) {
        if (e.target.files[0]) {
            const reader = new FileReader();
            reader.onload = function(event) {
                const zone = e.target.closest('.form-floating-modern').querySelector('.upload-zone');
                zone.innerHTML = `<img src="${event.target.result}" style="max-width: 100%; border-radius: 12px; margin-bottom: 10px;"><p>Banniere selectionnee</p>`;
            };
            reader.readAsDataURL(e.target.files[0]);
        }
    });
    
    // Payment method toggle
    const paymentMethodSelect = document.getElementById('paymentMethodSelect');
    const mobileMoneySection = document.getElementById('mobileMoneySection');
    const bankTransferSection = document.getElementById('bankTransferSection');
    
    function togglePaymentSections() {
        const value = paymentMethodSelect?.value;
        if (mobileMoneySection) mobileMoneySection.style.display = 'none';
        if (bankTransferSection) bankTransferSection.style.display = 'none';
        
        if (value === 'mobile_money' || value === 'wave' || value === 'orange_money') {
            if (mobileMoneySection) mobileMoneySection.style.display = 'block';
        } else if (value === 'bank_transfer') {
            if (bankTransferSection) bankTransferSection.style.display = 'block';
        }
    }
    
    paymentMethodSelect?.addEventListener('change', togglePaymentSections);
    togglePaymentSections(); // Initialize on page load
</script>
@endpush
