@extends('layouts.admin', ['title' => 'Farmer Details'])

<meta name="csrf-token" content="{{ csrf_token() }}">
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />

@push('stylesheets')



@endpush

@section('content')
<div class="main-content">
    <div class="page-content">
        <div class="container-fluid">
            <div class="profile-foreground position-relative mx-n4 mt-n4">
                <div class="profile-wid-bg">
                    <img src="assets/images/profile-bg.jpg" alt="" class="profile-wid-img" />
                </div>
            </div>
            <div class="pt-4 mb-4 mb-lg-3 pb-lg-4 profile-wrapper">
                <div class="row g-4">
                    <div class="col">
                        <div class="p-2">
                            <h3 class="text-white mb-1">{{$farmer->first_name}} {{$farmer->last_name}}</h3>
                        </div>
                    </div>
                </div>
                <!--end row-->
            </div>

            <div class="row">
                <div class="col-lg-12">
                    <div>
                        <div class="d-flex profile-wrapper">
                            <!-- Nav tabs -->
                            <ul class="nav nav-pills animation-nav profile-nav gap-2 gap-lg-3 flex-grow-1" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link fs-14 active" data-bs-toggle="tab" href="#overview-tab" role="tab">
                                        <i class="ri-airplay-fill d-inline-block d-md-none"></i> <span class="d-none d-md-inline-block">Overview</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <!-- Tab panes -->
                        <div class="tab-content pt-4 text-muted">
                            <div class="tab-pane active" id="overview-tab" role="tabpanel">
                                <div>
                                    <div>
                                        <div class="row">
                                            <div class="col-lg-12">
                                                <div class="card">
                                                    <div class="card-body" style="margin: 50px;">
                                                        <div class="row mb-3">
                                                            <div class="col-12 col-lg-6">
                                                                <label for=""><b>Name</b></label>
                                                            </div>
                                                            <div class="col-12 col-lg-6">
                                                                <p>{{$farmer->first_name}} {{$farmer->last_name}}</p>
                                                            </div>
                                                        </div>
                                                        <div class="row mb-3">
                                                            <div class="col-12 col-lg-6">
                                                                <label for=""><b>Conatct</b></label>
                                                            </div>
                                                            <div class="col-12 col-lg-6">
                                                                <p>{{$farmer->farmer_contact}} </p>
                                                            </div>
                                                        </div>
                                                        <div class="row mb-3">
                                                            <div class="col-12 col-lg-6">
                                                                <label for=""><b>Farmer group</b></label>
                                                            </div>
                                                            <div class="col-12 col-lg-6">
                                                                <p>{{$farmer->farmer_group}}</p>
                                                            </div>
                                                        </div>
                                                        <div class="row mb-3">
                                                            <div class="col-12 col-lg-6">
                                                                <label for=""><b>Group position</b></label>
                                                            </div>
                                                            <div class="col-12 col-lg-6">
                                                                <p>{{$farmer->position}}</p>
                                                            </div>
                                                        </div>
                                                        <div class="row mb-3">
                                                            <div class="col-12 col-lg-6">
                                                                <label for=""><b>Gender</b></label>
                                                            </div>
                                                            <div class="col-12 col-lg-6">
                                                                <p>{{$farmer->gender}}</p>
                                                            </div>
                                                        </div>

                                                        <div class="row mb-3">
                                                            <div class="col-12 col-lg-6">
                                                                <label for=""><b>District</b></label>
                                                            </div>
                                                            <div class="col-12 col-lg-6">
                                                                <p>{{$farmer->district}}</p>
                                                            </div>
                                                        </div>

                                                        <div class="row mb-3">
                                                            <div class="col-12 col-lg-6">
                                                                <label for=""><b>Subcounty</b></label>
                                                            </div>
                                                            <div class="col-12 col-lg-6">
                                                                <p>{{$farmer->sub_county}}</p>
                                                            </div>
                                                        </div>

                                                        <div class="row mb-3">
                                                            <div class="col-12 col-lg-6">
                                                                <label for=""><b>Parish</b></label>
                                                            </div>
                                                            <div class="col-12 col-lg-6">
                                                                <p>{{$farmer->parish}}</p>
                                                            </div>
                                                        </div>

                                                        <div class="row mb-3">
                                                            <div class="col-12 col-lg-6">
                                                                <label for=""><b>Village</b></label>
                                                            </div>
                                                            <div class="col-12 col-lg-6">
                                                                <p>{{$farmer->village}}</p>
                                                            </div>
                                                        </div>

                                                        <div class="row mb-3">
                                                            <div class="col-12 col-lg-6">
                                                                <label for=""><b>Year of birth</b></label>
                                                            </div>
                                                            <div class="col-12 col-lg-6">
                                                                <p>{{$farmer->year_of_birth}}</p>
                                                            </div>
                                                        </div>
                                                        <!--  -->
                                                        <div class="row mb-3">
                                                            <div class="col-12 col-lg-6">
                                                                <label for=""><b>Education Level</b></label>
                                                            </div>
                                                            <div class="col-12 col-lg-6">
                                                                <p>{{$farmer->education_level}}</p>
                                                            </div>
                                                        </div>
                                                        <div class="row mb-3">
                                                            <div class="col-12 col-lg-6">
                                                                <label for=""><b>Next of kin</b></label>
                                                            </div>
                                                            <div class="col-12 col-lg-6">
                                                                <p>{{$farmer->next_of_kin_first_name}} {{$farmer->next_of_kin_last_name}}</p>
                                                            </div>
                                                        </div>
                                                        <div class="row mb-3">
                                                            <div class="col-12 col-lg-6">
                                                                <label for=""><b>Next of kin contact</b></label>
                                                            </div>
                                                            <div class="col-12 col-lg-6">
                                                                <p>{{$farmer->next_of_kin_contact}}</p>
                                                            </div>
                                                        </div>

                                                        <div class="row mb-3">
                                                            <div class="col-12 col-lg-6">
                                                                <label for=""><b>Created by</b></label>
                                                            </div>
                                                            <div class="col-12 col-lg-6">
                                                                <p>{{$farmer->name}}</p>
                                                            </div>
                                                        </div>
                                                        <!-- Same Information -->
                                                        

                                                    </div><!-- end card body -->
                                                </div><!-- end card -->
                                            </div><!-- end col -->
                                        </div><!-- end row -->
                                    </div>
                                    <!--end col-->
                                </div>
                                <!--end row-->
                            </div>
                            <!--end tab-content-->
                        </div>
                    </div>
                </div>
                <!--end col-->
            </div>
            <!--end row-->

        </div><!-- container-fluid -->
    </div><!-- End Page-content -->
