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

<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">
                    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}"><i class="bx bx-home-alt"></i></a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">Add Child</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 Account</h5>
                                      <p class="mb-0 steper-sub-title">Account Setup</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 Bio-data</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">Parents</h5>
                                        <p class="mb-0 steper-sub-title">Parent Details</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">Status</h5>
                                          <p class="mb-0 steper-sub-title">Sponsorship Details</p>
                                      </div>
                                      </div>
                                  </div>
                            </div>
                      </div>
                      <div class="card-body">
                      
                        <div class="bs-stepper-content">
                           <form method="POST" action="{{ route('add.child.store') }}" enctype="multipart/form-data">
                             @csrf
                           <div id="test-nl-1" role="tabpanel" class="bs-stepper-pane" aria-labelledby="stepper2trigger1">
    <h5 class="mb-1">Setting up child registration</h5>
    <p class="mb-4">Start the process of registering the child for sponsorship</p>

    <div class="row g-3">
        <!-- Country Selection Dropdown -->
        <div class="col-12 col-lg-6">
            <label for="single-select-clear-field" class="form-label">Select Allocated Country</label>
            <select class="form-select" id="single-select-clear-field" name="id_country" data-placeholder="Choose a country">
                <option></option> <!-- Blank option for placeholder -->
                @foreach ($countries as $country)
                    <option value="{{ $country->id_country }}" {{ request('id_country') == $country->id_country ? 'selected' : '' }}>
                        {{ $country->country }}
                    </option>
                @endforeach
            </select>
        </div>

        <div class="col-12 col-lg-6">
            <label for="single-select-field" class="form-label">Select Cluster</label>
            <select class="form-select" id="single-select-field" name="id_cluster">
                <option value="">Select a Cluster</option>
                @foreach ($clusters as $detail)
                    <option value="{{ $detail->id_cluster }}" {{ request('id_cluster') == $detail->id_cluster ? 'selected' : '' }}>
                        {{ $detail->cluster_name }}
                    </option>
                @endforeach
            </select>
        </div>
    </div><!---end row-->
    <br>

    <!-- Next Button positioned to the right -->
    <div class="col-12 col-lg-6 d-flex justify-content-end">
        <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>

    <div class="row g-3">
        <!-- Child First Name -->
        <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" class="form-control" id="child_fname" placeholder="First Name">
        </div>

        <!-- Child Last Name -->
        <div class="col-12 col-lg-6">
            <label for="child_lname" class="form-label">Last Name</label>
            <input type="text" class="form-control" name="child_lname" id="child_name" placeholder="Last Name">
        </div>

        <!-- Gender -->
        <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></option>
                <option value="MALE">Male</option>
                <option value="FEMALE">Female</option>
            </select>
        </div>

        <!-- Date of Birth -->
        <div class="col-12 col-lg-6">
            <label class="form-label">Date of Birth</label>
            <input type="date" name="dob" class="form-control datepicker" />
        </div>

        <!-- Child Photo -->
        <div class="col-md-6">
            <label for="input2" class="form-label">Child Photo</label>
            <input class="form-control" name="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>

        <!-- Village -->
        <div class="col-12 col-lg-6">
            <label for="child_village" class="form-label">Village</label>
            <input type="text" class="form-control" name="child_village" id="child_village" placeholder="Child's Village">
        </div>

        <!-- Buttons -->
        <div class="col-12 mt-4 d-flex justify-content-between flex-column flex-sm-row">
            <button type="button" class="btn btn-outline-secondary px-5 py-2" onclick="stepper2.previous()">
                <i class="bx bx-left-arrow-alt me-2"></i>Previous
            </button>
            <button type="button" class="btn btn-primary px-5 py-2" 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">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" 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=""></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" 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=""></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 }}" {{ 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 mt-4 d-flex justify-content-between flex-column flex-sm-row">
            <button type="button" class="btn btn-outline-secondary px-5 py-2" onclick="stepper2.previous()">
                <i class="bx bx-left-arrow-alt me-2"></i>Previous
            </button>
            <button type="button" class="btn btn-primary px-5 py-2" 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">Child Sponsorship Status</h5>
    <p class="mb-4">Provide a quick update about the status of the child in the program</p>

    <div class="row g-3">
        <!-- Status Selection -->
        <div class="col-12 col-lg-6">
            <label for="status-select" class="form-label">Status</label>
            <select class="form-select" id="status-select" data-placeholder="Choose status" name="status">
                <option value="" selected>Select Status</option>
                <option value="Sponsored">Start Sponsorship</option>
                <option value="Non Sponsored">Waiting Sponsorship</option>
            </select>
        </div>

        <!-- Sponsorship Options -->
        <div id="sponsorship-options" style="display: none;">
            <div class="col-12 col-lg-6">
                <label for="single-select-optgroup-field" class="form-label">Select Sponsor</label>
                <select class="form-select" id="single-select-optgroup-field" name="id_sponsor">
                    <option value="">Select a Sponsor</option>
                    @foreach ($sponsors as $detail)
                        <option value="{{ $detail->id_sponsor }}" {{ request('id_sponsor') == $detail->id_sponsor ? 'selected' : '' }}>
                            {{ $detail->sponsor_number }} - {{ $detail->sponsor_fname }} {{ $detail->sponsor_lname }}
                        </option>
                    @endforeach
                </select>
            </div>

            <!-- Start Date -->
            <div class="col-12 col-lg-6">
                <label class="form-label">Start Date</label>
                <input type="text" name="start_date" class="form-control datepicker" />
            </div>
        </div>

        <!-- Buttons -->
        <div class="col-12 mt-4 d-flex justify-content-between flex-column flex-sm-row">
            <button type="button" class="btn btn-outline-secondary px-5 py-2" onclick="stepper2.previous()">
                <i class="bx bx-left-arrow-alt me-2"></i>Previous
            </button>
            <button type="submit" class="btn btn-success px-5 py-2">
                Submit
            </button>
        </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>




@endsection