{{-- @php
    $chunkProjects = $projects->chunk(2);
@endphp

<section class="project__area-two shortcode-projects shortcode-projects-style-3" @style($variablesStyle)>
    <div class="container">
        <div class="row">
            <div class="col-xl-5 col-lg-6">
                <div class="section-title mb-50 tg-heading-subheading animation-style3">
                    @if ($subtitle = $shortcode->subtitle)
                        <span class="sub-title">{!! BaseHelper::clean($subtitle) !!}</span>
                    @endif

                    @if ($title = $shortcode->title)
                        <h2 class="title tg-element-title">{!! BaseHelper::clean($title) !!}</h2>
                    @endif
                </div>
            </div>
        </div>

        @foreach($chunkProjects as $projects)
            <div class="row gutter-24">
                @foreach($projects as $project)
                    @if($loop->last && $loop->index == 1)
                        <div class="col-lg-8">
                            <div class="project__item-two">
                                <div class="project__thumb-two">
                                    {{ RvMedia::image($project->image, $project->name) }}
                                </div>
                                <div class="project__content-two">
                                    <h2 class="title">
                                        <a class="truncate-1-custom" title="{{ $project->name }}" href="{{ $project->url }}">{{ $project->name }}</a>
                                    </h2>

                                    @if ($category = $project->getMetaData('category', true))
                                        <span>{!! BaseHelper::clean($category) !!}</span>
                                    @endif
                                    <div class="link-arrow link-arrow-two">
                                        <a href="{{ $project->url }}">
                                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 15" fill="none">
                                                <path fill-rule="evenodd" clip-rule="evenodd" d="M17.6293 3.27956C17.7117 2.80339 17.4427 2.34761 17.0096 2.17811C16.9477 2.15384 16.8824 2.13551 16.8144 2.12375L6.96087 0.419136C6.4166 0.325033 5.89918 0.689841 5.80497 1.23409C5.71085 1.77828 6.0757 2.29576 6.61988 2.38991L14.0947 3.68293L1.3658 12.6573C0.914426 12.9756 0.806485 13.5994 1.12473 14.0508C1.44298 14.5022 2.06688 14.6101 2.51825 14.2919L15.2471 5.31752L13.954 12.7923C13.8599 13.3365 14.2248 13.854 14.7689 13.9481C15.3132 14.0422 15.8306 13.6774 15.9248 13.1332L17.6293 3.27956Z" fill="currentcolor" />
                                                <path fill-rule="evenodd" clip-rule="evenodd" d="M17.6293 3.27956C17.7117 2.80339 17.4427 2.34761 17.0096 2.17811C16.9477 2.15384 16.8824 2.13551 16.8144 2.12375L6.96087 0.419136C6.4166 0.325033 5.89918 0.689841 5.80497 1.23409C5.71085 1.77828 6.0757 2.29576 6.61988 2.38991L14.0947 3.68293L1.3658 12.6573C0.914426 12.9756 0.806485 13.5994 1.12473 14.0508C1.44298 14.5022 2.06688 14.6101 2.51825 14.2919L15.2471 5.31752L13.954 12.7923C13.8599 13.3365 14.2248 13.854 14.7689 13.9481C15.3132 14.0422 15.8306 13.6774 15.9248 13.1332L17.6293 3.27956Z" fill="currentcolor" />
                                            </svg>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @else
                        <div class="col-lg-4 col-md-6">
                            <div class="project__item-two">
                                <div class="project__thumb-two">
                                    {{ RvMedia::image($project->image, $project->name, 'media-square') }}
                                </div>
                                <div class="project__content-two">
                                    <h2 class="title">
                                        <a class="truncate-1-custom" title="{{ $project->name }}" href="{{ $project->url }}">{{ $project->name }}</a>
                                    </h2>

                                    @if ($category = $project->getMetaData('category', true))
                                        <span>{!! BaseHelper::clean($category) !!}</span>
                                    @endif
                                    <div class="link-arrow link-arrow-two">
                                        <a href="{{ $project->url }}">
                                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 15" fill="none">
                                                <path fill-rule="evenodd" clip-rule="evenodd" d="M17.6293 3.27956C17.7117 2.80339 17.4427 2.34761 17.0096 2.17811C16.9477 2.15384 16.8824 2.13551 16.8144 2.12375L6.96087 0.419136C6.4166 0.325033 5.89918 0.689841 5.80497 1.23409C5.71085 1.77828 6.0757 2.29576 6.61988 2.38991L14.0947 3.68293L1.3658 12.6573C0.914426 12.9756 0.806485 13.5994 1.12473 14.0508C1.44298 14.5022 2.06688 14.6101 2.51825 14.2919L15.2471 5.31752L13.954 12.7923C13.8599 13.3365 14.2248 13.854 14.7689 13.9481C15.3132 14.0422 15.8306 13.6774 15.9248 13.1332L17.6293 3.27956Z" fill="currentcolor" />
                                                <path fill-rule="evenodd" clip-rule="evenodd" d="M17.6293 3.27956C17.7117 2.80339 17.4427 2.34761 17.0096 2.17811C16.9477 2.15384 16.8824 2.13551 16.8144 2.12375L6.96087 0.419136C6.4166 0.325033 5.89918 0.689841 5.80497 1.23409C5.71085 1.77828 6.0757 2.29576 6.61988 2.38991L14.0947 3.68293L1.3658 12.6573C0.914426 12.9756 0.806485 13.5994 1.12473 14.0508C1.44298 14.5022 2.06688 14.6101 2.51825 14.2919L15.2471 5.31752L13.954 12.7923C13.8599 13.3365 14.2248 13.854 14.7689 13.9481C15.3132 14.0422 15.8306 13.6774 15.9248 13.1332L17.6293 3.27956Z" fill="currentcolor" />
                                            </svg>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif
                @endforeach
            </div>
        @endforeach
    </div>
</section> --}}

