@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 ">
    @if(session('success'))
    <div id="alert-success" class="alert alert-success mb-2" style="text-align: center;font-size: 17px" role="alert">
        {{ session('success') }}
    </div>
    @endif
    @if(session('danger'))
    <div id="alert-danger" class="alert alert-danger mb-2" style="text-align: center;font-size: 17px" role="alert">
        {{ session('danger') }}
    </div>
    @endif
</section>
<div class="row">
<div class="col-12">
  <div class="card">
    <div class="card-header">
      @can('role-create')
      <a class="btn btn-info" href="{{ route('roles.create') }}"><i class="fas fa-icon-name"></i>   اضافة دور (صلاحية) جديد  </a>
      @endcan
      <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">
            <thead>
              <tr>
                <th style="padding-left: 7px">#</th>
                <th style="padding-left: 7px">الدور   </th>
                <th style="padding-left: 7px">العمليات</th>
              </tr>
            </thead>
            <tbody>
                {{-- {{ $i = 0 }} --}}
                @forelse ($roles as $role)
              <tr>
                <td>{{ $loop ->index }}</td>
                <td>{{ $role ->name }}</td>
                <td >
                  @can('role-delete')
                    <a href="#" onclick="confirmDelete(event, {{ $role->id }})">
                        <i style="font-size: 20px; color: red" class="fa fa-trash-o"></i>
                    </a>
                    @endcan
                    &nbsp;
                    @can('role-edit')
                    <a href="{{ route('roles.edit',$role->id) }}"><i style="font-size: 20px" class="fa fa-edit"></i></a>
                    @endcan
                    <a href="{{ route('roles.show',$role->id) }}"><i style="font-size: 20px" class="fa fa-eye"></i></a>
                </td>
              
                {{-- <td style="padding: 0px"> <img src="{{ asset('upload/role/'.$role->main_image) }}" alt="{{ $role->title }}" width="180px" height="100px" > </td> --}}
              </tr>
              @empty
              <td colspan="11" style="text-align: center">لا يوجد بيانات حاليا </td>
              @endforelse
            </tbody>

          </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);
                });
            });
        });
        function confirmDelete(event, roleId) {
            event.preventDefault();

            swal({
                title: "هل أنت متأكد من الحذف؟",
                icon: "warning",
                buttons: {
                    no: {
                        text: "No",
                        value: false,
                        className: "btn btn-secondary",
                    },
                    yes: {
                        text: "Yes",
                        value: true,
                        className: "btn btn-danger",
                    },
                },
                dangerMode: true,
            }).then((willDelete) => {
                if (willDelete) {
                    // Use the DELETE method instead of GET
                    $.ajax({
                        url: "{{ route('roles.destroy', ['role' => '__roleId__']) }}".replace('__roleId__', roleId),
                        type: 'DELETE',
                        data: {
                            '_token': '{{ csrf_token() }}'
                        },
                        success: function(response) {
                            // Handle the successful deletion
                            console.log(response);
                            window.location.reload();
                        },
                        error: function(xhr, status, error) {
                            // Handle the deletion error
                            console.error(error);
                            window.location.reload();
                        }
                    });
                }
            });
        }
      setTimeout(function() {
        var alertSuccess = document.getElementById('alert-success');
        if (alertSuccess) {
            alertSuccess.style.display = 'none';
        }
    }, 5000); // 5000 milliseconds = 5 seconds
  </script>
@endsection