@extends('layout.app')

@section('content')
<div class="container mt-4">
    <h2 class="text-center mb-4">All Equipment</h2>
    <a href="{{ route('equipment.index') }}" class="btn btn-secondary mb-3">
        ← Back
    </a>

    <!-- Search Bar -->
    <div class="mb-3">
        <input type="text" id="searchInput" class="form-control" placeholder="Search Main Components name...">
    </div>

    <div class="card">
        <div class="card-body">
            <h6 class="card-title">Crane Equipement Structure</h6>
            <p class="text-muted mb-3">
              This table is just for views purpoose.
            </p>
            <div class="accordion" id="equipmentAccordion">
                @foreach($equipments as $eIndex => $equipment)
                    <div class="accordion-item equipment-item">
                        <h2 class="accordion-header" id="heading{{ $eIndex }}">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{ $eIndex }}">
                                {{ $equipment->name }}
                            </button>
                        </h2>

                        <div id="collapse{{ $eIndex }}" class="accordion-collapse collapse" data-bs-parent="#equipmentAccordion">
                            <div class="accordion-body">
                                
                                <!-- Components Section -->
                                @if($equipment->components->isNotEmpty())
                                    <h5 class="mt-1 mb-2">Main Components</h5>
                                    <div class="list-group">
                                        @foreach($equipment->components as $cIndex => $component)
                                            <button class="list-group-item list-group-item-action d-flex justify-content-between align-items-center"
                                                    data-bs-toggle="collapse" data-bs-target="#componentCollapse{{ $eIndex }}-{{ $cIndex }}">
                                                {{ $component->name }}
                                                @if($component->subComponents->isNotEmpty())
                                                    <span class="indicator">▶</span>
                                                @endif
                                            </button>

                                            <div id="componentCollapse{{ $eIndex }}-{{ $cIndex }}" class="collapse ps-4">
                                                
                                                <!-- Sub-Components Section -->
                                                @if($component->subComponents->isNotEmpty())
                                                    <h6 class="mt-2 mb-2">Sub-Components</h6>
                                                    <div class="list-group">
                                                        @foreach($component->subComponents as $scIndex => $subComponent)
                                                            <button class="list-group-item list-group-item-action d-flex justify-content-between align-items-center"
                                                                    data-bs-toggle="collapse" data-bs-target="#subComponentCollapse{{ $eIndex }}-{{ $cIndex }}-{{ $scIndex }}">
                                                                {{ $subComponent->name }}
                                                                @if($subComponent->parts->isNotEmpty())
                                                                    <span class="indicator">▶</span>
                                                                @endif
                                                            </button>

                                                            <div id="subComponentCollapse{{ $eIndex }}-{{ $cIndex }}-{{ $scIndex }}" class="collapse ps-4">
                                                                
                                                                <!-- Parts Section -->
                                                                @if($subComponent->parts->isNotEmpty())
                                                                    <h6 class="mt-2 mb-2">Parts</h6>
                                                                    <ul class="list-group">
                                                                        @foreach($subComponent->parts as $part)
                                                                            <li class="list-group-item">{{ $part->name }}</li>
                                                                        @endforeach
                                                                    </ul>
                                                                @endif
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                @endif
                                            </div>
                                        @endforeach
                                    </div>
                                @else
                                    <p class="text-muted">No components available for this equipment.</p>
                                @endif

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

    <!-- Pagination -->
    <div class="mt-4">
        {{ $equipments->links('pagination::bootstrap-4') }}
    </div>
</div>

<!-- JavaScript for Search & Toggle Indicators -->
<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Search Functionality
        document.getElementById('searchInput').addEventListener('keyup', function () {
            let searchQuery = this.value.toLowerCase();
            document.querySelectorAll('.equipment-item').forEach(item => {
                let itemName = item.querySelector('.accordion-button').textContent.toLowerCase();
                item.style.display = itemName.includes(searchQuery) ? '' : 'none';
            });
        });

        // Toggle Indicators
        document.querySelectorAll('.list-group-item').forEach(item => {
            item.addEventListener('click', function () {
                let indicator = this.querySelector('.indicator');
                if (indicator) {
                    indicator.textContent = this.getAttribute('aria-expanded') === 'true' ? '▶' : '▼';
                }
            });
        });
    });
</script>

@endsection