@extends('eventmie::layouts.app')

{{-- Page title update organisation page --}}
@section('title')
    {{ $organiser_d->organisation }}
@endsection

@section('meta_title', $organiser_d->organisation)
@section('meta_description', $organiser_d->org_description)
@section('meta_url', url()->current())

@if ($organiser_d->avatar)
    @section('meta_image', url(getStorageImage($organiser_d->avatar)))
@endif

@section('content')
<section class="cover-img-bg" style="background-image: url({{ getStorageImage($organiser_d->avatar ) }});">
    <div class="pb-lg-11 py-2 mt-7 cover-img-bg-2">
    @if(getStorageImage($organiser_d->avatar))
        <div class="container-fluid p-0 position-relative">
            <div style="background-image: url({{ getStorageImage($organiser_d->avatar) }}); height: 50vh; background-size: cover; background-position: center; position: relative;">
                <div class="overlay" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5);"></div>
                <img class="d-none" src="{{ getStorageImage($organiser_d->avatar) }}" alt="{{ $organiser_d->organisation }}" />
                
                <!-- Organizer Profile Section - Positioned at bottom of banner -->
                <div class="position-absolute w-100 bottom-0 start-0 z-3 text-start p-0 p-lg-5 text-white pt-2 pb-0 rounded-bottom shadow-sm g-0 top-100">
                    <div class="container">
                        <div class="row">
                            <div class="col-12">
                                <div class="position-relative mt-n5 d-flex justify-content-center justify-content-lg-between gap-1 flex-wrap z-3 align-items-center flex-lg-row flex-column">
                                
                                    <div class="d-flex align-items-center flex-column flex-lg-row gap-lg-3 gap-1 flex-wrap">
                                        <div>
                                            @if ($organiser_d->avatar)
                                                <img src="{{ getStorageImage($organiser_d->avatar) }}" alt="{{ $organiser_d->organisation }}"
                                                    class="avatar-lg rounded-circle border-4 border border-white mb-0 mb-lg-3" />
                                            @else
                                                <img src="{{ asset('ep_img/512x512.webp') }}" alt="{{ $organiser_d->organisation }}"
                                                    class="avatar-lg rounded-circle border-4 border border-white mb-0 mb-lg-3" />
                                            @endif
                                            <a href="#!" class="position-absolute top-0 right-0 ms-n4 mt-3" data-bs-toggle="tooltip"
                                                data-bs-placement="top" title="" data-bs-original-title="Verified">
                                                <img src="{{ asset('img/checked-mark.svg') }}" alt="" height="30" width="30">
                                            </a>
                                        </div>
                                        <div class="{{ $organiser_d->org_facebook || $organiser_d->org_instagram || $organiser_d->org_youtube || $organiser_d->org_twitter || $organiser_d->org_website ? 'align-self-end' : 'align-self-center' }}" >
                                            <h2 class="h5 mb-0 text-center text-lg-start">
                                                {{ $organiser_d->organisation }}
                                            </h2>
                                            <ul class="list-inline lgx-social">
                                                @if ($organiser_d->org_facebook)
                                                    <li class="list-inline-item me-0">
                                                        <a href="{{ Str::contains($organiser_d->org_facebook, ['http://', 'https://']) == false ? '//' : '' }}{{ $organiser_d->org_facebook }}"
                                                            target="_blank" class="d-flex align-items-center justify-content-center rounded-circle border border-primary bg-primary icon-small" 
                                                            >
                                                            <i class="small fab fa-facebook-f text-white" aria-hidden="true"></i>
                                                        </a>
                                                    </li>
                                                @endif
        
                                                @if ($organiser_d->org_instagram)
                                                    <li class="list-inline-item me-0">
                                                        <a href="{{ Str::contains($organiser_d->org_instagram, ['http://', 'https://']) == false ? '//' : '' }}{{ $organiser_d->org_instagram }}"
                                                            class="d-flex align-items-center justify-content-center rounded-circle border border-danger bg-danger icon-small" 
                                                            target="_blank" rel="nofollow" >
                                                            <i class="small fab fa-instagram text-white" aria-hidden="true"></i>
                                                        </a>
                                                    </li>
                                                @endif
        
                                                @if ($organiser_d->org_youtube)
                                                    <li class="list-inline-item me-0">
                                                        <a href="{{ Str::contains($organiser_d->org_youtube, ['http://', 'https://']) == false ? '//' : '' }}{{ $organiser_d->org_youtube }}"
                                                            class="d-flex align-items-center justify-content-center rounded-circle border border-danger bg-danger icon-small" 
                                                            target="_blank" rel="nofollow" >
                                                            <i class="small fab fa-youtube text-white" aria-hidden="true"></i>
                                                        </a>
                                                    </li>
                                                @endif
        
                                                @if ($organiser_d->org_twitter)
                                                    <li class="list-inline-item me-0">
                                                        <a href="{{ Str::contains($organiser_d->org_twitter, ['http://', 'https://']) == false ? '//' : '' }}{{ $organiser_d->org_twitter }}"
                                                            class="d-flex align-items-center justify-content-center rounded-circle border border-dark bg-dark icon-small" 
                                                            target="_blank" rel="nofollow" >
                                                            <i class="small fa-brands fa-x text-white" aria-hidden="true"></i>
                                                        </a>
                                                    </li>
                                                @endif
        
                                                @if ($organiser_d->org_website)
                                                    <li class="list-inline-item me-0">
                                                        <a href="{{ Str::contains($organiser_d->org_website, ['http://', 'https://']) == false ? '//' : '' }}{{ $organiser_d->org_website }}"
                                                            class="d-flex align-items-center justify-content-center rounded-circle border border-dark bg-dark icon-small" 
                                                            target="_blank" rel="nofollow" >
                                                            <i class="small fas fa-globe text-white" aria-hidden="true"></i>
                                                        </a>
                                                    </li>
                                                @endif
                                                
                                            </ul>
                                        </div>

                                    </div>
                                    <div class="d-flex justify-content-center align-items-center mt-0 mt-lg-3">
                                        <div class="bg-white rounded p-0 d-flex gap-2">
                                            <button type="button" class="btn btn-outline-primary text-dark" onclick="window.dispatchEvent(new Event('open-contact-modal'))">
                                                <i class="fa-solid fa-paper-plane"></i> {{ __('eventmie-pro::em.contact_organizer') }}
                                            </button>
                                        </div>
                                    </div>
                                    @if($organiser_d->org_description)
                                        <div class="v-scroll mh-5 text-wrap py-3">
                                            <p class="mb-3 px-2 w-100">
                                                {!! nl2br($organiser_d->org_description) !!}
                                            </p>
                                        </div>
                                    @endif

                                </div>  
                            </div>
                        </div>
                    </div>        
                </div>
            </div>
        </div>
    @endif

    <div class="container py-5">
        <div class="row">
            <div class="col-12 z-3  {{ $organiser_d->org_description ? 'mt-23 mt-lg-20' : 'mt-22 mt-lg-10'}}">
                <!-- Events Section -->
                <div class="venue-page-detail-card border-0 mb-5">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-12 z-3">
                                <organiser-event :active_events="{{ json_encode($activeEvents, JSON_HEX_APOS) }}"
                                    :expired_events="{{ json_encode($expiredEvents, JSON_HEX_APOS) }}"
                                    :currency="{{ json_encode($currency, JSON_HEX_APOS) }}"
                                    :date_format="{{ json_encode(
                                        [
                                            'vue_date_format' => format_js_date(),
                                            'vue_time_format' => format_js_time(),
                                        ],
                                        JSON_HEX_APOS,
                                    ) }}">
                                </organiser-event>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
</section>
<contact :organiser_id="{{ json_encode($organiser_d->id, JSON_HEX_APOS) }}" 
    :customer_user="{{ json_encode($organiser_d->customerUser, JSON_HEX_TAG) }}">
</contact>   
@endsection

@section('javascript')
    <script type="text/javascript">
        var events_slider = false;
        console.log('organiser test');
    </script>
    @Vite('resources/js/organiser/index.js')
@endsection