@extends('layouts.app')

@section('title', 'Staff Details - ' . $staff->name)

@push('styles')
<style>
  .home_1 { border-bottom: 0!important; }
   .dataTables_wrapper {
   min-height: auto;
   }
   .item-details-page .row form .row{
      padding-right: 15px;
      padding-left: 15px;
   }
   .mail-view.personal-div01 {
      height: calc(100vh - 240px)!important;
      padding-bottom: 100px;
      overflow-y: auto!important;
      border-bottom:0!important;
   }
   .dataTables_scrollBody
   {
    height: unset !important;
    overflow-y: auto!important;
   }

   .staff-accordion01 .btn-link{
      position: absolute;
    right: 5px;
    top: 5px;
   }

   .staff-accordion01 .card-header h5 input, .staff-accordion01 .collapse input{
      vertical-align: middle;
    margin-bottom: 2px;
   }
   .table.dataTable th, table.dataTable td{
      white-space: unset;
   }
</style>
@endpush

@section('content')
<div class="loadPages01">
    <!-- Top Actions Header -->
    <div class="actionsHeader">
        <!-- Action buttons can be added here -->
    </div>

    <div class="card card-body card-dashboard-twentyfive border-left-0 border-right-0 p-0 viewPage">
      
           <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">
                       <a  data-toggle="modal" data-target="#image_modal">

                          @push('modals')
                          
                                 <div class="modal fade" id="addTeamMembers" tabindex="-1" role="dialog"  aria-hidden="true">
                                    <div class="modal-dialog  modal-xl" role="document">
                                       <div class="modal-content">
                                          <div class="modal-header">
                                             <h5 class="modal-title" id="">Add New Operators</h5>
                                             <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="operator_reset();">
                                             <span aria-hidden="true">&times;</span>
                                             </button>
                                          </div>
                                          <form method="POST" id="update-operators">
                                             @csrf
                                             <input type="hidden" value="{{crypt_encrypt($staff->id)}}" name="id" >  
                                             <div class="modal-body">

                                                <div class="row">
                                                   <div class="col-12 mb-2">
                                                      <label>Distributor</label>
                                                      <select multiple class="form-control select2" data-placeholder="Distributor" name="distributor_user" id="distributor_user"></select> 
                                                   </div>
                                                </div>
                                                <div class="row">
                                                   <div class="col-12 mb-2">
                                                      <label>Sub Distributor</label>
                                                      <select multiple class="form-control select2" data-placeholder="Sub Distributor" name="subdistributor_user" id="subdistributor_user">
                                                      </select> 
                                                   </div>
                                                </div>

                                                <p class="text-center w-100 mt-3">
                                                                     
                                                   <button id="operator_search_init" type="button" onclick="fetch_operators();" class="d-none btn btn-primary text-center">Search Operators <i class="las la-search" style=""></i></button>
                                                      </p>
                                                <div class="row">
                                                   <div class="col-12 mb-2">
                                                      <label>Operator</label>
                                                      <select class="form-control" name="operators[]" data-placeholder="Select Operators" multiple  size="10" id="selUser" ></select> 
                                                   </div>
                                                </div>
                                                {{-- <div class="row">
                                                
                                                   <div class="col-md-12">
                                                      <label>Operators </label>
                                                      <select class="form-control select2" name="operators[]" data-placeholder="Select Operators" multiple  size="10" id="selUser" required></select>    
                                                   </div>
                                                </div> --}}
                                             </div>
                                             <div class="modal-footer">
                                                <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="operator_reset();">Close</button>
                                                <button type="submit" class="btn btn-primary">Add</button>
                                             </div>
                                          </form>
                                       </div>
                                    </div>
                                 </div>
                          <div class="modal fade bd-example-modal-lg" id="image_modal" tabindex="-1" role="dialog"  aria-hidden="true">
                            <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">

                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">x</span>
                                </button>
                                </div>

                                <div class="modal-body">
                             <img style="width:100%;height:auto;" src="{!!$staff->getImage()!!}" alt="">
                                </div>
                            </div>
                            </div>
                          </div>

                          @endpush
                     <img style="border-radius: 4px;width: 50px;margin-top: 0px;" src="{!!$staff->getImage()!!}" alt="">
                     </a>

                     <div class="details mr-auto">
                       <p class="msg-name" title="Staff">{{ucfirst($staff->name)}} 
                          <!-- <small style="font-size:12px;font-weight: bold;">(Staff)</small> -->
                        </p>
                         <p class="msg-date pb-1">Nick name : <span class="text-capitalize" style="font-weight: 600;">{{$staff->username}}</span></p>
                        <p class="msg-date pb-1" title="Address"> @if(!empty($staff->address))
                           {{ucwords($staff->address)}}
                           @endif
                        <p class="msg-date pb-1"><i class="las la-phone"></i> <span style="font-weight: 600;">{{$staff->phone}}</span></p>
                     </div>
                  </div>
               </div>
               <div class="col-md-8 profile-div02">
                  <div class="row">


                  </div>
               </div>
            </div>
         </div>

            <!-- Tabs Navigation -->
            <div class="card bd-0 navtab-card01 viewPageTabs">
                {{-- <div class="card-header card-header-tab">
                    <div class="az-nav-tabs" id="basic_tabs">
                        <div class="tab-item"><a href="#azTab1" class="tab-link active">Overview</a></div>
                        @if(is_null($staff->role))
                        <div class="tab-item"><a href="#azTab2" class="tab-link">Set Permission</a></div>
                        @endif
                    </div>
                </div> --}}

                <!-- Tab Content -->
                <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">
                                <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">Staff Details
                                                @can('staff.edit')
                                                    <a href="{{ route('organization.staff.edit', crypt_encrypt($staff->id)) }}" class="addNewBtn ml-2">
                                                        <i class="las la-edit"></i> Edit
                                                    </a>
                                                    <a href="#" class="addNewBtn" style="background-color:#0078d4;" 
                                                       data-id="{{ crypt_encrypt($staff->id) }}" onclick="openPasswordReset(this); return false;">
                                                        <i class="las la-key"></i> Reset Password
                                                    </a>
                                                @endcan
                                            </h5>

                                            <!-- Staff Details -->
                                            <div class="group">
                                                <div class="row">
                                                    <label class="col-lg-4 items-label">Status <span class="dot-input01">:</span></label>
                                                    @if($staff->status)
                                                        <label class="col-lg-8 text-uppercase text-success font-weight-bold">Active</label>
                                                    @else
                                                        <label class="col-lg-8 text-uppercase text-danger font-weight-bold">Inactive</label>
                                                    @endif
                                                </div>

                                                <div class="row">
                                                    <label class="col-lg-4 items-label">Nick name <span class="dot-input01">:</span></label>
                                                    <label class="col-lg-8 text-capitalize">{{ $staff->username }}</label>
                                                </div>

                                                @if(!empty($staff->designation))
                                                <div class="row">
                                                    <label class="col-lg-4 items-label">Designation <span class="dot-input01">:</span></label>
                                                    <label class="col-lg-8">{{ $staff->designation->name }}</label>
                                                </div>
                                                @endif

                                                <div class="row">
                                                    <label class="col-lg-4 items-label">Address <span class="dot-input01">:</span></label>
                                                    <label class="col-lg-8">{{ $staff->address ?? '-' }}</label>
                                                </div>

                                                <div class="row">
                                                    <label class="col-lg-4 items-label">Phone <span class="dot-input01">:</span></label>
                                                    <label class="col-lg-8">{{ $staff->phone }}</label>
                                                </div>

                                                <div class="row">
                                                    <label class="col-lg-4 items-label">Email <span class="dot-input01">:</span></label>
                                                    <label class="col-lg-8">{{ $staff->email }}</label>
                                                </div>
                                            </div>

                                            <hr>

                                            <!-- Team Information Table -->
                                            <div class="row">
                                                <div class="col-md-12 table-staff-team01">
                                                    <h5 class="groupTitle">Team Assignments</h5>
                                                    <div class="table-responsive">
                                                        <table class="table mb-0" id="staff-team-queue">
                                                            <thead>
                                                                <tr>
                                                                    <th>#</th>
                                                                    <th>Team Name</th>
                                                                    <th>Team Group</th>
                                                                    <th>Queues</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                @forelse($teamNames as $index => $team)
                                                                <tr>
                                                                    <td>{{ $index + 1 }}</td>
                                                                    <td>
                                                                        <a href="{{ route('masters.ticket.team.show', crypt_encrypt($team->id)) }}">
                                                                            {{ $team->name }}
                                                                        </a>
                                                                    </td>
                                                                    <td>
                                                                        {{ implode(', ', $teamGroupNames) }}
                                                                    </td>
                                                                    <td>
                                                                        @php
                                                                            $queueId = explode(",", $team['queues']);
                                                                            $queueNames = \App\Models\Ticket\Queue::select('name')
                                                                                ->whereIn('id', $queueId)
                                                                                ->where('active', 1)
                                                                                ->pluck('name')
                                                                                ->toArray();
                                                                        @endphp
                                                                        {{ implode(', ', $queueNames) }}
                                                                    </td>
                                                                </tr>
                                                                @empty
                                                                <tr>
                                                                    <td colspan="4" class="text-center text-muted py-4">
                                                                        No team assignments found.
                                                                    </td>
                                                                </tr>
                                                                @endforelse
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Permission Tab -->
                    <div id="azTab2" class="az-tab-pane">
                        {{-- Permission component can be included here if needed --}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Image Modal -->
{{-- @push('modals')
    <x-password-reset action="{{ route('staff.component.reset_password') }}" method="post" id="passwordResetForm" role="{{ crypt_encrypt(5) }}" />
@endpush --}}

@endsection

@push('scripts')
<script>
    var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');

    // Tab Navigation
    $('#basic_tabs .tab-link').on('click', function(e) {
        e.preventDefault();

        $(this).addClass('active');
        $(this).parent().siblings().find('.tab-link').removeClass('active');

        var target = $(this).attr('href');
        $(target).addClass('active');
        $(target).siblings().removeClass('active');
    });

    // Password Reset Modal
    function openPasswordReset(element) {
        var staffId = $(element).data('id');
        $('#passwordResetForm').attr('data-staff-id', staffId);
        // Trigger modal or form opening logic here
        // You can integrate with your existing password reset component
    }

    // DataTable Initialization
    $(document).ready(function() {
        if ($.fn.DataTable.isDataTable('#staff-team-queue')) {
            $('#staff-team-queue').DataTable().destroy();
        }

        $('#staff-team-queue').DataTable({
            "bSort": false,
            "iDisplayLength": 50,
            "processing": false,
            "serverSide": false,
            "searching": true,
            "scrollY": "30vh",
            "language": {
                "processing": "Please wait",
                "searchPlaceholder": "Search",
                "sSearch": ""
            },
            "responsive": {
                "details": false
            }
        });
    });

    // Back button
    function goBack() {
        window.location.href = "{{ route('organization.staff.index') }}";
    }
</script>
@endpush