@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('blog.index') }}"><i class="fas fa-icon-name"></i> الرجوع الى الخلف </a>
      <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>{{ $blog ->title_ar }}</td>
              </tr>
              <tr>
                <th>اسم المقال بالأجنبي</th>
                <td>{{ $blog ->title_en }}</td>
              </tr>
              <tr>
                <th>وصف المقال بالعربي</th>
                <td>{!! $blog ->content_ar !!}</td>
              </tr>
              <tr>
                <th>وصف المقال بالأجنبي</th>
                <td>{!! $blog ->content_en !!}</td>
              </tr>
              <tr>
                <th>صورة المقال  </th>
                <td style="padding: 0px">
                    <img  src="{{ asset('upload/'.$blog->image) }}" width="150px" alt="{{ $blog->blog_ar }}">
                  </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