@extends('layouts.base')


@section('content')
   
    <section class="courses-listing bg-gray">
        <div class="container">
          <nav class="nav nav-pills nav-justified d-flex justify-content-center"><a href="#" class="nav-link active">All</a><a href="#" class="nav-link">Trending</a><a href="#" class="nav-link">Popular</a><a href="#" class="nav-link">Free</a><a href="#" class="nav-link">Premium</a></nav>
          <div class="courses-table">
            <div class="courses-table-header bg-primary d-flex justify-content-between align-items-center flex-column flex-md-row">
              <div class="left">
                <ul class="list-inline mb-0">
                  <li class="list-inline-item">80 Offline Courses</li>
                  <li class="list-inline-item">140 Online Courses</li>
                </ul>
              </div>
              <div class="right">
                <select title="Sort By:" data-style="btn-outline-light" class="selectpicker">
                  <option>Start Date</option>
                  <option>Duration</option>
                  <option>Level</option>
                </select>
              </div>
            </div>
            <div class="courses-table-body">
                
              <table id="offresTable" class="table table-hover table-responsive-xl" style="width: 100%;"> 
                    <thead>
                        <tr>
                            <th>Code</th>
                            <th>Intitulé de l'offre</th>
                            <th>Description</th>
                            <th>Entreprise</th>
                            <th>Date limite</th>
                            <th>Actions</th>
                        </tr>
                    </thead>  
                <tbody>
                    @foreach($offres as $offre)
                    <tr>
                        <td>{{ $offre->id }}</td>
                        <td>{{ $offre->intitule }}</td>
                        <td>{{ $offre->description ? : 'Aucune description disponible' }}</td>
                        <td>{{ $offre->entreprise }}</td>
                        <td>
                            {{ $offre->date_limite ? (new \DateTime($offre->date_limite))->format('d/m/Y') : 'Date non disponible' }}
                        </td>
                        <td>
                        <a style="margin-bottom: 5px; " href="{{ route('alumnis.show-offres', $offre->id) }}"  class="btn btn-success">Voir</a>
                        @if ($offre->url)
                            <a href="{{ $offre->url }}" class="btn btn-info" target="_blank">Postuler</a>
                        @else
                            <span class="btn btn-info disabled">Postuler</span>
                        @endif
                        </td>
                        
                    </tr>
                    @endforeach
                </tbody>
              </table>
            </div>
          </div>
          <nav aria-label="Page navigation example" class="d-flex justify-content-center">
            <ul class="pagination">
              <li class="page-item"><a href="#" aria-label="Previous" class="page-link"><span aria-hidden="true">«</span><span class="sr-only">Previous</span></a></li>
              <li class="page-item active"><a href="#" class="page-link">1</a></li>
              <li class="page-item"><a href="#" class="page-link">2</a></li>
              <li class="page-item"><a href="#" class="page-link">3</a></li>
              <li class="page-item"><a href="#" aria-label="Next" class="page-link"><span aria-hidden="true">»</span><span class="sr-only">Next</span></a></li>
            </ul>
          </nav>
        </div>
      </section>
    <!-- Scripts -->
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
    <script>
       $(document).ready(function () {
    $('#offresTable').DataTable({
        language: {
            url: "https://cdn.datatables.net/plug-ins/1.13.6/i18n/fr-FR.json"
        },
        responsive: true, 
        pageLength: 10, 
        order: [[0, "asc"]] 
    });
});


    </script>

@endsection