{{-- <section class="project__area-two shortcode-projects shortcode-projects-style-3" @style($variablesStyle)>
    <div class="container">
        <div class="row">
            <div class="col-xl-5 col-lg-6">
                <div class="section-title mb-50 tg-heading-subheading animation-style3">
                    @if ($subtitle = $shortcode->subtitle)
                        <span class="sub-title">{!! BaseHelper::clean($subtitle) !!}</span>
                    @endif

                    @if ($title = $shortcode->title)
                        <h2 class="title tg-element-title">{!! BaseHelper::clean($title) !!}</h2>
                    @endif
                </div>
            </div>
        </div>

        <div class="row">
            @foreach($projects as $project)
                <div class="col-lg-3 col-md-6 mb-4">
                    <div class="project__item-two card h-100 shadow-sm rounded overflow-hidden">
                        <div class="project__thumb-two">
                            {{ RvMedia::image($project->image, $project->name, 'medium') }}
                        </div>
                        <div class="project__content-two p-3 text-center">
                            <h4 class="title mb-2">
                                <a class="truncate-1-custom" title="{{ $project->name }}" href="{{ $project->url }}">
                                    {{ $project->name }}
                                </a>
                            </h4>

                            @if ($description = $project->getMetaData('category', true))
                                <p class="text-muted small truncate-2-custom">
                                    {!! BaseHelper::clean($description) !!}
                                </p>
                            @endif
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</section> --}}
{{-- <style>
    .project-card {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.project-thumb img {
    width: 100%;
    height: 250px; 
    object-fit: cover;
    border-radius: 12px;
    display: block;
}

.project-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px;
    background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0));
    color: #fff;
}

.project-title {
    font-size: 1.1rem;
    font-weight: bold;
    margin: 0 0 5px;
}

.project-desc {
    font-size: 0.9rem;
    margin: 0;
    opacity: 0.9;
}

</style> --}}

