@extends('layouts.master')

@section('title', 'Liste des Opportunités')

@section('content')

<div class="container my-5">

    <a href="{{ route('entreprise_ivoirienne.mainService') }}" 
        class="btn rounded-pill btn-lg back text-white mb-4"
        id="service_back"
        style="background: {{ $colorCode }};"
        onmouseover="this.style.background='{{ $hovercolor }}';"
        onmouseout="this.style.background='{{ $colorCode }}';">
            <i class="fas fa-thin fa-angle-left"></i> @lang('messages.back')
    </a>

    <div class="d-flex justify-content-between align-items-center mb-4">
        <h3>📌 Liste des Opportunités</h3>

        <a href="{{ route('entreprise_ivoirienne.OpportunitesData') }}?parentServiceId=5&childServiceId=33" 
        class="btn btn-dark rounded-pill px-3">
            <i class="fa-solid fa-plus"></i> Ajouter une opportunité
        </a>
    </div>

    <!-- Search/Filter Section -->
    <div class="card mb-4">
        <div class="card-body">
            <h6 class="card-title">🔍 Filtres de recherche</h6>
            <form method="GET" action="{{ route('entreprise_ivoirienne.listeOpportunites') }}">
                <div class="row">
                    <div class="col-md-4">
                        <label for="domaine_filter" class="form-label">Domaine</label>
                        <input type="text" class="form-control" id="domaine_filter" name="domaine_filter" 
                               value="{{ request('domaine_filter') }}" placeholder="Ex: Technologie, Commerce...">
                    </div>
                    <div class="col-md-4">
                        <label for="type_filter" class="form-label">Type</label>
                        <select class="form-control" id="type_filter" name="type_filter">
                            <option value="">-- Tous --</option>
                            <option value="Affaires" {{ request('type_filter') == 'Affaires' ? 'selected' : '' }}>Affaires</option>
                            <option value="Emploi" {{ request('type_filter') == 'Emploi' ? 'selected' : '' }}>Emploi</option>
                            <option value="Partenariat" {{ request('type_filter') == 'Partenariat' ? 'selected' : '' }}>Partenariat</option>
                            <option value="Autre" {{ request('type_filter') == 'Autre' ? 'selected' : '' }}>Autre</option>
                        </select>
                    </div>
                    <div class="col-md-4 d-flex align-items-end">
                        <button type="submit" class="btn btn-primary me-2">
                            <i class="fas fa-search"></i> Rechercher
                        </button>
                        <a href="{{ route('entreprise_ivoirienne.listeOpportunites') }}" class="btn btn-outline-secondary">
                            <i class="fas fa-redo"></i> Réinitialiser
                        </a>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div id="alert-container">
        @if (session('success'))
            <div class="alert alert-success">{{ session('success') }}</div>
        @endif
        @if (session('error'))
            <div class="alert alert-danger">{{ session('error') }}</div>
        @endif
    </div>

    <div class="card shadow-sm border-light">
        <div class="card-body">
            <table class="table table-striped table-hover">
                <thead class="table-light">
                    <tr>
                        <th>#</th>
                        <th>Type</th>
                        <th>Titre</th>
                        <th>Domaine</th>
                        <th>Pays</th>
                        <th>Contact</th>
                        <th>Date création</th>
                        <th>Document</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                @forelse($opportunites as $key => $opportunite)
                    <tr>
                        <td>{{ $key + 1 }}</td>
                        <td>
                            <span class="badge bg-{{ $opportunite->type == 'Affaires' ? 'success' : ($opportunite->type == 'Emploi' ? 'info' : 'warning') }}">
                                {{ $opportunite->type }}
                            </span>
                        </td>
                        <td>{{ $opportunite->titre }}</td>
                        <td>{{ $opportunite->domaine }}</td>
                        <td>{{ $opportunite->pays }}</td>
                        <td>
                            {{ $opportunite->point_contact }} <br>
                            📧 {{ $opportunite->email }} <br>
                            📞 {{ $opportunite->telephone }}
                        </td>
                        <td>{{ \Carbon\Carbon::parse($opportunite->created_at)->format('d/m/Y') }}</td>
                        <td>
                            @if($opportunite->documents && $opportunite->documents->count())
                                @foreach($opportunite->documents as $doc)
                                    <a href="{{ asset('storage/'.$doc->fiche) }}" target="_blank" class="btn btn-sm btn-outline-primary mb-1">
                                        <i class="fa-regular fa-file"></i> Voir fiche
                                    </a>
                                @endforeach
                            @else
                                <span class="text-muted">Aucun document</span>
                            @endif
                        </td>
                        <td>
                            <button type="button" class="btn btn-sm btn-outline-info" data-bs-toggle="modal" data-bs-target="#detailModal{{ $opportunite->id }}">
                                <i class="fa fa-eye"></i> Détails
                            </button>
                        </td>
                    </tr>

                    <!-- Modal for details -->
                    <div class="modal fade" id="detailModal{{ $opportunite->id }}" tabindex="-1" aria-hidden="true">
                        <div class="modal-dialog modal-lg">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title">Détails de l'opportunité</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    <div class="row mb-3">
                                        <div class="col-md-6">
                                            <strong>Type:</strong> {{ $opportunite->type }}
                                        </div>
                                        <div class="col-md-6">
                                            <strong>Titre:</strong> {{ $opportunite->titre }}
                                        </div>
                                    </div>
                                    <div class="row mb-3">
                                        <div class="col-md-6">
                                            <strong>Domaine:</strong> {{ $opportunite->domaine }}
                                        </div>
                                        <div class="col-md-6">
                                            <strong>Pays:</strong> {{ $opportunite->pays }}
                                        </div>
                                    </div>
                                    <div class="row mb-3">
                                        <div class="col-md-12">
                                            <strong>Description:</strong><br>
                                            {{ $opportunite->description }}
                                        </div>
                                    </div>
                                    <div class="row mb-3">
                                        <div class="col-md-12">
                                            <strong>Information sur l'entreprise:</strong><br>
                                            {{ $opportunite->entreprise_info }}
                                        </div>
                                    </div>
                                    <div class="row mb-3">
                                        <div class="col-md-12">
                                            <strong>Bénéfices attendus:</strong><br>
                                            {{ $opportunite->benefit }}
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <strong>Contact:</strong><br>
                                            {{ $opportunite->point_contact }}<br>
                                            📧 {{ $opportunite->email }}<br>
                                            📞 {{ $opportunite->telephone }}
                                        </div>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
                                </div>
                            </div>
                        </div>
                    </div>
                @empty
                    <tr>
                        <td colspan="9" class="text-center">
                            <div class="py-4">
                                <i class="fas fa-folder-open fa-3x text-muted mb-3"></i>
                                <p class="text-muted">Aucune opportunité trouvée</p>
                            </div>
                        </td>
                    </tr>
                @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

@endsection