@inject('SectionService', 'App\Services\SectionService')
@php
$param = 'products';
$technologyData = $SectionService->get($param);
$techHead = $technologyData['techHead'] ?? [];
$techPilars = $technologyData['techPilars'] ?? [];
$techClasses = $technologyData['techClasses'] ?? [];
@endphp

<!-- Features Section -->
<section class="container bg-black text-white shadow" id="features">

<!-- First Row -->

<div class="row">
        <!-- First Column -->
        <div class="col-12 col-md-6 mb-4">
            <h2>{{ $techHead['heading'] ?? 'Default Heading' }}</h2>
        </div>
        <!-- Second Column -->
        <div class="col-12 col-md-6 mb-4">
            <h4>{{ $techHead['subheading'] ?? 'Default Subheading' }}</h4>
            <a class="btn btn-primary" href="{{ $techHead['buttonLink'] ?? '#' }}">Access Console</a>
        </div>
    </div>


<div class="row">
    <!-- First Column: List of Technology Classes -->
    <div class="col-12 col-md-6 mb-4">
        <div class="list-group" id="list-tab" role="tablist">
            @if (isset($techClasses) && count($techClasses) > 0)
                @foreach ($techClasses as $tech)
                    <a class="list-group-item-dark list-group-item list-group-item-action {{ $loop->first ? 'active' : '' }}" id="{{ $tech['id'] ?? 'default-id' }}-list" data-bs-toggle="list" href="#{{ $tech['id'] ?? 'default-id' }}" role="tab" aria-controls="{{ $tech['id'] ?? 'default-id' }}">
                        <div class="d-flex w-100 justify-content-between">
                            <small class="mb-1">{{ $tech['name'] ?? 'Default Name' }}</small>
                            <span class="badge text-bg-info">{{ $tech['version'] ?? 'v0.0.0' }}</span>
                        </div>
                        <p class="mb-1">{{ $tech['description'] ?? 'No description available.' }}</p>
                    </a>
                @endforeach
            @else
                <p class="text-muted">No technology classes available.</p>
            @endif
        </div>
    </div>

    <!-- Second Column: Video Display -->
    <div class="col-12 col-md-6 mb-4">
        <div class="tab-content" id="nav-tabContent">
            @if (isset($techClasses) && count($techClasses) > 0)
                @foreach ($techClasses as $tech)
                    <div class="tab-pane fade {{ $loop->first ? 'show active' : '' }}" id="{{ $tech['id'] ?? 'default-id' }}" role="tabpanel" aria-labelledby="{{ $tech['id'] ?? 'default-id' }}-list">
                        @php
                            $videoUrl = $tech['videoUrl'] ?? 'public/images/ezgif-3-33d02074b1.gif';
                        @endphp

<img src="{{ asset($videoUrl) }}" class="img-fluid" alt="Descriptive Alt Text" style="display: block; margin-left: auto; margin-right: auto; width: 80%; height: auto;">


                    </div>
                @endforeach
            @endif
        </div>
    </div>
</div>

<!-- Third Row -->
<div class="row mt-4">
        @foreach ($techPilars as $card)
            <div class="col-12 col-md-4 mb-4">
                <div class="card text-bg-dark">
                    <div class="card-header"><span class='material-symbols-outlined'>{{ $card['icon'] ?? 'Default Icon' }}</span></div>
                    <div class="card-body">
                        <small class="card-title">{{ $card['title'] ?? 'Default Title' }}</small>
                        <p class="card-text">{{ $card['text'] ?? 'Default Text' }}</p>
                        <a href="{{ $card['link'] ?? '#' }}" class="btn btn-primary">{{ $card['button_text'] ?? '#' }}</a>
                    </div>
                </div>
            </div>
        @endforeach
    </div>

</section>

<hr>