{{-- <section class="project-section project__area-two shortcode-projects shortcode-projects-style-3" @style($variablesStyle)>
    <div class="container">
        <div class="row">
            <div class="col-xl-5 col-lg-6">
                <div class="section-title mb-50 tg-heading-subheading animation-style3">
                    @if ($subtitle = $shortcode->subtitle)
                        <span class="sub-title">{!! BaseHelper::clean($subtitle) !!}</span>
                    @endif

                    @if ($title = $shortcode->title)
                        <h2 class="title tg-element-title">{!! BaseHelper::clean($title) !!}</h2>
                    @endif
                </div>
            </div>
        </div>

        <div class="row">
            @foreach($projects as $project)
                <div class="col-lg-3 col-md-6 mb-4">
                    <div class="project-card">
                        <div class="project-thumb">
                            {{ RvMedia::image($project->image, $project->name, 'medium') }}
                            <div class="project-overlay">
                                <h4 class="project-title">{{ $project->name }}</h4>
                                    <p class="project-desc">{{ $project->description }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</section> --}}

{{-- <style>
    /* أسلوب التبويب الجانبي */
    .services-tab {
        position: fixed;
        top: 0;
        right: -300px; /* مخفي خارج الشاشة من اليمين */
        width: 200px;
        height: 100%;
        background-color: #f8f9fa;
        padding: 90px;
        box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
        transition: right 0.3s ease-in-out;
        z-index: 1000;
    }
    .services-tab.active {
        right: 0;
    }
    /* حاوية نسبية للأقسام */
    .project-section {
        position: relative;
        padding-right: 60px; /* مساحة للزر */
    }
    /* أسلوب الزر */
    #toggleServicesBtn {
        position: absolute;
        right: -50px; /* مسافة من الحافة اليمنى، جرب تقليلها إذا لم يظهر */
        top: 50%;
        transform: translateY(-50%);
        z-index: 1001; /* تأكد من أنه فوق جميع العناصر */
        background-color: #252222;
        border: 1px solid #ccc;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }
    #toggleServicesBtn:hover {
        background-color: #252222;
    }
    .project-card {
        position: relative;
        margin-bottom: 20px;
    }
</style>

<div class="container mt-5">
    <div id="servicesTab" class="services-tab">
        <ul>
            <li> تصميم الواجهات</li>
            <li> تطوير التطبيقات</li>
            <li> دعم فني</li>
        </ul>
        <button id="closeServicesBtn" class="btn btn-danger mt-3">إغلاق</button>
    </div>
</div>

<section class="project-section project__area-two shortcode-projects shortcode-projects-style-3" @style($variablesStyle)>
    <div class="container">
        <div class="row">
            <div class="col-xl-5 col-lg-6">
                <div class="section-title mb-50 tg-heading-subheading animation-style3">
                    @if ($subtitle = $shortcode->subtitle)
                        <span class="sub-title">{!! BaseHelper::clean($subtitle) !!}</span>
                    @endif
                    @if ($title = $shortcode->title)
                        <h2 class="title tg-element-title">{!! BaseHelper::clean($title) !!}</h2>
                    @endif
                </div>
            </div>
        </div>

        <div class="row position-relative"> <!-- حاوية نسبية للزر -->
            <button id="toggleServicesBtn" class="btn btn-primary">
            </button>

            @foreach($projects as $project)
                <div class="col-lg-3 col-md-6 mb-4">
                    <div class="project-card">
                        <div class="project-thumb">
                            {{ RvMedia::image($project->image, $project->name, 'medium') }}
                            <div class="project-overlay">
                                <h4 class="project-title">{{ $project->name }}</h4>
                                <p class="project-desc">{{ $project->description }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</section>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
    let showServices = false;

    const toggleBtn = document.getElementById('toggleServicesBtn');
    const servicesTab = document.getElementById('servicesTab');
    const closeBtn = document.getElementById('closeServicesBtn');

    toggleBtn.onclick = function() {
        showServices = !showServices;
        if (showServices) {
            servicesTab.classList.add('active');
            toggleBtn.querySelector('span').innerHTML = '&#9664;';
        } else {
            servicesTab.classList.remove('active');
            toggleBtn.querySelector('span').innerHTML = '&#9654;';
        }
    };

    closeBtn.onclick = function() {
        showServices = false;
        servicesTab.classList.remove('active');
        toggleBtn.querySelector('span').innerHTML = '&#9654;';
    };
</script> --}}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
    .services-tab {
        position: fixed;
        top: 0;
        right: -300px; /* مخفي خارج الشاشة من اليمين */
        width: 200px;
        height: 100%;
        background-color: #f8f9fa;
        padding: 90px;
        box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
        transition: right 0.3s ease-in-out;
        z-index: 1000;
    }
    .services-tab.active {
        right: 0;
    }
    .project-thumb {
        border-radius: none;
    }

    .project-thumb img {
        border-radius: 10px 10px 0 60px;
    }
    
    .project-section {
        position: relative;
        padding-right: 60px; 
    }
    
    #toggleServicesBtn {
        position: fixed; 
        right: 0; 
        top: 50%;
        transform: translateY(-50%);
        z-index: 1001; 
        background-color: #252222;
        border: 1px solid #ccc;
        border-radius: 50%;
        width: 60px; /* زيادة الحجم */
        height: 60px; /* زيادة الحجم */
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        cursor: pointer;
        font-size: 20px; 
    }
    #toggleServicesBtn:hover {
        background-color: #333; 
    }
    .project-card {
        position: relative;
        margin-bottom: 20px;
    }
