@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 active" aria-current="page">Partage des données</li>
            </ol>
        </nav>
    @endsection

    <div class="container-fluid py-3">
        <!-- Header Section -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="card shadow-sm border-primary">
                    <div class="card-body text-center py-4">
                        <i class="fas fa-share-nodes fa-3x text-primary mb-3"></i>
                        <h1 class="h3 mb-2 text-primary">Partage des données</h1>
                        <p class="text-muted mb-0">Gérez le partage de données entre applications et programmes</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Content Section -->
        <div class="row">
            <!-- Partage entre applications (Octave) -->
            <div class="col-md-6 mb-4">
                <div class="card shadow-sm h-100">
                    <div class="card-header bg-primary">
                        <h5 class="mb-0">
                            <i class="fas fa-building me-2"></i>Autorisations de partage (interne Octave)
                        </h5>
                    </div>
                    <div class="card-body">
                        <p class="text-muted mb-4">
                            Gérez les autorisations de partage de programmes entre vos applications Octave pour une meilleure visibilité.
                        </p>
                        
                        <div class="d-grid gap-2">
                            <a class="btn btn-outline-primary btn-lg" href="{{ route('admin.datas-sharing.applications.list') }}">
                                <i class="fas fa-share-alt me-2"></i>Gérer les partages entre applications
                            </a>
                        </div>
                        
                        <hr class="my-4">
                        
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <small class="text-muted fw-bold">Statistiques</small>
                        </div>
                        <ul class="list-unstyled mb-0">
                            <li class="d-flex justify-content-between align-items-center mb-2">
                                <span><i class="fas fa-building text-primary me-2"></i>Programmes partagés</span>
                                <span class="badge bg-primary">0</span>
                            </li>
                            <li class="d-flex justify-content-between align-items-center mb-2">
                                <span><i class="fas fa-link text-success me-2"></i>Partages actifs</span>
                                <span class="badge bg-success">0</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- Partage de programmes externes (Endpoint JSON) -->
            <div class="col-md-6 mb-4">
                <div class="card shadow-sm h-100">
                    <div class="card-header bg-success">
                        <h5 class="mb-0">
                            <i class="fas fa-cloud-arrow-up me-2"></i>Partage vers l'extérieur (endpoints JSON)
                        </h5>
                    </div>
                    <div class="card-body">
                        <p class="text-muted mb-3">
                            Exposez vos programmes via un endpoint JSON pour les partager à l'extérieur (portails, partenaires, sites tiers).
                        </p>

                        <div class="d-grid gap-2 mb-3">
                            <a class="btn btn-outline-success btn-lg" href="{{ route('developer.endpoints') }}">
                                <i class="fas fa-sitemap me-2"></i>Voir les endpoints disponibles
                            </a>
                        </div>

                        <div class="alert alert-secondary">
                            <div class="d-flex align-items-center">
                                <i class="fas fa-link me-2"></i>
                                <div>
                                    <div class="fw-bold">Exemple d'endpoint</div>
                                    <code class="small">GET /developer/api/programs/{application}</code>
                                </div>
                            </div>
                        </div>

                        <hr class="my-4">

                        <div class="alert alert-success mb-0">
                            <i class="fas fa-info-circle me-2"></i>
                            <small>Le JSON inclut les métadonnées (labels, icônes, couleurs) et gère l'Unicode (accents) correctement.</small>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Export de données partagées -->
            <div class="col-md-6 mb-4">
                <div class="card shadow-sm h-100">
                    <div class="card-header bg-info">
                        <h5 class="mb-0">
                            <i class="fas fa-file-export me-2"></i>Export de données partagées
                        </h5>
                    </div>
                    <div class="card-body">
                        <p class="text-muted mb-4">
                            Exportez les données partagées vers d'autres plateformes ou systèmes externes.
                        </p>
                        
                        <div class="d-grid gap-2">
                            <button class="btn btn-outline-info btn-lg" disabled>
                                <i class="fas fa-download me-2"></i>Exporter les données
                            </button>
                        </div>
                        
                        <hr class="my-4">
                        
                        <div class="alert alert-info mb-0">
                            <i class="fas fa-info-circle me-2"></i>
                            <small>Formats disponibles : JSON, CSV, XML</small>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Configuration des partages -->
            <div class="col-md-6 mb-4">
                <div class="card shadow-sm h-100">
                    <div class="card-header bg-warning text-dark">
                        <h5 class="mb-0">
                            <i class="fas fa-cog me-2"></i>Configuration des partages
                        </h5>
                    </div>
                    <div class="card-body">
                        <p class="text-muted mb-4">
                            Configurez les règles et permissions de partage de données entre applications.
                        </p>
                        
                        <div class="d-grid gap-2">
                            <button class="btn btn-outline-warning btn-lg" disabled>
                                <i class="fas fa-sliders-h me-2"></i>Configurer
                            </button>
                        </div>
                        
                        <hr class="my-4">
                        
                        <div class="alert alert-warning mb-0">
                            <i class="fas fa-shield-alt me-2"></i>
                            <small>Gérez les permissions et les restrictions d'accès</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Logs et Activités récentes -->
        <div class="row">
            <div class="col-12">
                <div class="card shadow-sm">
                    <div class="card-header bg-light">
                        <h5 class="mb-0">
                            <i class="fas fa-history me-2"></i>Activités récentes de partage
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="alert alert-secondary text-center mb-0">
                            <i class="fas fa-info-circle me-2"></i>Aucune activité de partage récente
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection