@extends('front::layouts.master')

@section('title','E-SHOP || About Us')

@section('content')
<style>
    .section-row {
        border-bottom: 1px solid #1e5cb3;
        padding: 15px 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        font-size: 18px;
    }

    .item-row {
        padding: 15px 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .arrow {
        font-size: 22px;
        font-weight: bold;
        color: #1e5cb3;
        transition: 0.2s ease;
    }

    .download-btn {
        background: #1e5cb3;
        color: #fff !important;
        padding: 8px 18px;
        border-radius: 4px;
        text-decoration: none;
        font-size: 14px;
    }

    .accordion-content {
        display: none;
    }
</style>

<div class="container mt-4 mb-4">
 
    {{-- Software Section --}}
    <div class="section-row" onclick="toggleSection('software', this)">
    <span>Software</span>
    <span class="arrow">&gt;</span>
</div>

<div id="software" class="accordion-content">
    @forelse($downloads['Software'] ?? [] as $item)
        <div class="item-row">
            <span>{{ $item->title }}</span>
            <a href="{{ asset('storage/downloads/'.$item->file) }}" class="download-btn" download>
                Download
            </a>
        </div>
    @empty
        <div class="item-row">
            <span>No software available</span>
        </div>
    @endforelse
</div>

    {{-- Tools Section --}}
    <div class="section-row" onclick="toggleSection('tools', this)">
    <span>Tools</span>
    <span class="arrow">&gt;</span>
</div>

<div id="tools" class="accordion-content">
    @forelse($downloads['Tools'] ?? [] as $item)
        <div class="item-row">
            <span>{{ $item->title }}</span>
            <a href="{{ asset('storage/downloads/'.$item->file) }}" class="download-btn" download>
                Download
            </a>
        </div>
    @empty
        <div class="item-row">
            <span>No tools available</span>
        </div>
    @endforelse
</div>

    {{-- Documents Section --}}
   <div class="section-row" onclick="toggleSection('documents', this)">
    <span>Documents</span>
    <span class="arrow">&gt;</span>
</div>

<div id="documents" class="accordion-content">
    @forelse($downloads['Documents'] ?? [] as $item)
        <div class="item-row">
            <span>{{ $item->title }}</span>
            <a href="{{ asset('storage/downloads/'.$item->file) }}" class="download-btn" download>
                Download
            </a>
        </div>
    @empty
        <div class="item-row">
            <span>No documents available</span>
        </div>
    @endforelse
</div>

</div>

<script>
    function toggleSection(id, element) {
        const section = document.getElementById(id);
        const arrow = element.querySelector('.arrow');
 
        // Toggle visibility
        const isOpen = section.style.display === "block";

        // Close all sections if needed (optional)
        // document.querySelectorAll(".accordion-content").forEach(s => s.style.display = "none");
        // document.querySelectorAll(".arrow").forEach(a => a.innerHTML = "&gt;");

        // Toggle section
        section.style.display = isOpen ? "none" : "block";

        // Update arrow
        arrow.innerHTML = isOpen ? "&gt;" : "∨";
    }
</script>

@endsection