@php
    $marginLeft = $level * 20; // لتحديد مسافة التداخل لكل مستوى
@endphp

<div class="card shadow-sm mb-2 border-0" style="font-size: 13px; margin-left: {{ $marginLeft }}px;">
    <div class="card-body py-2 px-3">
        <div class="d-flex justify-content-between align-items-start">
            <div style="flex:1">

                {{-- Date & Time --}}
                <div class="mb-1">
                    <i class="fas fa-calendar-alt text-secondary me-1"></i>
                    <strong>{{ $visit->date }}</strong>
                    <i class="fas fa-clock text-secondary ms-3 me-1"></i>
                    {{ \Carbon\Carbon::parse($visit->time)->format('H:i') }}
                </div>

                {{-- Diagnosis --}}
                <div class="mb-1">
                    <i class="fas fa-notes-medical text-info me-1"></i>
                    <strong>Diagnosis:</strong>
                    @if($visit->diagnosis)
                        @foreach(optional(json_decode($visit->diagnosis, true) ?? []) as $diag)
                            <span class="badge rounded-pill bg-info text-dark">{{ $diag }}</span>
                        @endforeach
                    @else
                        <span class="text-muted">N/A</span>
                    @endif
                </div>

                {{-- Complain --}}
                <div class="mb-1">
                    <i class="fas fa-comment-medical text-warning me-1"></i>
                    <strong>Complain:</strong>
                    {{ $visit->complain ?? '-' }}
                </div>

                {{-- Prescription --}}
                <div>
                    <i class="fas fa-pills text-success me-1"></i>
                    <strong>Prescription:</strong>
                    @if($visit->prescriptionItems && count($visit->prescriptionItems) > 0)
                        <ul class="list-group list-group-flush ms-3 mt-1">
                            @foreach($visit->prescriptionItems as $item)
                                <li class="list-group-item px-0 py-1">
                                    <strong>{{ $item->drug_name }}</strong>
                                    - {{ $item->qty }} {{ $item->qty_unit }},
                                    for {{ $item->days }} {{ $item->duration_type }}
                                    @if($item->notes)
                                        <br><span class="text-muted small">Note: {{ $item->notes }}</span>
                                    @endif
                                </li>
                            @endforeach
                        </ul>
                    @else
                        <span class="text-muted ms-1">No prescription added.</span>
                    @endif
                </div>
            </div>
        </div>

        {{-- Children recursive rendering --}}
        @if($visit->childrenRecursive && count($visit->childrenRecursive) > 0)
            @foreach($visit->childrenRecursive as $child)
                @include('livewire.partials.visit-tree', ['visit' => $child, 'level' => $level + 1])
            @endforeach
        @endif

    </div>
</div>