@extends('admin.layout')

@section('title', 'Nouvelle configuration SMTP')

@section('content')
<div class="row">
    <div class="col-12">
        <!-- En-tête -->
        <div class="d-flex justify-content-between align-items-center mb-4">
            <div>
                <h1 class="h3 mb-1" style="font-weight: 400;">
                    <i class="bi bi-plus-circle text-primary me-2"></i>
                    Nouvelle Configuration SMTP
                </h1>
                <p class="text-muted mb-0" style="font-size: 0.9rem;">Configurez un nouveau serveur SMTP pour l'envoi d'emails</p>
            </div>
            <a href="{{ route('admin.smtp.index') }}" class="btn btn-outline-secondary btn-sm" style="font-weight: 300;">
                <i class="bi bi-arrow-left me-2"></i>
                Retour
            </a>
        </div>

        @if($errors->any())
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <i class="bi bi-exclamation-circle me-2"></i>
                <ul class="mb-0">
                    @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                    @endforeach
                </ul>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        <form action="{{ route('admin.smtp.store') }}" method="POST">
            @csrf
            
            <div class="row justify-content-center">
                <div class="col-12">
                    <div class="card border-0 shadow mb-4" style="border-radius: 12px;">
                        <div class="card-header border-0 bg-white pt-4 pb-3">
                            <h5 class="mb-0" style="font-weight: 400;">
                                <i class="bi bi-info-circle text-primary me-2"></i>
                                Configuration du Serveur SMTP
                            </h5>
                        </div>
                        <div class="card-body p-4">
                            <div class="row">
                                <!-- Colonne 1 : Informations générales -->
                                <div class="col-md-4">
                                    <div class="mb-4">
                                        <label for="name" class="form-label mb-2" style="font-weight: 400;">
                                            Nom de la configuration <span class="text-danger">*</span>
                                        </label>
                                        <input type="text" 
                                               class="form-control @error('name') is-invalid @enderror" 
                                               id="name" 
                                               name="name" 
                                               value="{{ old('name') }}" 
                                               placeholder="Ex: Gmail, Outlook, etc."
                                               required>
                                        @error('name')
                                            <div class="text-danger mt-2" style="font-size: 0.875rem;">{{ $message }}</div>
                                        @enderror
                                        <small class="text-muted" style="font-size: 0.85rem;">Un nom pour identifier cette configuration</small>
                                    </div>

                                    <div class="mb-4">
                                        <label for="host" class="form-label mb-2" style="font-weight: 400;">
                                            Serveur SMTP (Host) <span class="text-danger">*</span>
                                        </label>
                                        <input type="text" 
                                               class="form-control @error('host') is-invalid @enderror" 
                                               id="host" 
                                               name="host" 
                                               value="{{ old('host') }}" 
                                               placeholder="smtp.example.com"
                                               required>
                                        @error('host')
                                            <div class="text-danger mt-2" style="font-size: 0.875rem;">{{ $message }}</div>
                                        @enderror
                                        <small class="text-muted" style="font-size: 0.85rem;">Adresse du serveur SMTP</small>
                                    </div>

                                    <div class="mb-4">
                                        <label for="port" class="form-label mb-2" style="font-weight: 400;">
                                            Port SMTP <span class="text-danger">*</span>
                                        </label>
                                        <input type="number" 
                                               class="form-control @error('port') is-invalid @enderror" 
                                               id="port" 
                                               name="port" 
                                               value="{{ old('port', '587') }}" 
                                               required>
                                        @error('port')
                                            <div class="text-danger mt-2" style="font-size: 0.875rem;">{{ $message }}</div>
                                        @enderror
                                        <small class="text-muted" style="font-size: 0.85rem;">Ports courants : 587 (TLS), 465 (SSL), 25</small>
                                    </div>

                                    <div class="mb-3">
                                        <label for="encryption" class="form-label mb-2" style="font-weight: 400;">
                                            Chiffrement <span class="text-danger">*</span>
                                        </label>
                                        <select class="form-select @error('encryption') is-invalid @enderror" 
                                                id="encryption" 
                                                name="encryption" 
                                                required>
                                            <option value="tls" {{ old('encryption') == 'tls' ? 'selected' : '' }}>TLS</option>
                                            <option value="ssl" {{ old('encryption') == 'ssl' ? 'selected' : '' }}>SSL</option>
                                            <option value="none" {{ old('encryption') == 'none' ? 'selected' : '' }}>Aucun</option>
                                        </select>
                                        @error('encryption')
                                            <div class="text-danger mt-2" style="font-size: 0.875rem;">{{ $message }}</div>
                                        @enderror
                                        <small class="text-muted" style="font-size: 0.85rem;">Type de chiffrement utilisé</small>
                                    </div>
                                </div>

                                <!-- Colonne 2 : Authentification -->
                                <div class="col-md-4">
                                    <div class="mb-4">
                                        <label for="username" class="form-label mb-2" style="font-weight: 400;">
                                            Nom d'utilisateur <span class="text-danger">*</span>
                                        </label>
                                        <input type="text" 
                                               class="form-control @error('username') is-invalid @enderror" 
                                               id="username" 
                                               name="username" 
                                               value="{{ old('username') }}" 
                                               placeholder="votre.email@example.com"
                                               required>
                                        @error('username')
                                            <div class="text-danger mt-2" style="font-size: 0.875rem;">{{ $message }}</div>
                                        @enderror
                                        <small class="text-muted" style="font-size: 0.85rem;">Identifiant pour l'authentification SMTP</small>
                                    </div>

                                    <div class="mb-4">
                                        <label for="password" class="form-label mb-2" style="font-weight: 400;">
                                            Mot de passe <span class="text-danger">*</span>
                                        </label>
                                        <input type="password" 
                                               class="form-control @error('password') is-invalid @enderror" 
                                               id="password" 
                                               name="password" 
                                               required>
                                        @error('password')
                                            <div class="text-danger mt-2" style="font-size: 0.875rem;">{{ $message }}</div>
                                        @enderror
                                        <small class="text-muted" style="font-size: 0.85rem;">Mot de passe pour l'authentification SMTP</small>
                                    </div>

                                    <div class="mb-4">
                                        <label for="from_address" class="form-label mb-2" style="font-weight: 400;">
                                            Adresse email expéditeur <span class="text-danger">*</span>
                                        </label>
                                        <input type="email" 
                                               class="form-control @error('from_address') is-invalid @enderror" 
                                               id="from_address" 
                                               name="from_address" 
                                               value="{{ old('from_address') }}" 
                                               placeholder="expediteur@example.com"
                                               required>
                                        @error('from_address')
                                            <div class="text-danger mt-2" style="font-size: 0.875rem;">{{ $message }}</div>
                                        @enderror
                                        <small class="text-muted" style="font-size: 0.85rem;">Adresse email qui apparaîtra comme expéditeur</small>
                                    </div>

                                    <div class="mb-3">
                                        <label for="from_name" class="form-label mb-2" style="font-weight: 400;">
                                            Nom de l'expéditeur <span class="text-danger">*</span>
                                        </label>
                                        <input type="text" 
                                               class="form-control @error('from_name') is-invalid @enderror" 
                                               id="from_name" 
                                               name="from_name" 
                                               value="{{ old('from_name') }}" 
                                               placeholder="Ex: Votre Société"
                                               required>
                                        @error('from_name')
                                            <div class="text-danger mt-2" style="font-size: 0.875rem;">{{ $message }}</div>
                                        @enderror
                                        <small class="text-muted" style="font-size: 0.85rem;">Nom qui apparaîtra comme expéditeur</small>
                                    </div>
                                </div>

                                <!-- Colonne 3 : Options et aide -->
                                <div class="col-md-4">
                                    <div class="mb-4">
                                        <label class="form-label mb-2" style="font-weight: 400;">Options</label>
                                        <div class="card bg-light border-0" style="border-radius: 8px;">
                                            <div class="card-body p-3">
                                                <div class="form-check">
                                                    <input type="checkbox" 
                                                           class="form-check-input" 
                                                           id="activate" 
                                                           name="activate" 
                                                           value="1"
                                                           {{ old('activate') ? 'checked' : '' }}>
                                                    <label class="form-check-label" for="activate" style="font-weight: 300; font-size: 0.9rem;">
                                                        Activer cette configuration immédiatement
                                                    </label>
                                                </div>
                                                <small class="text-muted d-block mt-2" style="font-size: 0.8rem;">
                                                    Si coché, cette configuration sera automatiquement activée après création
                                                </small>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="card bg-info bg-opacity-10 border-0" style="border-radius: 8px;">
                                        <div class="card-body p-3">
                                            <h6 class="mb-2" style="font-weight: 400; font-size: 0.95rem;">
                                                <i class="bi bi-info-circle me-2"></i>Informations
                                            </h6>
                                            <p class="mb-2" style="font-size: 0.85rem; font-weight: 300;">
                                                <strong>Gmail :</strong><br>
                                                Host: smtp.gmail.com<br>
                                                Port: 587 (TLS) ou 465 (SSL)
                                            </p>
                                            <p class="mb-2" style="font-size: 0.85rem; font-weight: 300;">
                                                <strong>Outlook :</strong><br>
                                                Host: smtp-mail.outlook.com<br>
                                                Port: 587 (TLS)
                                            </p>
                                            <p class="mb-0" style="font-size: 0.85rem; font-weight: 300;">
                                                <strong>Autres :</strong><br>
                                                Consultez la documentation de votre fournisseur
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row justify-content-center">
                <div class="col-12">
                    <div class="d-flex justify-content-end gap-2">
                        <a href="{{ route('admin.smtp.index') }}" class="btn btn-outline-secondary btn-sm" style="font-weight: 300;">
                            <i class="bi bi-x-circle me-2"></i> Annuler
                        </a>
                        <button type="submit" class="btn btn-primary btn-sm" style="font-weight: 300;">
                            <i class="bi bi-check-circle me-2"></i>
                            Créer la Configuration
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection