@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 href="{{ route('admin.dashboard') }}" class="breadcrumb-item" aria-current="page"><a href="{{ route('all.farmers') }}">All Farmers</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Edit 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-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>
                      </div>
                      <div class="card-body">
                      
                        <div class="bs-stepper-content">
                           <form method="POST" action="{{ route('farmer.profile.update', $farmer->id_farmer) }}" enctype="multipart/form-data">
                             @csrf
            
                  <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 value="{{ $farmer->farmer_title }}">{{ $farmer->farmer_title }}</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" value="{{ $farmer->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" value="{{ $farmer->farmer_lname }}" 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 value="{{ $farmer->farmer_gender }}">{{ $farmer->farmer_gender }}</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" value="{{ $farmer->d_o_b }}" 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" value="{{ $farmer->NIN }}" 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" value="{{ $farmer->farmer_contact }}" 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">
    @foreach($districts as $district)
         <option value="{{ $district->id }}" {{ $farmer->id_district == $district->id ? 'selected' : '' }}>
                                            {{ $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" >
   @foreach($subCounties as $subcounty)
    <option value="{{ $subcounty->id }}" {{ $farmer->id_subcounty == $subcounty->id ? 'selected' : '' }}>
                                            {{ $subcounty->subcounty_name }}
                                        </option>
                                         @endforeach
</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" >
     @foreach($villages as $village)
    <option value="{{ $village->id }}" {{ $farmer->id_village == $village->id ? 'selected' : '' }}>
                                            {{ $village->village_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" value="{{ $farmer->EUDR }}" name="EUDR" class="form-control" id="EUDR" placeholder="Farmer EUDR Number">
        </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="{{ (!empty($farmer->farmer_photo)) ? url('upload/farmers/'.$farmer->farmer_photo) : url('upload/no_image.jpg') }}" alt="Admin" class="rounded-circle p-1 bg-primary" width="80">
=======
            <img id="showImage" src="{{ (!empty($farmer->farmer_photo)) ? url('upload/farmers/'.$farmer->farmer_photo) : 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="{{ (!empty($farmer->family_photo)) ? url('upload/farmers/family_photos/'.$farmer->family_photo) : url('upload/no_image.jpg') }}" alt="Admin" class="rounded-circle p-1 bg-primary" width="80">
=======
            <img id="showImage2" src="{{ (!empty($farmer->family_photo)) ? url('upload/farmers/family_photos/'.$farmer->family_photo) : 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" value="{{ $farmer->sacco_account }}" 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" value="{{ $farmer->date_of_reg }}" 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" value="{{ $farmer->latitude }}" 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" value="{{ $farmer->longitude }}" 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="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).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