@extends('frontend.layout.master')
@section('content')
<style>
.flex-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; 
}

.flex-tabs .nav-item {
    flex: 1 1 15%;
    text-align: center;
}

.nav-tabs .nav-link.active {
    background-color: navy;
    color: white;
}

.nav-tabs .nav-link.active::after {
    content: '\f105';
    font-family: 'FontAwesome';
    width: 8px;
    height: 8px;
    border: 0;
    position: relative;
    top: 1px;
    right: -47px;
    margin-top: -5px;
    transform: rotate(45deg);
}

li.nav-item {
    font-size:15px;
    font-weight:500;
    border: 1px solid #1746aa;
    margin: 23px 5px 0 5px;
}

.nav-tabs .nav-link {
    color: #1746aa;
    margin: 0px;
    font-weight: 700;
}

.nav-tabs .nav-link:hover {
    background-color: #1746aa;
    color: #ffffff;
    margin: 0px;
    font-weight: 700;
    text-decoration: none;
}
</style>
<div class="container w-75 mx-auto">
    <div id="main-box my-5 py-5">
        <h1 class="fs-1 fw-bold mt-5 pt-5">Press Releases</h1>
        <div id="content">
            <ul class="nav nav-fill nav-tabs pt-5 mt-5 flex-tabs" role="tablist">
                @php
                    $prevyear='e1';
                @endphp
                @foreach($pressreleases as $key => $pressrelease)
                    @if($prevyear!=$pressrelease->year)
                        <li class="nav-item" role="presentation">
                            <a class="nav-link" id="fill-tab-{{$key}}" data-bs-toggle="tab" href="#fill-tabpanel-{{$key}}" role="tab" aria-controls="fill-tabpanel-{{$key}}" aria-selected="false">{{$pressrelease->year}}</a>
                        </li>
                        @php
                            $prevyear=$pressrelease->year;
                        @endphp
                    @endif
                @endforeach
                <div class="py-5 text-end w-100">
                    <a href="{{route('web.press')}}" class="text-dark"><h1 class="fw-bold"><i class='fas fa-angle-right' style='color:#1746aa font-size:10px'></i>  All years</h1></a>
                    <p class="fs-4">News releases and images are published here.</p>  
                </div>
            </ul>
            <div class="mt-5 pt-5 tab-content" id="tab-content">
                @php
                    $prevyear2='e1';
                @endphp
                @foreach($pressreleases as $key => $pressrelease)
                    @if($prevyear2==$pressrelease->year)
                        <tr>
                            <td>{{date('Y/m/d', strtotime($pressrelease->press_release_date))}}</td>
                            <td>
                                @if($pressrelease->type=='1' && $pressrelease->pdf)
                                    <a href="{{asset('uploads/press-release/pdf/'.$pressrelease->pdf)}}" target="_BLANK">{{ app()->getLocale()=='en' ? $pressrelease->title : $pressrelease->titlear}}  <i class="fa-solid fa-file-pdf"></i></a>
                                @elseif($pressrelease->type=='2')
                                    <a href="{{route('web.press-release.show',$pressrelease->id)}}" target="_BLANK">{{ app()->getLocale()=='en' ? $pressrelease->title : $pressrelease->titlear}}</a>
                                @else
                                    <a href="javascript:void(0)">{{ app()->getLocale()=='en' ? $pressrelease->title : $pressrelease->titlear}}</a>
                                @endif
                            </td>
                            <td>{!! $pressrelease->product_names ?? '--' !!}</td>
                            <td>
                                @if($pressrelease->zip)
                                    <a href="{{asset('uploads/press-release/zip/'.$pressrelease->zip)}}" target="_blank"><img width="121" height="19" alt="Download" src="{{asset('assets/img/download.gif')}}"></a>
                                @else
                                 -- 
                                @endif
                            </td>
                        </tr>
                    @else
                        @if($key!=0)
                            </tbody>
                            </table>
                            </div>
                        @endif
                        <div class="tab-pane active show" style="margin-top:30px" id="fill-tabpanel-{{$key}}" role="tabpanel" aria-labelledby="fill-tab-{{$key}}">
                            <h1 class="fs-1 pb-2 ml-5 fw-bold">{{$pressrelease->year}}</h1>
                            <table class="table table-striped table-bordered">
                                <thead class="table-dark">
                                    <tr>
                                        <th style="width:15% !important">Date</th>
                                        <th style="width:55% !important">Press Releases</th>
                                        <th style="width:15% !important">Product Names</th>
                                        <th style="width:15% !important">Press Images</th>
                                    </tr>
                                </thead>
                                <tbody class="fs-4 py-4">
                                    <tr>
                                        <td>{{date('Y/m/d', strtotime($pressrelease->press_release_date))}}</td>
                                        <td>
                                            @if($pressrelease->type=='1' && $pressrelease->pdf)
                                                <a href="{{asset('uploads/press-release/pdf/'.$pressrelease->pdf)}}" target="_BLANK">{{ app()->getLocale()=='en' ? $pressrelease->title : $pressrelease->titlear}}  <i class="fa-solid fa-file-pdf"></i></a>
                                            @elseif($pressrelease->type=='2')
                                                <a href="{{route('web.press-release.show',$pressrelease->id)}}" target="_BLANK">{{ app()->getLocale()=='en' ? $pressrelease->title : $pressrelease->titlear}}</a>
                                            @else
                                                <a href="javascript:void(0)">{{ app()->getLocale()=='en' ? $pressrelease->title : $pressrelease->titlear}}</a>
                                            @endif
                                        </td>
                                        <td>{!! $pressrelease->product_names ?? '--' !!}</td>
                                        <td>
                                            @if($pressrelease->zip)
                                                <a href="{{asset('uploads/press-release/zip/'.$pressrelease->zip)}}" target="_blank"><img width="121" height="19" alt="Download" src="{{asset('assets/img/download.gif')}}"></a>
                                            @else
                                                -- 
                                            @endif
                                        </td>
                                    </tr>
                            @php
                                $prevyear2=$pressrelease->year;
                            @endphp
                    @endif
                @endforeach
                 </tbody>
                </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('custom-css')
<style>
    table {
    table-layout: fixed;
    word-wrap: break-word;
}
th{
    padding: 15px !important;
}
</style>
@endpush
@push('custom-script')
<script>
document.addEventListener('DOMContentLoaded', function () {
    // Show all tab content initially
    document.querySelectorAll('.tab-pane').forEach(function (tabPane) {
        tabPane.style.display = 'block';
    });

    // Add event listener to each tab
    document.querySelectorAll('.nav-link').forEach(function (tabLink) {
        tabLink.addEventListener('click', function (e) {
            e.preventDefault();

            // Hide all tab panes
            document.querySelectorAll('.tab-pane').forEach(function (tabPane) {
                tabPane.style.display = 'none';
            });

            // Show only the selected tab content
            const target = this.getAttribute('href');
            document.querySelector(target).style.display = 'block';
        });
    });
});
</script>
@endpush