@extends('admin.admin_dashboard')
@section('admin')

@php
<<<<<<< HEAD
    $recent        = $child->childUpdates->first();
    $childrenCount = $recent?->num_children ?? 0;
    $adultCount    = $recent?->num_adults   ?? 0;
@endphp

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

<div class="page-content bg-light pt-4 pb-5">
  <div class="container-fluid">

    {{-- Breadcrumb --}}
    <nav aria-label="breadcrumb" class="mb-4">
      <ol class="breadcrumb bg-white rounded shadow-sm p-3">
        <li class="breadcrumb-item">
          <a href="{{ route('admin.dashboard') }}">
            <i class="bx bx-home-alt"></i> Dashboard
          </a>
        </li>
        <li class="breadcrumb-item">
          <a href="{{ route('all.children') }}">All Children</a>
        </li>
        <li class="breadcrumb-item active" aria-current="page">Child Profile</li>
      </ol>
    </nav>

    <div class="row g-4">
      {{-- Profile Card --}}
      <div class="col-12 col-md-6 col-lg-4">
        <div class="card shadow-sm border-0 h-100 overflow-hidden">
          <div class="position-relative">
            <img
              src="{{ $child->photo ? url('upload/cfdp_child/'.$child->photo) : asset('upload/no_image.jpg') }}"
              class="img-fluid w-100"
              alt="Child Photo"
            >
            <span class="badge bg-primary position-absolute bottom-0 start-0 m-2 px-2 fs-6">
              {{ \Carbon\Carbon::parse($child->dob)->age }} yrs
            </span>
            <span class="badge position-absolute bottom-0 end-0 m-2 px-3
              {{ $child->status==='Sponsored'?'bg-success':($child->status==='Graduated'?'bg-warning text-dark':'bg-danger') }}">
              {{ $child->status }}
            </span>
          </div>
          <div class="card-body text-center">
            <h5 class="fw-bold">{{ $child->child_fname }} {{ $child->child_lname }}</h5>
            <div class="small text-muted">ID #{{ $child->child_number }}</div>
            @isset($child->cluster)
              <div class="small text-muted">
                Cluster: {{ $child->cluster->cluster_name }} ({{ $child->cluster->code }})
              </div>
            @endisset
          </div>
        </div>
      </div>

      {{-- Tabs Section --}}
      <div class="col-lg-8">
        <div class="card shadow-lg border-0 h-100">
          <div class="card-body">
            {{-- Nav Pills --}}
            <ul class="nav nav-pills nav-justified mb-4" role="tablist">
              <li class="nav-item">
                <button class="nav-link active" data-bs-toggle="pill" data-bs-target="#tab-background">
                  <i class="bx bx-user-check me-1"></i> Background
                </button>
              </li>
              <li class="nav-item">
                <button class="nav-link" data-bs-toggle="pill" data-bs-target="#tab-sponsorship">
                  <i class="bx bx-heart me-1"></i> Sponsorship
                </button>
              </li>
              <li class="nav-item">
                <button class="nav-link" data-bs-toggle="pill" data-bs-target="#tab-progress">
                  <i class="bx bx-bar-chart-alt-2 me-1"></i> Progress
                </button>
              </li>
              <li class="nav-item">
                <button class="nav-link" data-bs-toggle="pill" data-bs-target="#tab-gallery">
                  <i class="bx bx-image me-1"></i> Photos
                </button>
              </li>
            </ul>

            {{-- Tab Content --}}
            <div class="tab-content">
{{-- Background --}}
<div class="tab-pane fade show active" id="tab-background">
  <div class="row g-1">  {{-- tighten gutters --}}
    <div class="col-md-6">
      <label class="form-label text-secondary">Date of Birth</label>
      @php $dob = \Carbon\Carbon::parse($child->dob); @endphp
      <p class="fw-semibold mb-1"> {{-- mb-1 instead of default mb-3 --}}
        {!! $dob->format('j') !!}<sup>{{ $dob->format('S') }}</sup> {{ $dob->format('M, Y') }}
      </p>
    </div>
    <div class="col-md-6">
      <label class="form-label text-secondary">Hobby</label>
      <p class="fw-semibold mb-1">{{ $recent?->hobby ?: 'No child hobby record' }}</p>
    </div>
    <div class="col-md-6">
      <label class="form-label text-secondary">Dream</label>
      <p class="fw-semibold mb-1">{{ $recent?->dream ?: 'No child dream record' }}</p>
    </div>
    <div class="col-md-6">
      <label class="form-label text-secondary">Gender</label>
      <p class="fw-semibold mb-1">{{ ucfirst($child->sex) }}</p>
    </div>
    <div class="col-md-6">
      <label class="form-label text-secondary">Village</label>
      <p class="fw-semibold mb-1">{{ $recent?->village ?? $child->child_village ?? 'No village record' }}</p>
    </div>
    <div class="col-md-6">
      <label class="form-label text-secondary">School</label>
      <p class="fw-semibold mb-1">{{ $recent?->school?->school_name ?? 'No school record' }}</p>
    </div>
    <div class="col-md-6">
      <label class="form-label text-secondary">Class</label>
      <p class="fw-semibold mb-1">{{ optional($recent)->class ?? 'No class record' }}</p>
    </div>
    <div class="col-md-6">
      <label class="form-label text-secondary">Pastor</label>
      <p class="fw-semibold mb-1">
        {{ $child->cluster->pastors
            ->map(fn($p)=> "{$p->title} {$p->first_name} {$p->last_name}" .
              (Auth::user()->can('pastor_contact.view')?" (+{$p->contact})":'') .
              " - {$p->position}"
            )->join(', ') }}
      </p>
    </div>
    <div class="col-md-6">
      <label class="form-label text-secondary">Church</label>
      @foreach($child->cluster->pastors as $p)
        <p class="fw-semibold mb-1">{{ $p->church->church_name ?? 'No church' }}</p>
      @endforeach
    </div>
    <div class="col-md-12">
      <label class="form-label text-secondary">Guardian</label>
      <p class="fw-semibold mb-1">
        {{ optional($child->guardianModel)->guardian ?? '—' }}:{{ $child->guardian_name }}
        @if(Auth::user()->can('guardian_contact.view')) (+{{ $child->guardian_contact }}) @endif
      </p>
    </div>
    <div class="col-md-6">
      <label class="form-label text-secondary">Mother</label>
      <p class="fw-semibold mb-1">{{ $child->mother_name }} ({{ $child->mother_status }})</p>
    </div>
    <div class="col-md-6">
      <label class="form-label text-secondary">Father</label>
      <p class="fw-semibold mb-1">{{ $child->father_name }} ({{ $child->father_status }})</p>
    </div>
    <div class="col-md-6">
      <label class="form-label text-secondary">Number of people in the family</label>
      <p class="fw-semibold mb-1">
        @if($childrenCount||$adultCount)
          {{ $childrenCount }} {{ \Illuminate\Support\Str::plural('child',$childrenCount) }}
          {{ $adultCount }} {{ \Illuminate\Support\Str::plural('adult',$adultCount) }}
        @else
          No record
        @endif
      </p>
    </div>
    <div class="col-md-6">
      <label class="form-label text-secondary">Family's house is</label>
      <p class="fw-semibold mb-1">
        {{ $recent?->house_type ? ucfirst(str_replace('_',' ',$recent->house_type)) : 'No record' }}
      </p>
    </div>
    <div class="col-md-6">
      <label class="form-label text-secondary">Family Received Coffee</label>
      <p class="fw-semibold mb-1">{{ $recent?->received_coffee ? ucfirst($recent->received_coffee) : 'No record' }}</p>
    </div>
    <div class="col-md-6">
      <label class="form-label text-secondary">Approximate number of coffee plants</label>
      <p class="fw-semibold mb-1">{{ $recent?->coffee_plants_count ?? 'No record' }}</p>
    </div>
    <div class="col-md-6">
      <label class="form-label text-secondary">Is the family harvesting coffee yet?</label>
      <p class="fw-semibold mb-1">
        @if(is_null($recent?->harvesting_coffee))
          No record
        @elseif($recent->harvesting_coffee==='yes')
          Yes
        @else
          No ({{ ucfirst(str_replace('_',' ',$recent->harvest_no_reason)) }}
          @if($recent->harvest_no_reason==='other')– {{ $recent->harvest_other_reason }}@endif)
        @endif
      </p>
    </div>
    <div class="col-md-6">
      <label class="form-label text-secondary">Remarks about the coffee garden</label>
      <p class="fw-semibold mb-1">{{ $recent?->social_worker_remarks ?: 'No record' }}</p>
    </div>
  </div>
</div>


              {{-- Sponsorship --}}
              <div class="tab-pane fade" id="tab-sponsorship">
                <div class="mb-4">
                  <label class="form-label text-secondary">Current Sponsor</label>
                  <p class="fw-semibold">{{ $child->sponsor ? $child->sponsor->sponsor_fname.' '.$child->sponsor->sponsor_lname : '—' }}</p>
                  <small class="text-muted">Sponsor No: {{ optional($child->sponsor)->sponsor_number ?: '—' }}</small>
                </div>
                @if($child->sponsorship)
                  @php
                    $fmt   = fn($d)=> $d ? $d->format('j').'<sup>'.$d->format('S').'</sup> '.$d->format('M, Y') : '—';
                    $start = $child->sponsorship->start_date ? \Carbon\Carbon::parse($child->sponsorship->start_date) : null;
                    $mid   = $child->sponsorship->mid_term_date ? \Carbon\Carbon::parse($child->sponsorship->mid_term_date) : null;
                    $grad  = $child->sponsorship->graduation_date ? \Carbon\Carbon::parse($child->sponsorship->graduation_date) : null;
                  @endphp
                  <div class="row text-center g-3">
                    <div class="col"><div class="p-3 bg-white rounded shadow-sm"><strong>Start</strong><div>{!! $fmt($start) !!}</div></div></div>
                    <div class="col"><div class="p-3 bg-white rounded shadow-sm"><strong>Mid</strong><div>{!! $fmt($mid) !!}</div></div></div>
                    <div class="col"><div class="p-3 bg-white rounded shadow-sm"><strong>Graduation</strong><div>{!! $fmt($grad) !!}</div></div></div>
                  </div>
                @else
                  <p class="text-muted">No sponsorship data available.</p>
                @endif
              </div>

              {{-- Progress --}}
              <div class="tab-pane fade" id="tab-progress">
                @php
                  $activities = $child->cStatusLogs->map(fn($l)=>['type'=>'status','item'=>$l])
                                  ->concat($child->childUpdates->map(fn($u)=>['type'=>'update','item'=>$u]))
                                  ->sortByDesc(fn($a)=>$a['item']->created_at->timestamp)->values();
                @endphp
                @if($activities->isEmpty())
                  <p class="text-muted">No progress updates yet.</p>
                @else
                  <div class="overflow-auto p-3 bg-light" style="max-height:600px;">
                    @foreach($activities as $act)
                      @if($act['type']=='status')
                        @php $log=$act['item']; @endphp
                        <div class="card mb-3 shadow-sm">
                          <div class="card-header bg-primary text-white d-flex justify-content-between">
                            <span>{{ $log->created_at->format('d M, Y') }}</span>
                            <i class="bx bx-check-circle"></i>
                          </div>
                          <div class="card-body">
                            @if($log->reason_of_death)
                              <p><strong>Death:</strong> {{ $log->reason_of_death }}</p>
                            @elseif($log->reason_of_termination)
                              <p><strong>Terminated:</strong> {{ $log->reason_of_termination }}</p>
                            @elseif($log->reason_of_registration_cancel)
                              <p><strong>Cancelled:</strong> {{ $log->reason_of_registration_cancel }}</p>
                            @else
                              <p><strong>Status changed to:</strong> {{ $log->status->status_name }}</p>
                            @endif
                          </div>
                        </div>
                      @else
                        @php $upd=$act['item']; @endphp
                        <div class="card mb-3 shadow-sm">
                          <div class="card-header bg-secondary text-white d-flex justify-content-between">
                            <span>{{ $upd->created_at->format('d M, Y') }}</span>
                            <div class="d-flex gap-1">
                              @can('child_update.edit')
                                <a href="{{ route('edit.child.update.form',$upd->id) }}" class="text-dark"><i class="bx bx-edit fs-5"></i></a>
                              @endcan
                              <i class="bx bx-refresh fs-5 text-white"></i>
                            </div>
                          </div>

                          
                         <div class="card-body">

                          {{-- Photo --}}
                        @if($upd->update_photo)
                            <img src="{{ url('upload/cfdp_child/'.$upd->update_photo) }}"
                                 alt="Update Photo"
                                 class="img-thumbnail float-end ms-3"
                                 style="width:120px; height:auto;">
                        @endif
  <ul class="list-unstyled mb-0">
    {{-- Location --}}
    <li><strong>Location:</strong>
      {{ $upd->still_at_home==='no'
           ? "Not at home ({$upd->where_is_child})"
           : 'Still at home' }}
    </li>

    {{-- Guardian --}}
    @if($upd->id_guardian || $upd->guardian_name)
      <li>
        <strong>Guardian:</strong>
        {{ optional($upd->guardian)->guardian ?? '—' }}:
        {{ $upd->guardian_name }}
        @can('guardian_contact.view')
          @if($upd->guardian_contact)
            (+{{ $upd->guardian_contact }})
          @endif
        @endcan
      </li>
    @endif

    {{-- School --}}
    <li><strong>School:</strong>
      @if($upd->is_schooling==='yes')
        {{ optional($upd->school)->school_name ?? '—' }} (Class {{ $upd->class }})
      @else
        Not schooling ({{ $upd->school_reason }})
      @endif
    </li>

    {{-- Church --}}
    <li><strong>Church Attendance:</strong>
      {{ ucfirst($upd->church_attendance) }}
      @if($upd->church_attendance==='no')
        ({{ $upd->church_reason }})
      @endif
    </li>

    {{-- Appearance --}}
    <li><strong>Appearance:</strong> {{ ucfirst($upd->appearance) }}</li>

    {{-- Hobby & Dream --}}
    @if($upd->hobby)
      <li><strong>Hobby:</strong> {{ $upd->hobby }}</li>
    @endif
    @if($upd->dream)
      <li><strong>Dream:</strong> {{ $upd->dream }}</li>
    @endif

    {{-- Village --}}
    @if($upd->village)
      <li><strong>Village:</strong> {{ $upd->village }}</li>
    @endif

    {{-- Family size --}}
    <li><strong>Family size:</strong>
      {{ $upd->num_children }} {{ Str::plural('child',$upd->num_children) }},
      {{ $upd->num_adults }} {{ Str::plural('adult',$upd->num_adults) }}
    </li>

    {{-- House type --}}
    @if($upd->house_type)
      <li><strong>House type:</strong>
        {{ ucfirst(str_replace('_',' ',$upd->house_type)) }}
      </li>
    @endif

    {{-- Facilities --}}
    @foreach(['kitchen','utensils_rack','bathroom','latrine'] as $fac)
      @if($upd->{"has_{$fac}"})
        <li><strong>{{ ucwords(str_replace('_',' ',$fac)) }}:</strong> Yes</li>
      @endif
    @endforeach

    {{-- Recent death --}}
    @if($upd->recent_death==='yes')
      <li><strong>Recent death:</strong> {{ $upd->death_reason }}</li>
    @endif

    {{-- Coffee --}}
    @if($upd->received_coffee)
      <li><strong>Received coffee:</strong> {{ ucfirst($upd->received_coffee) }}</li>
    @endif
    @if($upd->coffee_plants_count)
      <li><strong>Coffee plants:</strong> {{ $upd->coffee_plants_count }}</li>
    @endif

    {{-- Harvesting --}}
    @if($upd->harvesting_coffee==='yes')
      <li><strong>Harvesting:</strong> Yes</li>
    @elseif($upd->harvesting_coffee==='no')
      <li>
        <strong>Harvesting:</strong> No
        ({{ ucfirst(str_replace('_',' ',$upd->harvest_no_reason)) }}
        @if($upd->harvest_no_reason==='other')
          – {{ $upd->harvest_other_reason }}
        @endif)
      </li>
    @endif

    {{-- Remarks --}}
    @if($upd->social_worker_remarks)
      <li><strong>Remarks:</strong> {{ $upd->social_worker_remarks }}</li>
    @endif
  </ul>
</div>

                        </div>
                      @endif
                    @endforeach
                  </div>
                @endif
              </div>

              {{-- Photos --}}
              <div class="tab-pane fade" id="tab-gallery">
                @php
                  $photos = collect([$child->photo])->merge($child->galleryPhotos ?? [])->merge($child->childUpdates->pluck('update_photo'))->filter();
                @endphp
                @if($photos->isEmpty())
                  <p class="text-muted">No photos to display.</p>
                @else
                  <div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 g-4">
                    @foreach($photos as $photo)
                      <div class="col">
                        <div class="card h-100 border-0 shadow-sm overflow-hidden">
                          <img src="{{ url('upload/cfdp_child/'.$photo) }}" class="card-img-top" style="height:200px;object-fit:cover;" data-bs-toggle="modal" data-bs-target="#galleryModal" data-bs-img="{{ url('upload/cfdp_child/'.$photo) }}">
                        </div>
                      </div>
                    @endforeach
                  </div>
                  <div class="modal fade" id="galleryModal" tabindex="-1"><div class="modal-dialog modal-lg modal-dialog-centered"><div class="modal-content bg-transparent border-0"><div class="modal-body text-center p-0"><img id="galleryModalImg" class="img-fluid rounded"></div><div class="modal-footer border-0 justify-content-center"><button class="btn btn-light" data-bs-dismiss="modal">Close</button></div></div></div></div>
                  <script>document.querySelectorAll('[data-bs-toggle="modal"]').forEach(el=>el.addEventListener('click',e=>document.getElementById('galleryModalImg').src=e.target.dataset.bsImg));</script>
                @endif
              </div>

            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

