@extends('frontend.layouts.app')

@section('content')
    @php
        $breadCrump2 = 'Success Stories';
        use Carbon\Carbon;
    @endphp

    <!-- Inline Style Section - move to CSS file if possible -->
    <style>
        .profile-menu {
            list-style-type: none;
            padding: 0;
        }

        .profile-menu li {
            position: relative;
        }

        .dropbtn {
            display: block;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            background-color: white;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
            z-index: 1;
        }

        .dropdown-content a {
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }

        .dropdown:hover .dropdown-content {
            display: block;
        }

        .story-bx {
            margin-bottom: 30px;
        }

        .story-img-info img,
        .story-img-info video {
            width: 100%;
            height: auto;
            object-fit: cover;
            border-radius: 10px;
        }

        .story-txt-info h3 {
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: 10px;
        }

        .story-txt-info p {
            font-size: 1rem;
            margin-bottom: 20px;
        }

        .btn-custom {
            display: inline-block;
            background-color: #007bff;
            color: #fff;
            padding: 10px 20px;
            border-radius: 5px;
            text-decoration: none;
        }

        .btn-custom:hover {
            background-color: #0056b3;
        }

        .starRating {
            display: flex;
        }

        .star {
            width: 20px;
            height: 20px;
            margin-right: 5px;
            background-image: url('images/starIcon.png');
            background-size: contain;
            background-repeat: no-repeat;
        }

        .star.empty {
            background-image: url('images/starEmpty.png');
            /* You can have an empty star icon */
        }

        .story-img-info {
    width: 100%;
    height: 300px; /* Fixed height for all media */
    overflow: hidden; /* Ensures no content overflows */
    display: flex;
    justify-content: center;
    align-items: center;
}

.story-img-info img,
.story-img-info video {
    width: 100%; /* Scale width to container */
    height: 100%; /* Scale height to container */
    object-fit: cover; /* Ensures proper cropping and aspect ratio */
    display: block;
}

    </style>

    <!-- Job Listing Start -->
    <div class="wrapper-inner">
        <div class="success-bx">
            <div class="container">
                <div class="headingBlock d-flex align-items-center justify-content-between">
                    <h4>Success Story</h4>
                    @if (auth()->guard('employer')->check() || auth()->guard('service_provider')->check() || auth()->guard('job_seeker')->check())
                        <a href="{{ route('successStory.create') }}" class="btn btn-primary">Add your own story</a>
                    @endif
                </div>
                @include('frontend.layouts.flash_message')

                <div class="row d-flex">
                    @foreach ($successStories as $successStory)
                        <div class="col-md-6 d-flex">
                            <div class="story-bx w-100">
                                <div class="story-img-info">
                                    @if ($successStory->file)
                                        @php
                                            $fileExtension = pathinfo($successStory->file, PATHINFO_EXTENSION);
                                        @endphp

                                        @if (in_array(strtolower($fileExtension), ['jpg', 'jpeg', 'png', 'gif', 'webp']))
                                            <img src="{{ asset('file/success-stories/' . $successStory->file) }}"
                                                 alt="Success Story Image" class="img-fluid">
                                        @elseif (in_array(strtolower($fileExtension), ['mp4', 'webm', 'ogg']))
                                            <video controls id="success-story-video">
                                                <source src="{{ asset('file/success-stories/' . $successStory->file) }}"
                                                        type="video/{{ $fileExtension }}">
                                                Your browser does not support the video tag.
                                            </video>
                                        @else
                                            <img src="{{ asset('file/success-stories/default.jpg') }}" alt="Default Image">
                                        @endif
                                    @else
                                        <img src="{{ asset('file/success-stories/default.jpg') }}" alt="Default Image">
                                    @endif
                                </div>

                                <div class="story-txt-info">
                                    <h3>{{ $successStory->title }}</h3>
                                    <p>{!! $successStory->description !!}</p>
                                    <a href="{{ route('successStory.detail', $successStory->id) }}" class="btn-custom">Watch Story</a>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>


            </div>
        </div>

        <!-- Testimonial Block -->
        <div class="testimonialBlock">
            <div class="container">
                <div class="headingBlock">
                    <h4>Testimonial</h4>
                </div>

                <div class="testimonialSlider owl-carousel owl-theme">
                    @foreach ($testimonials as $testimonial)
                        <div class="item">
                            <div class="testimonialCard">
                                <div class="userImg">
                                    @if ($testimonial->user_image)
                                        <img src="{{ asset('uploads/testimonials/' . $testimonial->user_image) }}"
                                            alt="">
                                    @else
                                        <img src="{{ asset('frontend/images/userImg.jpg') }}" alt="Stacy Hog">
                                    @endif
                                </div>
                                <div class="testimonialHeading d-flex align-items-center justify-content-between">
                                    <div class="testimonialLeft">
                                        <span>{{ $testimonial->name }}</span>
                                    </div>
                                    <div class="starRating" data-rating="{{ $testimonial->rating }}"></div>
                                </div>
                                <p>{{ $testimonial->description }}</p>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
@endsection
@push('front-script')
    <script>
        // Function to display the star rating for each testimonial
        function displayRating(rating, container) {
            container.innerHTML = ''; // Clear any existing stars

            // Loop to create the filled star elements based on the rating
            for (let i = 1; i <= rating; i++) {
                const star = document.createElement('img'); // Create an <img> tag for each star
                star.src = "{{ asset('images/star.png') }}"; // Use the filled star image
                star.classList.add('star'); // Optional: Add a class for styling (if necessary)

                container.appendChild(star); // Append the filled star to the container
            }
        }

        // Get all the star rating containers
        document.querySelectorAll('.starRating').forEach(function(container) {
            // Get the rating value from the data-rating attribute
            const rating = parseInt(container.getAttribute('data-rating'));
            displayRating(rating, container); // Call the function for each testimonial
        });

        document.getElementById('success-story-video').addEventListener('click', function(event) {
        event.preventDefault(); // Prevent default behavior
        event.stopPropagation(); // Stop event from propagating
    });
    </script>
@endpush
