@extends('layout.guest')

@section('title')
Directory Product Group Folder
@endsection

@section('content')
    <div class="normal">
        <button id="compare">Compare</button>
        @foreach ($productGroups as $productGroup)
            <a href="{{ route('directory.company-list', $productGroup->id) }}">
                <p>Name: {{ $productGroup->name }}</p>
                <p>Count: {{ $productGroup->product_count }}</p>
            </a>
        @endforeach
    </div>
    <div class="compare" style="display: none;">
        <form id="compare-form" action="{{ route('directory.compare-list') }}" method="GET">
            <button id="compare-cancel" type="button">Cancel</button>
            <button id="compare-submit" type="submit">Compare</button>

            <div>
                @foreach ($productGroups as $productGroup)
                    <label>
                        <input type="checkbox" name="product_groups[]" value="{{ $productGroup->id }}">
                        {{ $productGroup->name }} ({{ $productGroup->product_count }})
                    </label>
                    <br>
                @endforeach
            </div>
        </form>
    </div>
@endsection
@section('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const compareBtn = document.getElementById('compare');
            const cancelBtn = document.getElementById('compare-cancel');
            const normalView = document.querySelector('.normal');
            const compareView = document.querySelector('.compare');

            compareBtn.addEventListener('click', function () {
                normalView.style.display = 'none';
                compareView.style.display = 'block';
            });

            cancelBtn.addEventListener('click', function () {
                compareView.style.display = 'none';
                normalView.style.display = 'block';
            });
        });
    </script>
@endsection