{{-- resources/views/admin/crm/assessors/show.blade.php --}}
@extends('layouts.app')

@push('styles')
<style>
   .home_1 { border-bottom: 0!important; }
   .dataTables_wrapper {
   min-height: auto;
   }
   .bigdrop .select2-container{
    width: 80% !important;
}
   .mail-view.personal-div01 {
      height: calc(100vh - 240px)!important;
      padding-bottom: 100px;
   }
   .dataTables_scrollBody
   {
    height: unset !important;
    overflow-y: auto!important;
   }

   .select2-container--default .select2-results__option[aria-selected=true] {
    display: none !important;
}
.message-body {
    height: 21rem!important;
}
.readonly-field {
    background-color: #e9ecef;
}
</style>
@endpush

@section('title', ucfirst($assessor->name))

@section('content')
<div class="loadPages01">
   <!-- Top Actions Header -->
   <div class="actionsHeader">

   </div>
   <div class="card card-body card-dashboard-twentyfive border-left-0 border-right-0 p-0 viewPage">
      <div class="align-items-stretch">
         <div class="col-md-12 view-pro-details01 pl-2 py-3">
            <div class="row align-items-center">
               <div class="col-md-4 profile-div01">
                  <div class="sender-details d-flex justify-content-between mb-1">
                     <div class="details ml-2 mr-auto">
                        <p class="msg-name" title="Assessor">{{ ucfirst($assessor->name) }}</p>
                        <p class="msg-date pb-1">
                           @if($assessor->district)
                              {{ ucfirst($assessor->district) }}
                           @endif
                           @if($assessor->state)
                              - {{ ucfirst($assessor->state) }}
                           @endif
                           - <span><a href="#" title="Assessor Code">{{ $assessor->assessor_code }}</a></span>
                        </p>
                        <p class="msg-date pb-1"><i class="las la-phone"></i> <span style="font-weight: 600;">{{ $assessor->contact_number }}</span></p>
                     </div>
                  </div>
               </div>
               <div class="col-md-8 profile-div02">
                  <div class="row">
                     <div class="col-md-2 profile-subdiv02">
                        <p class="msg-date">Total Batches</p>
                        <p class="msg-name">{{ $statistics['total_batches'] ?? 0 }}</p>
                     </div>
                     <div class="col-md-2 profile-subdiv02">
                        <p class="msg-date">Pending Batches</p>
                        <p class="msg-name">{{ $statistics['pending_batches'] ?? 0 }}</p>
                     </div>
                     <div class="col-md-2 profile-subdiv02">
                        <p class="msg-date">Completed Batches</p>
                        <p class="msg-name">{{ $statistics['completed_batches'] ?? 0 }}</p>
                     </div>
                    
                  </div>
               </div>
            </div>
         </div>

         <div class="card bd-0 navtab-card01 viewPageTabs">
            <div class="card-header card-header-tab">
               <div class="az-nav-tabs">
                  <div class="lSSlideOuter navtab-lSSlideOuter">
                     <div class="lSSlideWrapper usingCss">
                        <div id="navComplex" class="lightSlider lsGrab lSSlide">
                           <div class="tab-item lslide active" style="margin-right: 3px;">
                              <a href="#azTab1" class="tab-link active" data-toggle="tab">Overview</a>
                           </div>
                           <div class="tab-item lslide" style="margin-right: 3px;width: 130px;">
                              <a href="#azTab2" class="tab-link" data-toggle="tab">Batches</a>
                           </div>
                           <div class="tab-item lslide" style="margin-right: 3px;width: 130px;">
                              <a href="#azTab3" class="tab-link" data-toggle="tab">Contact Details</a>
                           </div>
                           <div class="tab-item lslide" style="margin-right: 3px;width: 130px;">
                              <a href="#azTab4" class="tab-link" data-toggle="tab">Job Roles</a>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>

            <div class="az-tab-content tab-content-box tab-content-box-view viewPaneTab">
               <!-- Overview Tab -->
               <div id="azTab1" class="az-tab-pane active">
                  <div class="mail-view personal-div01 mx-2 bg-white">
                     <div class="message-body py-3 px-2 ml-2">
                        <div class="item-details-page">
                           <div class="row">
                              <!-- Left Column -->
                              <div class="col-lg-6 col-md-6 col-sm-6 col-6">
                                 <h5 class="mb-2 mt-2 groupTitle">Basic Information</h5>
                                 <div class="group">
                                    <div class="row">
                                       <label class="col-lg-4 items-label">Assessor Code <span class="dot-input01">:</span></label>
                                       <label class="col-lg-8">
                                          <span class="badge badge-primary">{{ $assessor->assessor_code }}</span>
                                       </label>
                                    </div>
                                    <div class="row">
                                       <label class="col-lg-4 items-label">Assessor Name <span class="dot-input01">:</span></label>
                                       <label class="col-lg-8">{{ ucfirst($assessor->name) }}</label>
                                    </div>
                                    <div class="row">
                                       <label class="col-lg-4 items-label">Email <span class="dot-input01">:</span></label>
                                       <label class="col-lg-8">{{ $assessor->email }}</label>
                                    </div>
                                    <div class="row">
                                       <label class="col-lg-4 items-label">Rate (per candidate) <span class="dot-input01">:</span></label>
                                       <label class="col-lg-8">
                                          @if($assessor->rate)
                                             ₹ {{ number_format($assessor->rate, 2) }}
                                          @else
                                             --
                                          @endif
                                       </label>
                                    </div>
                                 </div>

                                 <h5 class="mb-2 mt-4 groupTitle">Address Information</h5>
                                 <div class="group">
                                    @if($assessor->address)
                                    <div class="row">
                                       <label class="col-lg-4 items-label">Address <span class="dot-input01">:</span></label>
                                       <label class="col-lg-8">{{ $assessor->address }}</label>
                                    </div>
                                    @endif
                                    <div class="row">
                                       <label class="col-lg-4 items-label">Pincode <span class="dot-input01">:</span></label>
                                       <label class="col-lg-8">{{ $assessor->pincode ?? '--' }}</label>
                                    </div>
                                    <div class="row">
                                       <label class="col-lg-4 items-label">Post Office <span class="dot-input01">:</span></label>
                                       <label class="col-lg-8">{{ $assessor->post_office ?? '--' }}</label>
                                    </div>
                                    <div class="row">
                                       <label class="col-lg-4 items-label">District <span class="dot-input01">:</span></label>
                                       <label class="col-lg-8">{{ ucfirst($assessor->district ?? '--') }}</label>
                                    </div>
                                    <div class="row">
                                       <label class="col-lg-4 items-label">State <span class="dot-input01">:</span></label>
                                       <label class="col-lg-8">{{ ucfirst($assessor->state ?? '--') }}</label>
                                    </div>
                                 </div>
                              </div>

                              <!-- Right Column -->
                              <div class="col-lg-6 col-md-6 col-sm-6 col-6">
                                 <h5 class="mb-2 mt-2 groupTitle">Contact Numbers</h5>
                                 <div class="group">
                                    <div class="row">
                                       <label class="col-lg-4 items-label">Primary Contact <span class="dot-input01">:</span></label>
                                       <label class="col-lg-8">
                                          <i class="las la-phone"></i> {{ $assessor->contact_number }}
                                       </label>
                                    </div>
                                    @if($assessor->whatsapp_number)
                                    <div class="row">
                                       <label class="col-lg-4 items-label">WhatsApp Number <span class="dot-input01">:</span></label>
                                       <label class="col-lg-8">
                                          <i class="lab la-whatsapp"></i> {{ $assessor->whatsapp_number }}
                                       </label>
                                    </div>
                                    @endif
                                    @if($assessor->alt_contact_1)
                                    <div class="row">
                                       <label class="col-lg-4 items-label">Alternate Contact 1 <span class="dot-input01">:</span></label>
                                       <label class="col-lg-8">
                                          <i class="las la-mobile-alt"></i> {{ $assessor->alt_contact_1 }}
                                       </label>
                                    </div>
                                    @endif
                                    @if($assessor->alt_contact_2)
                                    <div class="row">
                                       <label class="col-lg-4 items-label">Alternate Contact 2 <span class="dot-input01">:</span></label>
                                       <label class="col-lg-8">
                                          <i class="las la-mobile-alt"></i> {{ $assessor->alt_contact_2 }}
                                       </label>
                                    </div>
                                    @endif
                                 </div>

                                 <h5 class="mb-2 mt-4 groupTitle">Status & Timestamps</h5>
                                 <div class="group">
                                    <div class="row">
                                       <label class="col-lg-4 items-label">Status <span class="dot-input01">:</span></label>
                                       <label class="col-lg-8">
                                          @if($assessor->is_active)
                                             <span class="badge badge-success">Active</span>
                                          @else
                                             <span class="badge badge-secondary">Inactive</span>
                                          @endif
                                       </label>
                                    </div>
                                    <div class="row">
                                       <label class="col-lg-4 items-label">Created At <span class="dot-input01">:</span></label>
                                       <label class="col-lg-8">{{ $assessor->created_at ? date('d M Y, h:i A', strtotime($assessor->created_at)) : '--' }}</label>
                                    </div>
                                    <div class="row">
                                       <label class="col-lg-4 items-label">Last Updated <span class="dot-input01">:</span></label>
                                       <label class="col-lg-8">{{ $assessor->updated_at ? date('d M Y, h:i A', strtotime($assessor->updated_at)) : '--' }}</label>
                                    </div>
                                    @if($assessor->deleted_at)
                                    <div class="row">
                                       <label class="col-lg-4 items-label">Deleted At <span class="dot-input01">:</span></label>
                                       <label class="col-lg-8 text-danger">{{ date('d M Y, h:i A', strtotime($assessor->deleted_at)) }}</label>
                                    </div>
                                    @endif
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>

               <!-- Batches Tab -->
               <div id="azTab2" class="az-tab-pane">
                  <div class="mail-view personal-div01 mx-2 bg-white">
                     <div class="message-body py-3 px-2">
                        <div class="item-details-page">
                           <div class="row">
                              <div class="col-lg-12 col-md-12 col-sm-12 col-12">
                                 <div class="viewBoxTable">
                                    <div class="table-responsive" style="margin-top:10px;">
                                       <div class="text-center text-muted py-5">
                                          <i class="las la-database" style="font-size: 48px;"></i>
                                          <p class="mt-2">Batches assigned to this assessor will be listed here</p>
                                       </div>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>

               <!-- Contact Details Tab -->
               <div id="azTab3" class="az-tab-pane">
                  <div class="mail-view personal-div01 mx-2 bg-white">
                     <div class="message-body py-3 px-2">
                        <div class="item-details-page">
                           <div class="row">
                              <div class="col-lg-6 col-md-6 col-sm-6 col-6">
                                 <h5 class="mb-2 mt-2 groupTitle">Primary Contact</h5>
                                 <div class="group">
                                    <div class="row">
                                       <label class="col-lg-4 items-label">Name <span class="dot-input01">:</span></label>
                                       <label class="col-lg-8">{{ ucfirst($assessor->name) }}</label>
                                    </div>
                                    <div class="row">
                                       <label class="col-lg-4 items-label">Phone <span class="dot-input01">:</span></label>
                                       <label class="col-lg-8">{{ $assessor->contact_number }}</label>
                                    </div>
                                    <div class="row">
                                       <label class="col-lg-4 items-label">Email <span class="dot-input01">:</span></label>
                                       <label class="col-lg-8">{{ $assessor->email }}</label>
                                    </div>
                                 </div>

                                 <h5 class="mb-2 mt-4 groupTitle">WhatsApp Contact</h5>
                                 <div class="group">
                                    @if($assessor->whatsapp_number)
                                    <div class="row">
                                       <label class="col-lg-4 items-label">WhatsApp <span class="dot-input01">:</span></label>
                                       <label class="col-lg-8">{{ $assessor->whatsapp_number }}</label>
                                    </div>
                                    @else
                                    <div class="text-center text-muted py-3">
                                       <i class="lab la-whatsapp" style="font-size: 32px;"></i>
                                       <p class="mt-2">No WhatsApp number available</p>
                                    </div>
                                    @endif
                                 </div>
                              </div>
                              <div class="col-lg-6 col-md-6 col-sm-6 col-6">
                                 <h5 class="mb-2 mt-2 groupTitle">Alternate Contacts</h5>
                                 <div class="group">
                                    @if($assessor->alt_contact_1 || $assessor->alt_contact_2)
                                       @if($assessor->alt_contact_1)
                                       <div class="row">
                                          <label class="col-lg-4 items-label">Alternate 1 <span class="dot-input01">:</span></label>
                                          <label class="col-lg-8">{{ $assessor->alt_contact_1 }}</label>
                                       </div>
                                       @endif
                                       @if($assessor->alt_contact_2)
                                       <div class="row">
                                          <label class="col-lg-4 items-label">Alternate 2 <span class="dot-input01">:</span></label>
                                          <label class="col-lg-8">{{ $assessor->alt_contact_2 }}</label>
                                       </div>
                                       @endif
                                    @else
                                    <div class="text-center text-muted py-4">
                                       <i class="las la-user-slash" style="font-size: 32px;"></i>
                                       <p class="mt-2">No alternate contacts available</p>
                                    </div>
                                    @endif
                                 </div>

                                 <h5 class="mb-2 mt-4 groupTitle">Location</h5>
                                 <div class="group">
                                    <div class="row">
                                       <label class="col-lg-4 items-label">Address <span class="dot-input01">:</span></label>
                                       <label class="col-lg-8">{{ $assessor->address ?? '--' }}</label>
                                    </div>
                                    <div class="row">
                                       <label class="col-lg-4 items-label">District <span class="dot-input01">:</span></label>
                                       <label class="col-lg-8">{{ ucfirst($assessor->district ?? '--') }}</label>
                                    </div>
                                    <div class="row">
                                       <label class="col-lg-4 items-label">State <span class="dot-input01">:</span></label>
                                       <label class="col-lg-8">{{ ucfirst($assessor->state ?? '--') }}</label>
                                    </div>
                                    <div class="row">
                                       <label class="col-lg-4 items-label">Pincode <span class="dot-input01">:</span></label>
                                       <label class="col-lg-8">{{ $assessor->pincode ?? '--' }}</label>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>

               <!-- Job Roles Tab -->
               <div id="azTab4" class="az-tab-pane">
                  <div class="mail-view personal-div01 mx-2 bg-white">
                     <div class="message-body py-3 px-2">
                        <div class="item-details-page">
                           <div class="row">
                              <div class="col-lg-12 col-md-12 col-sm-12 col-12">
                                 <h5 class="mb-2 mt-2 groupTitle">Assessable Job Roles</h5>
                                 <div class="group">
                                    @php
                                        $jobRoleIds = is_array($assessor->job_roles) ? $assessor->job_roles : json_decode($assessor->job_roles, true);
                                        $jobRoleList = \App\Models\JobRole::with('sector')->whereIn('id', $jobRoleIds ?? [])->get();
                                    @endphp
                                    
                                    @if($jobRoleList && count($jobRoleList) > 0)
                                       <div class="row">
                                          <div class="col-lg-12">
                                             <div class="table-responsive">
                                                <table class="table table-bordered table-striped table-sm">
                                                   <thead>
                                                      <tr>
                                                         <th>Job Role Code</th>
                                                         <th>Job Role Name</th>
                                                         <th>Sector</th>
                                                         <th>Awarding Body</th>
                                                      </tr>
                                                   </thead>
                                                   <tbody>
                                                      @foreach($jobRoleList as $jobRole)
                                                      <tr>
                                                         <td>{{ $jobRole->code ?? '--' }}</td>
                                                         <td>{{ $jobRole->name }}</td>
                                                         <td>{{ $jobRole->sector->name ?? '--' }}</td>
                                                         <td>{{ $jobRole->sector->awardingBody->name ?? '--' }}</td>
                                                      </tr>
                                                      @endforeach
                                                   </tbody>
                                                </table>
                                             </div>
                                          </div>
                                       </div>
                                    @else
                                       <div class="text-center text-muted py-5">
                                          <i class="las la-tasks" style="font-size: 48px;"></i>
                                          <p class="mt-2">No job roles assigned to this assessor</p>
                                       </div>
                                    @endif
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

