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

@section('title', setting('seo.meta_title'))
@section('meta_description', setting('seo.meta_description'))

@section('content')
    @php
        $perPage = 3;
    @endphp
    <!--Banner slider start-->
    <section class="bg-dark mt-8">
        <div class="col-sm-12">
            @component('eventmie::skeleton.banner')
            @endcomponent

            <banner-slider :banners="{{ json_encode($banners, JSON_HEX_APOS) }}"
                :demo_mode="{{ json_encode(env('DEMO_MODE_NEW', false), JSON_HEX_TAG) }}"
                :check_session="{{ json_encode(session('verify'), JSON_HEX_TAG) }}"
                :s_host="{{ json_encode($_SERVER['REMOTE_ADDR'], JSON_HEX_TAG) }}"></banner-slider>
        </div>
    </section>
    <!--Banner slider end-->

    @if (!empty($categories))
        <section class="bg-dark">
            <div class="py-3">
                <div class="container">
                    <single-category :categories="{{ json_encode($categories, JSON_HEX_APOS) }}"
                        :dark_mode="{{ true }}">
                    </single-category>
                </div>
            </div>
        </section>
    @endif

    @if ($featured_events->isNotEmpty())
        <div>
            <event-slider :banners="{{ json_encode($featured_events, JSON_HEX_APOS) }}"
                :date_format="{{ json_encode(
                    [
                        'vue_date_format' => format_js_date(),
                        'vue_time_format' => format_js_time(),
                    ],
                    JSON_HEX_APOS,
                ) }}"
                :currency="{{ json_encode($currency, JSON_HEX_APOS) }}">
            </event-slider>
        </div>
    @endif

    <!-- New Themes Top-selling Start-->
    @if ($top_selling_events->isNotEmpty())
        <div class="py-3">
            <div class="container">
                <div class="row">
                    <div class="col-8">
                        <h3 class="h5">@lang('eventmie-pro::em.top_selling_events')</h3>
                    </div>
                    <div class="col-4">
                        <a class="btn btn-sm fw-bold text-dark mt-lg-2 {{ App::isLocale('ar') ? 'float-start' : 'float-end' }}"
                            href="{{ route('eventmie.events_index') }}">@lang('eventmie-pro::em.view_all') <i
                                class="fas fa-arrow-right"></i></a>
                    </div>
                </div>

                @component('eventmie::skeleton.event')
                @endcomponent

                <event-listing :events="{{ json_encode($top_selling_events, JSON_HEX_APOS) }}"
                    :currency="{{ json_encode($currency, JSON_HEX_APOS) }}" :item_count="{{ 4 }}"
                    :date_format="{{ json_encode(
                        [
                            'vue_date_format' => format_js_date(),
                            'vue_time_format' => format_js_time(),
                        ],
                        JSON_HEX_APOS,
                    ) }}">
                </event-listing>

            </div>

        </div>
    @endif
    <!-- New Themes Top-selling END -->

    <!-- New Themes Event Upcoming Start-->
    @if ($upcomming_events->isNotEmpty())
        <div class="py-3">
            <div class="container">
                <div class="row">
                    <div class="col-8">
                        <h3 class="h5">@lang('eventmie-pro::em.upcoming_events')</h3>
                    </div>
                    <div class="col-4">
                        <a class="btn btn-sm fw-bold text-dark mt-lg-2 {{ App::isLocale('ar') ? 'float-start' : 'float-end' }}"
                            href="{{ route('eventmie.events_index') }}">@lang('eventmie-pro::em.view_all') <i
                                class="fas fa-arrow-right"></i></a>
                    </div>
                </div>

                @component('eventmie::skeleton.event')
                @endcomponent

                <event-listing :events="{{ json_encode($upcomming_events, JSON_HEX_APOS) }}"
                    :currency="{{ json_encode($currency, JSON_HEX_APOS) }}" :item_count="{{ 4 }}"
                    :date_format="{{ json_encode(
                        [
                            'vue_date_format' => format_js_date(),
                            'vue_time_format' => format_js_time(),
                        ],
                        JSON_HEX_APOS,
                    ) }}">
                </event-listing>
            </div>
        </div>
    @endif
    <!-- New Themes Event Upcoming END -->

    <!-- New Themes topVenues START-->
    @if ($topVenues->isNotEmpty())
        <div class="venue-section py-5 bg-black">
            <div class="container">

                <!-- Section Title -->
                <div class="row">
                    <div class="col-8">
                        <h3 class="h5 text-light">@lang('eventmie-pro::em.cities_events')</h3>
                    </div>
                    <div class="col-4">
                        <a class="btn btn-sm fw-bold text-light mt-lg-2 {{ App::isLocale('ar') ? 'float-start' : 'float-end' }}"
                            href="{{ route('eventmie.venues.index') }}">@lang('eventmie-pro::em.view_all') <i
                                class="fas fa-arrow-right"></i></a>
                    </div>
                </div>

                <!-- Venue Cards Grid -->
                <div class="row g-4">
                    @foreach ($topVenues as $item)
                        @php
                            $bgimg = '/images/placeholder.jpg';
                            if (!empty(json_decode($item->images, true))) {
                                $bgimg = json_decode($item->images, true)[0];
                            }
                        @endphp

                        <div class="col-6 col-md-4 col-xl-3">
                            <a href="{{ route('eventmie.venues.show', [$item->slug]) }}">
                                <div class="venue-card rounded-4 overflow-hidden position-relative shadow-sm"
                                    style="background-image: url({{ getStorageImage($bgimg) }}); background-size: cover; background-position: center; height: 250px;">

                                    <!-- Dark Overlay -->
                                    <div class="position-absolute top-0 start-0 w-100 h-100 bg-black bg-opacity-50 z-1">
                                    </div>

                                    <!-- Content -->
                                    <div
                                        class="position-relative z-2 text-white h-100 d-flex flex-column justify-content-end p-3">
                                        <h2 class="h5 fw-bold mb-1">{{ $item->title }}</h2>
                                        <p class="mb-0 small text-light">{{ $item->city }} • {{ $item->events_count }}
                                            @lang('eventmie-pro::em.events')</p>
                                    </div>
                                </div>
                            </a>
                        </div>
                    @endforeach
                </div>

            </div>
        </div>

    @endif
    <!-- New Themes topVenues END -->

    <!-- New Themes Categories START-->
    @if (!empty($categories))
        <div class="pt-5 pb-7 bg-gradient-primary position-relative overflow-hidden">
            <div class="container position-relative">
                <div class="row mb-3">
                    <div class="col-lg-8 col-md-10 col-12">
                        <h3 class="h5 text-white fw-bold mb-0">@lang('eventmie-pro::em.event_categories')</h3>
                        <p class="text-white-50  mb-0 small fw-bold">@lang('eventmie-pro::em.explore_categories')</p>
                    </div>
                </div>
                
                <div class="row g-4">
                    @foreach ($categories as $key => $item)
                        <div class="col-6 col-md-4 col-xl-3">
                            <a href="{{ route('eventmie.events_index', ['category' => urlencode($item['name'])]) }}">
                                <div class="category-card position-relative rounded-4 overflow-hidden shadow-lg h-100 transform-hover">
                                    @php $bgimg = $item['thumb']; @endphp
                                    <div class="category-background position-absolute top-0 start-0 w-100 h-100" 
                                        style="background-image: url({{ getStorageImage($bgimg) }}); background-size: cover; background-position: center;">
                                    </div>
                                    
                                    <!-- Category Icon Overlay -->
                                    <div class="position-absolute top-0 end-0 p-3">
                                        <div class="event-count-badge d-flex align-items-center justify-content-center rounded-circle shadow-sm" 
                                            style="width: 60px; height: 60px; background: linear-gradient(135deg, rgba(255,255,255,0.25), rgba(255,255,255,0.15)); backdrop-filter: blur(15px); border: 1px solid rgba(255,255,255,0.3);">
                                            <div class="text-center">
                                                <div class="text-white fw-bold fs-6" style="line-height: 1; text-shadow: 0 1px 2px rgba(0,0,0,0.3);">
                                                    {{ $item['events_count'] }}
                                                </div>
                                                <div class="text-white-50" style="font-size: 0.65rem; line-height: 1; text-shadow: 0 1px 2px rgba(0,0,0,0.3);">
                                                    @lang('eventmie-pro::em.events')
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <!-- Category Content -->
                                    <div class="category-content position-relative d-flex flex-column justify-content-end h-100 p-4">
                                        <div class="category-info">
                                            <h2 class="h3 text-white fw-bold mb-2 fs-4">{{ $item['name'] }}</h2>
                                            
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    @endif
    <!-- New Themes Categories END-->

    <!-- New Themes Blogs Start-->
    @if (!empty($posts))
        <div class="py-5 bg-white">
            <div class="container">
                <!-- header -->
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h3 class="mb-0 h3">
                        <strong>@lang('eventmie-pro::em.blogs')</strong> @lang('eventmie-pro::em.blogs_tips')
                    </h3>
                    <a href="{{ route('eventmie.get_posts') }}" class="text-dark fw-medium text-decoration-none small">
                        @lang('eventmie-pro::em.view_all') <i class="fas fa-arrow-right ms-1"></i>
                    </a>
                </div>

                <!-- posts -->
                <div class="row g-4">
                    @foreach ($posts as $item)
                        <div class="col-12 col-md-6 col-lg-4">
                            <a href="{{ route('eventmie.post_view', $item['slug']) }}"
                                class="text-reset text-decoration-none">
                                <div class="card border-0">
                                    <img src="{{ getStorageImage($item['image']) }}" alt="{{ $item['title'] }}"
                                        class="card-img-top">
                                    <div class="card-body px-0 pt-3 pb-0">
                                        @if (!empty($item['category']))
                                            <p class="text-muted small mb-1">{{ $item['category'] }}</p>
                                        @endif
                                        <h2 class="h5 fw-bold mb-2">
                                            {{ Str::limit($item['title'], 60) }}
                                        </h2>
                                        <p class="text-muted small mb-0">
                                            {{ \Carbon\Carbon::parse($item['created_at'])->format('M d, Y') }}
                                            @if (!empty($item['author']))
                                                by {{ $item['author'] }}
                                            @endif
                                        </p>
                                    </div>
                                </div>
                            </a>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    @endif
    <!-- New Themes Blogs End-->

    <!-- How it works-->
    <div class="home-main-how-it-work bg-white py-5">
        <div class="container">
            <!-- Section title -->
            <h2 class="mb-2">
                <span class="font-weight-light">@lang('eventmie-pro::em.how_it_works')</span>
            </h2>

            <!-- CSS-only tabs -->
            <div class="howit-tabs mb-3">
                <!-- Tab controls -->
                <input type="radio" name="howit" id="tab-organiser" checked>
                <label for="tab-organiser" class="tab-label">
                    @lang('eventmie-pro::em.for_event_organisers')
                </label>

                <input type="radio" name="howit" id="tab-customer">
                <label for="tab-customer" class="tab-label">
                    @lang('eventmie-pro::em.for_customers')
                </label>

                <!-- Tab panels -->
                <div class="tab-content">
                    <!-- Organiser flow -->
                    <div class="tab-panel organiser mt-4">
                        <div class="row">
                            <div class="col-md-4 mb-5">
                                <div class="step position-relative ps-5">
                                    <div class="step-icon mb-3">
                                        <i class="fas fa-calendar-plus"></i>
                                    </div>
                                    <h5 class="fw-semibold mb-2">
                                        @lang('eventmie-pro::em.organiser_1')
                                    </h5>
                                    <p class="text-muted">
                                        @lang('eventmie-pro::em.organiser_1_info')
                                    </p>
                                    <span class="step-number">1</span>
                                </div>
                            </div>
                            <div class="col-md-4 mb-5">
                                <div class="step position-relative ps-5">
                                    <div class="step-icon mb-3">
                                        <i class="fas fa-calendar-check"></i>
                                    </div>
                                    <h5 class="fw-semibold mb-2">
                                        @lang('eventmie-pro::em.organiser_2')
                                    </h5>
                                    <p class="text-muted">
                                        @lang('eventmie-pro::em.organiser_2_info')
                                    </p>
                                    <span class="step-number">2</span>
                                </div>
                            </div>
                            <div class="col-md-4 mb-5">
                                <div class="step position-relative ps-5">
                                    <div class="step-icon mb-3">
                                        <i class="fas fa-money-check-alt"></i>
                                    </div>
                                    <h5 class="fw-semibold mb-2">
                                        @lang('eventmie-pro::em.organiser_3')
                                    </h5>
                                    <p class="text-muted">
                                        @lang('eventmie-pro::em.organiser_3_info')
                                    </p>
                                    <span class="step-number">3</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Customer flow -->
                    <div class="tab-panel customer mt-4">
                        <div class="row">
                            <div class="col-md-4 mb-5">
                                <div class="step position-relative ps-5">
                                    <div class="step-icon mb-3">
                                        <i class="fas fa-calendar-alt"></i>
                                    </div>
                                    <h5 class="fw-semibold mb-2">
                                        @lang('eventmie-pro::em.customer_1')
                                    </h5>
                                    <p class="text-muted">
                                        @lang('eventmie-pro::em.customer_1_info')
                                    </p>
                                    <span class="step-number">1</span>
                                </div>
                            </div>
                            <div class="col-md-4 mb-5">
                                <div class="step position-relative ps-5">
                                    <div class="step-icon mb-3">
                                        <i class="fas fa-ticket"></i>
                                    </div>
                                    <h5 class="fw-semibold mb-2">
                                        @lang('eventmie-pro::em.customer_2')
                                    </h5>
                                    <p class="text-muted">
                                        @lang('eventmie-pro::em.customer_2_info')
                                    </p>
                                    <span class="step-number">2</span>
                                </div>
                            </div>
                            <div class="col-md-4 mb-5">
                                <div class="step position-relative ps-5">
                                    <div class="step-icon mb-3">
                                        <i class="fas fa-walking"></i>
                                    </div>
                                    <h5 class="fw-semibold mb-2">
                                        @lang('eventmie-pro::em.customer_3')
                                    </h5>
                                    <p class="text-muted">
                                        @lang('eventmie-pro::em.customer_3_info')
                                    </p>
                                    <span class="step-number">3</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div><!-- /.tab-content -->
            </div><!-- /.howit-tabs -->


        </div>
    </div>



    @if (!empty(setting('site.playstore_url')) || !empty(setting('site.appstore_url')))
        <section class="app-cta-section position-relative text-white overflow-hidden">
            <!-- red gradient circle -->
            <div class="gradient-circle position-absolute"></div>

            <div class="container py-5">
                <div class="row align-items-center">
                    <!-- text + buttons -->
                    <div class="col-lg-6 text-center text-lg-start mb-4 mb-lg-0">
                        <h2 class="display-4 fw-bold mb-3">
                            @lang('eventmie-pro::em.app_1')<br>
                            @lang('eventmie-pro::em.app_2')
                        </h2>
                        <p class="lead mb-4">
                            @lang('eventmie-pro::em.app_download')
                        </p>
                    </div>

                    <!-- phone mockups -->
                    <div class="col-lg-6 text-center">
                        <div class="d-flex justify-content-center">
                            @if (!empty(setting('site.playstore_url')))
                                <a href="{{ setting('site.playstore_url') }}" class="btn btn-dark btn-store me-3">
                                    <i class="fab fa-google-play fa-2x me-2 text-dark"></i>
                                    <div class="text-start">
                                        <small class="d-block text-muted">@lang('eventmie-pro::em.app_download_on')</small>
                                        <strong class="text-secondary">@lang('eventmie-pro::em.play_store')</strong>
                                    </div>
                                </a>
                            @endif
                            @if (!empty(setting('site.appstore_url')))
                                <a href="{{ setting('site.appstore_url') }}" class="btn btn-dark btn-store">
                                    <i class="fab fa-apple fa-2x me-2 text-dark"></i>
                                    <div class="text-start">
                                        <small class="d-block text-muted">@lang('eventmie-pro::em.app_download_on')</small>
                                        <strong class="text-secondary">@lang('eventmie-pro::em.app_store')</strong>
                                    </div>
                                </a>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </section>
    @endif

@endsection

@section('javascript')
    <script type="text/javascript">
        var google_map_key = {!! json_encode(setting('apps.google_map_key')) !!};
        var events_slider = true;
    </script>

    @Vite('resources/js/vendor/eventmie-pro/welcome/index.js')
@stop