@extends('layouts.app')

@section('content')

<div class="container">

    <h3 class="mb-4">
        Daftar Function Controller
    </h3>

    <div class="accordion" id="accordionFunction">

        @foreach($controllers as $index => $controller)

            <div class="card mb-3">

                <div class="card-header p-0">

                    <button
                        class="btn btn-primary w-100 text-start"
                        type="button"
                        data-bs-toggle="collapse"
                        data-bs-target="#controller{{ $index }}"
                    >
                        {{ $controller['name'] }}
                    </button>

                </div>

                <div
                    id="controller{{ $index }}"
                    class="collapse"
                    data-bs-parent="#accordionFunction"
                >

                    <div class="card-body">

                        @foreach($controller['methods'] as $method)

                            <div class="mb-2">

                                <button
                                    class="btn btn-outline-secondary w-100 text-start"
                                    type="button"
                                    data-bs-toggle="collapse"
                                    data-bs-target="#method{{ $index }}{{ $loop->index }}"
                                >

                                    <i class="fa fa-code"></i>

                                    {{ $method['name'] }}()

                                    <span class="badge bg-secondary float-end">
                                        {{ $method['parameters'] }} Parameter
                                    </span>

                                </button>

                                <div
                                    id="method{{ $index }}{{ $loop->index }}"
                                    class="collapse"
                                >

                                    <div class="card mt-1">

                                        <div class="card-header d-flex justify-content-between align-items-center">

                                            <span>
                                                <i class="fa fa-file-code"></i>
                                                Source Code
                                            </span>

                                            <button
                                                class="btn btn-sm btn-dark"
                                                onclick="copyCode('code{{ $index }}{{ $loop->index }}')"
                                            >
                                                <i class="fa fa-copy"></i>
                                                Copy
                                            </button>

                                        </div>

                                        <div class="card-body p-0">

                                            <pre
                                                id="code{{ $index }}{{ $loop->index }}"
                                                class="m-0 p-3"
                                                style="
                                                    background:#1e1e1e;
                                                    color:#d4d4d4;
                                                    overflow:auto;
                                                    max-height:500px;
                                                    font-size:13px;
                                                "
                                            ><code>{{ $method['code'] }}</code></pre>

                                        </div>

                                        <div class="card-footer text-muted">

                                            Baris:
                                            {{ $method['line_start'] }}
                                            -
                                            {{ $method['line_end'] }}

                                        </div>

                                    </div>

                                </div>

                            </div>

                        @endforeach

                    </div>

                </div>

            </div>

        @endforeach

    </div>

</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

<script>

function copyCode(id) {

    const code = document.getElementById(id).innerText;

    navigator.clipboard.writeText(code).then(() => {

        alert('Code berhasil disalin!');

    });

}

</script>

@endsection