@extends('layouts.app')
@section('title', $filiale['nom'] . ' — Excellis Invest Group')

@section('extra_css')
<style>
.filiale-hero {
    background: linear-gradient(135deg, {{ $filiale['couleur'] }}, {{ $filiale['couleur'] }}99);
    padding: 70px 0 50px;
    position: relative;
    overflow: hidden;
}
.filiale-hero::before {
    content: '';
    position: absolute;
    right: -80px;
    top: -80px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
}
.filiale-hero::after {
    content: '';
    position: absolute;
    left: -40px;
    bottom: -60px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: rgba(255,255,255,0.04);
}
.filiale-logo-big {
    width: 90px;
    height: 90px;
    border-radius: 20px;
    background: rgba(255,255,255,0.2);
    border: 3px solid rgba(255,255,255,0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: 1px;
    margin-bottom: 20px;
}
.filiale-hero h1 { color: #fff; font-size: 2.2rem; font-weight: 800; margin-bottom: 10px; }
.filiale-hero .meta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.filiale-hero .meta span {
    background: rgba(255,255,255,0.2);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 5px 14px;
    border-radius: 20px;
}
.filiale-hero p { color: rgba(255,255,255,0.85); font-size: 1.05rem; line-height: 1.7; max-width: 620px; }
.filiale-hero .hero-stats {
    display: flex;
    gap: 30px;
    margin-top: 30px;
    flex-wrap: wrap;
}
.hero-stat { text-align: left; }
.hero-stat__val { font-size: 1.6rem; font-weight: 800; color: #fff; display: block; }
.hero-stat__label { font-size: 0.75rem; color: rgba(255,255,255,0.7); display: block; margin-top: 2px; }

.info-card {
    background: #fff;
    border-radius: 14px;
    padding: 28px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    margin-bottom: 24px;
}
.info-card h4 {
    font-size: 1rem;
    font-weight: 700;
    color: #1a5c6e;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.info-card h4 i { font-size: 1.2rem; color: #c9922a; }

.produit-item {
    border-left: 3px solid {{ $filiale['couleur'] }};
    padding: 14px 18px;
    background: #f8f8f8;
    border-radius: 0 10px 10px 0;
    margin-bottom: 12px;
}
.produit-item:last-child { margin-bottom: 0; }
.produit-item h5 { font-size: 0.9rem; font-weight: 700; color: #1a1a1a; margin-bottom: 4px; }
.produit-item p { font-size: 0.82rem; color: #666; margin: 0; line-height: 1.5; }

.valeur-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: {{ $filiale['couleur'] }}18;
    border: 1px solid {{ $filiale['couleur'] }}40;
    color: {{ $filiale['couleur'] }};
    font-size: 0.82rem;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 20px;
    margin: 4px;
}
.valeur-chip::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: {{ $filiale['couleur'] }};
}

.highlight-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid #f0f0f0;
}
.highlight-item:last-child { border-bottom: none; }
.highlight-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: {{ $filiale['couleur'] }}18;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.highlight-icon svg { width: 18px; height: 18px; color: {{ $filiale['couleur'] }}; }
.highlight-item p { font-size: 0.88rem; color: #555; margin: 0; line-height: 1.6; font-weight: 500; }

.autres-filiale {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    display: flex;
    align-items: center;
    gap: 16px;
    text-decoration: none;
    transition: all .2s;
    border: 2px solid transparent;
}
.autres-filiale:hover {
    border-color: #1a5c6e;
    transform: translateX(4px);
}
.autres-filiale .mini-logo {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.8rem;
    color: #fff;
    flex-shrink: 0;
}
.autres-filiale .info { flex: 1; }
.autres-filiale .info h5 { font-size: 0.88rem; font-weight: 700; color: #1a1a1a; margin: 0 0 3px; line-height: 1.3; }
.autres-filiale .info span { font-size: 0.75rem; color: #999; }
</style>
@endsection

@section('content')
@php $t = '/beekohtm-30/beeko-v-3.0/assets'; @endphp

{{-- breadcrumb --}}
<section class="breadcrumb__area">
    <div class="breadcrumb__bg" data-background="{{ $t }}/img/bg/breadcrumb__bg.jpg"></div>
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="breadcrumb__content">
                    <h2 class="title">{{ $filiale['nom'] }}</h2>
                    <nav class="breadcrumb">
                        <span property="itemListElement" typeof="ListItem"><a href="{{ route('accueil') }}">Accueil</a></span>
                        <span class="breadcrumb-separator"><i class="fas fa-angle-right"></i></span>
                        <span property="itemListElement" typeof="ListItem"><a href="{{ route('filiales') }}">Filiales</a></span>
                        <span class="breadcrumb-separator"><i class="fas fa-angle-right"></i></span>
                        <span property="itemListElement" typeof="ListItem">{{ $filiale['nom'] }}</span>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- hero filiale --}}
<section class="filiale-hero">
    <div class="container" style="position:relative;z-index:2;">
        <div class="row align-items-center">
            <div class="col-lg-8">
                @php $logoFile = public_path('img/filiales/' . $filiale['slug'] . '.png'); @endphp
                @if(file_exists($logoFile))
                <div class="filiale-logo-big" style="background:#fff;padding:10px;overflow:hidden;">
                    <img src="/img/filiales/{{ $filiale['slug'] }}.png" alt="{{ $filiale['nom'] }}" style="width:100%;height:100%;object-fit:contain;">
                </div>
                @else
                <div class="filiale-logo-big">
                    <i class="{{ $filiale['secteur_icon'] ?? 'fas fa-building' }}" style="font-size:2rem;"></i>
                </div>
                @endif
                <h1>{{ $filiale['nom'] }}</h1>
                <div class="meta">
                    <span><i class="fas fa-map-marker-alt" style="font-size:0.75rem;margin-right:4px;"></i>{{ $filiale['pays'] }}</span>
                    <span><i class="fas fa-layer-group me-1"></i>{{ $filiale['secteur'] }}</span>
                    @if($filiale['annee'] !== 'N/A')
                    <span><i class="fas fa-calendar me-1"></i>Depuis {{ $filiale['annee'] }}</span>
                    @endif
                    @if($filiale['capital'] !== 'N/A')
                    <span><i class="fas fa-coins me-1"></i>Capital : {{ $filiale['capital'] }}</span>
                    @endif
                </div>
                <p>{{ $filiale['description'] }}</p>
                <div class="hero-stats">
                    @foreach($filiale['chiffres'] as $c)
                    <div class="hero-stat">
                        <span class="hero-stat__val">{{ $c['valeur'] }}</span>
                        <span class="hero-stat__label">{{ $c['label'] }}</span>
                    </div>
                    @endforeach
                </div>
            </div>
            <div class="col-lg-4 d-none d-lg-flex justify-content-end">
                <div style="text-align:right;">
                    @if(!empty($filiale['site']))
                    <a href="{{ $filiale['site'] }}" target="_blank" rel="noopener"
                        style="display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,0.15);border:2px solid rgba(255,255,255,0.4);color:#fff;padding:12px 22px;border-radius:8px;font-weight:600;font-size:0.88rem;text-decoration:none;transition:all .2s;"
                        onmouseover="this.style.background='rgba(255,255,255,0.25)'"
                        onmouseout="this.style.background='rgba(255,255,255,0.15)'">
                        <i class="fas fa-globe"></i> Visiter le site web
                    </a>
                    @endif
                </div>
            </div>
        </div>
    </div>
</section>

{{-- contenu principal --}}
<section class="section-py-130">
    <div class="container">
        <div class="row gutter-y-30">

            {{-- colonne gauche --}}
            <div class="col-lg-8">

                {{-- mission --}}
                <div class="info-card">
                    <h4><i class="flaticon-target"></i> Notre Mission</h4>
                    <p style="color:#555;font-size:0.95rem;line-height:1.75;margin:0;">{{ $filiale['mission'] }}</p>
                </div>

                {{-- vision --}}
                <div class="info-card">
                    <h4><i class="flaticon-growth"></i> Notre Vision</h4>
                    <p style="color:#555;font-size:0.95rem;line-height:1.75;margin:0;">{{ $filiale['vision'] }}</p>
                </div>

                {{-- produits / services --}}
                @if(!empty($filiale['produits']))
                <div class="info-card">
                    <h4><i class="flaticon-briefcase"></i> Nos Produits & Services</h4>
                    @foreach($filiale['produits'] as $produit)
                    <div class="produit-item">
                        <h5>{{ $produit['nom'] }}</h5>
                        <p>{{ $produit['desc'] }}</p>
                    </div>
                    @endforeach
                </div>
                @endif

                {{-- points forts --}}
                <div class="info-card">
                    <h4><i class="flaticon-success"></i> Points forts</h4>
                    @foreach($filiale['highlights'] as $h)
                    <div class="highlight-item">
                        <div class="highlight-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="{{ $filiale['couleur'] }}" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                        </div>
                        <p>{{ $h }}</p>
                    </div>
                    @endforeach
                </div>

                {{-- detail supplementaire --}}
                @if(!empty($filiale['detail']))
                <div class="info-card" style="background:{{ $filiale['couleur'] }}08;border:1px solid {{ $filiale['couleur'] }}25;">
                    <h4><i class="flaticon-report"></i> Informations complémentaires</h4>
                    <p style="color:#555;font-size:0.9rem;line-height:1.7;margin:0;">{{ $filiale['detail'] }}</p>
                </div>
                @endif

            </div>

            {{-- colonne droite --}}
            <div class="col-lg-4">

                {{-- valeurs --}}
                @if(!empty($filiale['valeurs']))
                <div class="info-card mb-20">
                    <h4><i class="flaticon-investment"></i> Nos Valeurs</h4>
                    <div style="margin-top:8px;">
                        @foreach($filiale['valeurs'] as $val)
                        <span class="valeur-chip">{{ $val }}</span>
                        @endforeach
                    </div>
                </div>
                @endif

                {{-- fiche rapide --}}
                <div class="info-card mb-20">
                    <h4><i class="flaticon-pie-chart-1"></i> Fiche d'identité</h4>
                    <table style="width:100%;font-size:0.85rem;">
                        <tr style="border-bottom:1px solid #f0f0f0;">
                            <td style="padding:8px 0;color:#999;width:45%;">Secteur</td>
                            <td style="padding:8px 0;font-weight:600;color:#333;">{{ $filiale['secteur'] }}</td>
                        </tr>
                        <tr style="border-bottom:1px solid #f0f0f0;">
                            <td style="padding:8px 0;color:#999;">Pays</td>
                            <td style="padding:8px 0;font-weight:600;color:#333;"><i class="fas fa-map-marker-alt" style="font-size:0.75rem;margin-right:4px;"></i>{{ $filiale['pays'] }}</td>
                        </tr>
                        @if($filiale['annee'] !== 'N/A')
                        <tr style="border-bottom:1px solid #f0f0f0;">
                            <td style="padding:8px 0;color:#999;">Fondée en</td>
                            <td style="padding:8px 0;font-weight:600;color:#333;">{{ $filiale['annee'] }}</td>
                        </tr>
                        @endif
                        @if($filiale['capital'] !== 'N/A')
                        <tr style="border-bottom:1px solid #f0f0f0;">
                            <td style="padding:8px 0;color:#999;">Capital</td>
                            <td style="padding:8px 0;font-weight:600;color:#333;">{{ $filiale['capital'] }}</td>
                        </tr>
                        @endif
                        <tr>
                            <td style="padding:8px 0;color:#999;">Groupe</td>
                            <td style="padding:8px 0;font-weight:600;color:#333;">Excellis Invest Group</td>
                        </tr>
                    </table>
                </div>

                {{-- lien site --}}
                @if(!empty($filiale['site']))
                <div class="info-card mb-20" style="background:#1a5c6e;border:none;">
                    <h4 style="color:#fff;"><i class="fas fa-globe" style="color:#c9922a;"></i> Site officiel</h4>
                    <a href="{{ $filiale['site'] }}" target="_blank" rel="noopener"
                        class="tg-btn" style="width:100%;justify-content:center;margin-top:8px;">
                        Visiter le site <img src="{{ $t }}/img/icons/right_arrow.svg" alt="" class="injectable">
                    </a>
                </div>
                @endif

                {{-- contact --}}
                <div class="info-card" style="background:#f8f8f8;border:1px solid #eee;">
                    <h4><i class="flaticon-envelope"></i> Nous contacter</h4>
                    <p style="font-size:0.85rem;color:#666;margin-bottom:14px;">Vous avez une question sur cette filiale ou souhaitez un partenariat ?</p>
                    <a href="{{ route('contact') }}" class="tg-btn" style="width:100%;justify-content:center;font-size:0.82rem;">
                        Envoyer un message <img src="{{ $t }}/img/icons/right_arrow.svg" alt="" class="injectable">
                    </a>
                </div>
            </div>
        </div>

        {{-- autres filiales --}}
        @if(!empty($autres))
        <div class="row mt-70">
            <div class="col-12">
                <div class="section__title mb-30">
                    <span class="sub-title">Notre portefeuille</span>
                    <h3 class="title" style="font-size:1.5rem;">Autres <span>filiales</span> du groupe</h3>
                </div>
            </div>
            @foreach($autres as $autre)
            <div class="col-lg-4 col-md-6 mb-20">
                <a href="{{ route('filiale', $autre['slug']) }}" class="autres-filiale">
                    @php $autreLogoFile = public_path('img/filiales/' . $autre['slug'] . '.png'); @endphp
                    @if(file_exists($autreLogoFile))
                    <div class="mini-logo" style="background:#fff;border:1px solid #eee;padding:4px;">
                        <img src="/img/filiales/{{ $autre['slug'] }}.png" alt="{{ $autre['nom'] }}" style="width:100%;height:100%;object-fit:contain;border-radius:6px;">
                    </div>
                    @else
                    <div class="mini-logo" style="background:{{ $autre['couleur'] }};"><i class="{{ $autre['secteur_icon'] ?? 'fas fa-building' }}" style="font-size:1rem;color:#fff;"></i></div>
                    @endif
                    <div class="info">
                        <h5>{{ $autre['nom'] }}</h5>
                        <span><i class="fas fa-map-marker-alt" style="font-size:0.7rem;margin-right:3px;"></i>{{ $autre['pays'] }} · {{ $autre['secteur'] }}</span>
                    </div>
                    <i class="fas fa-chevron-right" style="color:#ccc;font-size:0.8rem;"></i>
                </a>
            </div>
            @endforeach
            <div class="col-12 text-center mt-20">
                <a href="{{ route('filiales') }}" class="tg-btn">Voir toutes les filiales <img src="{{ $t }}/img/icons/right_arrow.svg" alt="" class="injectable"></a>
            </div>
        </div>
        @endif
    </div>
</section>

@endsection