@extends('layouts.admin')

@section('title', 'Ajouter un Seller')
@section('page-title', 'Ajouter un Seller')

@section('content')
<div class="card">
    <div class="card-header bg-white d-flex justify-content-between align-items-center">
        <h5 class="mb-0"><i class="bi bi-shop me-2"></i>Nouveau Seller</h5>
        <a href="{{ route('admin.sellers.index') }}" class="btn btn-secondary btn-sm">
            <i class="bi bi-arrow-left me-2"></i>Retour
        </a>
    </div>
    <div class="card-body">
        <form action="{{ route('admin.sellers.store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            
            <div class="row mb-4">
                <div class="col-12">
                    <div class="alert alert-info">
                        <i class="bi bi-info-circle me-2"></i>
                        Vous pouvez soit sélectionner un utilisateur existant, soit créer un nouveau compte.
                        <br><small>Si vous approuvez le KYC directement, le compte sera activé automatiquement.</small>
                    </div>
                </div>
            </div>

            <div class="row mb-4">
                <div class="col-md-6">
                    <h6 class="border-bottom pb-2 mb-3">Utilisateur Existant (optionnel)</h6>
                    <div class="mb-3">
                        <label class="form-label">Sélectionner un utilisateur</label>
                        <select name="user_id" class="form-select" id="existingUser">
                            <option value="">-- Créer un nouveau compte --</option>
                            @foreach($users as $user)
                            <option value="{{ $user->id }}">{{ $user->name }} ({{ $user->email }})</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-md-6" id="newUserFields">
                    <h6 class="border-bottom pb-2 mb-3">Nouveau Compte</h6>
                    <div class="mb-3">
                        <label class="form-label">Nom complet</label>
                        <input type="text" name="name" class="form-control" value="{{ old('name') }}">
                        @error('name')<small class="text-danger">{{ $message }}</small>@enderror
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Email</label>
                        <input type="email" name="email" class="form-control" value="{{ old('email') }}">
                        @error('email')<small class="text-danger">{{ $message }}</small>@enderror
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Mot de passe</label>
                        <input type="password" name="password" class="form-control">
                        @error('password')<small class="text-danger">{{ $message }}</small>@enderror
                    </div>
                </div>
            </div>

            <h6 class="border-bottom pb-2 mb-3">Informations de la Boutique</h6>
            <div class="row">
                <div class="col-md-6 mb-3">
                    <label class="form-label">Nom de la boutique *</label>
                    <input type="text" name="shop_name" class="form-control" value="{{ old('shop_name') }}" required>
                    @error('shop_name')<small class="text-danger">{{ $message }}</small>@enderror
                </div>
                <div class="col-md-6 mb-3">
                    <label class="form-label">Catégorie</label>
                    <select name="category" class="form-select">
                        <option value="">Sélectionner...</option>
                        <option value="fashion">Mode & Vêtements</option>
                        <option value="electronics">Électronique</option>
                        <option value="beauty">Beauté & Soins</option>
                        <option value="home">Maison & Décoration</option>
                        <option value="food">Alimentation</option>
                        <option value="other">Autre</option>
                    </select>
                </div>
                <div class="col-md-6 mb-3">
                    <label class="form-label">Téléphone</label>
                    <input type="text" name="phone" class="form-control" value="{{ old('phone') }}">
                </div>
                <div class="col-md-6 mb-3">
                    <label class="form-label">Ville</label>
                    <input type="text" name="city" class="form-control" value="{{ old('city') }}">
                </div>
                <div class="col-md-12 mb-3">
                    <label class="form-label">Description</label>
                    <textarea name="shop_description" class="form-control" rows="3">{{ old('shop_description') }}</textarea>
                </div>
                <div class="col-md-12 mb-3">
                    <label class="form-label">Adresse</label>
                    <input type="text" name="address" class="form-control" value="{{ old('address') }}">
                </div>
            </div>

            <h6 class="border-bottom pb-2 mb-3">Informations Business & KYC (optionnel)</h6>
            <div class="row">
                <div class="col-md-4 mb-3">
                    <label class="form-label">Type d'entreprise</label>
                    <select name="business_type" class="form-select">
                        <option value="">Sélectionner...</option>
                        <option value="individual">Individuel</option>
                        <option value="company">Société</option>
                        <option value="association">Association</option>
                    </select>
                </div>
                <div class="col-md-4 mb-3">
                    <label class="form-label">Nom entreprise</label>
                    <input type="text" name="business_name" class="form-control" value="{{ old('business_name') }}">
                </div>
                <div class="col-md-4 mb-3">
                    <label class="form-label">N° Registre Commerce</label>
                    <input type="text" name="business_registration" class="form-control" value="{{ old('business_registration') }}">
                </div>
            </div>
            
            <div class="row">
                <div class="col-md-6 mb-3">
                    <label class="form-label">Pièce d'identité</label>
                    <input type="file" name="id_document" class="form-control" accept=".jpg,.jpeg,.png,.pdf">
                    <small class="text-muted">JPG, PNG ou PDF - Max 5MB</small>
                </div>
                <div class="col-md-6 mb-3">
                    <label class="form-label">Justificatif d'adresse</label>
                    <input type="file" name="address_proof" class="form-control" accept=".jpg,.jpeg,.png,.pdf">
                </div>
            </div>

            <h6 class="border-bottom pb-2 mb-3">Configuration</h6>
            <div class="row">
                <div class="col-md-4 mb-3">
                    <label class="form-label">Taux de commission (%)</label>
                    <input type="number" name="commission_rate" class="form-control" value="{{ old('commission_rate', 10) }}" min="0" max="100" step="0.5" required>
                </div>
                <div class="col-md-4 mb-3">
                    <label class="form-label">Statut KYC</label>
                    <select name="kyc_status" class="form-select" required id="kycStatus">
                        <option value="pending" {{ old('kyc_status') == 'pending' ? 'selected' : '' }}>En attente</option>
                        <option value="submitted" {{ old('kyc_status') == 'submitted' ? 'selected' : '' }}>Documents soumis</option>
                        <option value="approved" {{ old('kyc_status') == 'approved' ? 'selected' : '' }}>Approuvé (active automatiquement)</option>
                        <option value="rejected" {{ old('kyc_status') == 'rejected' ? 'selected' : '' }}>Rejeté</option>
                    </select>
                </div>
                <div class="col-md-4 mb-3">
                    <label class="form-label">Statut</label>
                    <div class="form-check form-switch mt-2">
                        <input type="hidden" name="is_active" value="0">
                        <input class="form-check-input" type="checkbox" name="is_active" value="1" id="isActiveCheck" {{ old('is_active', false) ? 'checked' : '' }}>
                        <label class="form-check-label">Actif</label>
                    </div>
                </div>
            </div>

            <div class="d-flex gap-2 mt-4">
                <button type="submit" class="btn btn-primary">
                    <i class="bi bi-check-lg me-2"></i>Créer le Seller
                </button>
                <a href="{{ route('admin.sellers.index') }}" class="btn btn-secondary">Annuler</a>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
document.getElementById('existingUser').addEventListener('change', function() {
    document.getElementById('newUserFields').style.display = this.value ? 'none' : 'block';
});

// Auto-check "Actif" when KYC is approved
document.getElementById('kycStatus').addEventListener('change', function() {
    if (this.value === 'approved') {
        document.getElementById('isActiveCheck').checked = true;
    }
});
</script>
@endpush
@endsection
