Crvi/templates/frontend/intervenant-hub.php

<?php
/**
 * Template Hub Intervenant
 * Affiche le tableau de bord avec les RDV du jour et actions rapides
 * Shortcode: [crvi_intervenant_hub]
 */

if (!defined('ABSPATH')) {
    exit;
}

$user = wp_get_current_user();
$intervenant_nom = trim($user->first_name . ' ' . $user->last_name);
$today = date('d/m/Y');
?>

<div class="crvi-intervenant-hub" id="intervenant-hub-container">
    <div class="container-fluid py-4">
        <!-- En-tête -->
        <div class="row mb-4">
            <div class="col-12">
                <h1 class="h2 mb-2">
                    <!-- <i class="fas fa-home me-2"></i> -->Mon Espace Intervenant
                </h1>
                <p class="text-muted">Bonjour <?php echo esc_html($intervenant_nom); ?></p>
            </div>
        </div>

        <!-- Section RDV du jour -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="card shadow-sm">
                    <div class="card-header bg-primary text-white">
                        <h3 class="h5 mb-0">
                            <i class="fas fa-calendar-day me-2"></i>
                            Mes rendez-vous aujourd'hui (<?php echo esc_html($today); ?>)
                        </h3>
                    </div>
                    <div class="card-body">
                        <div id="rdv-today-container" class="rdv-list">
                            <div class="text-center py-4">
                                <div class="spinner-border text-primary" role="status">
                                    <span class="visually-hidden">Chargement...</span>
                                </div>
                                <p class="mt-2 text-muted">Chargement des rendez-vous...</p>
                            </div>
                        </div>
                        <div id="rdv-today-empty" class="alert alert-info" style="display: none;">
                            <i class="fas fa-info-circle me-2"></i>
                            Aucun rendez-vous prévu pour aujourd'hui.
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Actions rapides -->
        <div class="row mb-4">
            <div class="col-md-6 mb-3">
                <a href="<?php echo esc_url(home_url('/espace-intervenant-agenda')); ?>" class="card card-hover text-decoration-none h-100">
                    <div class="card-body text-center">
                        <i class="fas fa-calendar-alt fa-3x text-primary mb-3"></i>
                        <h4 class="h5">Voir mon agenda complet</h4>
                        <p class="text-muted mb-0">Consulter tous mes rendez-vous</p>
                    </div>
                </a>
            </div>
            <div class="col-md-6 mb-3">
                <a href="<?php echo esc_url(home_url('/espace-intervenant-profil')); ?>" class="card card-hover text-decoration-none h-100">
                    <div class="card-body text-center">
                        <i class="fas fa-user-cog fa-3x text-secondary mb-3"></i>
                        <h4 class="h5">Modifier mes informations</h4>
                        <p class="text-muted mb-0">Gérer mon profil</p>
                    </div>
                </a>
            </div>
        </div>

        <!-- Section Permanences -->
        <div class="row">
            <div class="col-12">
                <div class="card shadow-sm">
                    <div class="card-header bg-light">
                        <h3 class="h5 mb-0">
                            <i class="fas fa-clock me-2"></i>Mes Permanences
                        </h3>
                    </div>
                    <div class="card-body">
                        <p class="text-muted mb-3">Gérez vos créneaux de permanence disponibles.</p>
                        <a href="<?php echo esc_url(home_url('/encodage-permanences')); ?>" class="btn btn-outline-primary">
                            <i class="fas fa-plus me-2"></i>Encoder mes permanences
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Inclusion du modal de détails RDV (si nécessaire) -->
<?php include plugin_dir_path(__FILE__) . 'intervenant-modal-rdv.php'; ?>

<!-- Template pour un RDV (utilisé en JavaScript) -->
<template id="rdv-item-template">
    <div class="rdv-item card mb-3">
        <div class="card-body">
            <div class="row align-items-center">
                <div class="col-md-2">
                    <div class="rdv-time text-center">
                        <strong class="d-block fs-5" data-time-start></strong>
                        <span class="text-muted small" data-time-end></span>
                    </div>
                </div>
                <div class="col-md-3">
                    <p class="mb-1">
                        <i class="fas fa-map-marker-alt text-primary me-2"></i>
                        <strong data-local></strong>
                    </p>
                </div>
                <div class="col-md-4">
                    <p class="mb-1">
                        <i class="fas fa-user text-info me-2"></i>
                        <span data-beneficiaire></span>
                    </p>
                    <p class="mb-0 small text-muted" data-type-intervention></p>
                </div>
                <div class="col-md-3 text-end">
                    <div class="btn-group" role="group">
                        <button type="button" class="btn btn-success btn-sm mark-presence" data-statut="present" data-event-id>
                            <i class="fas fa-check me-1"></i>Présent
                        </button>
                        <button type="button" class="btn btn-danger btn-sm mark-presence" data-statut="absent" data-event-id>
                            <i class="fas fa-times me-1"></i>Absent
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style>
.crvi-intervenant-hub {
    min-height: 60vh;
}

.card-hover {
    transition: transform 0.2s, box-shadow 0.2s;
}

.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.rdv-item {
    border-left: 4px solid #0d6efd;
    transition: all 0.2s;
}

.rdv-item:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.rdv-time strong {
    color: #0d6efd;
}

.btn-group .btn {
    min-width: 100px;
}

@media (max-width: 768px) {
    .rdv-item .row > div {
        margin-bottom: 1rem;
    }
    
    .rdv-item .text-end {
        text-align: left !important;
    }
    
    .btn-group {
        width: 100%;
    }
    
    .btn-group .btn {
        flex: 1;
    }
}
</style>