@extends('layouts.admin')

@section('title', trans('admin.Roles'))
@section('page-title', trans('admin.Roles'))

@section('content')

<section class="dpage active">
    <div class="page-head">
        <div><h2>{{ trans('admin.Roles') }}</h2></div>
        <div class="page-head-actions">
            @if (auth('user')->user()->has_permission('create-roles'))
                <button type="button" class="btn btn-primary btn-sm" onclick="openRoleModal('create')">＋ {{ trans('admin.Add') }}</button>
            @endif
        </div>
    </div>

    <div class="card">
        <div class="table-wrap">
            <table class="table" id="rolesTable" style="width:100%;">
                <thead>
                <tr>
                    <th>#</th>
                    <th>{{ trans('admin.Name') }}</th>
                    <th>{{ trans('admin.Description') }}</th>
                    <th>{{ trans('admin.Created at') }}</th>
                    <th>{{ trans('admin.Actions') }}</th>
                </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</section>

<!-- ============ MODAL: Add / Edit role ============ -->
@if (auth('user')->user()->has_permission('create-roles') || auth('user')->user()->has_permission('update-roles'))
<div class="modal-backdrop" id="roleModal">
  <div class="modal-box wide">
    <div class="modal-head">
      <h3 id="roleModalTitle">{{ trans('admin.Add') }} {{ trans('admin.Roles') }}</h3>
      <button class="modal-close" onclick="closeModal('roleModal')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg></button>
    </div>
    <form id="roleForm">
      @csrf
      <input type="hidden" name="role_id" id="roleId" value="">
      <div class="modal-body">
        <div class="field" style="margin-bottom:16px;">
          <label>{{ trans('admin.Name') }}</label>
          <input type="text" name="name" id="roleName" required>
        </div>
        <div class="field" style="margin-bottom:20px;">
          <label>{{ trans('admin.Description') }}</label>
          <input type="text" name="description" id="roleDescription" required>
        </div>

        @php
          $moduleLabels = [
            'users'        => 'Users',
            'roles'        => 'Roles',
            'categories'   => 'Categories',
            'instructors'  => 'Instructors',
            'courses'      => 'Courses',
            'students'     => 'Students',
            'payments'     => 'Payments',
            'exams'        => 'Exams',
            'settings'     => 'Settings',
            'homepage'     => 'Homepage content',
          ];
        @endphp
        @foreach (config('global.roles') as $module => $actions)
          <div class="field" style="margin-bottom:16px;">
            <label>{{ trans('admin.' . ($moduleLabels[$module] ?? ucfirst($module))) }}</label>
            <div class="perm-grid">
              @foreach ($actions as $action)
                <label class="perm-item off" data-permission="{{ $action }}-{{ $module }}">
                  <input type="checkbox" name="permissions[]" value="{{ $action }}-{{ $module }}">
                  <span class="dot"></span>
                  {{ trans('admin.' . ucfirst($action)) }}
                </label>
              @endforeach
            </div>
          </div>
        @endforeach

        <div class="hint" id="roleErrors" style="color:var(--red); margin-top:6px;"></div>
      </div>
      <div class="modal-foot">
        <button type="button" class="btn btn-ghost" onclick="closeModal('roleModal')">{{ trans('admin.Close') }}</button>
        <button type="submit" class="btn btn-primary" id="roleSubmitBtn">{{ trans('admin.Save') }}</button>
      </div>
    </form>
  </div>
</div>
@endif

@endsection

