@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;
}
</style>
@endpush

@section('title',ucfirst($partner->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="Training Partner">{{ucfirst($partner->name)}}</p>
                        <p class="msg-date pb-1">
                           @if($partner->state)
                              @if(is_object($partner->state))
                                 {{ucfirst($partner->state->name)}}
                              @else
                                 {{ucfirst($partner->state)}}
                              @endif
                           @endif
                           - <span><a href="#" title="TP Code">{{$partner->tp_id}}</a></span>
                        </p>
                        <p class="msg-date pb-1"><i class="las la-phone"></i> <span style="font-weight: 600;">{{$partner->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 Centers</p>
                        <p class="msg-name">{{$statistics['total_centers'] ?? 0}}</p>
                     </div>
                     <div class="col-md-2 profile-subdiv02">
                        <p class="msg-date">Active Centers</p>
                        <p class="msg-name">{{$statistics['active_centers'] ?? 0}}</p>
                     </div>
                     <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>
               </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">Training Centers</a>
                           </div>
                           <div class="tab-item lslide" style="margin-right: 3px;width: 130px;">
                              <a href="#azTab3" class="tab-link" data-toggle="tab">Batches</a>
                           </div>
                           <div class="tab-item lslide" style="margin-right: 3px;width: 130px;">
                              <a href="#azTab4" class="tab-link" data-toggle="tab">Contacts</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">TP ID <span class="dot-input01">:</span></label>
                                       <label class="col-lg-8">
                                          <span class="badge badge-primary">{{$partner->tp_id}}</span>
                                       </label>
                                    </div>
                                    <div class="row">
                                       <label class="col-lg-4 items-label">Partner Name <span class="dot-input01">:</span></label>
                                       <label class="col-lg-8">{{ucfirst($partner->name)}}</label>
                                    </div>
                                    <div class="row">
                                       <label class="col-lg-4 items-label">Address <span class="dot-input01">:</span></label>
                                       <label class="col-lg-8">{{$partner->address}}</label>
                                    </div>
                                    <div class="row">
                                       <label class="col-lg-4 items-label">State <span class="dot-input01">:</span></label>
                                       <label class="col-lg-8">
                                          @if($partner->state)
                                             @if(is_object($partner->state))
                                                {{ucfirst($partner->state->name)}}
                                             @else
                                                {{ucfirst($partner->state)}}
                                             @endif
                                          @else--
                                          @endif
                                       </label>
                                    </div>
                                 </div>

                                 <h5 class="mb-2 mt-4 groupTitle">Contact Person Details</h5>
                                 <div class="group">
                                    <div class="row">
                                       <label class="col-lg-4 items-label">Contact Person <span class="dot-input01">:</span></label>
                                       <label class="col-lg-8">{{ucfirst($partner->contact_person_name)}}</label>
                                    </div>
                                    <div class="row">
                                       <label class="col-lg-4 items-label">Designation <span class="dot-input01">:</span></label>
                                       <label class="col-lg-8">{{ucfirst($partner->contact_person_designation)}}</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 Information</h5>
                                 <div class="group">
                                    <div class="row">
                                       <label class="col-lg-4 items-label">Phone <span class="dot-input01">:</span></label>
                                       <label class="col-lg-8">{{$partner->contact_number}}</label>
                                    </div>
                                    @if($partner->alt_contact_number)
                                    <div class="row">
                                       <label class="col-lg-4 items-label">Alternate Number <span class="dot-input01">:</span></label>
                                       <label class="col-lg-8">{{$partner->alt_contact_number}}</label>
                                    </div>
                                    @endif
                                 </div>

                                 <h5 class="mb-2 mt-4 groupTitle">Timestamps</h5>
                                 <div class="group">
                                    <div class="row">
                                       <label class="col-lg-4 items-label">Created At <span class="dot-input01">:</span></label>
                                       <label class="col-lg-8">{{$partner->created_at ? date('d,M Y',strtotime($partner->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">{{$partner->updated_at ? date('d,M Y',strtotime($partner->updated_at)) : '--'}}</label>
                                    </div>
                                    @if($partner->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',strtotime($partner->deleted_at))}}</label>
                                    </div>
                                    @endif
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>

               <!-- Training Centers 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">
                                    @can('training_centers.create')
                                    <button class="btn btn-primary btn-sm view-add-btn01" onclick="window.location.href='{{ route('crm.training-centers.create') }}?training_partner_id={{ crypt_encrypt($partner->id) }}'">
                                       <i class="las la-plus"></i> Add New Center
                                    </button>
                                    <br>
                                    @endcan
                                    <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">Training centers will be listed here</p>
                                       </div>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>

               <!-- Batches 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-12 col-md-12 col-sm-12 col-12">
                                 <div class="viewBoxTable">
                                    @can('batches.create')
                                    <button class="btn btn-primary btn-sm view-add-btn01" onclick="window.location.href='{{ route('crm.batches.create') }}?training_partner_id={{ crypt_encrypt($partner->id) }}'">
                                       <i class="las la-plus"></i> Add New Batch
                                    </button>
                                    <br>
                                    @endcan
                                    <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 will be listed here</p>
                                       </div>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>

               <!-- Contacts 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-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($partner->contact_person_name)}}</label>
                                    </div>
                                    <div class="row">
                                       <label class="col-lg-4 items-label">Designation <span class="dot-input01">:</span></label>
                                       <label class="col-lg-8">{{ucfirst($partner->contact_person_designation)}}</label>
                                    </div>
                                    <div class="row">
                                       <label class="col-lg-4 items-label">Phone <span class="dot-input01">:</span></label>
                                       <label class="col-lg-8">{{$partner->contact_number}}</label>
                                    </div>
                                 </div>
                              </div>
                              <div class="col-lg-6 col-md-6 col-sm-6 col-6">
                                 <h5 class="mb-2 mt-2 groupTitle">Alternate Contact</h5>
                                 <div class="group">
                                    @if($partner->alt_contact_number)
                                    <div class="row">
                                       <label class="col-lg-4 items-label">Phone <span class="dot-input01">:</span></label>
                                       <label class="col-lg-8">{{$partner->alt_contact_number}}</label>
                                    </div>
                                    @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 contact available</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 Training Partner</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 training partner</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