@extends('layouts.app')
@section('content')
<style>
.customeoff {
        width: 100% !important;
    }
</style>
<div class="page-titles">
				<ol class="breadcrumb">
					<li><h5 class="bc-title">List of Trainees</h5></li>
					<li class="breadcrumb-item"><a href="{{url('/home')}}">
						<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
							<path d="M2.125 6.375L8.5 1.41667L14.875 6.375V14.1667C14.875 14.5424 14.7257 14.9027 14.4601 15.1684C14.1944 15.4341 13.8341 15.5833 13.4583 15.5833H3.54167C3.16594 15.5833 2.80561 15.4341 2.53993 15.1684C2.27426 14.9027 2.125 14.5424 2.125 14.1667V6.375Z" stroke="#2C2C2C" stroke-linecap="round" stroke-linejoin="round"/>
							<path d="M6.375 15.5833V8.5H10.625V15.5833" stroke="#2C2C2C" stroke-linecap="round" stroke-linejoin="round"/>
						</svg>
						Home</a>
					</li>
					<li class="breadcrumb-item active"><a href="javascript:void(0)">List of Trainees</a></li>
				</ol>
				
			</div>
			<div class="container-fluid">
				<div class="row">
					<div class="col-xl-12">
						<div class="card">
							<div class="card-body pt-0">
								<div class="table-responsive active-projects style-1">
								<div class="tbl-caption">
									<h4 class="heading mb-0">List of Trainees</h4>
									<div>
										<button class="btn btn-primary btn-sm company-modal"  
                data-href="{{ action('App\Http\Controllers\subadmin\StudentController@create') }}" 
                data-container=".offcanvas" >+ Add Trainee</button>
				<!--<a class="btn btn-primary btn-sm"  
                href="{{ action('App\Http\Controllers\subadmin\StudentController@create') }}"  >+ Add Candidate</a>-->
									</div>
								</div>
                                <div>
                                    <div class="row mb-3">
    <div class="col-md-2">
        <select id="course" class="form-control">
            <option value="">All Courses</option>
            @foreach($courses as $course)
                <option value="{{ $course->id }}">{{ $course->coursename }}</option>
            @endforeach
        </select>
    </div>
    <div class="col-md-2">
        <select id="coordinator" class="form-control">
            <option value="">All Coordinators</option>
            @foreach($coordinators as $coordinator)
                <option value="{{ $coordinator->id }}">{{ $coordinator->coordinatorname }}</option>
            @endforeach
        </select>
    </div>
    <div class="col-md-2">
        <input type="date" id="from_date" class="form-control" placeholder="From Date">
    </div>
    <div class="col-md-2">
        <input type="date" id="to_date" class="form-control" placeholder="To Date">
    </div>
    <div class="col-md-2">
        <select id="state" class="form-control">
            <option value="">All States</option>
            @foreach($states as $state)
                <option value="{{ $state }}">{{ $state }}</option>
            @endforeach
        </select>
    </div>
    <div class="col-md-2">
        <select id="district" class="form-control" name="district">
            <option value="">All Districts</option>
           
        </select>
    </div>
</div>

                                </div>
									<table id="example3" class="display table" style="width: 100%;">
										<thead>
											<tr>
												<th>ID</th>
                                                <th>Certificate No</th>
                                                <th>photo</th>
												<th>Name</th>
												<th>Father Name</th>
                                                <th>Coordinator</th>
                                                <th>District</th>
												<th>Mobile</th>
												<th>Status</th>
                                                <th>Action</th>
											</tr>
										</thead>
										<tbody>
										
											
										</tbody>
										
									</table>
								</div>
							</div>
						</div>
					</div>
				</div>
			
			</div>
            <div class="offcanvas offcanvas-end customeoff" tabindex="-1" id="offcanvasExample">
		 
		</div>
        <div id="uploadimageModal" class="modal" data-bs-backdrop="static" data-bs-keyboard="false" role="dialog">
          <div class="modal-dialog">
            <div class="modal-content">
                  <div class="modal-header" style="border-bottom: 1px solid #dee2e6 !important;">
                    
                    <h4 class="modal-title">Crop & Upload Image</h4>
					
                  </div>
                  <div class="modal-body">
                    <div class="row">
                    <div class="col-md-12 text-center">
                      <div id="image_demo" style="width:100%; margin-top:30px"></div>
                    </div>
                    <div class="col-md-12" style="padding-top:30px;">
                      
                      <button class="btn btn-success crop_image">Crop & Upload Image</button>
                  </div>
                </div>
                  </div>
                  <div class="modal-footer">
                    <!--<button type="button" class="btn btn-default" data-bs-dismiss="modal" >Close</button>-->
                  </div>
              </div>
            </div>
          </div>