</div>

<!-- Approve Start -->
@if(auth()->user()->can('manage-certificates'))
<div id="revoke" class="modal fade zoomIn" aria-labelledby="zoomInModalLabel" aria-hidden="true" style="display: none;">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body p-5">
                    <h5 class="mb-3">Revoke certificate</h5>
                    <form id="revocation-form">
                    <input type="hidden" name="reference_number" value="{{$certificate_details->reference_number}}" />
                        <div class="mb-3">
                        <select class="form-control" id="revocation-code" name="revocation_reason" required>
                            <option></option>
                            @foreach($revocation_reasons as $reason)
                            <option value="{{$reason->code}}">{{$reason->reason}}</option>
                            @endforeach
                        </select>
                        </div>
                        <button type="submit" class="btn btn-primary w-100 button-prevent-multiple-submits" id="Submit-Form">Submit</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endif


@if(auth()->user()->can('manage-certificates'))
<div id="reinstate" class="modal fade zoomIn" aria-labelledby="zoomInModalLabel" aria-hidden="true" style="display: none;">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="mb-3 text-center">Reinstate certificate</h1>
                                        
                </div>
                <div class="modal-body p-3">

                    <h5>Are you sure? </h5>
                    <form id="reinstate-form">
                    <input type="hidden" name="reference_number" value="{{$certificate_details->reference_number}}" />
                        <div class="mb-3">
                        </div>
                        <div class="row">
                            <div class="col-md-8">
                            
                            </div>
                            <div class="col-md-2">
                            <button type="submit" class="btn btn-primary button-prevent-multiple-submits" id="Submit-Forms">Yes</button> 
                            </div>
                            <div class="col-md-2">
                                <button type="button" data-bs-dismiss="modal" class="btn btn-danger" >No</button>                                
                            </div>
                        </div>

                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endif
<!-- Approve End -->
@endsection

@push('scripts')

<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<script>

