@extends('dashboard.index')
@section('title', 'Paramètres du site')

@section('content')
    <div class="container">
        <h3 class="mb-4">Paramètres du site</h3>

        <!-- Onglets -->
        <ul class="nav nav-tabs nav-fill mb-4" id="settingsTabs" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="logo-tab" data-bs-toggle="tab" data-bs-target="#logo" type="button"
                    role="tab" aria-controls="logo" aria-selected="true">
                    <i class="bi bi-image me-1"></i> Logo
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="infos-tab" data-bs-toggle="tab" data-bs-target="#infos" type="button"
                    role="tab" aria-controls="infos" aria-selected="false">
                    <i class="bi bi-info-circle me-1"></i> Informations
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="social-tab" data-bs-toggle="tab" data-bs-target="#social" type="button"
                    role="tab" aria-controls="social" aria-selected="false">
                    <i class="bi bi-share me-1"></i> Réseaux sociaux
                </button>
            </li>
        </ul>

        <!-- Contenu des onglets -->
        <div class="tab-content" id="settingsTabsContent">
            <!-- Onglet Logo -->
            <div class="tab-pane fade show active" id="logo" role="tabpanel" aria-labelledby="logo-tab">
                <div class="card shadow-sm">
                    <div class="card-body">
                        <h5 class="card-title">Logo de l'application</h5>
                        <p class="text-muted">Téléchargez ou mettez à jour le logo de votre site.</p>
                        <form action="{{ route('settings.update') }}" method="GET" enctype="multipart/form-data">
                            @csrf
                            <input type="file" name="logo" accept="image/*" class="form-control">
                            <button type="submit" class="btn btn-primary btn-sm mt-3">Mettre à jour</button>
                        </form>
                    </div>
                </div>
            </div>

            <!-- Onglet Informations -->
            <div class="tab-pane fade" id="infos" role="tabpanel" aria-labelledby="infos-tab">
                <div class="card shadow-sm">
                    <div class="card-body">
                        <h5 class="card-title">Informations de contact</h5>
                        <form action="{{ route('settings.update') }}" method="GET">
                            <div class="mb-3">
                                <label class="form-label">Adresse</label>
                                <input type="text" class="form-control" name="adresse" value="{{ settings('adresse') }}">
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Email</label>
                                <input type="text" class="form-control" name="email" value="{{ settings('email') }}">
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Téléphone</label>
                                <input type="text" class="form-control" name="telephone"
                                    value="{{ settings('telephone') }}">
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Description</label>
                                <textarea class="form-control" name="description" rows="5">{{ settings('description') }}</textarea>
                            </div>
                            <button class="btn btn-primary btn-sm" type="submit">Enregistrer</button>
                        </form>
                    </div>
                </div>
            </div>

            <!-- Onglet Réseaux sociaux -->
            <div class="tab-pane fade" id="social" role="tabpanel" aria-labelledby="social-tab">
                <div class="card shadow-sm">
                    <div class="card-body">
                        <h5 class="card-title">Liens vers les réseaux sociaux</h5>
                        <form action="{{ route('settings.update') }}" method="GET">
                            @foreach ($socials as $key => $label)
                                <div class="input-group mb-3">
                                    <span class="input-group-text" id="{{ $key }}">
                                        <i class="bi bi-{{ $key }}"></i>
                                    </span>
                                    <input type="url" class="form-control" name="{{ $key }}"
                                        value="{{ settings($key) }}" placeholder="{{ $label }}">
                                </div>
                            @endforeach
                            <button class="btn btn-primary btn-sm" type="submit">Enregistrer</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection