@extends('layouts.admin.app')
@section('title', __('trans.roles.title'))

@section('content')

    <h4 class="fw-semibold mb-4">
        @yield('title')
        <button data-bs-target="#addRoleModal" data-bs-toggle="modal" class="btn btn-sm btn-primary text-nowrap add-new-role waves-effect waves-light">
            {{__('trans.roles.add_new')}}
        </button>
    </h4>

    <div class="alert alert-info" role="alert">{{__('trans.roles.alert_delete_role')}}</div>

    <div class="row g-6">
        @foreach ($roles as $role)
            <div class="col-xl-4 col-lg-6 col-md-6">
                <div class="card h-100">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center mb-4">
                            <h6 class="fw-normal mb-0 text-body">{{__('trans.roles.count_admins',['count'=>$role['admins_count']])}}</h6>
                            <ul class="list-unstyled d-flex align-items-center avatar-group mb-0">
                                @foreach ($role['admins'] as $admin)
                                    <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar pull-up" aria-label="{{ $admin['name'] }}" data-bs-original-title="{{ $admin['name'] }}">
                                        <img class="rounded-circle" src="{{ $admin['img'] }}" alt="{{ $admin['name'] }}">
                                    </li>

                                    @if($loop->index == 3 && $role['admins_count'] > 4)
                                        <li class="avatar">
                                            <span class="avatar-initial bg-primary text-white border-transparent rounded-circle pull-up" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-original-title="{{($role['admins_count']-4)." ".__('trans.more')}}">+{{($role['admins_count']-4)}}</span>
                                        </li>
                                        @break
                                    @endif
                                @endforeach
                            </ul>
                        </div>

                        @php
                            $canEdit   = admin_can('role_update') && !$role['main'];
                            $canDelete = admin_can('role_delete') && !$role['main'] && $role['id'] != 2;
                        @endphp

                        <div class="d-flex justify-content-between align-items-end">
                            <div class="role-heading">
                                <h5 class="mb-1">{{ $role['name'] }}</h5>

                                @if ($canEdit)
                                    <a href="javascript:;"
                                    data-id="{{ $role['id'] }}"
                                    data-bs-toggle="modal"
                                    data-bs-target="#addRoleModal"
                                    class="role-edit">
                                        <span>{{ __('trans.roles.edit') }}</span>
                                    </a>
                                @endif
                            </div>

                            @if ($canDelete)
                                <form action="{{ route('admin.roles.destroy', $role['id']) }}" method="post">
                                    @csrf
                                    {{ method_field('DELETE') }}
                                    <x-inputs.btn
                                        type="submit"
                                        status="danger"
                                        class="btn-label-danger"
                                        text="<i class='fa-solid fa-trash-can'></i>"
                                        action="delete"
                                    />
                                </form>
                            @endif
                        </div>
                        {{-- <div class="d-flex justify-content-between align-items-end">
                            <div class="role-heading">
                                @if (!$role['main'])
                                    <h5 class="mb-1">{{ $role['name'] }}</h5>
                                    @if (admin_can('role_update'))
                                        <a href="javascript:;" data-id="{{ $role['id'] }}" data-bs-toggle="modal" data-bs-target="#addRoleModal" class="role-edit"><span>{{__('trans.roles.edit')}}</span></a>
                                    @endif
                                @else
                                    <h5 class="mb-1">{{__('trans.roles.'.$role['name']) }}</h5>
                                @endif
                            </div>

                            @if (!$role['main'])
                                @if (admin_can('role_delete') && $role['id'] != 2)
                                    <form action="{{ route('admin.roles.destroy', $role['id']) }}" method="post">@csrf {{ method_field('DELETE') }}
                                        <x-inputs.btn
                                            type="submit"
                                            status="danger"
                                            class="btn-label-danger"
                                            text="<i class='fa-solid fa-trash-can'></i>"
                                            action="delete"
                                        />
                                    </form>
                                @endif
                            @endif
                        </div> --}}
                    </div>
                </div>
            </div>
        @endforeach

    </div>

    @include('admin.roles.model')
@endsection


@push('js')
    <script>
        $('.add-new-role').on('click', function() {
            $('input[type=checkbox]').prop('checked', false);
            $('#addRoleForm').attr('action', "{{ route('admin.roles.store') }}");
            $('#modalRoleName').val('');
            $('.model-save-btn').addClass('btn-create').removeClass('btn-update').html("{{__('trans.save')}}");
            $('#addRoleForm input[name="_method"]').remove();
            $('.role-title').html("{{__('trans.roles.add_new')}}");
        });

        $('.role-edit').on('click', function() {
            var id = $(this).data('id');

            $('.model-save-btn').addClass('btn-update').removeClass('btn-create').html("{{__('trans.update')}}");
            $('.role-title').html("{{__('trans.roles.edit')}}");

            $.ajax({
                type: 'get',
                url: "{{url('admin/roles')}}/"+id,
                data: {id:id},
                beforeSend: function() {
                    $('input[type=checkbox]').prop('checked', false);
                    $('#addRoleForm').attr('action', "{{ url('/admin/roles') }}/"+id);
                    $('#addRoleForm').append('<input type="hidden" name="_method" value="PUT">');
                },
            }).done(function(res) {
                $('.role-name').val(res.data['name']);
                res.data.permissions.forEach(function(permission) {
                    if($('#'+permission).length) {
                        $('#'+permission).prop('checked', true);
                    }
                });

                if (res.data.permissions.length == {{count(permissions())}}) {
                    $('#selectAll').prop('checked', true);
                } else {
                    $('#selectAll').prop('checked', false);
                }
            });
        });

        $('#selectAll').on('change', function() {
            if( $(this).is(":checked") ) {
                $('input[type=checkbox]').prop('checked', true);
            }
            else {
                $('input[type=checkbox]').prop('checked', false);
            }
        });
    </script>
@endpush