@if(!$histories->isEmpty())
    <div class="card shadow mb-4">
        <div class="card-header">
            <h5 class="mb-0 d-flex justify-content-between align-items-center" data-toggle="collapse"
                data-target="#historyCollapse" aria-expanded="false" aria-controls="historyCollapse"
                style="cursor: pointer;">
                Historique des changements
                <span class="ml-2"><i class="fas fa-chevron-down"></i></span>
            </h5>
        </div>

        <!-- Collapsible section -->
        <div id="historyCollapse" class="collapse">
            <div class="card-body">
                <table class="table table-bordered table-striped">
                    <thead>
                    <tr>
                        <th>Créé le</th>
                        <th>Créé par</th>
                        <th>Changements</th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach($histories as $history)
                        <tr>
                            <td>{{ $history->edited_at ? $carbon::create($history->edited_at)->format('d-m-Y H:i:s') : 'N/A' }}</td>
                            <td>{{ $history->created_by ?? $history->edited_by }}</td>
                            <td>
                                <button class="btn btn-sm btn-info" data-toggle="modal"
                                        data-target="#changesModal-{{ $history->id }}">
                                    Voir les changements
                                </button>

                                <!-- Modal pour les changements -->
                                <div class="modal fade" id="changesModal-{{ $history->id }}" tabindex="-1"
                                     aria-labelledby="changesModalLabel" aria-hidden="true">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="changesModalLabel">Changements pour
                                                    la réservation #{{ $reservation->reservation_id }}</h5>
                                                <button type="button" class="close" data-dismiss="modal"
                                                        aria-label="Fermer">
                                                    <span aria-hidden="true">&times;</span>
                                                </button>
                                            </div>
                                            <div class="modal-body">
                                                <pre>{{ json_encode(json_decode($history->changes), JSON_PRETTY_PRINT) }}</pre>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-secondary"
                                                        data-dismiss="modal">Fermer
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endif