@extends('frontend.layouts.app')

@section('content')
    <div class="home-page-wrapper py-3 py-md-4">

        @php
            if (!function_exists('sef_extract_youtube_id')) {
                function sef_extract_youtube_id($url) {
                    if (!$url) {
                        return null;
                    }

                    $patterns = [
                        '/youtu\.be\/([a-zA-Z0-9_-]{11})/',
                        '/youtube\.com\/watch\?v=([a-zA-Z0-9_-]{11})/',
                        '/youtube\.com\/embed\/([a-zA-Z0-9_-]{11})/',
                        '/youtube\.com\/shorts\/([a-zA-Z0-9_-]{11})/',
                    ];

                    foreach ($patterns as $pattern) {
                        if (preg_match($pattern, $url, $matches)) {
                            return $matches[1];
                        }
                    }

                    parse_str(parse_url($url, PHP_URL_QUERY) ?? '', $query);
                    return $query['v'] ?? null;
                }
            }
        @endphp

        @if(isset($largeSliders) && $largeSliders->count())
            <section class="home-hero mb-3 mb-md-4">
                <div class="container">
                    <div id="homeMainSlider" class="carousel slide home-hero-slider" data-bs-ride="carousel">
                        <div class="carousel-inner">
                            @foreach ($largeSliders as $slider)
                                @php
                                    $youtubeId = sef_extract_youtube_id($slider->youtube_url ?? null);
                                @endphp
                                <div class="carousel-item {{ $loop->first ? 'active' : '' }}">
                                    <div class="home-hero-split">
                                        <div class="home-hero-media-col">
                                            <div class="home-hero-video-box">
                                                @if($youtubeId)
                                                    <iframe
                                                        src="https://www.youtube.com/embed/{{ $youtubeId }}?rel=0&modestbranding=1"
                                                        title="{{ $slider->title ?: ($slider->alt ?? 'Header Video') }}"
                                                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                                                        allowfullscreen>
                                                    </iframe>
                                                @elseif($slider->image)
                                                    <img src="{{ asset('storage/' . $slider->image) }}"
                                                         class="home-hero-fallback-img"
                                                         alt="{{ $slider->alt ?? 'Slider Image' }}">
                                                @else
                                                    <div class="home-hero-empty-state">
                                                        <span>No video added</span>
                                                    </div>
                                                @endif
                                            </div>
                                        </div>

                                        <div class="home-hero-text-col">
                                            <div class="home-hero-text-wrap">
                                                @if($slider->title)
                                                    <h1 class="home-hero-title">{{ $slider->title }}</h1>
                                                @endif

                                                @if($slider->description)
                                                    <div class="home-hero-description">{!! nl2br(e($slider->description)) !!}</div>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>

                        @if($largeSliders->count() > 1)
                            <button class="carousel-control-prev" type="button" data-bs-target="#homeMainSlider" data-bs-slide="prev">
                                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                <span class="visually-hidden">Previous</span>
                            </button>
                            <button class="carousel-control-next" type="button" data-bs-target="#homeMainSlider" data-bs-slide="next">
                                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                <span class="visually-hidden">Next</span>
                            </button>
                        @endif
                    </div>
                </div>
            </section>
        @endif

        @isset($homeSections)
            @foreach($homeSections as $section)
                @include('frontend.partials.home-section-block', ['section' => $section])
            @endforeach
        @endisset

    </div>
@endsection

