@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-->
    <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3"> 
        <div class="ps-3">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0 p-0">
<<<<<<< HEAD
                    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}"><i class="bx bx-home-alt"></i></a>
                    </li>
=======
                    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}"><i class="bx bx-home-alt"></i></a></li>
                    <li class="breadcrumb-item"><a href="{{ route('all.children') }}">All Children</a></li>
                    @if(!empty($selectedChild))
                        <li class="breadcrumb-item">
                            <a href="{{ route('child.profile.view', $selectedChild->id_child) }}">
                                {{ $selectedChild->child_fname }} {{ $selectedChild->child_lname }}
                            </a>
                        </li>
                    @endif
>>>>>>> origin/main
                    <li class="breadcrumb-item active" aria-current="page">Add Child Update</li>
                </ol>
            </nav>
        </div>

    </div>
    <!--end breadcrumb-->

        <!--start stepper two--> 
            
                <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">
                              <div class="step" data-target="#test-nl-1">
                                <div class="step-trigger" role="tab" id="stepper2trigger1" aria-controls="test-nl-1">
                                  <div class="bs-stepper-circle"><i class='bx bx-cog fs-4'></i></div>
                                  <div class="">
                                      <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="#test-nl-2">
                                  <div class="step-trigger" role="tab" id="stepper2trigger2" aria-controls="test-nl-2">
                                    <div class="bs-stepper-circle"><i class='bx bx-user fs-4'></i></div>
                                    <div class="">
                                        <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="#test-nl-3">
                                  <div class="step-trigger" role="tab" id="stepper2trigger3" aria-controls="test-nl-3">
                                    <div class="bs-stepper-circle"><i class='bx bxs-group fs-4'></i></div>
                                    <div class="">
                                        <h5 class="mb-0 steper-title">Family Information</h5>
                                        <p class="mb-0 steper-sub-title">Details about the family of the child</p>
                                    </div>
                                  </div>
                                </div>
                                <div class="bs-stepper-line"></div>
                                  <div class="step" data-target="#test-nl-4">
                                      <div class="step-trigger" role="tab" id="stepper2trigger4" aria-controls="test-nl-4">
                                      <div class="bs-stepper-circle"><i class='bx bx-briefcase fs-4'></i></div>
                                      <div class="">
                                          <h5 class="mb-0 steper-title">Sustainability</h5>
                                          <p class="mb-0 steper-sub-title">Details about the sustainability of the family</p>
                                      </div>
                                      </div>
                                  </div>
                            </div>
                      </div>
                      <div class="card-body">
                      
                        <div class="bs-stepper-content">
                           <form id="childUpdateForm" method="POST" action="{{ route('add.child.update.store') }}" enctype="multipart/form-data">
                             @csrf
                            <div id="test-nl-1" role="tabpanel" class="bs-stepper-pane" aria-labelledby="stepper2trigger1">
                              <h5 class="mb-1">Select Child to be updated</h5>
  
                              <div class="row g-3"> 
                                  
                             

                               
        <div class="col-12 col-lg-6">
            <label for="single-select-clear-field" class="form-label">Select Child</label>
           
