@extends('layouts.admin-modern')

@section('title', 'Créer un ambassadeur')

@section('content')
<div class="page-header">
    <h1 class="page-title">Créer un ambassadeur</h1>
    <p class="page-subtitle">Remplissez les informations pour créer un nouveau compte ambassadeur</p>
</div>

@if($errors->any())
    <div class="alert alert-danger">
        <ul class="mb-0">
            @foreach($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

<form method="POST" action="{{ route('admin.ambassadors.store') }}">
    @csrf

    <div class="row">
        <!-- Informations personnelles -->
        <div class="col-lg-8">
            <div class="card-base mb-4">
                <h5 class="fw-bold mb-3"><i class="fas fa-user me-2"></i>Informations personnelles</h5>
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label">Prénom *</label>
                        <input type="text" name="firstname" value="{{ old('firstname') }}" class="form-control" required>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Nom *</label>
                        <input type="text" name="lastname" value="{{ old('lastname') }}" class="form-control" required>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Nom affiché</label>
                        <input type="text" name="display_name" value="{{ old('display_name') }}" class="form-control" placeholder="Optionnel">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Email *</label>
                        <input type="email" name="email" value="{{ old('email') }}" class="form-control" required>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Téléphone</label>
                        <input type="text" name="phone" value="{{ old('phone') }}" class="form-control">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Statut *</label>
                        <select name="status" class="form-select">
                            <option value="draft" {{ old('status') === 'draft' ? 'selected' : '' }}>Brouillon</option>
                            <option value="active" {{ old('status', 'active') === 'active' ? 'selected' : '' }}>Actif</option>
                        </select>
                    </div>
                </div>
            </div>

            <div class="card-base mb-4">
                <h5 class="fw-bold mb-3"><i class="fas fa-key me-2"></i>Identifiants de connexion</h5>
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label">Identifiant de connexion (email) *</label>
                        <input type="email" name="login_email" value="{{ old('login_email') }}" class="form-control" placeholder="Sera utilisé pour se connecter">
                        <small class="text-muted">Si différent de l'email principal. Laisser vide = même que l'email ci-dessus.</small>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Mot de passe *</label>
                        <div class="input-group">
                            <input type="text" name="password" id="passwordField" value="{{ old('password') }}" class="form-control" placeholder="Saisir ou générer">
                            <button type="button" class="btn btn-outline-primary" onclick="generatePassword()">
                                <i class="fas fa-random me-1"></i>Générer
                            </button>
                        </div>
                        <small class="text-muted">Min. 8 caractères. Communiquez-le à l'ambassadeur.</small>
                    </div>
                </div>
            </div>

            <script>
            function generatePassword() {
                const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZabcdefghjkmnpqrstuvwxyz23456789!@#$';
                let pwd = '';
                for (let i = 0; i < 12; i++) pwd += chars.charAt(Math.floor(Math.random() * chars.length));
                document.getElementById('passwordField').value = pwd;
            }
            </script>

            <div class="card-base mb-4">
                <h5 class="fw-bold mb-3"><i class="fas fa-building me-2"></i>Société & adresse</h5>
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label">Société</label>
                        <input type="text" name="company_name" value="{{ old('company_name') }}" class="form-control">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">SIRET</label>
                        <input type="text" name="siret" value="{{ old('siret') }}" class="form-control">
                    </div>
                    <div class="col-12">
                        <label class="form-label">Adresse</label>
                        <input type="text" name="address" value="{{ old('address') }}" class="form-control">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Ville</label>
                        <input type="text" name="city" value="{{ old('city') }}" class="form-control">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Code postal</label>
                        <input type="text" name="postal_code" value="{{ old('postal_code') }}" class="form-control">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Pays</label>
                        <input type="text" name="country" value="{{ old('country', 'France') }}" class="form-control">
                    </div>
                </div>
            </div>

            <!-- Catégories & commissions -->
            <div class="card-base mb-4">
                <h5 class="fw-bold mb-3"><i class="fas fa-tags me-2"></i>Catégories autorisées & taux de commission</h5>
                <p class="text-muted small">Définissez les catégories sur lesquelles l'ambassadeur touchera des commissions.</p>

                @foreach($categoryKeys as $key => $label)
                <div class="border rounded p-3 mb-3">
                    <div class="form-check mb-2">
                        <input type="hidden" name="categories[{{ $key }}][enabled]" value="0">
                        <input type="checkbox" name="categories[{{ $key }}][enabled]" value="1" class="form-check-input"
                               id="cat_{{ $key }}" {{ old("categories.{$key}.enabled") ? 'checked' : '' }}>
                        <label class="form-check-label fw-semibold" for="cat_{{ $key }}">{{ $label }}</label>
                    </div>
                    <div class="row g-2 ms-4">
                        <div class="col-md-3">
                            <label class="form-label small">Type commission</label>
                            <select name="categories[{{ $key }}][commission_type]" class="form-select form-select-sm">
                                <option value="split">Partage</option>
                                <option value="full_platform_fee">100% plateforme</option>
                                <option value="fixed_rate">Taux fixe</option>
                                <option value="custom">Personnalisé</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label small">Taux ambassadeur (%)</label>
                            <input type="number" step="0.01" name="categories[{{ $key }}][ambassador_rate]"
                                   value="{{ old("categories.{$key}.ambassador_rate", '7') }}" class="form-control form-control-sm">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label small">Taux plateforme (%)</label>
                            <input type="number" step="0.01" name="categories[{{ $key }}][platform_rate]"
                                   value="{{ old("categories.{$key}.platform_rate", '3') }}" class="form-control form-control-sm">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label small">Taux admin (%)</label>
                            <input type="number" step="0.01" name="categories[{{ $key }}][admin_rate]"
                                   value="{{ old("categories.{$key}.admin_rate", '0') }}" class="form-control form-control-sm">
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>

        <!-- Sidebar -->
        <div class="col-lg-4">
            <div class="card-base mb-4">
                <h5 class="fw-bold mb-3"><i class="fas fa-map-marker-alt me-2"></i>Zone géographique</h5>
                <div class="mb-3">
                    <label class="form-label">Type de zone *</label>
                    <select name="zone_type" class="form-select">
                        <option value="national" {{ old('zone_type') === 'national' ? 'selected' : '' }}>National</option>
                        <option value="region" {{ old('zone_type') === 'region' ? 'selected' : '' }}>Région</option>
                        <option value="department" {{ old('zone_type') === 'department' ? 'selected' : '' }}>Département</option>
                        <option value="city_radius" {{ old('zone_type') === 'city_radius' ? 'selected' : '' }}>Ville / Rayon km</option>
                    </select>
                </div>
                <div class="mb-3">
                    <label class="form-label">Valeur zone</label>
                    <input type="text" name="zone_value" value="{{ old('zone_value') }}" class="form-control" placeholder="Ex: Île-de-France, 75, Paris/50km">
                </div>
            </div>

            <div class="card-base mb-4">
                <h5 class="fw-bold mb-3"><i class="fas fa-calendar me-2"></i>Contrat</h5>
                <div class="mb-3">
                    <label class="form-label">Date de début</label>
                    <input type="date" name="started_at" value="{{ old('started_at', date('Y-m-d')) }}" class="form-control">
                </div>
                <div class="mb-3">
                    <label class="form-label">Date de fin (optionnel)</label>
                    <input type="date" name="ended_at" value="{{ old('ended_at') }}" class="form-control">
                </div>
            </div>

            <div class="card-base mb-4">
                <h5 class="fw-bold mb-3"><i class="fas fa-sliders-h me-2"></i>Droits</h5>
                <div class="form-check mb-2">
                    <input type="hidden" name="can_create_prestataires" value="0">
                    <input type="checkbox" name="can_create_prestataires" value="1" class="form-check-input" id="can_create" {{ old('can_create_prestataires', true) ? 'checked' : '' }}>
                    <label class="form-check-label" for="can_create">Peut inscrire des prestataires</label>
                </div>
                <div class="form-check mb-2">
                    <input type="hidden" name="can_use_affiliate_link" value="0">
                    <input type="checkbox" name="can_use_affiliate_link" value="1" class="form-check-input" id="can_affiliate" {{ old('can_use_affiliate_link', true) ? 'checked' : '' }}>
                    <label class="form-check-label" for="can_affiliate">Peut utiliser un lien affilié</label>
                </div>
            </div>

            <div class="card-base mb-4">
                <h5 class="fw-bold mb-3"><i class="fas fa-sticky-note me-2"></i>Notes internes</h5>
                <textarea name="notes" rows="4" class="form-control" placeholder="Notes visibles uniquement par l'admin...">{{ old('notes') }}</textarea>
            </div>

            <div class="d-grid gap-2">
                <button type="submit" class="btn btn-primary btn-lg">
                    <i class="fas fa-save me-2"></i>Créer l'ambassadeur
                </button>
                <a href="{{ route('admin.ambassadors.index') }}" class="btn btn-outline-secondary">Annuler</a>
            </div>
        </div>
    </div>
</form>
@endsection