@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">
      {{-- <a class="btn btn-info" href="{{ route('trainer.create') }}"><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">
            <thead>
              <tr>
                <th style="padding-left: 7px">#</th>
                <th style="padding-left: 7px">  اسم المدرب </th>
                <th style="padding-left: 7px">   الايميل </th>
                <th style="padding-left: 7px">   رقم الجوال </th>
                <th style="padding-left: 7px">  العنوان</th>
                <th style="padding-left: 7px">  المدينه</th>
                <th style="padding-left: 7px">  المؤهلات العليمة</th>
                <th style="padding-left: 7px">  الخبرات السابقة</th>
                <th style="padding-left: 7px">  سنوات الخبرة </th>
                <th style="padding-left: 7px">   cv </th>
                <th style="padding-left: 7px">  تاريخ الميلاد</th>
                <th style="padding-left: 7px">  الجنس</th>
                <th style="padding-left: 7px">العمليات</th>
              </tr>
            </thead>
            <tbody>
                {{-- {{ $i = 0 }} --}}
                @forelse ($trainers as $trainer)
              <tr>
                <td>{{ $loop ->index }}</td>
                <td>{{ $trainer->name }}</td>
                <td>{{ $trainer ->email }}</td>
                <td>{{ $trainer ->phone }}</td>
                <td>{{ $trainer ->address }}</td>
                <td>{{ $trainer ->city }}</td>
                <td>{{ $trainer ->qualification }}</td>
                <td>{{ $trainer ->previous_experience }}</td>
                <td>{{ $trainer ->year_experience }}</td>
                <td><a href="{{ asset('upload/'.$trainer ->cv) }}" target="_blank">View PDF</a></td>
                <td>{{ $trainer ->birthday }}</td>
                <td>{{ $trainer ->gender }}</td>
                <td>
                  @can('trainer-delete')
                    <a href="#" onclick="confirmDelete(event, {{ $trainer->id }})">
                        <i style="font-size: 20px; color: red" class="fa fa-trash-o"></i>
                    </a>&nbsp;
                    @endcan
                    {{-- <a href="{{ route('trainer.edit',$trainer->id) }}"><i style="font-size: 20px" class="fa fa-edit"></i></a> --}}
                </td>
              
                {{-- <td style="padding: 0px"> <img src="{{ asset('upload/user/'.$user->main_image) }}" alt="{{ $user->title }}" width="180px" height="100px" > </td> --}}
              </tr>
              @empty
              <td colspan="13" 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, trainerId) {
            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('trainer.destroy', ['trainer' => '__trainerId__']) }}".replace('__trainerId__', trainerId),
                        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