@extends('layouts.app')

@section('title', 'Instructors | ' . $websiteSetting->app_name)
@section('description', 'Meet the experienced instructors at ' . $websiteSetting->app_name . ' who will guide you through our courses.')
@section('keywords', 'instructors, experts, teachers, ' . $websiteSetting->app_name)

@section('content')

 <section class="relative py-16 bg-cover bg-center bg-fixed" style="background-image: url('{{asset('assets/images/featured-parallax1.webp')}}');">
  <!-- Dark overlay -->
  <div class="absolute inset-0 bg-black/85 z-0"></div>

  <div class="container mx-auto relative z-10 px-4">
    <!-- Section Title -->
    <div class="text-center mb-8 md:mb-12 max-w-3xl mx-auto">
      <h2 class="text-3xl md:text-4xl font-bold mb-2 text-white">  {{ __('messages.meet_expert_title') }}</h2>
      <p class="mt-4 text-white mx-5 text-base md:text-lg">
       {{ __('messages.meet_expert_subtitle') }}
      </p>
      <span class="inline-block w-16 h-1 bg-white mt-3"></span>
    </div>

    <!-- Grid -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
   
   @forelse ($instructors as $instructor)
      <!-- Repeat similar card for other teachers -->
 <div class="relative group text-center ">
  <div class="relative p-2">
    <!-- Decorative Borders -->
<div class="absolute w-8 h-8 border-l-4 border-b-4 border-primary bottom-0 left-0 
              transition-all duration-300 group-hover:-bottom-1 group-hover:-left-1"></div>
  <div class="absolute w-8 h-8 border-r-4 border-b-4 border-primary bottom-0 right-0 
              transition-all duration-300 group-hover:-bottom-1 group-hover:-right-1"></div>
  <div class="absolute w-8 h-8 border-l-4 border-t-4 border-primary top-0 left-0 
              transition-all duration-300 group-hover:-top-1 group-hover:-left-1"></div>
  <div class="absolute w-8 h-8 border-r-4 border-t-4 border-primary top-0 right-0 
              transition-all duration-300 group-hover:-top-1 group-hover:-right-1"></div>

    <!-- Instructor Image -->
    <img src="{{ asset($instructor->user->image ?? 'assets/images/default-user.png') }}" 
         alt="{{ $instructor->user->name }}" 
         class="w-full relative z-10 bg-slate-50">

  </div>

  <!-- Skewed Info Section -->
  <div class="relative mx-4 -mt-10 z-10 group-hover:text-white text-black py-2 shadow-lg">
    <h5 class="text-lg font-bold truncate">
      {{ $instructor->user->name }}
    </h5>
    <p class="text-sm">
      {{ $instructor->organization }}
    </p>
    <p class="text-sm  -skew-x-12 relative mt-1 duration-500 bg-primary group-hover:bg-white group-hover:text-black text-white -left-[5px]">
      {{ $instructor->experience_years }}+ Years Experience
    </p>

    <!-- Background Effects -->
    <div class="absolute inset-0 -skew-x-12 bg-white -z-10"></div>
    <div class="absolute inset-0 -skew-x-12 bg-primary w-0 group-hover:w-full transition-all duration-500 -z-9"></div>
  </div>
</div>


          @empty
                    <!-- Empty State -->
                    <div class="col-span-full">
                        <div class="text-center py-16">
                          
                           <h3 class="text-2xl font-semibold text-gray-900 mb-2">
    {{ __('messages.no_instructors') }}
</h3>
<p class="text-gray-600 max-w-md mx-auto">
    {{ __('messages.updating_instructors') }}
</p>


                        </div>
                    </div>
                @endforelse

      <!-- Add Md Nazmul Alam and Muntasir Tarek Roktim similarly -->
    </div>
  </div>
</section>


@endsection