<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inscription - {{ $siteName ?? 'ATARA' }} LifeStyle</title>
    <link rel="icon" type="image/x-icon" href="{{ $siteFavicon ?? asset('favicon.ico') }}">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" rel="stylesheet" />
    <style>
        body {
            background: linear-gradient(135deg, #8B5CF6 0%, #D946EF 100%);
            min-height: 100vh;
            padding: 40px 0;
        }
        .register-card {
            background: white;
            border-radius: 20px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
        }
        .btn-primary {
            background: linear-gradient(135deg, #8B5CF6, #D946EF);
            border: none;
        }
        .select2-container--bootstrap-5 .select2-selection {
            min-height: 38px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="register-card p-5">
                    <div class="text-center mb-4">
                        @if(!empty($siteLogo))<img src="{{ $siteLogo }}" alt="{{ $siteName ?? 'ATARA' }}" height="60" class="mb-2">@else<i class="bi bi-gem text-primary fs-1 mb-2"></i>@endif
                        <h3>Rejoignez {{ $siteName ?? 'ATARA' }} LifeStyle</h3>
                        <p class="text-muted">Créez votre compte membre</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 action="{{ route('member.register.post') }}" method="POST" id="registrationForm">
                        @csrf
                        
                        <h6 class="text-muted mb-3"><i class="bi bi-person me-2"></i>Informations Personnelles</h6>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Prénom *</label>
                                <input type="text" name="first_name" class="form-control @error('first_name') is-invalid @enderror" value="{{ old('first_name') }}" required>
                                @error('first_name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Nom *</label>
                                <input type="text" name="last_name" class="form-control @error('last_name') is-invalid @enderror" value="{{ old('last_name') }}" required>
                                @error('last_name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">Email *</label>
                            <input type="email" name="email" class="form-control @error('email') is-invalid @enderror" value="{{ old('email') }}" required>
                            @error('email')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        
                        <h6 class="text-muted mb-3 mt-4"><i class="bi bi-geo-alt me-2"></i>Localisation</h6>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Pays *</label>
                                <select name="country" id="country" class="form-select @error('country') is-invalid @enderror" required>
                                    <option value="">Sélectionnez un pays</option>
                                    @foreach(config('countries') as $country => $code)
                                        <option value="{{ $country }}" data-code="{{ $code }}" {{ old('country') == $country ? 'selected' : '' }}>{{ $country }}</option>
                                    @endforeach
                                </select>
                                @error('country')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Ville *</label>
                                <select name="city" id="city" class="form-select @error('city') is-invalid @enderror" required>
                                    <option value="">Sélectionnez une ville</option>
                                </select>
                                @error('city')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">Adresse Complète *</label>
                            <textarea name="address" class="form-control @error('address') is-invalid @enderror" rows="2" placeholder="Numéro, rue, quartier/commune" required>{{ old('address') }}</textarea>
                            @error('address')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        
                        <h6 class="text-muted mb-3 mt-4"><i class="bi bi-telephone me-2"></i>Contact</h6>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Téléphone *</label>
                                <div class="input-group">
                                    <span class="input-group-text" id="phone-prefix">+243</span>
                                    <input type="tel" name="phone" class="form-control @error('phone') is-invalid @enderror" value="{{ old('phone') }}" placeholder="Ex: 900000001" required>
                                </div>
                                <input type="hidden" name="country_code" id="country_code" value="+243">
                                @error('phone')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">WhatsApp <small class="text-muted">(optionnel)</small></label>
                                <div class="input-group">
                                    <span class="input-group-text" id="whatsapp-prefix">+243</span>
                                    <input type="tel" name="whatsapp" class="form-control @error('whatsapp') is-invalid @enderror" value="{{ old('whatsapp') }}" placeholder="Ex: 900000001">
                                </div>
                                @error('whatsapp')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                            </div>
                        </div>
                        
                        <h6 class="text-muted mb-3 mt-4"><i class="bi bi-shield-lock me-2"></i>Sécurité</h6>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Mot de Passe *</label>
                                <input type="password" name="password" class="form-control @error('password') is-invalid @enderror" required>
                                @error('password')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                <small class="text-muted">Minimum 6 caractères</small>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Confirmer Mot de Passe *</label>
                                <input type="password" name="password_confirmation" class="form-control" required>
                            </div>
                        </div>
                        
                        <h6 class="text-muted mb-3 mt-4"><i class="bi bi-people me-2"></i>Parrainage</h6>
                        <div class="mb-3">
                            <label class="form-label">Code Parrain <small class="text-muted">(optionnel)</small></label>
                            <input type="text" name="sponsor_code" class="form-control @error('sponsor_code') is-invalid @enderror" value="{{ request('ref') ?? old('sponsor_code') }}" placeholder="Ex: MBR1234">
                            @error('sponsor_code')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            <small class="text-muted">Si vous avez été parrainé, entrez le code de votre parrain</small>
                        </div>
                        
                        <button type="submit" class="btn btn-primary w-100 mb-3 py-2">
                            <i class="bi bi-person-plus me-2"></i>Créer mon Compte
                        </button>
                    </form>
                    
                    <hr>
                    <div class="text-center">
                        <p class="mb-0">Déjà membre ? <a href="{{ route('member.login') }}" class="text-decoration-none">Se connecter</a></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        const citiesByCountry = @json(config('cities'));
        
        $(document).ready(function() {
            $('#country').select2({
                theme: 'bootstrap-5',
                placeholder: 'Rechercher un pays...',
                allowClear: true
            });
            
            $('#city').select2({
                theme: 'bootstrap-5',
                placeholder: 'Rechercher une ville...',
                allowClear: true,
                tags: true,
                selectOnClose: true
            });
            
            $('#city').on('select2:close', function() {
                const searchValue = $('.select2-search__field').val();
                if (!$(this).val() && searchValue) {
                    const option = new Option(searchValue, searchValue, true, true);
                    $(this).append(option).trigger('change');
                }
            });
            
            $('#registrationForm').on('submit', function() {
                const searchValue = $('.select2-search__field').val();
                if (!$('#city').val() && searchValue) {
                    const option = new Option(searchValue, searchValue, true, true);
                    $('#city').append(option).trigger('change');
                }
            });
            
            $('#country').on('change', function() {
                const selectedOption = $(this).find('option:selected');
                const countryCode = selectedOption.data('code') || '+243';
                const selectedCountry = $(this).val();
                
                $('#phone-prefix').text(countryCode);
                $('#whatsapp-prefix').text(countryCode);
                $('#country_code').val(countryCode);
                
                $('#city').empty().append('<option value="">Sélectionnez une ville</option>');
                
                const cities = citiesByCountry[selectedCountry] || citiesByCountry['default'] || [];
                cities.forEach(function(city) {
                    $('#city').append(new Option(city, city, false, false));
                });
                
                $('#city').trigger('change');
            });
            
            const initialCountry = $('#country').find('option:selected');
            if (initialCountry.length && initialCountry.val()) {
                const initialCode = initialCountry.data('code');
                $('#phone-prefix').text(initialCode);
                $('#whatsapp-prefix').text(initialCode);
                $('#country_code').val(initialCode);
                
                const selectedCountry = initialCountry.val();
                const cities = citiesByCountry[selectedCountry] || citiesByCountry['default'] || [];
                cities.forEach(function(city) {
                    $('#city').append(new Option(city, city, false, false));
                });
                
                const oldCity = "{{ old('city') }}";
                if (oldCity) {
                    $('#city').val(oldCity).trigger('change');
                }
            }
        });
    </script>
</body>
</html>
