{{--
    Section Card Component
    ───────────────────────
    Usage:
        <x-ui.section-card title="Data Identitas" icon="bi-person">
            ...content...
        </x-ui.section-card>

        <x-ui.section-card title="Dokumen" icon="bi-folder">
            <x-slot:header-actions>
                <a href="#" class="btn btn-sm btn-outline-primary">Upload</a>
            </x-slot:header-actions>
            ...content...
            <x-slot:footer>
                <button class="btn btn-primary btn-sm">Simpan</button>
            </x-slot:footer>
        </x-ui.section-card>

    Props:
        title          string   optional — judul header card
        icon           string   optional — Bootstrap icon class, e.g. 'bi-person'
        padding        bool     default true — tambahkan padding di body
        collapsible    bool     default false — header bisa diklik untuk collapse/expand body
--}}
@props([
    'title'      => null,
    'icon'       => null,
    'padding'    => true,
    'collapsible'=> false,
])

@php $collapseId = $collapsible ? 'collapse-' . md5($title . uniqid()) : null; @endphp

<div {{ $attributes->class(['los-card']) }}>
    @if($title || isset($headerActions))
    <div class="los-card__header d-flex align-items-center flex-nowrap {{ $collapsible ? 'los-card__header--collapsible user-select-none' : '' }}"
        @if($collapsible)
            role="button"
            data-bs-toggle="collapse"
            data-bs-target="#{{ $collapseId }}"
            aria-expanded="false"
            aria-controls="{{ $collapseId }}"
        @endif>
        @if($icon)
        <i class="bi {{ $icon }} los-card__header-icon flex-shrink-0"></i>
        @endif
        <span class="flex-grow-1 text-truncate">{!! $title !!}</span>
        <div class="ms-2 d-flex gap-2 align-items-center flex-shrink-0">
            @isset($headerActions){{ $headerActions }}@endisset
            @if($collapsible)
            <i class="bi bi-chevron-down los-card__chevron text-muted" style="font-size:0.85rem; transition:transform .2s ease;"></i>
            @endif
        </div>
    </div>
    @endif

    @if($collapsible)
    <div id="{{ $collapseId }}" class="collapse">
    @endif

    <div class="{{ $padding ? 'los-card__body' : '' }}">
        {{ $slot }}
    </div>

    @if($collapsible)
    </div>
    @endif

    @isset($footer)
    <div class="los-card__footer d-flex align-items-center justify-content-end gap-2">
        {{ $footer }}
    </div>
    @endisset
</div>