@extends('dashboard.layout.layout')
@section('content')

<div class="main-panel">
    <!-- BEGIN : Main Content-->
    <div class="main-content">
      <div class="content-overlay"></div>
      <div class="content-wrapper"><div class="row">
    <div class="col-12">
    </div>
</div>

<!-- DOM - jQuery events table -->
<section id="dom" style="margin-top: -580px ">

</section>
<div class="row">
<div class="col-12">
  <div class="card">
    <div class="card-header">
      <a class="btn btn-success" href="{{ route('roles.index') }}"><i class="fas fa-icon-name"></i> الرجوع الى الخلف </a>
      {{-- <h4 style="text-align: center" class="card-title">جدول  الكورسات</h4> --}}
      <div class="form-group">
        {{-- <input type="text" id="searchInput" class="form-control" placeholder="Search"> --}}
    </div>
    </div>
    <div class="card-content ">
      <div class="card-body">
        <div class="table-responsive">
          <table class="table table-striped table-bordered dom-jQuery-events">
            <tr>
              <tr>
                <th>اسم  الدور</th>
                <td>{{ $role ->name }}</td>
              </tr>
              <tr>
                <th> الصلاحيات   </th>
                <td>
                  @if(!empty($rolePermissions))
                  @foreach($rolePermissions as $v)
                      <label class="badge badge-success">{{ $v->name }} </label>
                  @endforeach
              @endif
                </td>
              </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
</div>
</section>
<!-- DOM - jQuery events table -->

<!-- File export table -->
<button class="btn btn-primary scroll-top" type="button"><i class="ft-arrow-up"></i></button>

  </div>
  <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>

    $(document).ready(function() {
            // عند تغيير قيمة حقل البحث
            $('#searchInput').on('keyup', function() {
                var value = $(this).val().toLowerCase(); // القيمة المدخلة في حقل البحث

                // التحقق من كل صف في الجدول
                $('table tbody tr').filter(function() {
                    $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
                });
            });
        });

      setTimeout(function() {
        var alertSuccess = document.getElementById('alert-success');
        if (alertSuccess) {
            alertSuccess.style.display = 'none';
        }
    }, 5000); // 5000 milliseconds = 5 seconds
  </script>
@endsection