@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="breadcrumb-title pe-3"><b>EDIT CHILD</b></div>
					<div class="ps-3">
						<nav aria-label="breadcrumb">
							<ol class="breadcrumb mb-0 p-0">
								<li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}"><i class="bx bx-home-alt"></i></a>
								</li>
								<li href="{{ route('admin.dashboard') }}" class="breadcrumb-item" aria-current="page"><a href="{{ route('all.children') }}">All Children</a></li>
                                <li class="breadcrumb-item active" aria-current="page">Edit Child</li>
							</ol>
						</nav>
					</div>
					<div class="ms-auto">
						
					</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 Info</h5>
                            <p class="mb-0 steper-sub-title">Enter Child's Bio-data</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 bxs-group fs-4'></i></div>
                        <div class="">
                            <h5 class="mb-0 steper-title">Parents</h5>
                            <p class="mb-0 steper-sub-title">Parent Details</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="card-body">
            <div class="bs-stepper-content">
                <form method="POST" action="{{ route('child.profile.update', $child->id_child) }}" enctype="multipart/form-data">
                    @csrf

                    <!-- Step 1: Child Info -->
                    <div id="test-nl-1" role="tabpanel" class="bs-stepper-pane" aria-labelledby="stepper2trigger1">
                        <h5 class="mb-1">Child Details</h5>
                        <p class="mb-4">Provide the details of the child in the fields below</p>

                        <div class="row g-3">
                            <div class="form-group col-12 col-lg-6">
                                <label for="child_number" class="form-label">Number</label>
                                <input type="text" name="child_number" value="{{ $child->child_number }}" class="form-control" id="child_number" placeholder="Number">
                            </div>
                            <div class="form-group col-12 col-lg-6">
                                <input type="hidden" name="child"  class="form-control"  placeholder="">
                            </div>
                            <div class="form-group col-12 col-lg-6">
                                <label for="child_fname" class="form-label">First Name</label>
                                <input type="text" name="child_fname" value="{{ $child->child_fname }}" class="form-control" id="child_fname" placeholder="First Name">
                            </div>
                            <div class="col-12 col-lg-6">
                                <label for="child_lname" class="form-label">Last Name</label>
                                <input type="text" class="form-control" value="{{ $child->child_lname }}" name="child_lname" id="child_name" placeholder="Last Name">
                            </div>
                            <div class="col-12 col-lg-6">
                                <label for="single-select-clear-field" class="form-label">Gender</label>
                                <select class="form-select" name="sex" id="single-select-clear-field" data-placeholder="Choose gender">
                                    <option value="{{ $child->sex }}">{{ $child->sex }}</option>
                                    <option value="MALE">Male</option>
                                    <option value="FEMALE">Female</option>
                                </select>
                            </div>
                            <div class="col-12 col-lg-6">
                                <label class="form-label">Date of Birth</label>
                                <input type="date" value="{{ $child->dob }}" name="dob" class="form-control datepicker" />
                            </div>

                            <div class="col-md-6">
                                <label for="input2" class="form-label">Child Photo </label>
                                <input class="form-control" value="{{ $child->photo }}" name="photo" type="file" id="image">
                            </div>

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

                            <div class="col-12 col-lg-6">
                                <label for="child_village" class="form-label">Village</label>
                                <input type="text" value="{{ $child->child_village }}" class="form-control" name="child_village" id="child_village" placeholder="Child's Village">
                            </div>
                        </div>
                        <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>

                    <!-- Step 2: Parent Info -->
                    <div id="test-nl-2" role="tabpanel" class="bs-stepper-pane" aria-labelledby="stepper2trigger2">
                        <h5 class="mb-1">Parent and Guardian Info</h5>
                        <p class="mb-4">Provide the basic details of the parents and guardian</p>

                        <div class="row g-3">
                            <div class="col-12 col-lg-6">
                                <label for="mother_name" class="form-label">Mother Name</label>
                                <input type="text" value="{{ $child->mother_name }}" class="form-control" name="mother_name" id="mother_name" placeholder="Mother Name">
                            </div>
                            <div class="col-12 col-lg-6">
                                <label for="single-select-clear-field" class="form-label">Mother Status</label>
                                <select class="form-select" name="mother_status" id="single-select-clear-field" data-placeholder="Choose mother status">
                                    <option value="{{ $child->mother_status }}">{{ $child->mother_status }}</option>
                                    <option value="ALIVE">Alive</option>
                                    <option value="DECEASED">Deceased</option>
                                </select>
                            </div>
                            <div class="col-12 col-lg-6">
                                <label for="father_name" class="form-label">Father Name</label>
                                <input type="text" class="form-control" value="{{ $child->father_name }}" name="father_name" id="father_name" placeholder="Father Name">
                            </div>
                            <div class="col-12 col-lg-6">
                                <label for="single-select-clear-field" class="form-label">Father Status</label>
                                <select class="form-select" name="father_status" id="single-select-clear-field" data-placeholder="Choose father status">
                                    <option value="{{ $child->father_status }}">{{ $child->father_status }}</option>
                                    <option value="ALIVE">Alive</option>
                                    <option value="DECEASED">Deceased</option>
                                </select>
                            </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 }}" {{ $child->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" value="{{ $child->guardian_name }}" 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" value="{{ $child->guardian_contact }}" class="form-control" name="guardian_contact" id="guardian_contact" placeholder="Guardian Contact">
                            </div>

                            <div class="col-12">
                                <div class="d-flex align-items-center gap-3">
                                    <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">Submit</button>
                                </div>
                            </div>
                        </div><!---end row-->
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

                  <!--end stepper two--> 




</div>

<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>
    document.getElementById('status-select').addEventListener('change', function () {
        const sponsorshipOptions = document.getElementById('sponsorship-options');
        if (this.value === 'Sponsored') {
            sponsorshipOptions.style.display = 'block';
        } else {
            sponsorshipOptions.style.display = 'none';
        }
    });
</script>


@if ($errors->any())
    <script>
        Swal.fire({
            icon: 'error',
            title: 'Validation Error',
            html: `
                <ul style="text-align:left;">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            `,
            confirmButtonText: 'OK',
            confirmButtonColor: '#3085d6'
        });
    </script>
@endif

@if(Session::has('message'))
    <script>
        Swal.fire({
            icon: "{{ Session::get('alert-type','info') }}",
            title: "{{ Session::get('message') }}",
            confirmButtonColor: '#3085d6'
        });
    </script>
@endif






@endsection