@extends('dashboard.index')
@section('title', 'Membres')
@section('title2', 'Ajouter')

@section('content')
    <div class="container">
        <div class="card shadow-lg border-0 rounded-4">
            <div class="card-header bg-success text-white rounded-top-4">
                <h4 class="mb-0"><i class="bi bi-person-plus-fill me-2"></i> Ajouter un membre</h4>
            </div>

            <div class="card-body p-4">
                <form action="{{ route('membres.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf

                    <div class="row g-4">

                        {{-- Photo --}}
                        <div class="col-md-12">
                            <label for="image" class="form-label fw-semibold"><i class="bi bi-image me-2"></i>
                                Photo</label>
                            <input type="file" class="form-control" name="image" id="image">
                        </div>

                        {{-- Infos de base --}}
                        <div class="col-md-6">
                            <label for="name" class="form-label fw-semibold">Nom *</label>
                            <input type="text" class="form-control" name="name" id="name"
                                value="{{ old('name') }}" required>
                        </div>

                        <div class="col-md-6">
                            <label for="email" class="form-label fw-semibold">Adresse Email</label>
                            <input type="email" class="form-control" name="email" id="email"
                                value="{{ old('email') }}">
                        </div>

                        <div class="col-md-6">
                            <label for="telephone" class="form-label fw-semibold">Téléphone</label>
                            <input type="text" class="form-control" name="telephone" id="telephone"
                                value="{{ old('telephone') }}">
                        </div>

                        <div class="col-md-6">
                            <label for="adresse" class="form-label fw-semibold">Adresse</label>
                            <input type="text" class="form-control" name="adresse" id="adresse"
                                value="{{ old('adresse') }}">
                        </div>

                        <div class="col-md-6">
                            <label for="organisation" class="form-label fw-semibold">Organisation</label>
                            <input type="text" class="form-control" name="organisation" id="organisation"
                                value="{{ old('organisation') }}">
                        </div>

                        <div class="col-md-6">
                            <label for="fonction" class="form-label fw-semibold">Fonction</label>
                            <input type="text" class="form-control" name="fonction" id="fonction"
                                value="{{ old('fonction') }}">
                        </div>

                        <div class="col-md-12">
                            <div class="card border-0 shadow-sm rounded-4">
                                <div class="card-header bg-light fw-semibold">
                                    <i class="bi bi-globe me-2 text-success"></i> Réseaux sociaux
                                </div>
                                <div class="card-body row g-3">

                                    {{-- Site web --}}
                                    <div class="col-md-12">
                                        <label for="site" class="form-label fw-semibold"><i
                                                class="bi bi-link-45deg me-2"></i> Site web</label>
                                        <input type="url" class="form-control" name="site" id="site"
                                            placeholder="https://example.com" value="{{ old('site') }}">
                                    </div>

                                    {{-- Réseaux sociaux --}}
                                    <div class="col-md-6">
                                        <label class="form-label fw-semibold"><i
                                                class="bi bi-facebook me-2 text-primary"></i> Facebook</label>
                                        <input type="url" class="form-control" name="reseaux[facebook]"
                                            placeholder="https://facebook.com/username"
                                            value="{{ old('reseaux.facebook') }}">
                                    </div>

                                    <div class="col-md-6">
                                        <label class="form-label fw-semibold"><i class="bi bi-twitter-x me-2 text-info"></i>
                                            X (Twitter)</label>
                                        <input type="url" class="form-control" name="reseaux[twitter-x]"
                                            placeholder="https://x.com/username" value="{{ old('reseaux.twitter-x') }}">
                                    </div>

                                    <div class="col-md-6">
                                        <label class="form-label fw-semibold"><i
                                                class="bi bi-linkedin me-2 text-primary"></i> LinkedIn</label>
                                        <input type="url" class="form-control" name="reseaux[linkedin]"
                                            placeholder="https://linkedin.com/in/username"
                                            value="{{ old('reseaux.linkedin') }}">
                                    </div>

                                    <div class="col-md-6">
                                        <label class="form-label fw-semibold"><i
                                                class="bi bi-instagram me-2 text-danger"></i> Instagram</label>
                                        <input type="url" class="form-control" name="reseaux[instagram]"
                                            placeholder="https://instagram.com/username"
                                            value="{{ old('reseaux.instagram') }}">
                                    </div>

                                    <div class="col-md-6">
                                        <label class="form-label fw-semibold"><i
                                                class="bi bi-youtube me-2 text-danger"></i> YouTube</label>
                                        <input type="url" class="form-control" name="reseaux[youtube]"
                                            placeholder="https://youtube.com/channel/username"
                                            value="{{ old('reseaux.youtube') }}">
                                    </div>

                                    <div class="col-md-6">
                                        <label class="form-label fw-semibold"><i class="bi bi-tiktok me-2 text-dark"></i>
                                            TikTok</label>
                                        <input type="url" class="form-control" name="reseaux[tiktok]"
                                            placeholder="https://tiktok.com/@username"
                                            value="{{ old('reseaux.tiktok') }}">
                                    </div>

                                    <div class="col-md-6">
                                        <label class="form-label fw-semibold"><i
                                                class="bi bi-pinterest me-2 text-danger"></i> Pinterest</label>
                                        <input type="url" class="form-control" name="reseaux[pinterest]"
                                            placeholder="https://pinterest.com/username"
                                            value="{{ old('reseaux.pinterest') }}">
                                    </div>

                                    <div class="col-md-6">
                                        <label class="form-label fw-semibold"><i
                                                class="bi bi-telegram me-2 text-info"></i> Telegram</label>
                                        <input type="url" class="form-control" name="reseaux[telegram]"
                                            placeholder="https://t.me/username" value="{{ old('reseaux.telegram') }}">
                                    </div>

                                </div>
                            </div>
                        </div>

                        @super
                            {{-- Statut --}}
                            <div class="col-md-6">
                                <label for="statut" class="form-label fw-semibold">Statut</label>
                                <select class="form-select" name="statut" id="statut">
                                    <option value="">Choisir</option>
                                    <option value="actif" {{ old('statut') == 'actif' ? 'selected' : '' }}>✅ Activé</option>
                                    <option value="inactif" {{ old('statut') == 'inactif' ? 'selected' : '' }}>❌ Désactivé
                                    </option>
                                </select>
                            </div>
                        @endsuper
                        {{-- Description --}}
                        <div class="col-md-12">
                            <label for="description" class="form-label fw-semibold">Description</label>
                            <textarea class="form-control" rows="3" name="description" id="description">{{ old('description') }}</textarea>
                        </div>
                    </div>

                    <div class="text-end mt-4">
                        <a href="{{ route('membres.index') }}" class="btn btn-outline-secondary me-2">
                            <i class="bi bi-arrow-left"></i> Annuler
                        </a>
                        <button type="submit" class="btn btn-success px-4">
                            <i class="bi bi-plus-circle me-1"></i> Créer
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection