@extends('admin.admin_dashboard')
@section('admin')
<<<<<<< HEAD
=======
@include('partials.admin.stepper-assets')
>>>>>>> origin/main
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

<div class="page-content">
    {{-- breadcrumb --}}
   {{-- Styled Breadcrumb --}}
<div class="bg-light p-3 rounded shadow-sm mb-4 d-flex align-items-center">
  {{-- Optional page title on the left --}}
  <h5 class="mb-0 me-4 text-secondary">Edit Child Update</h5>

  <nav aria-label="breadcrumb" class="flex-grow-1">
    <ol class="breadcrumb mb-0">
      {{-- Home --}}
      <li class="breadcrumb-item">
        <a href="{{ route('admin.dashboard') }}" class="text-decoration-none text-secondary">
          <i class="bx bx-home-alt"></i>
        </a>
      </li>

      {{-- All Children --}}
      <li class="breadcrumb-item">
        <a href="{{ route('all.children') }}" class="text-decoration-none text-secondary">
          <i class="bx bx-group"></i> All Children
        </a>
      </li>

      {{-- This Child’s Profile --}}
      <li class="breadcrumb-item">
        <a href="{{ route('child.profile.view', $update->id_child) }}" class="text-decoration-none text-secondary">
          {{ $update->child->child_fname }} {{ $update->child->child_lname }}
        </a>
      </li>

      {{-- Current page (no link) --}}
      <li class="breadcrumb-item active text-dark" aria-current="page">
        Edit Update
      </li>
    </ol>
  </nav>
</div>


    <!-- stepper -->
    <div id="stepper2" class="bs-stepper">
        <div class="card">
            <div class="card-header">
                <div class="d-lg-flex flex-lg-row align-items-lg-center justify-content-lg-between" role="tablist">
                    {{-- Step triggers same as add form --}}
                    <div class="step" data-target="#step-1">
                        <div class="step-trigger" role="tab" id="step1trigger" aria-controls="step-1">
                            <div class="bs-stepper-circle"><i class='bx bx-cog fs-4'></i></div>
                            <div>
                                <h5 class="mb-0 steper-title">Child</h5>
                                <p class="mb-0 steper-sub-title">Select Child</p>
                            </div>
                        </div>
                    </div>
                    <div class="bs-stepper-line"></div>
                    <div class="step" data-target="#step-2">
                        <div class="step-trigger" role="tab" id="step2trigger" aria-controls="step-2">
                            <div class="bs-stepper-circle"><i class='bx bx-user fs-4'></i></div>
                            <div>
                                <h5 class="mb-0 steper-title">Child Info</h5>
                                <p class="mb-0 steper-sub-title">Enter Child's Update Info</p>
                            </div>
                        </div>
                    </div>
                    <div class="bs-stepper-line"></div>
                    <div class="step" data-target="#step-3">
                        <div class="step-trigger" role="tab" id="step3trigger" aria-controls="step-3">
                            <div class="bs-stepper-circle"><i class='bx bxs-group fs-4'></i></div>
                            <div>
                                <h5 class="mb-0 steper-title">Family Information</h5>
                                <p class="mb-0 steper-sub-title">Details about the family</p>
                            </div>
                        </div>
                    </div>
                    <div class="bs-stepper-line"></div>
                    <div class="step" data-target="#step-4">
                        <div class="step-trigger" role="tab" id="step4trigger" aria-controls="step-4">
                            <div class="bs-stepper-circle"><i class='bx bx-briefcase fs-4'></i></div>
                            <div>
                                <h5 class="mb-0 steper-title">Sustainability</h5>
                                <p class="mb-0 steper-sub-title">Family sustainability</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="bs-stepper-content">
                    <form method="POST" action="{{ route('edit.child.update.store', $update->id) }}" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')

                        {{-- Step 1: Select Child --}}
                        <div id="step-1" role="tabpanel" class="bs-stepper-pane" aria-labelledby="step1trigger">
                            <h5 class="mb-1">Select Child to Update</h5>
                            <div class="row g-3">
                                <div class="col-12 col-lg-6">
                                    <label class="form-label">Select Child</label>
                                    <select name="id_child" class="form-select" id="single-select-clear-field">
                                        <option disabled>— choose child —</option>
                                        @foreach($children as $c)
                                            <option value="{{ $c->id_child }}"
                                                {{ old('id_child', $update->id_child)==$c->id_child ? 'selected' : '' }}>
                                                {{ $c->child_fname }} {{ $c->child_lname }} (ID #{{ $c->child_number }})
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="mt-4">
                                <button type="button" class="btn btn-primary px-4" onclick="stepper2.next()">
                                    Next <i class='bx bx-right-arrow-alt ms-2'></i>
                                </button>
                            </div>
                        </div>

                        {{-- Step 2: Child Info --}}
                        <div id="step-2" role="tabpanel" class="bs-stepper-pane" aria-labelledby="step2trigger">
                            <h5 class="mb-1">Child Details</h5>
                            <p class="mb-4">Update the child fields below</p>
                            <div class="row g-3">
                                {{-- still at home --}}
                                <div class="col-12 col-lg-6">
                                    <label class="form-label">Child still at home?</label>
                                    <div class="d-flex gap-3">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="still_at_home" value="yes"
                                                {{ old('still_at_home',$update->still_at_home)=='yes' ? 'checked':'' }}>
                                            <label class="form-check-label">Yes</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="still_at_home" value="no"
                                                {{ old('still_at_home',$update->still_at_home)=='no' ? 'checked':'' }}>
                                            <label class="form-check-label">No</label>
                                        </div>
                                    </div>
                                    <input type="text" name="where_is_child" id="whereIsChild"
                                        class="form-control mt-2 d-none"
                                        value="{{ old('where_is_child',$update->where_is_child) }}"
                                        placeholder="Where is the child now?">
                                </div>
                                {{-- schooling --}}
                                <div class="col-12 col-lg-6">
                                    <label class="form-label">Child is schooling?</label>
                                    <div class="d-flex gap-3">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="is_schooling" value="yes"
                                                {{ old('is_schooling',$update->is_schooling)=='yes' ? 'checked':'' }}>
                                            <label class="form-check-label">Yes</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="is_schooling" value="no"
                                                {{ old('is_schooling',$update->is_schooling)=='no' ? 'checked':'' }}>
                                            <label class="form-check-label">No</label>
                                        </div>
                                    </div>
                                    <div id="schoolDetails" class="mt-2 d-none">
                                        <div class="row g-2">
                                            <div class="col-12 col-lg-6">
                                                <select name="school_id" class="form-select">
                                                    <option disabled>— choose school —</option>
                                                    @foreach($schools as $s)
                                                        <option value="{{ $s->id_school }}"
                                                            {{ old('school_id',$update->school_id)==$s->id_school ? 'selected':'' }}>
                                                            {{ $s->school_name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="col-12 col-lg-6">
                                                <select name="class" class="form-select">
                                                    <option disabled>— choose class —</option>
                                                    @foreach([
        'Baby','Top','Primary One','Primary Two','Primary Three','Primary Four',
        'Primary Five','Primary Six','Primary Seven','Senior One',
        'Senior Two','Senior Three','Senior Four','Vocational'
                                                    ] as $label)
                                                        <option value="{{ $label }}"
                                                            {{ old('class',$update->class)==$label ? 'selected':'' }}>
                                                            {{ $label }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <input type="text" name="school_reason" id="schoolReason"
                                        class="form-control mt-2 d-none"
                                        value="{{ old('school_reason',$update->school_reason) }}"
                                        placeholder="Reason child is not schooling">​
                                </div>
                                {{-- church attendance --}}
                                <div class="col-12 col-lg-6">
                                    <label class="form-label">Child attends church/sunday school</label>
                                    <div class="d-flex gap-3 flex-wrap">
                                        @foreach(['regularly','sometimes','no'] as $freq)
                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" name="church_attendance" value="{{ $freq }}"
                                                    {{ old('church_attendance',$update->church_attendance)==$freq ? 'checked':'' }}>
                                                <label class="form-check-label">{{ ucfirst($freq) }}</label>
                                            </div>
                                        @endforeach
                                    </div>
                                    <input type="text" name="church_reason" id="churchReason"
                                        class="form-control mt-2 d-none"
                                        value="{{ old('church_reason',$update->church_reason) }}"
                                        placeholder="Why not attending?">
                                </div>
                                {{-- appearance --}}
                                <div class="col-12 col-lg-6">
                                    <label class="form-label">Appearance of the child</label>
                                    <div class="d-flex gap-3">
                                        @foreach(['Good','Fair','Poor'] as $look)
                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" name="appearance" value="{{ strtolower($look) }}"
                                                    {{ old('appearance',$update->appearance)==strtolower($look) ? 'checked':'' }}>
                                                <label class="form-check-label">{{ $look }}</label>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                                {{-- hobby & dream --}}
                                <div class="col-12 col-lg-6">
                                    <label class="form-label">Child's hobby</label>
                                    <input type="text" name="hobby" class="form-control"
                                           value="{{ old('hobby',$update->hobby) }}"
                                           placeholder="e.g., Football">​
                                </div>
                                <div class="col-12 col-lg-6">
                                    <label class="form-label">Child's dream</label>
                                    <input type="text" name="dream" class="form-control"
                                           value="{{ old('dream',$update->dream) }}"
                                           placeholder="e.g., Doctor">​
                                </div>
                                {{-- guardian select & info --}}
                                <div class="col-12 col-lg-6">
                                    <label class="form-label">Select Guardian</label>
                                    <select class="form-select" name="id_guardian">
                                        <option value="">Select a guardian</option>
                                        @foreach($guardians as $g)
                                            <option value="{{ $g->id }}"
                                                {{ old('id_guardian',$update->id_guardian)==$g->id ? 'selected':'' }}>
                                                {{ $g->guardian }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-12 col-lg-6">
                                    <label class="form-label">Guardian Name</label>
                                    <input type="text" name="guardian_name" class="form-control"
                                           value="{{ old('guardian_name',$update->guardian_name) }}">​
                                </div>
                                <div class="col-12 col-lg-6">
                                    <label class="form-label">Guardian Contact</label>
                                    <input type="text" name="guardian_contact" class="form-control"
                                           value="{{ old('guardian_contact',$update->guardian_contact) }}">​
                                </div>
                                <div class="col-12 col-lg-6"></div>
                                <div class="col-12 col-lg-6">
                                    <button type="button" class="btn btn-outline-secondary px-4" onclick="stepper2.previous()">
                                        <i class='bx bx-left-arrow-alt me-2'></i>Previous
                                    </button>
                                    <button type="button" class="btn btn-primary px-4" onclick="stepper2.next()">
                                        Next <i class='bx bx-right-arrow-alt ms-2'></i>
                                    </button>
                                </div>
                            </div>
                        </div>

                        {{-- Step 3: Family Info --}}
                        <div id="step-3" role="tabpanel" class="bs-stepper-pane" aria-labelledby="step3trigger">
                            <h5 class="mb-1">Family Info</h5>
                            <div class="row g-3">
                                <div class="col-12 col-lg-6">
                                    <label class="form-label">Village</label>
                                    <input type="text" name="village" class="form-control"
                                           value="{{ old('village',$update->village) }}">
                                </div>
                                <div class="col-12 col-lg-6">
                                    <label class="form-label">Number in family</label>
                                    <div class="row g-2">
                                        <div class="col-6">
                                            <input type="number" name="num_children" min="0" class="form-control"
                                                   value="{{ old('num_children',$update->num_children) }}" placeholder="Children">
                                        </div>
                                        <div class="col-6">
                                            <input type="number" name="num_adults" min="0" class="form-control"
                                                   value="{{ old('num_adults',$update->num_adults) }}" placeholder="Adults">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 col-lg-6">
                                    <label class="form-label">Household type</label>
                                    <div class="d-flex gap-3">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="house_type" value="permanent"
                                                {{ old('house_type',$update->house_type)=='permanent' ? 'checked':'' }}>
                                            <label class="form-check-label">Permanent</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="house_type" value="semi_permanent"
                                                {{ old('house_type',$update->house_type)=='semi_permanent' ? 'checked':'' }}>
                                            <label class="form-check-label">Semi-permanent</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 col-lg-6">
                                    <label class="form-label">Family has</label>
                                    <div class="d-flex flex-wrap gap-3">
                                        @foreach(['kitchen','utensils_rack','bathroom','latrine'] as $item)
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" name="has_{{ $item }}" value="1"
                                                    {{ old('has_'.$item,$update->{'has_'.$item}) ? 'checked':'' }}>
                                                <label class="form-check-label">{{ ucwords(str_replace('_',' ',$item)) }}</label>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                                <div class="col-12 col-lg-6">
                                    <label class="form-label">Death in last 12 months?</label>
                                    <div class="d-flex gap-3">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="recent_death" value="yes"
                                                {{ old('recent_death',$update->recent_death)=='yes' ? 'checked':'' }}>
                                            <label class="form-check-label">Yes</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="recent_death" value="no"
                                                {{ old('recent_death',$update->recent_death)=='no' ? 'checked':'' }}>
                                            <label class="form-check-label">No</label>
                                        </div>
                                    </div>
                                    <input type="text" name="death_reason" id="deathReason" class="form-control mt-2 d-none"
                                           value="{{ old('death_reason',$update->death_reason) }}" placeholder="Reason/details">​
                                </div>
                                <div class="col-12 col-lg-6"></div>
                                <div class="col-12 col-lg-6">
                                    <button type="button" class="btn btn-outline-secondary px-4" onclick="stepper2.previous()">
                                        <i class='bx bx-left-arrow-alt me-2'></i>Previous
                                    </button>
                                    <button type="button" class="btn btn-primary px-4" onclick="stepper2.next()">
                                        Next <i class='bx bx-right-arrow-alt ms-2'></i>
                                    </button>
                                </div>
                            </div>
                        </div>

                        {{-- Step 4: Sustainability --}}
                        <div id="step-4" role="tabpanel" class="bs-stepper-pane" aria-labelledby="step4trigger">
                            <h5 class="mb-1">Sustainability</h5>
                            <div class="row g-3">
                                <div class="col-12 col-lg-6">
                                    <label class="form-label">Family received coffee?</label>
                                    <div class="d-flex gap-3">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="received_coffee" value="yes"
                                                {{ old('received_coffee',$update->received_coffee)=='yes' ? 'checked':'' }}>
                                            <label class="form-check-label">Yes</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="received_coffee" value="no"
                                                {{ old('received_coffee',$update->received_coffee)=='no' ? 'checked':'' }}>
                                            <label class="form-check-label">No</label>
                                        </div>
                                    </div>
                                    <input type="text" name="coffee_plants_count" id="coffeePlantsInput" class="form-control mt-2 d-none"
                                           value="{{ old('coffee_plants_count',$update->coffee_plants_count) }}" placeholder="# coffee plants">​
                                </div>
                                <div class="col-12 col-lg-6">
                                    <label class="form-label">Is the family harvesting coffee yet?</label>
                                    <div class="d-flex gap-3">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="harvesting_coffee" value="yes"
                                                {{ old('harvesting_coffee',$update->harvesting_coffee)=='yes' ? 'checked':'' }}>
                                            <label class="form-check-label">Yes</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="harvesting_coffee" value="no"
                                                {{ old('harvesting_coffee',$update->harvesting_coffee)=='no' ? 'checked':'' }}>
                                            <label class="form-check-label">No</label>
                                        </div>
                                    </div>
                                    <div id="harvestReasons" class="mt-2 d-none">
                                        @foreach(['not_ready'=>'Not yet at harvesting stage','dried'=>'Coffee dried','pest_disease'=>'Affected by pest/disease','other'=>'Other'] as $val=>$label)
                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" name="harvest_no_reason" value="{{ $val }}"
                                                    {{ old('harvest_no_reason',$update->harvest_no_reason)==$val ? 'checked':'' }}>
                                                <label class="form-check-label">{{ $label }}</label>
                                            </div>
                                        @endforeach
                                        <input type="text" name="harvest_other_reason" id="harvestOtherInput" class="form-control mt-2 d-none"
                                               value="{{ old('harvest_other_reason',$update->harvest_other_reason) }}" placeholder="Other reason">​
                                    </div>
                                </div>
                                <div class="col-12 col-lg-6">
                                    <label class="form-label">Social worker remarks</label>
                                    <textarea name="social_worker_remarks" class="form-control" rows="4">{{ old('social_worker_remarks',$update->social_worker_remarks) }}</textarea>
                                </div>
                                <div class="col-md-6"></div>
                                <div class="col-md-6">
                                    <label class="form-label">Update Photo</label>
                                    <input class="form-control" name="update_photo" type="file" id="image">
                                </div>
                               <div class="col-md-6 d-flex align-items-center">
    <img
        id="showImage"
        src="{{ $update->update_photo
            ? asset('upload/cfdp_child/'.$update->update_photo)
            : asset('upload/no_image.jpg') }}"
        alt="Update Photo"
<<<<<<< HEAD
        class="rounded-circle p-1 bg-primary"
        width="80"
=======
        class="chm-photo-preview"
>>>>>>> origin/main
    >
</div>

                            </div>

                            <div class="row g-3 mt-4">
                                <div class="col-12 d-flex justify-content-between">
                                    <button type="button" class="btn btn-outline-secondary px-4" onclick="stepper2.previous()">
                                        <i class='bx bx-left-arrow-alt me-2'></i>Previous
                                    </button>
                                    <button type="submit" class="btn btn-success px-4">Update</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- JS: image preview, stepper, toggles, alerts (same as add form) --}}
<script type="text/javascript">
    $(document).ready(function(){
        $('#image').change(function(e){
            var reader = new FileReader();
            reader.onload = function(e){
                $('#showImage').attr('src',e.target.result);
            }
            reader.readAsDataURL(e.target.files['0']);
        });
    });
</script>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    window.stepper2 = new Stepper(document.querySelector('#stepper2'));
  });

  document.querySelectorAll('.step-trigger').forEach(function(trigger) {
  trigger.addEventListener('click', function() {
    var stepIndex = Array.from(this.closest('.bs-stepper').querySelectorAll('.step')).indexOf(this.closest('.step'));
    stepper2.to(stepIndex + 1); // Steps are 1-indexed
  });
});