<<<<<<< HEAD
            <select name="id_child" class="form-select" id="single-select-clear-field" >
    <option disabled selected>— choose child —</option>
    @foreach ($children as $c)
        <option value="{{ $c->id_child }}">
            {{ $c->child_fname }} {{ $c->child_lname }} (ID #{{ $c->child_number }})
        </option>
    @endforeach
</select>
=======
            @if(!empty($selectedChild))
                <input type="hidden" name="id_child" value="{{ $selectedChild->id_child }}">
                <div class="form-control bg-light">
                    {{ $selectedChild->child_fname }} {{ $selectedChild->child_lname }}
                    (ID #{{ $selectedChild->child_number }})
                </div>
                <p class="small text-muted mt-1 mb-0">
                    Recording an update for
                    <a href="{{ route('child.profile.view', $selectedChild->id_child) }}">this child's profile</a>.
                </p>
            @else
            <select name="id_child" class="form-select" id="single-select-clear-field" required>
    <option disabled selected value="">— choose child —</option>
    @foreach ($children as $c)
        <option value="{{ $c->id_child }}">
            {{ $c->child_fname }} {{ $c->child_lname }} (ID #{{ $c->child_number }})
        </option>
    @endforeach
</select>
            @endif
>>>>>>> origin/main

        </div>

    

                            
   
                                  
                              </div><!---end row-->
                              <br>
                              <div class="col-12 col-lg-6">
                                      <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 id="test-nl-2" role="tabpanel" class="bs-stepper-pane" aria-labelledby="stepper2trigger2">
  
                              <h5 class="mb-1">Child Details</h5>
                              <p class="mb-4">Provide the details of the child in the fields below</p>
  {{-- ===================== Child‑Details grid ===================== --}}
<div class="row g-3">

    {{-- 1) Child 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" id="homeYes" value="yes">
                <label class="form-check-label" for="homeYes">Yes</label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="radio"
                       name="still_at_home" id="homeNo" value="no">
                <label class="form-check-label" for="homeNo">No</label>
            </div>
        </div>

        {{-- appears only when NO --}}
        <input type="text" name="where_is_child"
               id="whereIsChild"
               class="form-control mt-2 d-none"
               placeholder="Where is the child now?">
    </div>

    {{-- 2) Child is 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" id="schoolYes" value="yes">
                <label class="form-check-label" for="schoolYes">Yes</label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="radio"
                       name="is_schooling" id="schoolNo" value="no">
                <label class="form-check-label" for="schoolNo">No</label>
            </div>
        </div>

        {{-- YES → school / class (two‑column sub‑row) --}}
        <div id="schoolDetails" class="mt-2 d-none">
            <div class="row g-2">
                <div class="col-12 col-lg-6">
                    <select name="school_id" id="single-select-optgroup-field" class="form-select">
                        <option disabled selected>— choose school —</option>
                        @foreach ($schools ?? [] as $s)
                            <option value="{{ $s->id_school }}">{{ $s->school_name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-12 col-lg-6">
                  <select name="class" class="form-select">
    <option disabled selected>— 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 }}">{{ $label }}</option>
    @endforeach
</select>

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

        {{-- NO → reason --}}
        <input type="text" name="school_reason"
               id="schoolReason"
               class="form-control mt-2 d-none"
               placeholder="Reason child is not schooling">
    </div>

    {{-- 3) 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" id="church_{{ $freq }}"
                           value="{{ $freq }}">
                    <label class="form-check-label" for="church_{{ $freq }}">
                        {{ ucfirst($freq) }}
                    </label>
                </div>
            @endforeach
        </div>

        {{-- NO → why --}}
        <input type="text" name="church_reason"
               id="churchReason"
               class="form-control mt-2 d-none"
               placeholder="Why not attending?">
    </div>

    {{-- 4) General appearance ------------------------------------- --}}
    <div class="col-12 col-lg-6">
        <label class="form-label">General 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"
                            id="app{{ $look }}"
                            value="{{ strtolower($look) }}">
                    <label class="form-check-label" for="app{{ $look }}">{{ $look }}</label>
                </div>
            @endforeach
        </div>
    </div>

    {{-- 5) Hobby --------------------------------------------------- --}}
    <div class="col-12 col-lg-6">
        <label class="form-label">Child's hobby</label>
        <input type="text" name="hobby" class="form-control"
               placeholder="e.g., Football, Singing">
    </div>

    {{-- 6) Dream --------------------------------------------------- --}}
    <div class="col-12 col-lg-6">
        <label class="form-label">Child's dream</label>
        <input type="text" name="dream" class="form-control"
               placeholder="e.g., Become a doctor">
    </div>

    <div class="col-12 col-lg-6">
    <label for="prepend-button-single-field" class="form-label">Select Guardian</label>
    <select class="form-select" id="prepend-button-single-field" name="id_guardian">
        <option value="">Select a Guardian</option>
        @foreach ($guardians as $detail)
            <option value="{{ $detail->id }}" {{ request('id_guardian') == $detail->id ? 'selected' : '' }}>
                {{ $detail->guardian }}
            </option>
        @endforeach
    </select>
</div>

                             <div class="col-12 col-lg-6">
                                      <label for="guardian_name" class="form-label">Guardian Name</label>
                                      <input type="text" class="form-control" name="guardian_name" id="guardian_name" placeholder="Guardian Name">
                                  </div>
                                  <div class="col-12 col-lg-6">
                                      <label for="guardian_contact" class="form-label">Guardian Contact</label>
                                      <input type="text" class="form-control" name="guardian_contact" id="guardian_contact" placeholder="Guardian Contact">
                                  </div>

 <div class="col-12 col-lg-6">
 </div>


    {{-- navigation buttons ---------------------------------------- --}}
    <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><!-- end row -->




                              
                            </div>
  
                            <div id="test-nl-3" role="tabpanel" class="bs-stepper-pane" aria-labelledby="stepper2trigger3">
                              <h5 class="mb-1">Family Info</h5>
  
                             {{-- ================= Family‑information grid ================= --}}
<div class="row g-3">

    {{-- Village ---------------------------------------------------- --}}
    <div class="col-12 col-lg-6">
        <label class="form-label">Village</label>
        <input type="text"
               name="village"
               class="form-control"
               placeholder="Village name">
    </div>

    {{-- # people in family ---------------------------------------- --}}
    <div class="col-12 col-lg-6">
        <label class="form-label">Number of people in the family</label>
        <div class="row g-2">
            <div class="col-6">
                <input type="number" min="0"
                       name="num_children"
                       class="form-control"
                       placeholder="Children">
            </div>
            <div class="col-6">
                <input type="number" min="0"
                       name="num_adults"
                       class="form-control"
                       placeholder="Adults">
            </div>
        </div>
    </div>

    {{-- Household type ------------------------------------------- --}}
    <div class="col-12 col-lg-6">
        <label class="form-label">Family’s household is</label>
        <div class="d-flex gap-3">
            <div class="form-check">
                <input class="form-check-input"
                       type="radio"
                       name="house_type"
                       value="permanent"
                       id="housePermanent">
                <label class="form-check-label" for="housePermanent">Permanent</label>
            </div>
            <div class="form-check">
                <input class="form-check-input"
                       type="radio"
                       name="house_type"
                       value="semi_permanent"
                       id="houseSemi">
                <label class="form-check-label" for="houseSemi">Semi‑permanent</label>
            </div>
        </div>
    </div>

    {{-- Family has ------------------------------------------------ --}}
   <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 }}"
                    id="has_{{ $item }}"
                    value="1">
                <label class="form-check-label" for="has_{{ $item }}">
                    {{ ucwords(str_replace('_',' ', $item)) }}
                </label>
            </div>
        @endforeach
    </div>
</div>


    {{-- Death in last 12 months ---------------------------------- --}}
    <div class="col-12 col-lg-6">
        <label class="form-label">Any recorded death in the family in the 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"
                       id="deathYes">
                <label class="form-check-label" for="deathYes">Yes</label>
            </div>
            <div class="form-check">
                <input class="form-check-input"
                       type="radio"
                       name="recent_death"
                       value="no"
                       id="deathNo">
                <label class="form-check-label" for="deathNo">No</label>
            </div>
        </div>
        <input type="text"
               name="death_reason"
               id="deathReason"
               class="form-control mt-2 d-none"
               placeholder="Reason / details">
    </div>

    <div class="col-12 col-lg-6">
    </div>

    {{-- navigation buttons --------------------------------------- --}}
    <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><!-- end row -->



                              
                            </div>
  
                            <div id="test-nl-4" role="tabpanel" class="bs-stepper-pane" aria-labelledby="stepper2trigger4">
                              <h5 class="mb-1">Sustainability</h5>
  
                             {{-- ================= Sustainability – Coffee & Remarks ================= --}}
<div class="row g-3">

    {{-- 1) Family received coffee? --}}
    <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" id="coffeeYes" value="yes">
                <label class="form-check-label" for="coffeeYes">Yes</label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="radio"
                       name="received_coffee" id="coffeeNo" value="no">
                <label class="form-check-label" for="coffeeNo">No</label>
            </div>
        </div>
        <input type="text" name="coffee_plants_count"
               id="coffeePlantsInput"
               class="form-control mt-2 d-none"
               placeholder="Approx. number of coffee plants">
    </div>

    {{-- 2) Is the family harvesting coffee yet? --}}
    <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" id="harvestYes" value="yes">
                <label class="form-check-label" for="harvestYes">Yes</label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="radio"
                       name="harvesting_coffee" id="harvestNo" value="no">
                <label class="form-check-label" for="harvestNo">No</label>
            </div>
        </div>

        {{-- if NO → reasons --}}
        <div id="harvestReasons" class="mt-2 d-none">
            <div class="form-check">
                <input class="form-check-input" type="radio"
                       name="harvest_no_reason" id="reasonNotReady" value="not_ready">
                <label class="form-check-label" for="reasonNotReady">
                    Not yet at harvesting stage
                </label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="radio"
                       name="harvest_no_reason" id="reasonDried" value="dried">
                <label class="form-check-label" for="reasonDried">
                    Coffee dried
                </label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="radio"
                       name="harvest_no_reason" id="reasonPest" value="pest_disease">
                <label class="form-check-label" for="reasonPest">
                    Affected by pest/disease
                </label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="radio"
                       name="harvest_no_reason" id="reasonOther" value="other">
                <label class="form-check-label" for="reasonOther">Other</label>
            </div>
            <input type="text" name="harvest_other_reason"
                   id="harvestOtherInput"
                   class="form-control mt-2 d-none"
                   placeholder="Other reason">
        </div>
    </div>

    {{-- 3) Social worker remarks --}}
    <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"
                  placeholder="Enter any remarks here"></textarea>
    </div>
    <div class="col-md-6">
    </div>

      <!-- Child Photo -->
        <div class="col-md-6">
            <label for="input2" class="form-label">Update Photo</label>
            <input class="form-control" name="update_photo" type="file" id="image">
        </div>

        <!-- Display Image -->
        <div class="col-md-6">
<<<<<<< HEAD
            <img id="showImage" src="{{ url('upload/no_image.jpg')}}" alt="Admin" class="rounded-circle p-1 bg-primary" width="80">
=======
            <img id="showImage" src="{{ url('upload/no_image.jpg')}}" alt="Admin" class="chm-photo-preview">
>>>>>>> origin/main
        </div>

</div><!-- end row -->

{{-- navigation buttons --}}
<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" id="submitBtn" class="btn btn-success px-4">
            Submit
        </button>
    </div>
</div>



                              
                            </div>
                          </form>
                        </div>
                         
                      </div>
                     </div>
                   </div>
                  <!--end stepper two--> 




</div>

<script>
  document.getElementById('childUpdateForm').addEventListener('submit', function(){
    document.getElementById('submitBtn').disabled = true;
  });
</script>

<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'));
<<<<<<< HEAD
=======

    @if(!empty($selectedChild))
    stepper2.to(2);
    @endif
>>>>>>> origin/main
  });

  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>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

@if(session('message'))
<script>
    document.addEventListener('DOMContentLoaded', function () {
        Swal.fire({
            title: '{{ session("message") }}',
            icon: 'success',
            showCancelButton: true,
            confirmButtonText: 'Add another update',
<<<<<<< HEAD
            cancelButtonText: 'View all children',
=======
            cancelButtonText: '{{ !empty($selectedChild) ? "Back to profile" : "View all children" }}',
>>>>>>> origin/main
            allowOutsideClick: false,
            allowEscapeKey: false,
        }).then((result) => {
            if (result.isConfirmed) {
<<<<<<< HEAD
                // Redirect back to the “Add Child Update” form
                window.location.href = '{{ route("add.child.update.form") }}';
            } else {
                // Redirect to the children listing
                window.location.href = '{{ route("all.children") }}';
=======
                @if(!empty($selectedChild))
                window.location.href = '{{ route("add.child.update.for_child", $selectedChild->id_child) }}';
                @else
                window.location.href = '{{ route("add.child.update.form") }}';
                @endif
            } else {
                @if(!empty($selectedChild))
                window.location.href = '{{ route("child.profile.view", $selectedChild->id_child) }}';
                @else
                window.location.href = '{{ route("all.children") }}';
                @endif
>>>>>>> origin/main
            }
        });
    });
</script>
@endif











@endsection