@push('style')
    <style>
        .home-page-wrapper {
            background-color: #f5f5f5;
        }

        .home-hero-slider {
            border-radius: 18px;
            overflow: hidden;
            box-shadow: 0 12px 26px rgba(15, 23, 42, 0.12);
            background: #fff;
        }

        .home-hero-split {
            display: grid;
            grid-template-columns: minmax(420px, 1fr) 1.15fr;
            align-items: stretch;
            min-height: 1200px;
        }

        .home-hero-media-col,
        .home-hero-text-col {
            padding: 40px;
        }

        .home-hero-media-col {
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(180deg, rgba(2, 132, 199, 0.06), rgba(2, 132, 199, 0.02));
        }

        .home-hero-video-box {
            width: 100%;
            max-width: 560px;
            aspect-ratio: 1 / 1;
            border-radius: 24px;
            overflow: hidden;
            background: #e5e7eb;
            box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14);
        }

        .home-hero-video-box iframe,
        .home-hero-fallback-img {
            width: 100%;
            height: 100%;
            border: 0;
            object-fit: cover;
            display: block;
        }

        .home-hero-empty-state {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            color: #6b7280;
            background: #f3f4f6;
        }

        .home-hero-text-col {
            display: flex;
            align-items: center;
            background: #ffffff;
        }

        .home-hero-text-wrap {
            max-width: 720px;
        }

        .home-hero-title {
            font-size: clamp(2rem, 4vw, 4.2rem);
            line-height: 1.1;
            font-weight: 800;
            color: #0f172a;
            margin-bottom: 22px;
        }

        .home-hero-description {
            font-size: clamp(1rem, 1.5vw, 1.28rem);
            line-height: 1.9;
            color: #334155;
        }

        .home-hero .carousel-control-prev,
        .home-hero .carousel-control-next {
            width: 5%;
        }

        .home-hero .carousel-control-next-icon,
        .home-hero .carousel-control-prev-icon {
            background-color: rgba(0, 0, 0, 0.55);
            border-radius: 999px;
            padding: 10px;
        }

        .home-block {
            padding: 1.5rem 0;
        }

        .home-block + .home-block {
            border-top: 1px solid #e5e7eb;
        }

        .home-block-header {
            margin-bottom: 0.75rem;
        }

        .home-block-title {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 0.15rem;
        }

        .home-block-subtitle {
            font-size: 0.82rem;
            color: #6b7280;
            margin-bottom: 0.2rem;
        }

        .home-block-submenus {
            font-size: 0.82rem;
            display: flex;
            flex-wrap: wrap;
            gap: 0.35rem;
        }

        .home-submenu-link {
            text-decoration: none;
            color: #2563eb;
        }

        .home-submenu-link:hover {
            text-decoration: underline;
        }

        .home-block-more {
            font-size: 0.82rem;
            padding: 4px 10px;
        }

        .home-product-card-link {
            text-decoration: none;
            color: inherit;
        }

        .home-product-card {
            background-color: #ffffff;
            border-radius: 6px;
            border: 1px solid #e5e7eb;
            padding: 0.45rem 0.45rem 0.6rem;
            transition: box-shadow 0.15s ease-out, transform 0.15s ease-out;
        }

        .home-product-card:hover {
            box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
            transform: translateY(-2px);
        }

        .home-product-img-wrap {
            position: relative;
            background-color: #ffffff;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 140px;
        }

        .home-product-img-wrap img {
            max-height: 130px;
            object-fit: contain;
        }

        .home-discount-badge {
            position: absolute;
            left: 6px;
            top: 6px;
            background-color: #e11d48;
            color: #ffffff;
            font-size: 0.7rem;
            font-weight: 600;
            padding: 2px 6px;
            border-radius: 999px;
        }

        .home-product-body {
            margin-top: 0.35rem;
        }

        .home-product-name {
            font-size: 0.8rem;
            color: #111827;
            min-height: 32px;
        }

        .home-product-price-wrap {
            display: flex;
            align-items: baseline;
            gap: 0.35rem;
        }

        @media (max-width: 1399.98px) {
            .home-hero-split {
                min-height: 900px;
                grid-template-columns: minmax(360px, 0.95fr) 1.05fr;
            }
        }

        @media (max-width: 1199.98px) {
            .home-hero-split {
                min-height: 760px;
                grid-template-columns: 1fr 1fr;
            }

            .home-hero-media-col,
            .home-hero-text-col {
                padding: 28px;
            }
        }

        @media (max-width: 991.98px) {
            .home-hero-split {
                grid-template-columns: 1fr;
                min-height: auto;
            }

            .home-hero-video-box {
                max-width: 100%;
            }
        }

        @media (max-width: 575.98px) {
            .home-hero-media-col,
            .home-hero-text-col {
                padding: 18px;
            }

            .home-hero-title {
                margin-bottom: 14px;
            }
        }
    </style>
@endpush