<style>
  .timeline { list-style:none; padding:0; position:relative; }
  .timeline::before { content:''; position:absolute; left:16px; top:0; bottom:0; width:2px; background-color:#e9ecef; }
  .timeline-item { position:relative; margin-left:32px; }
  .timeline-item::before { content:''; position:absolute; left:-22px; background-color:#0d6efd; border-radius:50%; width:12px; height:12px; top:8px; }
</style>
=======
    $summary = $insights['summary'];
    $photos = $insights['photos'];
    $progressCount = (int) ($summary['updates'] ?? 0) + (int) ($summary['status_events'] ?? 0);
    $photoUrl = $child->photo ? url('upload/cfdp_child/'.$child->photo) : url('upload/no_image.jpg');
    $statusName = $child->child_status->status_name ?? $child->status ?? 'Unknown';
    $statusTone = match (true) {
        (int) ($child->id_status ?? 0) === 1, str_contains(strtolower($statusName), 'sponsor') && ! str_contains(strtolower($statusName), 'non') => 'success',
        (int) ($child->id_status ?? 0) === 3, str_contains(strtolower($statusName), 'graduat') => 'warning',
        default => 'danger',
    };
    $fullName = trim($child->child_fname.' '.$child->child_lname);
@endphp

<div class="page-content">
    <x-chm.layout.page
        :title="$fullName"
        :subtitle="'CFDP child profile · #'.$child->child_number.' · '.$summary['age'].' years old'"
        icon="fa-solid fa-child"
    >
        <x-slot:breadcrumb>
            <x-chm.breadcrumb-item :href="route('admin.dashboard')">Home</x-chm.breadcrumb-item>
            <x-chm.breadcrumb-item :href="route('all.children')">All Children</x-chm.breadcrumb-item>
            <x-chm.breadcrumb-item :active="true">{{ $child->child_number }}</x-chm.breadcrumb-item>
        </x-slot:breadcrumb>

        <x-slot:actions>
            @can('child.edit')
                <x-chm.button variant="outline-primary" icon="bx bx-edit" :href="route('edit.child', $child->id_child)">Edit child</x-chm.button>
            @endcan
            @can('child_update.add')
                <x-chm.button variant="outline-primary" icon="bx bx-plus-circle" :href="route('add.child.update.for_child', $child->id_child)">Add update</x-chm.button>
            @endcan
            @can('change_child_status.view')
                <x-chm.button variant="outline-secondary" icon="bx bx-transfer" :href="route('child.status.change', $child->id_child)">Change status</x-chm.button>
            @endcan
        </x-slot:actions>

        @if(session('message'))
            <div class="alert alert-{{ session('alert-type', 'success') === 'success' ? 'success' : 'info' }} alert-dismissible fade show mb-4" role="alert">
                {{ session('message') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        {{-- Primary stats --}}
        <div class="row row-cols-2 row-cols-md-4 row-cols-xl-6 g-3 mb-3">
            <x-chm.stat-card label="Field updates" :value="$summary['updates']" icon="bx bx-edit" color="primary" />
            <x-chm.stat-card label="Status events" :value="$summary['status_events']" icon="bx bx-transfer" color="info" />
            <x-chm.stat-card label="Days sponsored" :value="$summary['sponsored_days'] ? number_format($summary['sponsored_days']) : '—'" icon="bx bx-time-five" color="success" />
            <x-chm.stat-card label="Days in programme" :value="$summary['registered_days'] ? number_format($summary['registered_days']) : '—'" icon="bx bx-calendar" color="warning" />
            <x-chm.stat-card label="Gifts" :value="$summary['gifts']" icon="bx bx-gift" color="success" />
            <x-chm.stat-card label="Letters" :value="$summary['letters']" icon="bx bx-envelope" color="info" />
        </div>

        {{-- Secondary stats --}}
        <div class="row row-cols-2 row-cols-md-4 g-3 mb-4">
            <x-chm.stat-card label="Photos on file" :value="$summary['photos']" icon="bx bx-image" color="info" />
            <x-chm.stat-card label="Gift value sent" :value="$summary['gift_value_sent'] ? number_format($summary['gift_value_sent']) : '0'" icon="bx bx-money" color="success" />
            <x-chm.stat-card label="Days since update" :value="$summary['days_since_update'] ?? '—'" icon="bx bx-timer" color="warning" />
            @if(!empty($insights['cluster']))
                <x-chm.stat-card label="Cluster update rank" :value="'#'.$insights['cluster']['update_rank']" icon="bx bx-trophy" color="primary" />
            @endif
        </div>

        <div class="row g-4">
            {{-- Sidebar --}}
            <div class="col-lg-4">
                <div class="card chm-child-hero overflow-hidden mb-0">
                    <div class="chm-child-hero-photo">
                        <img src="{{ $photoUrl }}" alt="{{ $fullName }}">
                        <span class="chm-child-hero-age">{{ $summary['age'] }} yrs</span>
                    </div>
                    <div class="card-body">
                        <div class="d-flex flex-wrap align-items-center gap-2 mb-2">
                            <x-chm.status-badge :status="$statusTone" :label="$statusName" />
                            @if($summary['sponsored_days'])
                                <span class="badge bg-light text-dark border">{{ number_format($summary['sponsored_days']) }} days sponsored</span>
                            @endif
                        </div>
                        <h4 class="mb-1">{{ $fullName }}</h4>
                        <p class="text-muted small mb-2">ID #{{ $child->child_number }}</p>
                        @if($child->cluster)
                            <p class="small mb-0"><i class="bx bx-map-pin"></i> {{ $child->cluster->cluster_name }} ({{ $child->cluster->code }})</p>
                        @endif
                    </div>
                </div>

                <div class="card mt-4">
                    <div class="card-body">
                        <h6 class="mb-3"><i class="bx bx-list-ul me-1"></i> Record facts</h6>
                        <ul class="chm-child-meta-list chm-child-meta-list-compact mb-0">
                            @foreach($insights['facts'] as $fact)
                                <li><span>{{ $fact['label'] }}</span><strong>{{ $fact['value'] }}</strong></li>
                            @endforeach
                        </ul>
                    </div>
                </div>

                <div class="card mt-4">
                    <div class="card-body">
                        <h6 class="mb-3"><i class="bx bx-link-alt me-1"></i> Quick actions</h6>
                        <div class="d-grid gap-2">
                            @can('child.edit')
                                <a href="{{ route('edit.child', $child->id_child) }}" class="chm-profile-quick-link"><i class="bx bx-edit"></i><span>Edit child record</span><i class="bx bx-chevron-right ms-auto"></i></a>
                            @endcan
                            @can('child_update.add')
                                <a href="{{ route('add.child.update.for_child', $child->id_child) }}" class="chm-profile-quick-link"><i class="bx bx-plus-circle"></i><span>Record field update</span><i class="bx bx-chevron-right ms-auto"></i></a>
                            @endcan
                            @can('change_child_status.view')
                                <a href="{{ route('child.status.change', $child->id_child) }}" class="chm-profile-quick-link"><i class="bx bx-transfer"></i><span>Change status</span><i class="bx bx-chevron-right ms-auto"></i></a>
                            @endcan
                            <a href="{{ route('all.children') }}" class="chm-profile-quick-link"><i class="bx bx-arrow-back"></i><span>Back to all children</span><i class="bx bx-chevron-right ms-auto"></i></a>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Main tabs --}}
            <div class="col-lg-8">
                <div class="card chm-child-tabs-card">
                    <div class="card-body">
                        <ul class="nav nav-tabs chm-tabs mb-4 flex-wrap" role="tablist">
                            <li class="nav-item"><button class="nav-link active" data-bs-toggle="tab" data-bs-target="#child-tab-background" type="button"><i class="bx bx-user-check me-1"></i> Background</button></li>
                            <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#child-tab-analytics" type="button"><i class="bx bx-bar-chart-alt-2 me-1"></i> Analytics</button></li>
                            <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#child-tab-sponsorship" type="button"><i class="bx bx-heart me-1"></i> Sponsorship</button></li>
                            <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#child-tab-progress" type="button"><i class="bx bx-history me-1"></i> Progress @if($progressCount > 0)<span class="badge bg-primary ms-1">{{ $progressCount }}</span>@endif</button></li>
                            <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#child-tab-gallery" type="button"><i class="bx bx-image me-1"></i> Photos @if((int) ($summary['photos'] ?? 0) > 0)<span class="badge bg-secondary ms-1">{{ (int) $summary['photos'] }}</span>@endif</button></li>
                        </ul>

                        <div class="tab-content">
                            <div class="tab-pane fade show active" id="child-tab-background" role="tabpanel">
                                @include('admin.cfdp.children.partials.child-profile-background')
                            </div>
                            <div class="tab-pane fade" id="child-tab-analytics" role="tabpanel">
                                @include('admin.cfdp.children.partials.child-profile-analytics')
                            </div>
                            <div class="tab-pane fade" id="child-tab-sponsorship" role="tabpanel">
                                @include('admin.cfdp.children.partials.child-profile-sponsorship')
                            </div>
                            <div class="tab-pane fade" id="child-tab-progress" role="tabpanel">
                                @include('admin.cfdp.children.partials.child-profile-progress')
                            </div>
                            <div class="tab-pane fade" id="child-tab-gallery" role="tabpanel">
                                @include('admin.cfdp.children.partials.child-profile-gallery')
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </x-chm.layout.page>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    var modal = document.getElementById('childGalleryModal');
    if (!modal) return;
    modal.addEventListener('show.bs.modal', function (event) {
        var button = event.relatedTarget;
        var img = document.getElementById('childGalleryModalImg');
        if (button && img) img.src = button.getAttribute('data-img') || '';
    });
});
</script>
@endpush
>>>>>>> origin/main

@endsection