@extends('site.layout')     

@section('content')
    <div class="container">
        <h1>{{ $project->title }}</h1>
        <p><strong>Version:</strong> {{ $project->version }}</p>

        <section class="card">
            <div class="card-body documentation">
                <p><strong>Documentation:</strong></p>
                <pre><code class="language-{{ $project->code_language }}">{{ $project->documentation }}</code></pre>
            </div>

             

            <div class="card-body view-project" id="projectSection"  >
                 <div style="position: relative; width: 100%; height: auto;">
                    {!! $project->code_source !!} 
                </div>
            </div>

            <div class="card-body">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="showCodeSource">
                    <label class="form-check-label" for="showCodeSource">
                        Afficher le Code Source :
                    </label>
                </div>
            </div>

            <div class="card-body code-source" id="codeSourceSection" style="display: none;">
                <p><strong>Code Source:</strong></p>
                <button class="btn btn-dark my-3" onclick="copyToClipboard('codeSource')">Copy to Clipboard</button>
                <pre><code class="language-{{ $project->code_language }}" id="codeSource">{{ $project->code_source }}</code></pre>
            </div>

            <div class="card-body project-users">
                <p><strong>Utilisateurs travaillant sur ce projet :</strong></p>
                <ul>
                    @foreach ($project->users as $user)
                        <li>{{ $user->name }}</li>
                    @endforeach
                </ul>
            </div>
        </section>
    </div>

    <script>
        function toggleVisibility(sectionId, checkboxId) {
            var section = document.getElementById(sectionId);
            section.style.display = document.getElementById(checkboxId).checked ? 'block' : 'none';
        }

       

        document.getElementById('showCodeSource').addEventListener('change', function() {
            toggleVisibility('codeSourceSection', 'showCodeSource');
        });

        // Initially set the display based on the initial checkbox state
         
        toggleVisibility('codeSourceSection', 'showCodeSource');

        function copyToClipboard(elementId) {
            var codeElement = document.getElementById(elementId);
            var range = document.createRange();
            range.selectNode(codeElement);
            window.getSelection().removeAllRanges();
            window.getSelection().addRange(range);

            try {
                document.execCommand('copy');
                console.log('Copied to clipboard');
                alert('Copied to clipboard');
            } catch (err) {
                console.error('Unable to copy to clipboard');
                alert('Unable to copy to clipboard');
            }

            window.getSelection().removeAllRanges();
        }
    </script>
@endsection