@props([
    'title' => null,
    'hr_line' => true,
    'bodyClass' => '',
    'cardClass' => '',
    'collapsible' => false,
    'defaultOpen' => true,
])

@php
    $uid = (string) Str::uuid(); // unique ID for collapse
@endphp

<div class="card custom-card  {{ $cardClass }}">
    {{-- Header: either custom header slot or title prop --}}
    @if(isset($header) || $title)
        <div class="card-header justify-content-between">
            @if(isset($header))
                {{ $header }}
            @else
                <div class="card-title m-0">{!! $title !!}</div>
            @endif

            @if($collapsible)
                <button class="btn btn-sm" type="button" data-bs-toggle="collapse"
                        data-bs-target="#collapse_{{ $uid }}"
                        aria-expanded="{{ $defaultOpen ? 'true' : 'false' }}"
                        aria-controls="collapse_{{ $uid }}">
                    <i class="bi {{ $defaultOpen ? 'bi-chevron-up' : 'bi-chevron-down' }}"></i>
                </button>
            @endif
        </div>
        @if($hr_line)
            <hr class="p-0 m-0">
        @endif
    @endif

    {{-- Collapsible content --}}
    <div id="collapse_{{ $uid }}" class="collapse {{ $defaultOpen ? 'show' : '' }}">
        <div class="card-body {{ $bodyClass }}">
            {{ $slot }}
        </div>

        {{-- Optional footer slot --}}
        @isset($footer)
            <hr class="p-0 m-0">
            <div class="card-footer">
                {{ $footer }}
            </div>
        @endisset
    </div>
</div>