@extends('layouts.base')

@section('menu')
    @include('admin.menu')
@endsection


@section('content')
@if(session('success'))
    <div class="alert alert-success">
        {{ session('success') }}
    </div>
@endif

<section class="courses-listing bg-gray">
    <div class="container">
        <nav class="nav nav-pills nav-justified d-flex justify-content-center">
            <a href="{{ route('admin.offres') }}" 
               class="nav-link {{ Route::currentRouteName() === 'admin.offres' ? 'active' : '' }}">
                Les offres
            </a>
            <a href="{{ route('admin.type-offres') }}" 
               class="nav-link {{ Route::currentRouteName() === 'admin.type-offres' ? 'active' : '' }}">
                Les types d'offres
            </a>
            <a href="{{ route('admin.domaines') }}" 
               class="nav-link {{ Route::currentRouteName() === 'admin.domaines' ? 'active' : '' }}">
                Les domaines
            </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">
              <small>LES DOMAINES</small>
            </ul>
          </div>
          <div class="right">          
            <a href="{{ route('admin.domaines.create') }}" class="btn btn-success ml-3"><i class="fa fa-plus" aria-hidden="true" ></i> Nouveau </a>
          </div>
        </div>
        <div class="courses-table-body">
            
          <table id="offresTable" class="table table-hover table-responsive-xl" style="width: 100%;"> 
                <thead>
                    <tr>
                        <th>N*</th>
                        <th>Intitulé</th>
                        <th>Description</th>
                        <th>Actions</th>
                    </tr>
                </thead>  
            <tbody>
                @foreach($domaines as $domaine)
                <tr>
                    <td>{{ $domaine->id }}</td>
                    <td>{{ $domaine->name }}</td>
                    <td>{{ $domaine->description ? : 'Aucune description disponible' }}</td>
                    <td>
                      <a style="margin-bottom: 5px;" href="{{ route('admin.edite-domaines', $domaine->id) }}" class="btn btn-primary" title="Modifier">
                          <i class="fa fa-edit" aria-hidden="true"></i>
                      </a>
                      <a style="margin-bottom: 5px;" href="{{ route('admin.delete-domaines', $domaine->id) }}" class="btn btn-danger" title="Supprimer">
                          <i class="fa fa-trash" aria-hidden="true"></i>
                      </a>
                  </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