$(document).ready(function () {

///////////////////////////AJAX CSRF SET UP //////////////////////////////////////////////
$.ajaxSetup({
   headers: {
   'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
   }

});

  /////////////////// SELECT 2 INITIALISATION /////////////////////////////////////////////////
    $('#revocation-code').select2({

        'placeholder': 'Select reason for revocation',

    });

//////////////////////////APPROVAL FORM //////////////////////////////////////////////////
$("#revocation-form").submit(function (event) {
    event.preventDefault();

  var form_data =  $("#revocation-form").serialize();

   $.ajax({
       type: "POST",
       url: "/revoke-certificate",
       data: form_data,
       dataType: "json",
       success: function(response) {
               console.log(response);
        
               Swal.fire({
                   title: 'Success',
                   text: response.message,
                   icon: 'success',
                   toast:'true',
                   showConfirmButton:false,
                   position:'top-end',
                   timer:2000

               })
               .then(function() {
                   window.location.href = '/certificates';
               });
           
               $('.button-prevent-multiple-submits').attr('disabled', false);
               $('#Submit-Form').text('Submit');
           },
           error: function(response){
              
               console.log(response);

               if(response.status == 422){
                   var firstKey = Object.keys(response.responseJSON.errors)[0];
                   Swal.fire({
                   title: 'Error',
                   text: response.responseJSON.errors[firstKey][0],
                   icon: 'error',
                   toast:'true',
                   showConfirmButton:false,
                   position:'top-end',
                   timer:10000
                   
                   });
               }
               else if(response.status == 404){
               }
               else if(response.status == 500){
                   Swal.fire({
                       title: 'Error',
                       text: 'An Unexpected error occured, Please contact support',
                       icon: 'error',
                       toast:'true',
                       showConfirmButton:false,
                       position:'top-end',
                       timer:5000
                       
                   });
                   $('.button-prevent-multiple-submits').attr('disabled', false);
                   $('#Submit-Form').text('Submit');
               }
               else{
                   Swal.fire({
                   title: 'Error',
                   text: 'Unexpected error. Please contact support',
                   icon: 'error',
                   toast:'true',
                   showConfirmButton:false,
                   position:'top-end',
                   timer:10000
                   
                   });
               }
               $('.button-prevent-multiple-submits').attr('disabled', false);
               $('#Submit-Form').text('Submit');
           }
  
       });
    });


    $("#reinstate-form").submit(function (event) {
    event.preventDefault();

  var form_data =  $("#reinstate-form").serialize();

   $.ajax({
       type: "POST",
       url: "/reinstate-certificate",
       data: form_data,
       dataType: "json",
       success: function(response) {
               console.log(response);
        
               Swal.fire({
                   title: 'Success',
                   text: response.message,
                   icon: 'success',
                   toast:'true',
                   showConfirmButton:false,
                   position:'top-end',
                   timer:2000

               })
               .then(function() {
                   window.location.href = '/certificates';
               });
           
               $('.button-prevent-multiple-submits').attr('disabled', false);
               $('#Submit-Forms').text('Yes');
           },
           error: function(response){
              
               console.log(response);

               if(response.status == 422){
                   var firstKey = Object.keys(response.responseJSON.errors)[0];
                   Swal.fire({
                   title: 'Error',
                   text: response.responseJSON.errors[firstKey][0],
                   icon: 'error',
                   toast:'true',
                   showConfirmButton:false,
                   position:'top-end',
                   timer:10000
                   
                   });
               }
               else if(response.status == 404){
               }
               else if(response.status == 500){
                   Swal.fire({
                       title: 'Error',
                       text: 'An Unexpected error occured, Please contact support',
                       icon: 'error',
                       toast:'true',
                       showConfirmButton:false,
                       position:'top-end',
                       timer:5000
                       
                   });
                   $('.button-prevent-multiple-submits').attr('disabled', false);
                   $('#Submit-Forms').text('Yes');
               }
               else{
                   Swal.fire({
                   title: 'Error',
                   text: 'Unexpected error. Please contact support',
                   icon: 'error',
                   toast:'true',
                   showConfirmButton:false,
                   position:'top-end',
                   timer:10000
                   
                   });
               }
               $('.button-prevent-multiple-submits').attr('disabled', false);
               $('#Submit-Forms').text('Yes');
           }
  
       });
    });
});


</script>


@endpush