@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('course.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>{{ $course ->name_ar }}</td>
              </tr>
              <tr>
                <th>اسم الكورس بالأجنبي</th>
                <td>{{ $course ->name_en }}</td>
              </tr>
              <tr>
                <th>وصف الكورس بالعربي</th>
                <td>{!! $course ->description_ar !!}</td>
              </tr>
              <tr>
                <th>وصف الكورس بالأجنبي</th>
                <td>{!! $course ->description_en !!}</td>
              </tr>
              <tr>
                <th>صورة الكورس  </th>
                <td style="padding: 0px">
                    <img  src="{{ asset('upload/'.$course->image) }}" width="120px" alt="{{ $course->name_ar }}">
                  </td>
              </tr>
               <tr>
                <th>   السعر</th>
                <td>{{ $course ->price }}</td>
               </tr>
               <tr>
                <th>اسم الاختصاص  </th>
                <td>{{ $course ->category->name_ar }}</td>
               </tr>
               <tr>
                <th>  عدد المقاعد (اختياري) </th>
                <td>{{ $course ->seat }}</td>

               </tr>
                 <tr>
                <th> المدة بالعربي  </th>
                <td>{{ $course ->duration_ar }}</td>

               </tr>
                <tr>
                <th> المدة بالأجنبي  </th>
                <td>{{ $course ->duration_en }}</td>

               </tr>
                 <tr>
                <th> عدد الساعات بالعربي</th>
                <td>{{ $course ->hour_ar }}</td>

               </tr>
               <tr>
                <th> عدد الساعات بالأجنبي</th>
                <td>{{ $course ->hour_en }}</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