@endsection

@section('footer')
<script>
var brands_table;
        $(document).ready(function() {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('input[name=csrf-token]').attr('content')
                }
            });

           brands_table = $('#example3').DataTable({
                destroy: true,
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ url('/subadmin/candidate') }}",
                    data: function (d) {
                        d.courseid = $('#course').val();
                        d.coordinator_name = $('#coordinator').val();
                        d.created_at = $('#from_date').val();
                        d.created_at = $('#to_date').val();
                        d.states = $('#state').val();
                        d.district = $('#district').val();
                    }
                },
                columns: [
                    {data: 'id',name: 'id'},
                    {data: 'certifiace_no',name: 'certifiace_no'},
					{data: function(data) { return'<img class="rounded" width="35" src="{{asset("/uploads/candidate")}}/'+data.cimg+'" alt="">';},name: 'cimg'},
                    {data: 'cname',name: 'cname'},
					
                    {data: 'cso',name: 'cso'},
                    {data: 'coordinatorname',name: 'coordinators.coordinatorname'},
                    {data: 'district',name: 'district'},
                    {data: 'cmobileno',name: 'cmobileno'},
                    {
                        data: function(data) {
                            if (data.status == "Public") {
                                return '<span onclick="updateStatus(this)" data-id="'+data.id+'" data-status="Admin" class="badge badge-rounded badge-warning status_' +data.status +'">Public</span>';
                            }else {
                                return '<span onclick="updateStatus(this)" data-id="'+data.id+'" data-status="Public" class="badge badge-rounded badge-danger status_' +data.status +'">Admin</span>';
                            }

                        },
                        name: 'status'
                    },
                    {data: 'action',name: 'action'}
                ],
                order: [
                    [0, 'DESC']
                ]
            });

$('#course, #coordinator, #from_date, #to_date, #state, #district').on('change', function () {
    brands_table.ajax.reload();
});
            $(document).on('click', '.company-modal', function(e) {
                var container = $(this).data("container");
                $.ajax({
                    url: $(this).data("href"),
                    dataType: "html",
                    success: function(result) {
                        $(container).html(result).addClass('show');
                    }
                });
            });




            $(document).on('submit', 'form#company_add_form', function(e) {
                e.preventDefault();
                var data = new FormData($('#company_add_form')[0]);

                data.append('_token', '{{ csrf_token() }}');
                $.ajax({

                    method: "POST",
                    url: $(this).attr("action"),
                    dataType: "json",
                    data: data,
                    contentType: false,
                    processData: false,
                    beforeSend: function() {
                        $('.page-loader').show();
                    },
                    success: function(result) {
                        $('.page-loader').hide();
                        if (result.success == true) {
                            $('div.brands_modal').modal('hide');
                            $('.offcanvas').removeClass('show');
                            toastr.success(result.msg, "Success", {
                                positionClass: "toast-top-right",
                                timeOut: 5e3,
                                closeButton: !0,
                                debug: !1,
                                newestOnTop: !0,
                                progressBar: !0,
                                preventDuplicates: !0,
                                onclick: null,
                                showDuration: "300",
                                hideDuration: "1000",
                                extendedTimeOut: "1000",
                                showEasing: "swing",
                                hideEasing: "linear",
                                showMethod: "fadeIn",
                                hideMethod: "fadeOut",
                                tapToDismiss: !1
                            })
                           
                            brands_table.ajax.reload();
                        } else {
                            $.each(result.data, function(key, val) {
                                $("#" + key + "_error").text(val[0]);

                            })
                            toastr.warning(result.msg, "Warning", {
                    positionClass: "toast-top-right",
                    timeOut: 5e3,
                    closeButton: !0,
                    debug: !1,
                    newestOnTop: !0,
                    progressBar: !0,
                    preventDuplicates: !0,
                    onclick: null,
                    showDuration: "300",
                    hideDuration: "1000",
                    extendedTimeOut: "1000",
                    showEasing: "swing",
                    hideEasing: "linear",
                    showMethod: "fadeIn",
                    hideMethod: "fadeOut",
                    tapToDismiss: !1
                })
                            
                        }
                    },
                    error: function(xhr, status, error) {
                        $('.page-loader').hide();
                        toastr.error(error, "Error", {
                    positionClass: "toast-top-right",
                    timeOut: 5e3,
                    closeButton: !0,
                    debug: !1,
                    newestOnTop: !0,
                    progressBar: !0,
                    preventDuplicates: !0,
                    onclick: null,
                    showDuration: "300",
                    hideDuration: "1000",
                    extendedTimeOut: "1000",
                    showEasing: "swing",
                    hideEasing: "linear",
                    showMethod: "fadeIn",
                    hideMethod: "fadeOut",
                    tapToDismiss: !1
                })
                    }
                });
            });


            // edit emp
            $(document).on('click', 'button.employee_edit_form', function() {
                var container = $(this).data("container");
                $.ajax({
                    url: $(this).data("href"),
                    dataType: "html",
                    success: function(result) {
                        $(container).html(result).modal('show');
                    }
                });
            });

            // update emp

            $(document).on('submit', '#employee_edit_form', function(e) {
                e.preventDefault();
                var data = new FormData($('#employee_edit_form')[0]);
                //if(photo.files[0]){
                //    data.append('photo', photo.files[0]);
                // }
                data.append('_token', '{{ csrf_token() }}');
                $.ajax({
                    method: "POST",
                    url: $(this).attr("action"),
                    dataType: "json",
                    data: data,
                    processData: false,
                    contentType: false,
                    success: function(result) {
                        if (result.success == true) {
                            $('div.brands_modal').modal('hide');
                            Toastify({
                                text: result.msg,
                                duration: 3000,
                                backgroundColor: '#088f7d'
                            }).showToast();
                            brands_table.ajax.reload();
                        } else {
                            $.each(result.data, function(key, val) {
                                $("#" + key + "_error").text(val[0]);
                            })
                            Toastify({
                                text: result.msg,
                                duration: 3000,
                                backgroundColor: 'red'
                            }).showToast();

                        }
                    }
                });
            });

        });
    </script>
    <script>  
