@extends('website.layouts.app')

@section('meta_title', "Techne | Compete")
@section('meta_description', "Techne | Compete")
@section('meta_keywords','Techne, Compete')

@section('content')

<section class="compete-page" id="competePageSection">
    @if (! empty($competePageSettings['compete_page_header_title']) || ! ! empty($competePageSettings['compete_page_header_description']) || ! empty($competePageSettings['compete_page_header_btn_link']))
        <div class="wrapper bg-color4 text-center
            @if(! empty($competePageSettings['compete_page_header_background'])) image-wrapper bg-cover bg-image bg-overlay bg-overlay-500 @endif
            @if(empty($competePageSettings['compete_page_header_description'])) py-14 @else py-10 @endif
            "
            style="min-height: auto !important;"
            data-image-src="{{ asset('storage/'.($competePageSettings['compete_page_header_background'] ?? null)) }}"
        >    
            <div class="container">
                @if (! empty($competePageSettings['compete_page_header_title']))
                    <h2 class="text-white text-center fs-48 fw-bold mb-5">
                        {{ $competePageSettings['compete_page_header_title'] }}
                    </h2>
                @endif

                @if(! empty($competePageSettings['compete_page_header_description']))
                    <div class="mb-4">
                        {!! html_entity_decode($competePageSettings['compete_page_header_description']) !!}
                    </div>
                @endif

                @if(! empty($competePageSettings['compete_page_header_btn_link']))
                    <a href="{{ $competePageSettings['compete_page_header_btn_link'] }}" class="btn btn-primary bg-event-color border-event-color py-1">
                        {{ $competePageSettings['compete_page_header_btn_title'] }}
                    </a>
                @endif
            </div>
        </div>
    @endif

    <section class="wrapper py-8">
        <div class="container">
            @if(! empty($competePageSettings['compete_page_about_description']))
                <div class="mb-5">
                    {!! html_entity_decode($competePageSettings['compete_page_about_description']) !!}
                </div>
            @endif
        </div>
    </section>

    @if (count($competitions))
        <section class="wrapper pt-5">
            <div>
                <div class="d-flex flex-column gap-3">
                    @foreach ($competitions as $competition)
                        <div class="row gy-5 bg-primary" @if($competition->bg_color) style="background-color: {{ $competition->bg_color }} !important;" @endif>
                            <div class="col-12 col-md-7 col-lg-6 mt-0">
                                <div class="px-7 py-5">
                                    <h3 class="text-white text-capitalize fs-30 fw-bold mb-4" @if($competition->title_color) style="color: {{ $competition->title_color }} !important;" @endif>
                                        {{ $competition->title }}
                                    </h3>
                                    
                                    @if (! empty($competition->min_description))
                                        <div>
                                            {!! html_entity_decode($competition->min_description) !!}
                                        </div>
                                    @endif

                                    @if (! empty($competition->description) || ! empty($competition->btn_title))
                                        <div class="text-center text-lg-end mt-4">
                                            <a href="{{ $competition->btn_link ?? '#' }}" class="btn btn-sm bg-event-color border-event-color text-white" @if (empty($competition->btn_link)) data-bs-toggle="modal" data-bs-target="#competitionCardModal{{ $competition->ulid }}" @endif>
                                                {{ $competition->btn_title }}
                                            </a>
                                        </div>
                                    @endif
                                </div>
                            </div>

                            <div class="col-12 col-md-5 col-lg-5 offset-lg-1 mt-0">
                                <img src="{{ asset('storage/'.($competition->image->thumbnail ?? $competition->image?->path)) }}" alt="{{ $competition->title }}" class="w-100 h-100">
                            </div>
                        </div>

                        @if (empty($competition->btn_link) && ! empty($competition->description))
                            <div class="modal fade" id="competitionCardModal{{ $competition->ulid }}" tabindex="-1">
                                <div class="modal-dialog modal-dialog-centered modal-xl">
                                    <div class="modal-content">
                                        <div class="modal-header border-bottom py-5">
                                            <h5 class="modal-title text-capitalize">{{ $competition->title }}</h5>

                                            <button class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                        </div>

                                        <div class="modal-body p-5">
                                            <div>
                                                {!! html_entity_decode($competition->description) !!}
                                            </div>

                                            <div class="col-12 col-lg-8">
                                                <h3 class="text-primary text-capitalize fs-24 fw-bold mb-2">
                                                    {{ $competition->name }}
                                                </h3>
                                                
                                                <div class="d-flex align-items-start justify-content-between gap-3 mb-3">
                                                    <div class="text-primary lh-md">
                                                        @if (! empty($competition->job_title))
                                                            <div class="fs-15">{{ $competition->job_title }}</div>
                                                        @endif
                                                        
                                                        @if (! empty($competition->company_name))
                                                            <div class="text-capitalize fs-15">{{ $competition->company_name }}</div>
                                                        @endif
                                                        
                                                        @if (! empty($competition->country))
                                                            <div class="text-event-color text-capitalize fs-15 fw-bold">{{ $competition->country }}</div>
                                                        @endif
                                                    </div>

                                                    @if (! empty($competition->company_logo))
                                                        <div>
                                                            <img src="{{ asset('storage/'.$competition->company_logo) }}" alt="{{ $competition->company_name }}" class="img-fluid mx-auto competition-company-logo" />
                                                        </div>
                                                    @endif
                                                </div>

                                                <div>
                                                    {!! html_entity_decode($competition->about) !!}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif
                    @endforeach
                </div>
            </div>
        </section>
    @endif

</section>

@endsection