</style>



{{-- <div class="container mt-5">
    <div id="servicesTab" class="services-tab">
        @foreach($serviceCategories as $category)
            <div class="service-categories-item">
                <h4 class="title truncate-1-custom" title="{{ $category->name }}">{{ $category->name }}</h4>
            </div>
        @endforeach
        <button id="closeServicesBtn" class="btn btn-danger mt-3">إغلاق</button>
    </div>
</div> --}}

<section class="project-section project__area-two shortcode-projects shortcode-projects-style-3" @style($variablesStyle)>
    <div class="container">
        <div class="row">
            <div class="col-xl-5 col-lg-6">
                <div class="section-title mb-50 tg-heading-subheading animation-style3">
                    @if ($subtitle = $shortcode->subtitle)
                        <span class="sub-title">{!! BaseHelper::clean($subtitle) !!}</span>
                    @endif
                    @if ($title = $shortcode->title)
                        <h2 class="title tg-element-title">{!! BaseHelper::clean($title) !!}</h2>
                    @endif
                </div>
            </div>
        </div>

        <div class="row position-relative"> <!-- حاوية نسبية للزر -->
            <!-- الزر تم نقله خارج الـ row ليكون fixed -->
            <!-- <button id="toggleServicesBtn" class="btn btn-primary"></button> -->

            @foreach($projects as $project)
                <div class="col-lg-3 col-md-6 mb-4">
                    <div class="project-card">
                        <div class="project-thumb">
                            {{ RvMedia::image($project->image, $project->name, 'medium') }}
                            <div class="project-overlay">
                                <h4 class="project-title">{{ $project->name }}</h4>
                                <p class="project-desc">{{ $project->description }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</section>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
    let showServices = false;

    const toggleBtn = document.getElementById('toggleServicesBtn');
    const servicesTab = document.getElementById('servicesTab');
    const closeBtn = document.getElementById('closeServicesBtn');

    // فحص وجود العناصر
    if (!toggleBtn || !servicesTab || !closeBtn) {
        console.error('One or more elements (toggleBtn, servicesTab, closeBtn) not found!');
        return;
    }

    // فتح/إغلاق التبويب عند الضغط على الزر
    toggleBtn.onclick = function() {
        console.log('Toggle button clicked'); // للتحقق من النقر
        showServices = !showServices;
        if (showServices) {
            servicesTab.classList.add('active');
            toggleBtn.querySelector('span').innerHTML = '&#9664;';
        } else {
            servicesTab.classList.remove('active');
            toggleBtn.querySelector('span').innerHTML = '&#9654;';
        }
    };

    // إغلاق التبويب عند الضغط على زر الإغلاق
    closeBtn.onclick = function() {
        showServices = false;
        servicesTab.classList.remove('active');
        toggleBtn.querySelector('span').innerHTML = '&#9654;';
    };
</script>