@push('modals')
<!-- Delete Modal -->
<div id="delInvModal" class="modal fade effect-scale">
   <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content modal-content-demo">
         <div class="modal-header">
            <h6 class="modal-title">Delete Assessor</h6>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
            </button>
         </div>
         <div class="modal-body tx-center">
            <i class="icon icon ion-ios-close-circle-outline tx-100 tx-danger lh-1 d-inline-block"></i>
            <h4 class="tx-danger mg-b-20">Are you sure?</h4>
            <p class="mg-b-20 mg-x-20">You have selected to delete this assessor</p>
         </div>
         <div class="modal-footer">
            <button type="button" data-dismiss="modal" class="btn btn-custom-outline">Cancel</button>
            <button type="button" class="btn btn-custom-2" id="confirmDelete">Delete</button>
         </div>
      </div>
   </div>
</div>
@endpush

@endsection

@push('scripts')
<script type="text/javascript">
$(document).ready(function() {
    // Initialize lightSlider
    if($('#navComplex').length) {
        $('#navComplex').lightSlider({
            item: 6,
            autoWidth: false,
            slideMove: 1,
            slideMargin: 3,
            speed: 400,
            loop: false,
            pause: 2000,
            pager: false,
            controls: true,
            prevHtml: '<i class="las la-angle-left"></i>',
            nextHtml: '<i class="las la-angle-right"></i>',
        });
    }

    // Delete confirmation
    $('#submit-delete-form').on('click', function() {
        $('#delInvModal').modal('show');
    });

    $('#confirmDelete').on('click', function() {
        $('#delete-form').submit();
    });
});
</script>
@endpush