@extends('layouts.guest-middle')

@section('content')

    <div class="p-4 hero rounded border  shadow-sm mb-2">
        <div class="text-center mb-3 fw-bold fs-1">
            {{ $landingPage->course_name }}
        </div>

        <div class="text-center mb-3">
            <span class="border rounded border-white p-2">
                Duration: {{ $landingPage->duration }}
            </span>
        </div>

        <div class="text-center fw-bold fs-5 mb-2">
            Course fee (LKR): {{ number_format($landingPage->fee, 2) }}
            <span class="text-decoration-line-through">
                {{ number_format($landingPage->regular_fee, 2) }}
            </span>
        </div>

        <div class="text-center mb-2">
            <span class="fw-bold">Starting on:</span> {{ $landingPage->starting_date_time }}
        </div>

        @if (!empty($landingPage->class_mode_id))
            <div class="text-center mb-2">
                <div class="d-inline-flex justify-content-center align-items-center gap-3 bg-light p-2 rounded mx-auto">
                    @if ($landingPage->class_mode_id == 1)
                        <img src="{{ asset('images/zoom.webp') }}" style="width:100px;">
                    @elseif($landingPage->class_mode_id == 2)
                        <img src="{{ asset('images/physical.png') }}" style="width:50px;">
                    @else
                        <img src="{{ asset('images/zoom.webp') }}" style="width:100px;">
                        <img src="{{ asset('images/physical.png') }}" style="width:50px;">
                    @endif
                </div>
            </div>
        @endif

        <section id="form"></section>
        <div class="text-center mb-2">
            Use below promo code to get the discount
        </div>

        <div class="fw-bold text-center mt-3">
            <span class="bg-dark rounded text-light p-2">
                Promo code: {{ $landingPage->promo_code }}
            </span>
        </div>
    </div>

    <div class="p-2 shadow-md mb-4 card snake-card">
        <div class="card-body">

            <div class="text-center mb-2">
                <span class="text-danger fw-bold">
                    Fill the form to get your Discount and register fast!
                </span>
            </div>
            <form action="{{ url('leads-store') }}" method="POST" class="mb-4" onsubmit="openInNewTab()">
                @csrf

                <div class="mb-3">
                    <label for="name" class="form-label">Name *</label>
                    <input type="text" name="name" id="name" class="form-control" required>
                </div>

                <div class="mb-3">
                    <label for="telephone_number" class="form-label">Telephone Number *</label>
                    <input type="text" name="telephone_number" id="telephone_number" class="form-control" required
                        maxlength="15" inputmode="numeric" pattern="\d*">
                </div>

                <div class="mb-3">
                    <label for="email" class="form-label">Email *</label>
                    <input type="email" name="email" id="email" class="form-control" required>
                </div>

                <input type="hidden" name="lead_source_id" value="1">
                <input type="hidden" name="slug" value="{{ $landingPage->slug }}">
                <input type="hidden" name="landing_page_id" value="{{ $landingPage->id }}">

                <input type="hidden" id="whatsappLink">
                <button type="submit"
                    class="btn w-100 site-button animated-button">{{ $landingPage->button_label }}</button>
            </form>
        </div>
    </div>


    <section class="container my-5">
        <h2 class="fw-bold text-center mb-4" style="letter-spacing:.5px;">
            SUCCESSFUL STUDENT TESTIMONIALS
        </h2>

        <div class="t-mask">
            <ul class="t-track" id="tTrack">
                {{-- one pass --}}
                @foreach ($testimonials as $t)
                    <li class="t-card">
                        <div class="t-head">
                            <img class="t-avatar"
                                src="{{ $t->photo ? asset('storage/' . $t->photo) : 'https://ui-avatars.com/api/?name=' . urlencode($t->author_name) . '&size=128&background=ddd&color=555' }}"
                                alt="{{ $t->author_name }}">
                            <div class="t-meta">
                                <div class="t-name">{{ $t->author_name }}</div>
                                @if ($t->author_title)
                                    <div class="t-title">{{ $t->author_title }}</div>
                                @endif
                            </div>
                        </div>
                        <p class="t-body">{{ $t->body }}</p>
                    </li>
                @endforeach

                {{-- duplicate to create seamless infinite loop --}}
                @foreach ($testimonials as $t)
                    <li class="t-card">
                        <div class="t-head">
                            <img class="t-avatar"
                                src="{{ $t->photo ? asset('storage/' . $t->photo) : 'https://ui-avatars.com/api/?name=' . urlencode($t->author_name) . '&size=128&background=ddd&color=555' }}"
                                alt="{{ $t->author_name }}">
                            <div class="t-meta">
                                <div class="t-name">{{ $t->author_name }}</div>
                                @if ($t->author_title)
                                    <div class="t-title">{{ $t->author_title }}</div>
                                @endif
                            </div>
                        </div>
                        <p class="t-body">{{ $t->body }}</p>
                    </li>
                @endforeach
            </ul>

            {{-- edge fade --}}
            <div class="t-fade t-fade-left"></div>
            <div class="t-fade t-fade-right"></div>
        </div>
    </section>


    <div class="p-4 rounded border bg-light shadow-sm">

        @if (!empty($landingPage->photo))
            <div class="mb-3">
                <img src="{{ asset('storage/' . $landingPage->photo) }}" style="width:100%">
            </div>
        @endif

        <div class="text-muted text-center mb-4">
            {{ $landingPage->details }}
        </div>

        @if (!empty($landingPage->video))
            <div class="text-center mb-4">
                {!! $landingPage->video !!}
            </div>
        @endif

        @if (!empty($landingPage->description))
            <div class="mb-3">
                {!! $landingPage->description !!}
            </div>
        @endif

        <div class="text-center">
            <a href="#form" class="btn site-button-outline animated-button">Register Now</a>
        </div>
    </div>
    </div>

    <script>
        const inputs = ['name', 'telephone_number', 'email'];

        inputs.forEach(function(id) {
            document.getElementById(id).addEventListener('input', updateLink);
        });

        function updateLink() {
            const baseLink = "{{ $landingPage->whatsapp_group_link ?? '' }}";

            if (!baseLink.includes('send')) {
                document.getElementById('whatsappLink').value = baseLink;
                return;
            }

            const name = document.getElementById('name').value;
            const phone = document.getElementById('telephone_number').value;
            const email = document.getElementById('email').value;

            const message = `I Want to Enroll {{ $landingPage->course_name }}\n\n` +
                `My Name: ${name}\n` +
                `Telephone Number: ${phone}\n` +
                `My Email: ${email}`;

            const updatedLink = baseLink + '&text=' + encodeURIComponent(message);
            document.getElementById('whatsappLink').value = updatedLink;
        }

        function openInNewTab() {
            const link = document.getElementById('whatsappLink').value;
            if (link) {
                window.open(link, '_blank');
            }
        }
    </script>

    <script>
        (function() {
            const track = document.getElementById('tTrack');
            if (!track) return;

            // total width of half the track (since we duplicated items)
            const halfWidth = [...track.children]
                .slice(0, track.children.length / 2)
                .reduce((w, el) => w + el.getBoundingClientRect().width + 18 /*gap*/ , 0);

            // pixels per second (lower = slower)
            const pxPerSec = 120; // tweak speed here
            const duration = Math.max(10, Math.round(halfWidth / pxPerSec));

            track.style.animationDuration = duration + 's';

            // pause on touch (mobile)
            let touched = false;
            track.addEventListener('touchstart', () => {
                touched = true;
                track.style.animationPlayState = 'paused';
            }, {
                passive: true
            });
            track.addEventListener('touchend', () => {
                if (touched) {
                    track.style.animationPlayState = 'running';
                    touched = false;
                }
            });
        })();
    </script>

@endsection