@if(isset($custodian))
    <div id="protocol-total-count-hidden" style="display: none;">{{$custodian->total()}}</div>

    <div class="card card-primary card-outline card-outline-tabs">
        <div class="card-body p-0" class="tab-content" id="custom-tabs-two-tabContent">
            <div class="table-responsive">
                <table class="table table-hover table-bordered fs-11 custom-talbe">
                    <thead class="sticky-top shadow-sm">
                        <tr>
                            <th class="text-center">#</th>
                            <th>{{ __('employee.image') }}</th>
                            <th>{{ __('employee.name')}} | {{ __('employee.last_name') }}</th>
                            <th>{{ __('employee.id_number')}}</th>
                            <th>{{ __('employee.phone')}}</th>
                            <th>{{ __('items.custodian.job_type')}}</th>
                            @if(auth()->user()->hasPermissionTo('Employee - View Employee') || auth()->user()->hasPermissionTo('Employee - Edit Employee') || auth()->user()->hasPermissionTo('Employee - Delete Employee'))
                                <th colspan="3" class="text-center" style="width: 10%;"><i class="bx bx-cog"></i></th>
                            @endif
                        </tr>
                    </thead>
                    <tbody>
                        @if($custodian->isEmpty())
                            <tr>
                                <td colspan="15">
                                    <x-record-not-found />
                                </td>
                            </tr>
                        @else
                            @php $counter = ($custodian->currentPage() - 1) * $custodian->perPage() + 1; @endphp
                            @foreach($custodian as $info)
                                <tr id="tr-{{ $info->id }}">
                                    <td class="text-center">
                                        <button type="button" class="btn btn-sm text-center btn-primary lh-10">{{$counter++}}</button>
                                    </td>
                                    <td style="text-align: center">
                                        <a href="{{ route('viewEmployee', ['id' => encryption($info->employee->id)]) }}" target="_blank">
                                            <img src="{{ file_exists(storage_path('app/public/attachment/employee/photo/' . $info->employee->image)) ? asset('storage/attachment/employee/photo/' . $info->employee->image) : asset('assets/img/default-img.png') }}" style="width: 25px; height: 25px; border: 1px double #CCC; border-radius: 50%;">
                                        </a>
                                    </td>
                                    <td>{{ $info->employee->name }} {{ $info->employee->last_name }}</td>
                                    <td>{{$info->employee->id_number }}</td>
                                    <td>{{$info->employee->phone}}</td>
                                    <td>
                                        <input type="text" class="form-control d-none" id="job-type" value="{{ $info->job_type }}">
                                        <span id="v-job-type">{{$info->job_type}}</span>
                                    </td>
                                    <td style="text-align:center;">
                                        <button class="btn btn-outline-primary btn-sm show-edit-btn" onclick="showEdit({{$info->id}})">
                                            <i class="fa fa-pen"></i>
                                        </button>
                                        <button class="btn btn-outline-success btn-sm edit-btn d-none" onclick="updateCustodian({{$info->id}})">
                                            <i class="fa fa-save"></i>
                                        </button>
                                        <button class="btn btn-outline-danger btn-sm hide-edit-btn d-none" onclick="hideEdit({{$info->id}})">
                                            <i class="fa fa-times"></i>
                                        </button>
                                    </td>
                                </tr>
                            @endforeach
                        @endif
                    </tbody>
                </table>
            </div>
            <div class="col-lg-12">
                <x-pagination-links :paginator="$custodian" />
            </div>
        </div>
    </div>
@else
    <div class="col-lg-12">
        <div class="mt-3">
            <x-record-not-found />
        </div>
    </div>
@endif
<style>
    .operation-btn{
        padding: 5px 5px 3px 5px;
    }
</style>
<script>
    function showEdit(id)
    {
        $("#tr-"+id+" span").addClass("d-none");
        $("#tr-"+id+" .show-edit-btn").addClass("d-none");
        $("#tr-"+id+" .edit-btn").removeClass("d-none");
        $("#tr-"+id+" .hide-edit-btn").removeClass("d-none");
        $("#tr-"+id+" input").removeClass("d-none");
    }
    function hideEdit(id)
    {
        $("#tr-"+id+" span").removeClass("d-none");
        $("#tr-"+id+" .show-edit-btn").removeClass("d-none");
        $("#tr-"+id+" .edit-btn").addClass("d-none");
        $("#tr-"+id+" .hide-edit-btn").addClass("d-none");
        $("#tr-"+id+" input").addClass("d-none");
    }
    function updateCustodian(id)
    {
        let job_type = $("#tr-"+id+" #job-type").val();
        if(job_type == ""){
            $("#tr-"+id+" #job-type").css("border", "1px solid #F00");
            return;
        }else{
            $("#tr-"+id+" #job-type").css("border", "");
        }
        $.ajax({
            url: "{{ route('items.custodians.update') }}",
            method: "POST",
            data: {
                "_token": "{{ csrf_token() }}",
                id: id,
                job_type: job_type,
            },
            success: function(response) {
                // Handle the success response
                if(response.status == 1){
                    $('#tr-'+id+' #v-job-type').html(job_type);
                    $('#edit-employee').modal('show');
                    toastr.success(response.message);
                    hideEdit(id)
                } else {
                    toastr.error("Error In Update Operation");
                }
            },
            error: function(xhr, status, error) {
                toastr.error("Error In Update Operation");
            }
        });
    }
</script>