@extends('layouts.base')

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

@section('content')
    <section class="courses-listing bg-gray">
        <div class="container">
            <!-- Header -->
            <div class="header d-flex justify-content-between align-items-center mb-4">
                <h1 style="color: {{ session('couleurText3') }}">Les offres disponibles</h1>
            </div>

            <!-- Barre de Recherche -->
            <form method="GET" action="{{ route('etudiants.index') }}" class="mb-4" id="search-form">
                <div class="row">
                    <div class="col-md-6">
                        <input
                            type="text"
                            name="query"
                            class="form-control"
                            placeholder="Rechercher..."
                            value="{{ request('query') }}"
                        />
                    </div>
                    <div class="col-md-2">
                        <button type="submit" class="btn btn-primary">Rechercher</button>
                    </div>
                </div>
            </form>



            @if($offres->isEmpty() && !request('query'))
                <div class="alert alert-info">
                    Actuellement, il n'y a aucune offre disponible.
                </div>
            @else
                <div class="courses-table">
                    <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>Entreprise</th>
                                <th>Date de début</th>
                                <th style="color: red">Date limite</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($offres as $offre)
                                <tr>
                                    <td>{{ $offre->reference }}</td>
                                    <td>{{ $offre->title }}</td>
                                    <td>{{ $offre->company_name }}</td>
                                    <td>{{ $offre->start_date ? (new \DateTime($offre->start_date))->format('d/m/Y') : 'Date non disponible' }}</td>
                                    <td style="color: red">
                                        {{ $offre->end_date ? (new \DateTime($offre->end_date))->format('d/m/Y') : 'Date non disponible' }}
                                    </td>
                                    <td>
                                        <a style="margin-bottom: 5px;" href="{{ route('etudiants.show-offres', $offre->id) }}" class="btn btn-success" title="Voir">
                                            <i class="fa fa-eye" aria-hidden="true"></i>
                                        </a>
                                        @if ($offre->url)
                                            <a href="{{ $offre->url }}" class="btn btn-info" target="_blank" title="Postuler">
                                                <i class="fa fa-paper-plane" aria-hidden="true"></i>
                                            </a>
                                        @else
                                            <span class="btn btn-info disabled" title="Lien non disponible">
                                                <i class="fa fa-paper-plane" aria-hidden="true"></i>
                                            </span>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif

            <nav aria-label="Page navigation example" class="d-flex justify-content-center">
                {{ $offres->links('pagination::bootstrap-5') }}
            </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