$(document).ready(function(){
    $.ajaxSetup({
              headers: {
                  'X-CSRF-TOKEN': $('input[name=csrf-token]').attr('content')
              }
          });
    

	$image_crop = $('#image_demo').croppie({
    enableExif: true,
    viewport: {
      width:233,
      height:300,
      type:'rectangle' //circle
    },
    boundary:{
      width:233,
      height:300
    }
  });
  $(document).on('change', '#upload_image', function(){
	  var fileName = document.getElementById("upload_image").value;
        var idxDot = fileName.lastIndexOf(".") + 1;
        var extFile = fileName.substr(idxDot, fileName.length).toLowerCase();
        if (extFile=="jpg" || extFile=="jpeg"){
			var reader = new FileReader();
			reader.onload = function (event) {
			  $image_crop.croppie('bind', {
				url: event.target.result
			  }).then(function(){
				console.log('jQuery bind complete');
			  });
			}
			reader.readAsDataURL(this.files[0]);
			$('#uploadimageModal').modal('show');
	}else{
		$('#upload_image').val("");
            alert("Only jpg/jpeg files are allowed!");
        }

  });
  
  $('.crop_image').click(function(event){
    $image_crop.croppie('result', {
      type: 'canvas',
      size: { width: 700, height: 900 }
    }).then(function(response){
      $.ajax({
        url:"{{url('/image_upload')}}",
        type: "POST",
        data:{"image": response,"_token":'{{csrf_token()}}'},
        success:function(data)
        {
          $('#uploadimageModal').modal('hide');
          $('#uploaded_image').html(data);
        }
      });
    })
  });

  $('#state').on('change', function () {
    let selectedState = $(this).val();
    $.get('/subadmin/get-districts-by-state', { state: selectedState }, function (districts) {
        $('#district').empty().append('<option value="">Select District</option>');
        districts.forEach(d => {
            $('#district').append(`<option value="${d}">${d}</option>`);
        });
    });
});
});  
</script>
<script>
function updateStatus(element) {
    const id = element.getAttribute('data-id');
    const status = element.getAttribute('data-status');

    Swal.fire({
        title: 'Are you sure?',
        text: "You want to update the status!",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: 'Yes, update it!',
        cancelButtonText: 'Cancel'
    }).then((result) => {
        if (result.isConfirmed) {
            // Send AJAX request
            fetch(`/subadmin/update-status/${id}`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({ status: status })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    Swal.fire('Updated!', data.message, 'success');
                    // Optional: reload or update badge text
                    
					    
                } else {
                    Swal.fire('Error!', data.message, 'error');
                }
            })
            .catch(error => {
                Swal.fire('Error!', 'Something went wrong.', 'error');
            });
			brands_table.ajax.reload();
        }
    });
}
</script>

@endsection