{{-- 
    TODO: Test DATA!!!
    TODO: filter, colors of status by call (    red     = no pre., 
                                                blue    = pre. but not pack, 
                                                green   = pack. but not send, 
                                                not in mask = send, but filter can show all sended Packages
                                            )
    --}}


<div class="row d-flex" data-path="app/package_manager_pro_app/index">
    <section id="app-head" class="col-11 p-0 ps-5 position-relative py-2">
        @includeIf('layouts.components.container_header', [
			'title_primary' 	=> 'Paket Manager Pro',
		])
    </section>

    <section id="card-packaging" class="col-10 p-0 card card-glass position-relative mx-auto border-0" data-step="1" style="display: none;">
        @includeIf('layouts.components.card_header', [ 
            'title' => $dynamicHeadline, 
        ])
        <div class="card-body mb-2">
            <div class="row mt-3 px-0 mx-auto d-flex">
                <div class="col-6">
                    @inputField([
                        'input_type'   => 'ui_select',     
                        'input_id'     => 'package_find',
                        'placeholder'  => 'Paket finden... (ab 2 Zeichen | Nr., Patient, Kunde, Adresse oder Arbeit)',
                        'value'        => '',
                        'disabled'     => false,
                        'required'     => false,
                        'options'      => $packagesArray
                    ])
                </div>
                <div class="col-6 d-grid gap-2">
                    <button id="showScanner" type="button" class="btn btn-sm btn-light">Paket oder Arbeit scannen</button>
                </div>
            </div>
            
            <div class="row mt-3 px-0 mt-5 mx-auto">
                <!-- Anzeige der zu befüllenden Pakete -->
                @foreach($packages as $package)
                    <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 mb-4 packages-item">
                        <div class="card h-100 c-pointer">
                            {{-- Kopfzeile der Karte --}}
                            <div class="card-header border-0 text-white">
                                <strong>{{ $package->id }}</strong>
                                <span class="badge text-white float-end"><strong>{{ $package->assigned_firm }}</strong></span>
                            </div>
                            {{-- Körper der Karte für Details --}}
                            <div class="card-body position-relative">
                                {{-- QR-Code in der oberen rechten Ecke der Karte --}}
                                <img src="{{ $package->qr_code_data_uri }}" alt="QR Code" class="packages-item-qr-code">
                                <div class="card-text ps-4">
                                    <strong>{{ $package->customer_company }}</strong><br>
                                    {{ $package->customer_contact_person }}<br>
                                    {{ $package->customer_address }}<br>
                                    {{ $package->customer_zip }} {{ $package->customer_city }}
                                </div>
                                <div class="work-count">
                                    zug. Arbeiten: <strong>{{ $package->assigned_work_count }}</strong>/{{ $package->work_count }}
                                </div>
                                {{-- Vertikale Fortschrittsleiste, die im Body beginnt und hinter Kopfzeile weitergeht --}}
                                <div class="progress vertical-progress">
                                    <div class="progress-bar" role="progressbar" style="height: {{ $package->status }}%;" aria-valuenow="{{ $package->status }}" aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>

        <div class="sticky-filter-container rounded-4">
            <button id="search-button" class="filter-btn rounded-start">
                @includeIf('layouts.components.icon', [
                    'name' =>       'suche', 
                    'type' =>       'png', 
                    'filePath' =>   'svg/png_icons', 
                    'class' =>      'filer-white',
                    'width' =>      28
                ])
            </button>
            <button id="scan-button" class="filter-btn rounded-start p-2">
                @includeIf('layouts.components.icon', [
                    'name' =>       'scan12', 
                    'class' =>      'mirror-horizontal',
                    'width' =>      35
                ])
            </button>
            <div class="filter-dropdown">
                <button class="filter-btn rounded-start dropdown-toggle">
                    @includeIf('layouts.components.icon', [
                    'name' =>       'filter', 
                    'type' =>       'png', 
                    'filePath' =>   'svg/png_icons', 
                    'class' =>      'filer-white',
                    'width' =>      25
                ])
                </button>
                <div class="dropdown-content">
                    <!-- Dropdown-Inhalte hier -->
                </div>
            </div>
            <div class="filter-dropdown">
                <button class="filter-btn rounded-start dropdown-toggle">
                    <i class="icon-dental"></i> GD Dental
                </button>
                <div class="dropdown-content">
                    <!-- Dropdown-Inhalte hier -->
                </div>
            </div>
        </div>
    </section>

    <section id="card-scanning" class="col-10 p-0 card card-glass position-relative mt-2 mx-auto border-0" data-step="2" style="display: none;">
        @includeIf('layouts.components.card_header', [ 
            'title' => 'Paket Scannen und Befüllen', 
        ])
        <div class="card-body mb-2">
            <div class="row mt-3 px-0 mx-auto">
                <!-- QR-Code Scanner -->
                <div style="width: 250px; margin: 10px auto; padding: 0;" id="qr-code-scanner"></div>
                <input type="hidden" name="package_id" value="">
            </div>
        </div>
    </section>

    <section id="card-confirmation" class="col-10 p-0 card card-glass position-relative mt-2 mx-auto border-0" data-step="3" style="display: none;">
        @includeIf('layouts.components.card_header', [ 
            'title' => 'Paketüberprüfung', 
        ])
        <div class="card-body mb-2">
            <div class="row mt-3 px-0 mx-auto">
                <!-- Bestätigung der Paketinhalte -->
                <div class="col-12">
                    <h5 class="card-header card-title rounded-top">Inhalt überprüfen</h5>
                    <!-- Liste der eingescannten Artikel -->
                    <ul id="scanned-items" class="list-group">
                        <!-- Dynamisch generierte Liste der Artikel im Paket -->
                    </ul>
                    <button id="confirmPackage" type="button" class="btn btn-success py-3 my-1">Paket bestätigen</button>
                </div>
            </div>
        </div>
    </section>
</div>

<script>
    $(document).ready(function(){ 

        $(`section[data-step="1"]`).fadeIn(500, function() {
            
        });


        /**
         * Switches between two cards specified by their data-step attributes.
         * 
         * @param {number} fromStep  The step of the card to fade out.
         * @param {number} toStep    The step of the card to fade in.
         * 
         * @example
         * Switch from card with data-step="1" to card with data-step="2"
         * switchCards(1, 2);
         */
         function switchCards(fromStep, toStep) {
            // Select the card to fade out using the 'fromStep' argument
            const fromCard  = $(`section[data-step="${fromStep}"]`);
            
            // Select the card to fade in using the 'toStep' argument
            const toCard    = $(`section[data-step="${toStep}"]`);

            // Fade out the 'fromCard'
            fromCard.fadeOut(1000, function() {
                // Fade in the 'toCard'
                toCard.hide().slideDown(700, function() {
                    // Do something after the 'toCard' has faded in
                    // For example, you can trigger an AJAX request here
                });
            });
        }

    });
</script>