@extends('layouts.details')

@section('tab_content')
    @if (session('success') || session('error'))
        <div id="alertMessage" class="alert alert-{{ session('success') ? 'success' : 'danger' }}">
            {{ session('success') ? session('success') : session('error') }}
        </div>
    @endif
    <div id="successMessage" class="alert alert-success" style="display: none;"></div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const alertMessage = document.getElementById('alertMessage');

            if (alertMessage) {
                // Set a timeout to hide the alert message after 10 seconds (10000 milliseconds)
                setTimeout(() => {
                    alertMessage.style.display = 'none';
                }, 10000);
            }
        });
    </script>
    <div class="row tabsec pb-4 text-left">
        <div class="col-md-12">
            <h4>Used Technologies</h4>
        </div>
    </div>

    {{-- List of Technologies with Checkboxes --}}

    <div class="row g-6 bg-light-blue p-3 text-left">
        <div class="col-md-12">
            @if (count($technologies) > 0)
                <!-- Use count() instead of isNotEmpty() -->
                <form action="{{ route('technologies.update', ['id' => $item->id]) }}" method="POST">
                    @csrf
                    <div class="form-group">
                        @foreach ($alltechnologies as $technology)
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="technologies[]"
                                    value="{{ $technology->id }}" id="technology-{{ $technology->id }}"
                                    {{ in_array($technology->id, $technologies) ? 'checked' : '' }}>
                                <!-- Check if technology ID is in the array -->
                                <label class="form-check-label" for="technology-{{ $technology->id }}">
                                    {{ $technology->technology }}
                                </label>
                            </div>
                        @endforeach
                    </div>
                    <button type="submit" class="btn btn-primary mt-5">Save Technologies</button>
                </form>
            @else
                <div class="alert alert-warning">No technologies found for this page. You can add new technologies below:
                </div>
                <form action="{{ route('technologies.store') }}" method="POST">
                    @csrf
                    <input type="hidden" name="page_id" value="{{ $item->id }}">
                    <div class="form-group">
                        @foreach ($alltechnologies as $technology)
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="technologies[]"
                                    value="{{ $technology->id }}" id="technology-{{ $technology->id }}"
                                    {{ in_array($technology->id, old('technologies', [])) ? 'checked' : '' }}>
                                <label class="form-check-label" for="technology-{{ $technology->id }}">
                                    {{ $technology->technology }}
                                </label>
                            </div>
                        @endforeach
                    </div>
                    <button type="submit" class="btn btn-primary mt-5">Add Technologies</button>
                </form>
            @endif
        </div>
    </div>
@endsection