@extends('backend.layouts.app')
 
@section('content')
 
    <div class="aiz-titlebar text-left mt-2 mb-3">
        <div class="row align-items-center">
            <div class="col-md-6 col-sm-6">
                <h1 class="h3">{{ translate('Account Type') }}</h1>
            </div>
            <div class="col-md-6 col-sm-6 text-md-right d-flex align-items-center">
                <a href="{{ url('admin/create/account_type') }}" id="addAccountType" class="add-items-btn ml-auto">
                    <span><i class="icons icon-plus"></i></span>
                    {{ translate('Create Account Type') }}
                </a>
            </div>
        </div>
    </div>
 
    <div class="admin-list-table pt-0 border-0">
        <div class="headerResponsive py-3 tableTab-freeze" style="border-top:1px solid #d2d2d2;">
            <div class="common-tbl-head m-0 ml-1">
                <div class="common-tbl-heading">{{ translate('Account Type List') }}</div>
                <div class="common-tbl-head m-0 ml-1">
                    <div class="selected-prod" style="display:none;white-space:nowrap;">
                        Selected Members (<span id="sProduct">0</span>)
                    </div>
                    <div class="delete-select" id="deletedData" style="display:none;white-space:nowrap;">
                        <a href="javascript:void(0);" id="delete_records">
                            Delete Selected <i class="icons icon-delete"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
 
    {{-- table --}}
    <div id="table_list">
        <div class="admin-table table-freezed">
            <div class="table-responsive tbl-hgt-fixed">
                <table class="table">
                    <thead>
                        <tr>
                            <th class="text-center tbl-shadow">
                                <div class="custom-checkbox m-auto">
                                    <input class="custom-control-input" type="checkbox" id="checkAll" value="0">
                                    <label class="custom-control-label" for="checkAll"></label>
                                </div>
                            </th>
                            <th width='4%'>{{ translate('Sr. No.') }}</th>
                            <th width='20%'>{{ translate('Account Type Name') }}</th>
                            <th width='30%'>{{ translate('Description') }}</th>
                            <th>{{ translate('Permissions') }}</th>
                            <th width="10%" class="text-center">{{ translate('Actions') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @if($accountType->isNotEmpty())
                        @php $i = ($accountType->currentPage() - 1) * $accountType->perPage() @endphp
                            @foreach($accountType as $key  => $value)
                                <tr>
                                    <td class="text-center">
                                        <div class="custom-checkbox">
                                            <input class="custom-control-input product_checkbox" type="checkbox" name="checkbox"
                                                id="{{ $value->id }}" data-emp-id="{{ $value->id }}">
                                            <label class="custom-control-label" for="{{ $value->id }}"></label>
                                        </div>
                                    </td>
                                    <td class="text-center">
                                        {{ $i + $key + 1 }}
                                    </td>
                                    <td>{{ $value->name }}</td>
                                    <td width='30%' data-toggle="tooltip" data-placement="right" title="{{ $value->description }}">
                                        <div class="subaccountdescription">{{ $value->description }}</div>
                                    </td>
                                    <td class="boxListedFeature text-center">
                                        <div class="viewFeature-link">
                                            <a tabindex="0" class="popoverButton moremails btn permissionButton btn-sm view-feature-btn" role="button"
                                               data-toggle="popover" data-trigger="focus"
                                               title="Permissions List"
                                               data-html="true"
                                               data-content="
                                                   <ul class='list-styled accountTypelistscroll'>
                                                       @php
                                                           $permissions = json_decode($value->permissions, true);
                                                           $permissions = is_array($permissions) ? $permissions : [];
                                                           $filteredPermissions = array_filter($permissions, fn($p) => !empty($p['name']));
                                                       @endphp
                                                       @forelse ($filteredPermissions as $permission)
                                                           <li>{{ $permission['name'] }}</li>
                                                       @empty
                                                           <li>No Permissions</li>
                                                       @endforelse
                                                   </ul>">
                                               View Permissions
                                               (
                                               @php
                                                   $count = count($filteredPermissions);
                                               @endphp
                                               {{ $count }}
                                               )
                                            </a>
                                        </div>
                                    </td>
                                    
                                    <td class="text-center">
                                        <div class="tbl-action-link">
                                         
                                            <a href="{{ route('admin.edit.account_type', $value->id) }}"><i
                                                class="icons icon-edit" data-toggle="tooltip" data-placement="top"
                                                title="" data-original-title="Edit"></i></a>
                                            <a href="javascript:void(0);" id="deletebtn"
                                                data-href="{{ route('admin.delete.account_type', $value->id) }}"
                                                data-pointid="{{ $value->id }}" title="{{ translate('Delete') }}">
                                                <i class="icons icon-delete" data-toggle="tooltip" data-placement="top" title=""
                                                    data-original-title="Delete"></i>
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        @else
                            <tr class="no-data">
                                <td colspan="6">
                                    <div class="nodata-col">
                                        <i class="icons icon-no-items"></i>
                                        <h1>{{ translate('No Account Types Available') }}</h1>
                                    </div>
                                </td>
                            </tr>
                        @endif
                    </tbody>
                </table>
            </div>
        </div>
    </div>
 
    <div class="aiz-pagination">
        <div class="perPage">
            Account Type(s) : <strong>{{ $accountType->total() }}</strong>
        </div>
        {{ $accountType->appends(request()->input())->links() }}
    </div>
    @include('modals.delete_modal')
    {{-- <div class="modal right fade newAttributes-modal1"  data-refresh="true" id="newAttributes-modal1" role="dialog">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content" id="update-content" >
                <div class="modal-header close-btn" style="padding:16px">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="" style="border-bottom:1px solid rgba(0,0,0,.1);width:100%;padding:0rem 0 12px 0;font-size:18px;">Edit Unit</h4>
                </div>
                <div class="modal-body pt-1" id="editData" style="padding:16px">
 
                </div>
            </div>
        </div>
    </div>
  --}}
@endsection
 
@section('script')
<script type="text/javascript">
    $(document).ready(function() { 
        $(document).on('click', '#editUnit', function(e) {

            var url = $(this).data('url');
            $.ajax({
                url: url,
                type: 'get',
                success: function(e) {
                    $("#editData").html(e);
                }
            });
 
        });  
 
        $(document).on('click', '#deletebtn', function(e) {
            e.preventDefault();
            var url = $(this).attr('data-href');
            var deleteModal = $('#delete-modal');
 
            deleteModal.modal({
                backdrop: 'static',
                keyboard: false
            });
 
            $('#delete-link').one('click', function(e) {
                e.preventDefault();
                $.ajax({
                    url: url,
                    type: "GET",
                    success: function(response) {
                        deleteModal.modal('hide');
                        AIZ.plugins.notify('success', '{{ translate('Account Type deleted successfully') }}');
                        location.reload(); // Reload the page after successful deletion
                    },
                    error: function(xhr) {
                        deleteModal.modal('hide');
                        AIZ.plugins.notify('danger', '{{ translate('Error deleting account type') }}');
                    }
                });
            });
        });
 
        $(document).on('change', "#checkAll", function() {
            $(".product_checkbox").prop('checked', $(this).prop("checked"));
            updateSelectedCount();
            updateDeleteControls();
        });
 
        $(document).on('click', '.product_checkbox', function() {
            updateSelectedCount();
            updateDeleteControls();
        });
 
        function updateSelectedCount() {
            const selectedCount = $('.product_checkbox:checked').length;
            $("#sProduct").text(selectedCount);
        }
 
        function updateDeleteControls() {
            const selectedCount = $('.product_checkbox:checked').length;
            if (selectedCount > 0) {
                $("#deletedData, .selected-prod").css("display", "block");
            } else {
                $("#deletedData, .selected-prod").css("display", "none");
            }
        }
 
        $(document).on('click', '#delete_records', function() {
            var selectedIds = [];
            var deleteModal = $('#delete-modal');
 
            $(".product_checkbox:checked").each(function() {
                selectedIds.push($(this).data('emp-id'));
            });
 
            if (selectedIds.length === 0)  {
                alert("Please select records.");
            } else {
                deleteModal.modal({
                    backdrop: 'static',
                    keyboard: false
                });
 
                $('#delete-link').one('click', function(e) {
                    e.preventDefault();
                    $.ajax({
                        type: "POST",
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        url: "{{ url('/admin/multi/delete') }}",
                        data: { emp_id: selectedIds.join(",") },
                        success: function(response) {
                            selectedIds.forEach(function(id) {
                                $("#" + id).closest("tr").remove();
                            });
                            updateSelectedCount(); 
                            updateDeleteControls();
                            AIZ.plugins.notify('success', '{{ translate('Account Type(s) deleted successfully') }}');
                            deleteModal.modal('hide');
                            location.reload();
                        },
                        error: function(xhr) {
                            AIZ.plugins.notify('danger', '{{ translate('Error deleting account type(s)') }}');
                            deleteModal.modal('hide');
                        }
                    });
                });
            }
        });
 
        $('.popover-dismiss').popover({
            trigger: 'focus'
        });
 
        $(function () {
            $('[data-toggle="popover"]').popover({
                html: true
            });
        });
 
    }); 
</script>
@endsection