@section('script')
@if(auth('user')->user()->has_permission('export-roles'))
<script src="{{ asset('theme/dashboard/plugins/datatables-buttons/js/buttons.colVis.js') }}"></script>
<script src="{{ asset('vendor/datatables/buttons.server-side.js') }}"></script>
@endif
<script type="text/javascript">
    var rolesTable = $('#rolesTable').DataTable({
        processing: true,
        serverSide: true,
        dom: '{{ auth('user')->user()->has_permission('export-roles') ? 'Blrtip' : 'lrtip' }}',
        pageLength: 10,
        lengthMenu: [10, 25, 50, 100],
        ajax: {
          "url": "{{ route('dashboard.roles.index') }}",
        },
        columns: [
            {data: 'id', name: 'id'},
            {data: 'display_name', name: 'display_name'},
            {data: 'description', name: 'description'},
            {data: 'created_at', name: 'created_at'},
            {data: 'action', name: 'action', orderable: false, searchable: false},
        ],
        @if(auth('user')->user()->has_permission('export-roles'))
        buttons: [
            { extend: 'colvis', text: '{{ __('admin.column_visibility') }}' },
            { extend: 'postExcelVisibleColumns', text: '{{ __('admin.excel') }}' },
            { extend: 'postCsvVisibleColumns', text: '{{ __('admin.csv') }}' },
            { extend: 'postPdfVisibleColumns', text: '{{ __('admin.pdf') }}' },
        ],
        @endif
        language: {
            search: "{{ __('admin.search') }}: ",
            loadingRecords: "{{ __('admin.loading') }}",
            emptyTable: "{{ __('admin.no_result') }}",
            zeroRecords: "{{ __('admin.no_result') }}",
            lengthMenu: "{{ __('admin.Show') }} _MENU_ {{ __('admin.entries') }}",
            paginate: {
                previous: "{{ __('admin.previous') }}",
                next: "{{ __('admin.next') }}",
            }
        },
    });

    $(document).on('change', '.perm-item input[type=checkbox]', function(){
        $(this).closest('.perm-item').toggleClass('on off', this.checked).toggleClass('off', !this.checked);
    });

    function resetPermChecks(){
        $('.perm-item').each(function(){
            $(this).find('input[type=checkbox]').prop('checked', false);
            $(this).removeClass('on').addClass('off');
        });
    }

    function checkPermissions(names){
        resetPermChecks();
        names.forEach(function(name){
            var $item = $('.perm-item[data-permission="' + name + '"]');
            $item.find('input[type=checkbox]').prop('checked', true);
            $item.removeClass('off').addClass('on');
        });
    }

    function openRoleModal(mode, id){
        $('#roleForm')[0].reset();
        $('#roleId').val('');
        $('#roleErrors').html('');
        resetPermChecks();

        if (mode === 'edit') {
            $('#roleModalTitle').text("{{ trans('admin.Edit') }} {{ trans('admin.Roles') }}");
            $.get("{{ url('dashboard/roles') }}/" + id + "/edit", function(res){
                var data = res.data;
                $('#roleId').val(data.id);
                $('#roleName').val(data.name);
                $('#roleDescription').val(data.description);
                checkPermissions(data.permissions);
                openModal('roleModal');
            }).fail(function(){
                dashToast('✕', "{{ trans('admin.faild') }}");
            });
        } else {
            $('#roleModalTitle').text("{{ trans('admin.Add') }} {{ trans('admin.Roles') }}");
            openModal('roleModal');
        }
    }

    $(document).on('click', '.edit-role', function(){
        openRoleModal('edit', $(this).data('id'));
    });

    $('#roleForm').on('submit', function(e){
        e.preventDefault();
        var $btn = $('#roleSubmitBtn');
        var id = $('#roleId').val();
        var url = id
            ? "{{ url('dashboard/roles') }}/" + id + "/edit"
            : "{{ route('dashboard.roles.store') }}";
        $('#roleErrors').html('');
        $btn.prop('disabled', true);

        $.ajax({
            url: url,
            method: 'POST',
            data: $(this).serialize(),
            success: function(res){
                closeModal('roleModal');
                $('#roleForm')[0].reset();
                resetPermChecks();
                rolesTable.ajax.reload(null, false);
                dashToast('✓', "{{ trans('admin.success') }}");
            },
            error: function(xhr){
                if (xhr.status === 422) {
                    var errors = xhr.responseJSON.errors;
                    var html = '';
                    $.each(errors, function(key, val){ html += val[0] + '<br>'; });
                    $('#roleErrors').html(html);
                } else {
                    dashToast('✕', "{{ trans('admin.faild') }}");
                }
            },
            complete: function(){
                $btn.prop('disabled', false);
            }
        });
    });
</script>
@endsection