</script>


<script>
$(function () {

    function updateHomeUI() {
        const val = $('input[name="still_at_home"]:checked').val();
        $('#whereIsChild').toggleClass('d-none', val !== 'no');
    }

    function updateSchoolUI() {
        const val = $('input[name="is_schooling"]:checked').val();
        $('#schoolDetails').toggleClass('d-none', val !== 'yes');
        $('#schoolReason') .toggleClass('d-none', val !== 'no');
    }

    function updateChurchUI() {
        const val = $('input[name="church_attendance"]:checked').val();
        $('#churchReason').toggleClass('d-none', val !== 'no');
    }

    // bind change events
    $('input[name="still_at_home"]').on('change', updateHomeUI);
    $('input[name="is_schooling"]').on('change',   updateSchoolUI);
    $('input[name="church_attendance"]').on('change', updateChurchUI);

    // run once on page load
    updateHomeUI();
    updateSchoolUI();
    updateChurchUI();
});
</script>


<script>
$(function () {
    function toggleDeathReason() {
        $('#deathReason').toggleClass(
            'd-none',
            $('input[name="recent_death"]:checked').val() !== 'yes'
        );
    }
    $('input[name="recent_death"]').on('change', toggleDeathReason);
    toggleDeathReason();   // run once on load
});
</script>


<script>
$(function() {
    // 1) Coffee received → show plant count when Yes
    $('input[name="received_coffee"]').on('change', function() {
        $('#coffeePlantsInput').toggleClass('d-none', this.value !== 'yes');
    }).filter(':checked').trigger('change');

    // 2) Harvesting coffee → show reasons when No
    $('input[name="harvesting_coffee"]').on('change', function() {
        $('#harvestReasons').toggleClass('d-none', this.value !== 'no');
    }).filter(':checked').trigger('change');

    // 2a) Other reason → show text input when Other selected
    $('input[name="harvest_no_reason"]').on('change', function() {
        $('#harvestOtherInput').toggleClass('d-none', this.value !== 'other');
    }).filter(':checked').trigger('change');
});
</script>
@endsection