<x-portal-layout>
    <section id="breadcrumbs" class="breadcrumbs">
        <div class="container">
  
            <div class="d-flex justify-content-between align-items-center">
                <h2>ODD {{ $goal->code }}</h2>
                <ol>
                    <li><a href="{{ route('portal.home') }}">Accueil</a></li>
                    <li><a href="{{ route('portal.goals') }}">ODD</a></li>
                    <li>Détail</li>
                </ol>
            </div>
  
        </div>
    </section>


    <div id="heading" class="d-flex flex-column justify-content-center align-items-center"
        style="background-image: url({{ asset('images/goals/banners/goal-' . $goal->code . '.jpg') }});"
    ></div>

    <section id="why-us" class="why-us">
        <div class="container">
  
            <div class="row">
                <div class="col-xl-8 col-lg-5" data-aos="fade-up">
                    <div class="content d-flex gap-3 bg-{{ $goal->code }}">
                        <div class="col-2 text-end" style="height: 250px; font-weight: 900; font-size: 80px; margin-top: -25px">{{ $goal->code }}</div>
                        <div class="col-6"><h3>{{ $goal->name }}</h3></div>
                        <div class="col-3 text-end"><img src="{{ asset('images/goals/goal-icon-' . $goal->code . '.jpg') }}" class="mt-5 pt-5 goal-img" alt="">
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-lg-7 d-flex">
                    <div class="icon-boxes w-100 d-flex flex-column justify-content-end">
                        <div class="row">
                            <div class="col-xl-12 d-flex align-items-stretch" data-aos="fade-up" data-aos-delay="100">
                                <div class="icon-box mt-4 mt-xl-0">
                                    <h1>{{ count($goal->targets) }}</h1>
                                    <h4>Cibles prioritaires</h4>
                                </div>
                            </div>
                        </div>
                        <div class="row mt-3">
                            <div class="d-flex">
                                <select name="goal_id" class="form-select" onchange="window.location.assign('{{ route('portal.goals').'/' }}'+this.value)" >
                                    <option value="">Toutes les goals</option>
                                    @foreach ($goals as $option)
                                        <option value="{{ $option->id }}" @if($option->id==$goal->id) selected @endif>{{ $option->code }} - {{ $option->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
          </div>
  
        </div>
    </section>
 
    <section  class=" pt-0">
        <div class="container" data-aos="fade-up">
            <div class="row">
                <div class="col-lg-8 entries">
  
                    <article class="entry entry-single">
        
                        <!--div class="entry-img bg-{{ $goal->code }} p-4">
                            <div class="d-flex goal">
                                <h1 class="me-4">{{ $goal->code }}</h1>
                                <h2>{{ $goal->name }}</h2>
                            </div>
                            <div class="text-center">
                            <img src="{{-- asset('assets/portal/img/goals/goal-icon-'.$goal->code.'.jpg') --}}" alt="" class="img-fluid" >
                            </div>
                        </div-->
        
                        <div class="entry-content">
                            {!! $goal->content !!}
                        </div>
        
                    </article>

                </div>

                <div class="col-lg-4">
                    <div class="sidebar">
                        <div class="sidebar-title">Cibles prioritaires</div>
                        <div class="sidebar-item">
                            @foreach($goal->targets as $target)
                            <div class="d-flex mb-2">
                                <div class="me-3"><b>{{ $target->code }}</b></div>
                                <a href="{{-- asset('storage/documents/' . $target->filename) --}}">{{ $target->name }}</a>
                            </div>
                            @endforeach
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>
</x-portal-layout>
