@extends('layouts.base')

@section('content')
    @section('breadcrumb')
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item"><a href="{{ route('front.index') }}">Tableau de bord</a></li>
                <li class="breadcrumb-item"><a href="{{ route('partner.applications') }}">Applications</a></li>
                <li class="breadcrumb-item active" aria-current="page">{{ $application->name }} - Paramètres d'affichage</li>
            </ol>
        </nav>
    @endsection

    <div class="container py-3">
        <!-- Header Section -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="card shadow-sm border-warning">
                    <div class="card-body text-center py-4">
                        <i class="fas fa-palette fa-3x text-warning mb-3"></i>
                        <h1 class="h3 mb-2 text-warning">Paramètres d'affichage</h1>
                        <p class="text-muted mb-1"><strong>{{ $application->name }}</strong></p>
                        <p class="text-muted mb-0">Personnalisez l'apparence et le comportement de votre application</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Back Button -->
        <div class="row mb-3">
            <div class="col-12">
                <a href="{{ route('partner.applications') }}" class="btn btn-outline-secondary">
                    <i class="fas fa-arrow-left me-2"></i>Retour aux applications
                </a>
            </div>
        </div>

        @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <i class="fas fa-check-circle me-2"></i>{{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif

        @if(session('error'))
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <i class="fas fa-exclamation-circle me-2"></i>{{ session('error') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif

        <!-- Display Parameters Blocks -->
        <div class="row g-4">
            <!-- Paramètres des Carousels -->
            <div class="col-lg-6">
                <div class="card h-100 shadow-sm border-0 hover-card" style="cursor: pointer; transition: transform 0.2s, box-shadow 0.2s;">
                    <div class="card-body text-center py-5">
                        <div class="mb-4">
                            <div class="display-icon bg-primary bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center" style="width: 100px; height: 100px;">
                                <i class="fas fa-images fa-3x text-light"></i>
                            </div>
                        </div>
                        <h4 class="card-title mb-3 text-primary">Paramètres des carousels</h4>
                        <p class="text-muted mb-4">
                            Configurez l'affichage des carrousels d'images sur votre application : vitesse de défilement, transitions, nombre d'images affichées...
                        </p>
                        <div class="d-flex justify-content-center gap-2 flex-wrap">
                            <a href="{{ route('partner.application.carousels.index', $application) }}" class="btn btn-success text-white btn-sm w-100 shadow-sm">
                                <i class="fas fa-images me-2"></i>
                                <span class="fw-semibold">Liste des carousels</span>
                                <i class="fas fa-arrow-right ms-2"></i>
                            </a>
                            <span class="badge bg-primary bg-opacity-10 text-light border border-primary">
                                <i class="fas fa-clock me-1"></i>Durée d'affichage
                            </span>
                            <span class="badge bg-primary bg-opacity-10 text-light border border-primary">
                                <i class="fas fa-sync-alt me-1"></i>Auto-play
                            </span>
                            <span class="badge bg-primary bg-opacity-10 text-light border border-primary">
                                <i class="fas fa-arrows-alt-h me-1"></i>Transitions
                            </span>
                        </div>
                        <div class="mt-4">
                            <span class="badge bg-secondary">
                                <i class="fas fa-info-circle me-1"></i>Prochainement disponible
                            </span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Gestion du Thème -->
            <div class="col-lg-6">
                <a href="{{ route('partner.application.themes.index', $application) }}" class="text-decoration-none">
                    <div class="card h-100 shadow-sm border-0 hover-card" style="cursor: pointer; transition: transform 0.2s, box-shadow 0.2s;">
                        <div class="card-body text-center py-5">
                            <div class="mb-4">
                                <div class="display-icon bg-success bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center" style="width: 100px; height: 100px;">
                                    <i class="fas fa-paint-brush fa-3x text-success"></i>
                                </div>
                            </div>
                            <h4 class="card-title mb-3 text-success">Gestion du thème</h4>
                            <p class="text-muted mb-4">
                                Personnalisez les couleurs de votre application pour qu'elle corresponde à votre identité visuelle.
                            </p>
                            <div class="d-flex justify-content-center gap-2 flex-wrap">
                                <span class="badge bg-success bg-opacity-10 text-success border border-success">
                                    <i class="fas fa-palette me-1"></i>Couleur primaire
                                </span>
                            </div>
                            <div class="mt-4">
                                <span class="badge bg-success">
                                    <i class="fas fa-arrow-right me-1"></i>Accéder à la gestion
                                </span>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
        </div>

        <!-- Info Section -->
        <div class="row mt-4">
            <div class="col-12">
                <div class="alert alert-info">
                    <div class="d-flex align-items-center">
                        <i class="fas fa-info-circle fa-2x me-3"></i>
                        <div>
                            <h6 class="alert-heading mb-1">À propos des paramètres d'affichage</h6>
                            <p class="mb-0">
                                Ces paramètres vous permettront de personnaliser l'apparence et le comportement de votre application.
                                Les fonctionnalités seront progressivement déployées.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection