@extends('admin.admin_dashboard')
@section('admin')
<<<<<<< HEAD
=======
@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 Farmer</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">Farmer 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">Farmer Info</h5>
                                        <p class="mb-0 steper-sub-title">Enter Farmer'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-user fs-4'></i></div>
                                    <div class="">
                                        <h5 class="mb-0 steper-title">More Farmer Info</h5>
                                        
                                    </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">CFDP Parent</h5>
                                          <p class="mb-0 steper-sub-title">Specify whether the farmer has a sponsored child</p>
                                      </div>
                                      </div>
                                  </div>
                            </div>
                      </div>
                      <div class="card-body">
                      
                        <div class="bs-stepper-content">
                           <form method="POST" action="{{ route('add.farmer.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 farmer registration</h5>
    <p class="mb-4">Start the process of registering the farmer</p>

    <div class="row g-3">
      

        <div class="col-12 col-lg-6">
            <label for="single-select-field" class="form-label">Select Group</label>
            <select class="form-select" id="single-select-field" name="id_group">
                <option value="">Select a Group</option>
                @foreach ($groups as $detail)
                    <option value="{{ $detail->id_group }}" {{ request('id_group') == $detail->id_group ? 'selected' : '' }}>
                        {{ $detail->group_name }}
                    </option>
                @endforeach
            </select>
        </div>

         <div class="form-group col-12 col-lg-6">
            <label for="EUDR" class="form-label">EUDR</label>
            <input type="text" name="EUDR" class="form-control" id="EUDR" placeholder="Farmer EUDR Number">
        </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">Farmer Details</h5>
    <p class="mb-4">Provide the details of the farmer in the fields below</p>

    <div class="row g-3">

      <div class="col-12 col-lg-6">
            <label for="append-text-single-field" class="form-label">Title</label>
            <select class="form-select" name="farmer_title" id="append-text-single-field" data-placeholder="Choose Title">
                <option></option>
                <option value="Mr.">Mr</option>
                <option value="Mrs.">Mrs</option>
                <option value="Ms.">Ms</option>
                <option value="Pr.">Pr</option>
            </select>
        </div>

        <!-- Date of Birth -->
        <div class="col-12 col-lg-6">
            
            <input class="form-control" hidden />
        </div>
        <!-- First Name -->
        <div class="form-group col-12 col-lg-6">
            <label for="farmer_fname" class="form-label">First Name</label>
            <input type="text" name="farmer_fname" class="form-control" id="farmer_fname" placeholder="First Name">
        </div>

        <!-- Last Name -->
        <div class="col-12 col-lg-6">
            <label for="farmer_lname" class="form-label">Last Name</label>
            <input type="text" class="form-control" name="farmer_lname" id="farmer_lname" 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="farmer_gender" 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="d_o_b" class="form-control datepicker" />
        </div>

        <!-- Village -->
        <div class="col-12 col-lg-6">
            <label for="NIN" class="form-label">NIN</label>
            <input type="text" class="form-control" name="NIN" id="NIN" minlength="14" maxlength="14" placeholder="Farmer's National ID Number">
        </div>
         <div class="col-12 col-lg-6"> 
            <label for="farmer_contact" class="form-label">Contact</label>
            <input type="number" class="form-control" name="farmer_contact" id="farmer_contact" minlength="9" maxlength="9" placeholder="Farmer's Contact Number">
        </div>
        

 <div class="col-12 col-lg-6">
 <label for="prepend-button-single-field" class="form-label">District</label>
    <select id="prepend-button-single-field" class="form-select" name="id_district" data-placeholder="Choose District">
    <option></option>
    @foreach($districts as $district)
        <option value="{{ $district->id }}">{{ $district->district_name }}</option>
    @endforeach
</select>
</div>


 <div class="col-12 col-lg-6">
 <label for="append-dropdown-single-field" class="form-label">Sub County</label>
<select id="append-dropdown-single-field" class="form-select" name="id_subcounty" disabled>
    <option value="">Select Sub-County</option>
</select>
</div>

 <div class="col-12 col-lg-6">
 <label for="append-toggle-single-field" class="form-label">Village</label>
<select id="append-toggle-single-field" class="form-select" name="id_village" disabled>
    <option value="">Select Village</option>
</select>
</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">More Farmer Info</h5>
    

    <div class="row g-3">
        <!-- Farmer Photo -->
        <div class="col-md-6">
            <label for="input2" class="form-label">Farmer Photo</label>
            <input class="form-control" name="farmer_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>
        <!-- Family Photo -->
         <div class="col-md-6">
            <label for="input2" class="form-label">Family Photo</label>
            <input class="form-control" name="family_photo" type="file" id="image2">
        </div>
         <!-- Display Image -->
        <div class="col-md-6">
<<<<<<< HEAD
            <img id="showImage2" src="{{ url('upload/no_image.jpg')}}" alt="Admin" class="rounded-circle p-1 bg-primary" width="80">
=======
            <img id="showImage2" src="{{ url('upload/no_image.jpg')}}" alt="Admin" class="chm-photo-preview">
>>>>>>> origin/main
        </div>

       
        <div class="col-12 col-lg-6">
            <label for="sacco_account" class="form-label">SACCO Account</label>
            <input type="text" class="form-control" name="sacco_account" id="sacco_account" placeholder="CH-SACCO Account">
        </div>
        <div class="col-12 col-lg-6">
            <label class="form-label">Date of Registration</label>
            <input type="date" name="date_of_reg" class="form-control datepicker" />
        </div>

          <div class="col-12 col-lg-6">
            <label for="latitude" class="form-label">Latitude</label>
            <input type="text" class="form-control" name="latitude"  id="latitude" placeholder="Latitude">
        </div>
        <div class="col-12 col-lg-6">
            <label class="form-label">Longitude</label>
            <input type="text" name="longitude" class="form-control" id="longitude" placeholder="Longitude"/>
        </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</h5>
    <p class="mb-4">Specify whether the farmer has a sponsored child in the CFDP program</p>

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

        <!-- Sponsorship Options -->
        <div id="sponsorship-options" style="display: none;">
           

            <div class="col-12 col-lg-6">
 <label for="prepend-text-single-field" class="form-label">Select Child</label>
    <select id="prepend-text-single-field" class="form-select" name="id_child" data-placeholder="Choose Farmer's Child">
    <option></option>
    @foreach($children as $child)
        <option value="{{ $child->id_child }}">{{ $child->child_number }} {{ $child->child_fname }} {{ $child->child_lname }}</option>
    @endforeach
</select>
</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 type="text/javascript">
    $(document).ready(function(){
        $('#image2').change(function(e){
            var reader = new FileReader();
            reader.onload = function(e){
                $('#showImage2').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 === 'Yes') {
            sponsorshipOptions.style.display = 'block';
        } else {
            sponsorshipOptions.style.display = 'none';
        }
    });
</script>




<script>
$(document).ready(function() {
    // Handling the change event for the district select input
    $('#prepend-button-single-field').on('change', function() {
        var district_id = $(this).val();  // Getting the selected district ID
        
        if (district_id) {
            // Generate the URL dynamically using Blade templating
            var url = "{{ url('/sub-counties') }}/" + district_id;

            $.ajax({
                url: url, 
                type: "GET",
                dataType: "json",
                success: function(data) {
                    // Populate the sub-county select input with the returned data
                    $('#append-dropdown-single-field').empty().append('<option value="">Select Sub-County</option>');
                    $.each(data, function(key, value) {
                        $('#append-dropdown-single-field').append('<option value="' + value.id + '">' + value.subcounty_name + '</option>');
                    });
                    $('#append-dropdown-single-field').prop('disabled', false); // Enable sub-county dropdown
                },
            
            });
        } else {
            // If no district is selected, clear the sub-county and village options
            $('#append-dropdown-single-field').empty().append('<option value="">Select Sub-County</option>').prop('disabled', true);
            $('#append-toggle-single-field').empty().append('<option value="">Select Village</option>').prop('disabled', true);
        }
    });

    // Handling the change event for the sub-county select input
    $('#append-dropdown-single-field').on('change', function() {
        var subCountyId = $(this).val();  // Getting the selected sub-county ID

        if (subCountyId) {
            var url = "{{ url('/villages') }}/" + subCountyId;  // Generate the URL for villages dynamically

            $.ajax({
                url: url, 
                type: "GET",
                dataType: "json",
                success: function(data) {
                    // Populate the village select input with the returned data
                    $('#append-toggle-single-field').empty().append('<option value="">Select Village</option>');
                    $.each(data, function(key, value) {
                        $('#append-toggle-single-field').append('<option value="' + value.id + '">' + value.village_name + '</option>');
                    });
                    $('#append-toggle-single-field').prop('disabled', false); // Enable village dropdown
                },
            
            });
        } else {
            // If no sub-county is selected, clear the village options
            $('#append-toggle-single-field').empty().append('<option value="">Select Village</option>').prop('disabled', true);
        }
    });

   
});
</script>





@endsection