@extends('admin.layouts.master')

@section('title', __('admin.roles'))
@section('page_title', __('admin.roles'))

@section('breadcrumbs')
    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">{{ __('admin.dashboard') }}</a></li>
    <li class="breadcrumb-item active">{{ __('admin.roles') }}</li>
@endsection

@section('content')
<div class="card">
    <div class="card-header">
        <h3 class="card-title"><i class="fas fa-user-shield"></i> {{ __('admin.roles') }}</h3>
        <div class="card-tools">
            @can('roles.create')
                <button type="button" class="btn btn-primary btn-sm" id="addRoleBtn">
                    <i class="fas fa-plus"></i> {{ __('admin.add') }}
                </button>
            @endcan
        </div>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table id="rolesTable" class="table table-bordered table-striped table-hover" style="width:100%">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>{{ __('admin.name') }}</th>
                        <th>Guard</th>
                        <th>{{ __('admin.permissions') }}</th>
                        <th>{{ __('admin.users') }}</th>
                        <th>{{ __('admin.created_at') }}</th>
                        <th>{{ __('admin.actions') }}</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>

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

@push('scripts')
<script>
$(function () {
    const table = $('#rolesTable').DataTable({
        processing: true, serverSide: true, responsive: true, order: [[0, 'desc']],
        ajax: '{{ route('admin.roles.data') }}',
        language: {
            url: '{{ app()->getLocale() === "ar" ? "https://cdn.datatables.net/plug-ins/1.13.7/i18n/ar.json" : "" }}'
        },
        columns: [
            { data: 'id',                name: 'id', width: '60px' },
            { data: 'name',              name: 'name' },
            { data: 'guard_name',        name: 'guard_name' },
            { data: 'permissions_count', name: 'permissions_count', orderable: false, searchable: false },
            { data: 'users_count',       name: 'users_count', orderable: false, searchable: false },
            { data: 'created_at',        name: 'created_at' },
            { data: 'actions',           name: 'actions', orderable: false, searchable: false }
        ]
    });

    $('#addRoleBtn').on('click', function () {
        $('#roleForm').trigger('reset')[0].action = '{{ route('admin.roles.store') }}';
        $('#roleMethod').val('POST');
        $('#roleId').val('');
        $('#roleModalLabel').text('{{ __('admin.add') }}');
        $('#roleModal').modal('show');
    });

    $('#rolesTable tbody').on('click', '.edit-role-btn', function () {
        const id = $(this).data('id');
        $.get('{{ url('admin/roles') }}/' + id, function (r) {
            $('#roleForm').trigger('reset');
            $('#roleForm')[0].action = '{{ url('admin/roles') }}/' + r.id;
            $('#roleMethod').val('PUT');
            $('#roleId').val(r.id);
            $('input[name=name]').val(r.name);
            $('input[name=guard_name]').val(r.guard_name);
            $('#roleModalLabel').text('{{ __('admin.edit_resource', ['resource' => __('admin.roles')]) }}');
            $('#roleModal').modal('show');
        }).fail(() => toastr.error('{{ __('admin.something_went_wrong') }}'));
    });

    $('#rolesTable tbody').on('click', '.delete-role-btn', function () {
        const url = $(this).data('url');
        Swal.fire({
            title: '{{ __('admin.are_you_sure') }}',
            icon: 'warning', showCancelButton: true,
            confirmButtonColor: '#dc3545',
            confirmButtonText: '{{ __('admin.confirm') }}',
            cancelButtonText: '{{ __('admin.cancel') }}',
        }).then(r => {
            if (!r.isConfirmed) return;
            const $f = $('<form method="POST">').attr('action', url);
            $f.append('@csrf @method('DELETE')');
            $('body').append($f); $f.submit();
        });
    });

    @if($errors->any())
        $('#roleModal').modal('show');
    @endif
});
</script>
@endpush