<section class="accordion accordion-flush ps-2" id="accordion-concepts">
    <div class="accordion-item">

        {{-- Title & Buttons --}}
        <div class="pe-3 accordion-header title-decorators">
            <div class="gap-2 d-flex align-items-center">

                {{-- Title --}}
                <h4 class="m-0">Conceptos</h4>

                {{-- Action Buttons --}}
                <div class="gap-2 d-flex align-items-center" onclick="event.stopPropagation()">

                    {{-- Modal Form --}}
                    <button
                        type="button" class="px-2 ms-3 btn btn-sm text-uppercase btn-harsi"
                        data-bs-toggle="modal" data-bs-target="#conceptFormModal"
                        onclick="event.stopPropagation(); window.conceptModalContext.allowDbStorage = true;"
                    >
                        ✚ Agregar
                    </button>

                    <button
                        type="button" class="px-2 mx-3 btn btn-sm text-uppercase btn-dark"
                        onclick="event.stopPropagation(); restoreConceptsSection()"
                    >
                        <i class="fas fa-eraser"></i>&nbsp;&nbsp;
                        Reiniciar Tabla
                    </button>

                    {{-- Searchbar --}}
                    <div style="width: 18rem !important;" onclick="event.stopPropagation();">
                        <select id="search_concept" class="search-input form-control"></select>
                    </div>

                </div>

                {{-- Collapse Button --}}
                <button type="button" class="p-0 accordion-button caret-only ms-auto ps-3 collapsed"
                    data-bs-toggle="collapse" data-bs-target="#concepts-unique"
                    aria-expanded="true" aria-controls="concepts-unique"
                ></button>
            </div>
        </div>

        {{-- Content --}}
        <div id="concepts-unique"
            class="mb-4 ps-1 pe-0 accordion-collapse collapse show row justify-content-start"
            aria-labelledby="concepts-unique-header"
        ><div class="px-2 accordion-body">

            {{-- Table Concepts Summary  --}}
            <div class="mb-3 d-flex justify-content-start align-items-center">
                <div class="px-2 py-3 card w-100">
                    <div
                        class="table-responsive" id="concepts-table"
                        style="max-height: 22rem !important; overflow-y: auto;"
                    >
                        <table class="table mb-0 text-center align-middle table-hover table-borderless">

                            {{-- Header --}}
                            <thead class="sticky-top" id="concepts-table-header">
                                <tr>
                                    <th scope="col" width="10%" class="border-harsi text-uppercase">
                                        Acciones
                                    </th>
                                    <th scope="col" width="5%" class="border-harsi text-uppercase">
                                        No.
                                    </th>
                                    <th scope="col" width="10%" class="border-harsi text-uppercase">
                                        Cantidad
                                    </th>
                                    <th scope="col" width="9%" class="border-harsi text-uppercase">
                                        Unidad
                                    </th>
                                    <th scope="col" class="border-harsi text-uppercase">
                                        Descripción
                                    </th>
                                    <th scope="col" width="15%" class="border-harsi text-uppercase">
                                        Impuestos
                                    </th>
                                    <th scope="col" width="16.5%" class="border-harsi text-uppercase">
                                        Importes
                                    </th>
                                    <th scope="col" width="12.5%" class="border-harsi text-uppercase">
                                        Total
                                    </th>
                                </tr>
                            </thead>

                            {{-- Body --}}
                            <tbody id="concepts-table-body" class="auto-num"></tbody>

                            {{-- Footer --}}
                            <tfoot id="concepts-table-footer" class="tfoot-separator glass-background"></tfoot>
                        </table>

                        <input type="hidden" id="invoice_subtotal" name="invoice_subtotal"
                            onchange="roundDecimals(this)" value="0.00">

                        <input type="hidden" id="invoice_total" name="invoice_total"
                            onchange="roundDecimals(this)" value="0.00">

                    </div>

                </div>
            </div>

        </div></div>
    </div>
</section>
