<div class="mt-lg-3">
    @if (session()->has('message'))
        <div class="alert alert-{{ session('alert-type') }} alert-dismissible fade show" role="alert">
            {{ session('message') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif
    <p class="text-primary">@if(session('Promo-GWP-ValueFreeItemFulfil' . auth()->user()->id))
        <span class="border border-spacing-1 px-4 py-1 rounded-2 border-primary">
            You qualify for the GWP Promotion
        </span>
        
        @endif
    </p>
    {{-- @dump(session('Promo-GWP-ValueFreeItemFulfil' . auth()->user()->id)) --}}
    {{-- @dump(session('PromoSudahAda' . auth()->user()->id)) --}}

    {{-- <div class="position-absolute end-0 me-3" style="z-index: 1000;">
        @if ($countinv > 0)
            <div style="text-align: right;">
                <a href="" class="text-decoration-none">
                    {{ env('APP_NAME') }}
                </a>
            </div>
            <div style="text-align: right;" class="mt-2">
                <a href="" data-bs-target="#modalChangeInv" data-bs-toggle="modal"
                    class="btn btn-warning badge text-black">
                    There's {{ $countinv }} Invoices Sandbox!
                </a>
            </div>
        @endif
    </div> --}}
    {{-- @dump(session('Promo-GWP-ValueFreeItem' . auth()->user()->id))
    @dump(session('Promo-GWP-ValueCheapest' . auth()->user()->id))
    @dump(session('Promo-GWP-ValueCheapestFulfil' . auth()->user()->id))
    @dump(session('Promo-Voucher-QTY' . auth()->user()->id))
    @dump(session('Promo-Voucher-Value' . auth()->user()->id))
    @dump(session('Promo-Voucher-ValueFulfil' . auth()->user()->id))


    @dump($isSuggestion)
    @dump(session('Promo-Voucher-Value' . auth()->user()->id))
    @dump(session('Promo-Voucher-ValueFulfil' . auth()->user()->id))
    <button wire:click="clearses">clearses</button>
    <button data-bs-target="#modalCheapest"
    data-bs-toggle="modal">open</button> --}}
    {{-- <div class="row position-absolute end-0 mx-4 pt-5 text-primary" style="width: 400px">
        <div class="col pt-5">
            <p class="small text-muted mb-0 text-center">Total Qty</p>
            <h3 class="mb-0 text-center" style="font-weight:600;">
                {{ $carts->sum('qty') }}
            </h3>
        </div>
        <div class="col pt-5">
            <p class="small text-muted mb-0 text-center">Sub Total</p>
            <h3 class="mb-0" style="font-weight:600;">
                @if ($carts->isEmpty())
                    Rp
                @else
                    {{ 'Rp ' . number_format($carts->sum('total_price'), 0, ',', '.') }}
                @endif
            </h3>
        </div>

    </div> --}}
    <livewire:cashier.additem />
    {{-- <div class="form-group" class="position-absolute end-0 me-3" style="z-index: 1000;">
        <div class="row">
            <div class="col-4">
                <livewire:clock />
            </div>
            @php
                $words = explode(' ', $name->wh_name);
                $firstTwoWords = implode(' ', array_slice($words, 0, 2));
                $remainingWords = implode(' ', array_slice($words, 2));
            @endphp
            <div class="col-auto ms-3">
                {{ $firstTwoWords }}
                <br>
                <strong>{{ $remainingWords }}</strong>
            </div>
        </div>
    </div> --}}

    <div class="mt-4">
        <div class="d-flex justify-content-between">
            <div class="d-flex gap-5 col-lg-6">
                <div class="col-sm-4 col-md-4 col-lg-6" x-data="{ selectedIndexMember: null }" x-init="selectedIndexMember = -1">
                    <div class="form-group">
                        <div class="d-flex" style="flex-direction: column">
                            {{-- <label class="small text-muted mb-1">Member : {{ $searchmember }}</label> --}}
                            <div class="input-group gap-1">
                                <input type="text" class="form-control" wire:model.debounce.100ms.live="searchmember"
                                id="searchMemberInput" placeholder="Guest"
                                @keydown.arrow-down.prevent="selectedIndexMember = Math.min(selectedIndexMember + 1, 10)"
                                @keydown.arrow-up.prevent="selectedIndexMember = Math.max(selectedIndexMember - 1, -1)"
                                x-on:keydown.enter="
                                if(selectedIndexMember == -1) {
                                    $wire.selectMemberByCode();
                
                                }else{
                                    $wire.selectMember(selectedIndexMember);
                                    selectedIndexMember = -1;
                                }" autocomplete="off">
        
                                <div class="input-group-append mt-1 d-flex">
                                    <span class="">
                                        @if (session()->has('member'))
                                            <div style="cursor: pointer" class="" wire:click="clearSession"
                                                wire:keydown.window.ctrl.m="clearSession">
                                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="28"
                                                height="28" style="color: #FBA834">
                                                <path fill-rule="evenodd"
                                                    d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm-1.72 6.97a.75.75 0 1 0-1.06 1.06L10.94 12l-1.72 1.72a.75.75 0 1 0 1.06 1.06L12 13.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L13.06 12l1.72-1.72a.75.75 0 1 0-1.06-1.06L12 10.94l-1.72-1.72Z"
                                                    clip-rule="evenodd" />
                                                </svg>
                                            </div>
                                        @else
                                            <div style="cursor: pointer" class="" disabled>
                                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="28"
                                                height="28" style="color: #FBA834">
                                                <path fill-rule="evenodd"
                                                    d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm-1.72 6.97a.75.75 0 1 0-1.06 1.06L10.94 12l-1.72 1.72a.75.75 0 1 0 1.06 1.06L12 13.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L13.06 12l1.72-1.72a.75.75 0 1 0-1.06-1.06L12 10.94l-1.72-1.72Z"
                                                    clip-rule="evenodd" />
                                            </svg>
                                        </div>
                                        @endif
                                    </span>
                                    <h6 class="shortcut">F1</h6>
                                </div>
                            </div>
                        </div>
                        @if ($selectedMember === null && $isDropdownVisible)
                            <div class="dropdown-menu d-block py-0">
                                @foreach ($members as $index => $member)
                                    <div class="px-2 py-1 border-bottom"
                                        :class="{ 'bg-primary': selectedIndexMember === {{ $index }} }">
                                        <div class="d-flex flex-column ml-3">
                                            <button type="button" class="btn btn-link" id="ddown-style" data-bs-target="#modalOTP"
                                            :class="{ 'text-white': selectedIndexMember === {{ $index }} }"
                                                data-bs-toggle="modal" wire:click="selectMemberByClick('{{ $member->code }}')">
                                                {{ $member->code }} || {{ $member->name }} || {{ $member->email }}
                                            </button>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @endif
                    </div>
                </div>
                
                <div class="col-sm-4 col-md-4 col-lg-6" x-data="{ selectedIndex: null }" x-init="selectedIndex = -1">
                    <div class="form-group">
                        {{-- <label class="small text-muted mb-1">Kode Produk</label> --}}
                        <div class="d-flex kode-produk">
                            <div class="input-group gap-1">
                                <input type="text" class="form-control" wire:model="form.itemname" wire:model.live="search"
                                    placeholder="Type to search..." id="searchInput" autofocus autocomplete="off"
                                    @keydown.arrow-down.prevent="selectedIndex = Math.min(selectedIndex + 1, {{ sizeof($products) - 1 }})"
                                    @keydown.arrow-up.prevent="selectedIndex = Math.max(selectedIndex - 1, -1)"
                                    x-on:keydown.enter="
                                            if(selectedIndex == -1) {
                                                $wire.selectProductByName();
                                            } else {
                                                $wire.selectProduct(selectedIndex);
                                                selectedIndex = -1; 
                                            }"
                                    x-on:keydown.tab.prevent="
                                            selectedIndex = Math.min(selectedIndex + 1, {{ count($products) - 1 }});
                                            event.preventDefault();
                                        ">
        
                                @if ($selectedProduct === null && sizeof($products) > 0)
                                    <div class="dropdown-menu d-block py-0 mt-lg-5">
                                        @foreach ($products as $index => $product)
                                            <div class="px-2 py-1 border-bottom"
                                                :class="{ 'bg-primary': selectedIndex === {{ $index }} }">
                                                <div class="d-flex flex-column ml-3">
                                                    <button type="button" id="ddown-style" class="btn btn-link" wire:click="selectProductByClick('{{ $product->barcode }}')"
                                                        :class="{ 'text-white': selectedIndex === {{ $index }} }">
                                                        {{ $product->code }} || {{ $product->name }}
                                                    </button>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                @endif
        
                                <div class="input-group-append mt-1 d-flex">
                                    <div class="" type="submit"
                                        @if (strlen($search) >= 1) wire:click="selectProductByButton('{{ $search }}')" 
                                        @else 
                                        disabled @endif>
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="28"
                                        height="28" style="color: #387ADF">
                                            <path fill-rule="evenodd"
                                                d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25ZM12.75 9a.75.75 0 0 0-1.5 0v2.25H9a.75.75 0 0 0 0 1.5h2.25V15a.75.75 0 0 0 1.5 0v-2.25H15a.75.75 0 0 0 0-1.5h-2.25V9Z"
                                                clip-rule="evenodd" />
                                        </svg>
                                    </div>
                                    <h6 class="shortcut">F2</h6>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <input type="text" wire.model="form.itemname" class="form-control form-control-md" readonly
                @if ($selectedProduct) value="{{ $selectedProduct->name }}" @endif hidden>
            <input type="text" wire.model="form.itemprice" placeholder="0"
                class="form-control text-right form-control-md" readonly
                @if ($selectedProduct) value="{{ $price }}" @endif hidden>
            <input type="text" wire.model="form.itemqty" placeholder="0" class="form-control text-right form-control-md"
                readonly @if ($selectedProduct) value="1" @endif hidden>
            {{-- <div class="col-auto">
                <div class="" type="submit"
                    @if (strlen($search) >= 1) wire:click="selectProductByButton('{{ $search }}')" 
                    @else 
                    disabled @endif>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="28"
                    height="28" style="color: #387ADF">
                        <path fill-rule="evenodd"
                            d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25ZM12.75 9a.75.75 0 0 0-1.5 0v2.25H9a.75.75 0 0 0 0 1.5h2.25V15a.75.75 0 0 0 1.5 0v-2.25H15a.75.75 0 0 0 0-1.5h-2.25V9Z"
                            clip-rule="evenodd" />
                    </svg>
                </div>
            </div> --}}
    
            <div class="col-sm-8 col-md-3 col-lg-3 col-xl-2">
                @if ($countinv > 0)
                    <div class="d-flex justify-content-end justify-content-center sandbox">
                        <a href="" data-bs-target="#modalChangeInv" data-bs-toggle="modal"
                            style="cursor: pointer; align-items: center; color: white">
                            {{ $countinv }} Invoices Sandbox!
                        </a>
                    </div>
                @endif
            </div>
        </div>
        
        @livewire('cashier.table')
        <livewire:cashier.invoice />
        <livewire:cashier.select-discount />
        <livewire:cashier.process-discount />
        <livewire:cashier.process-disc-bundling />

        {{-- Modal Sales --}}
        <div wire:ignore.self class="modal fade " id="salesModal" tabindex="-1" aria-labelledby="exampleModalLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Sales</h5>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">

                            <div class="" x-data="{ selectedIndexSales: null }" x-init="selectedIndexSales = -1">
                                <label class="small text-muted mb-1">Sales : {{ $searchsales }}</label>
                                <input type="text" class="form-control" wire:model.live="form.sales"
                                    placeholder="No Sales Employee" hidden>
                                <input type="text" class="form-control"
                                    wire:model.debounce.100ms.live="searchsales" placeholder="No Sales Employee"
                                    id="searchSalesModal" autofocus autocomplete="off"
                                    @keydown.arrow-down.prevent="selectedIndexSales = Math.min(selectedIndexSales + 1, {{ count($sales) - 1 }})"
                                    @keydown.arrow-up.prevent="selectedIndexSales = Math.max(selectedIndexSales - 1, -1)"
                                    x-on:keydown.enter="
                                        if(selectedIndexSales == -1) {
                                           
                                        } else {
                                            $wire.selectSalesModal(selectedIndexSales);
                                            selectedIndexSales = -1; 
                                        }"
                                    x-on:keydown.tab.prevent="
        selectedIndexSales = Math.min(selectedIndexSales + 1, {{ count($sales) - 1 }});
        event.preventDefault();
    ">
                                @if ($selectedSales === null && $isDropdownsalesVisible)
                                    <div class="dropdown-menu d-block py-0" style="width:469px;">
                                        @foreach ($sales as $index => $sale)
                                            <div class="px-2 py-1 border-bottom"
                                                :class="{ 'bg-primary': selectedIndexSales === {{ $index }} }">
                                                <div class="d-flex flex-column ml-3">
                                                
                                                <button type="button" class="btn btn-link" id="ddown-style"
                                                :class="{ 'text-white': selectedIndexSales === {{ $index }} }"
                                                        wire:click="selectSalesByClick('{{ $sale->code }}')">
                                                        {{ $sale->code }} || {{ $sale->name }}
                                                    </button>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                @endif
                            </div>

                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="button-custom-primary" wire:click="selectSalesBySave"
                            data-bs-dismiss="modal">Save</button>
                    </div>
                </div>
            </div>
        </div>
        <div wire:ignore.self class="modal fade" data-bs-backdrop="static" id="modalZ" tabindex="-1"
            aria-labelledby="modalZLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="staticBackdropLabel">Alert</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                            aria-label="Close"></button>
                    </div>
                    <div class="modal-body text-center">
                        <h2>Printer Not Found, Data Saved Without Printing !</h2>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="button-custom-primary" data-bs-dismiss="modal">OK</button>
                    </div>
                </div>
            </div>
        </div>

        <div wire:ignore.self class="modal fade" data-bs-backdrop="static" id="nonSales" tabindex="-1"
            aria-labelledby="nonSalesLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="staticBackdropLabel">Alert</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                            aria-label="Close"></button>
                    </div>
                    <div class="modal-body text-center">
                        <h2>This item is non sales.</h2>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="button-custom-primary" data-bs-dismiss="modal">OK</button>
                    </div>
                </div>
            </div>
        </div>

        <div wire:ignore.self class="modal fade" data-bs-backdrop="static" id="nonActive" tabindex="-1"
            aria-labelledby="nonActiveLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="staticBackdropLabel">Alert</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                            aria-label="Close"></button>
                    </div>
                    <div class="modal-body text-center">
                        <h2>This item is non active.</h2>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="button-custom-primary" data-bs-dismiss="modal">OK</button>
                    </div>
                </div>
            </div>
        </div>

        <div wire:ignore.self class="modal fade" data-bs-backdrop="static" id="modalOTP" tabindex="-1"
            aria-labelledby="modalOTPLabel" aria-hidden="true" data-bs-keyboard="false">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Insert OTP</h5>
                        <h5>{{ $errMsg }}</h5>
                    </div>
                    <div class="modal-body">
                        <div class="col mb-3">
                            <div class="form-group">
                                <label class="small text-muted mb-1">OTP</label>
                                <div class="d-flex">
                                    <input type="text" class="form-control" wire:model.live="reqOTP" autofocus
                                        autocomplete="off">
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button id="resendButton" class="btn btn-warning" wire:click="resendOTP"
                                onclick="startCountdown()" @if ($enable) @else disabled @endif>
                                Resend OTP
                            </button>
                            <button class="button-custom-primary" wire:click="verifyOTP">Save</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <livewire:cashier.add-cheapest-item />

        {{-- @if ($isSuggestion)
        <div class="container">
            <h3 class="mb-4 text-center">{{ $suggestionName }}</h3>
            <div class="row">
                @foreach ($suggestion as $item)
                    <div class="col-md-4 mb-4">
                        <div class="card border-0 shadow animate__animated" x-data="{ isFadeOut: false }"
                            :class="{ 'animate__fadeInRight': !isFadeOut, 'animate__fadeOutLeft': isFadeOut }"
                            x-show="!isFadeOut" x-transition:enter="animate__fadeInRight"
                            x-transition:leave="animate__fadeOutLeft duration-300ms"
                            x-transition:leave-end="opacity-0">
                            <div class="card-body">
                                <p class="card-title mb-3 fs-5">{{ $item->name }} ( Pack {{ $item->pack }} )</p>
                                <p class="card-text">{{ $item->barcode }}</p>
                                <button class="btn button-custom-primary btn-block"
                                    wire:click="addSuggestion('{{ $item->code }}', '{{ $item->no }}')"
                                    @click="isFadeOut = true">Add to Cart</button>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    @endif --}}


    </div>
    <script>
        document.addEventListener('keydown', function(event) {
            if (event.key === 'F1') {
                event.preventDefault();
                if (@this.modalOpen) {
                    Livewire.dispatch('F1ModalOpen');

                    console.log('modal Open')
                } else {
                    document.getElementById('searchMemberInput').focus();
                }

            }
            if (event.key === 'F2') {
                event.preventDefault();
                if (@this.modalOpen) {
                    Livewire.dispatch('F2ModalOpen');

                    console.log('modal Open')
                } else {
                    document.getElementById('searchInput').focus();
                }

            }
        });

        window.addEventListener('keydown', function(event) {
            if (@this.isSalesModalVisible) {
                if (event.key === 'Enter') {
                    @this.selectSalesBySave();
                }
            } else {
                if (event.key === 'Enter') {
                    if (@this.openmodalDisc) {
                        @this.saveDiscount();
                    } else {
                        // if(@this.selectedProduct !== null){
                            @this.save();
                        // }
                    }
                }
            }

        });

        Livewire.on('focusInput', () => {
            setTimeout(() => {
                document.getElementById('searchInput').focus();
            }, 300);
        });

        Livewire.on('selectedSalesChanged', () => {
            setTimeout(() => {
                $('#salesModal').modal('hide');
            }, 300);
        });
        Livewire.on('printernotfound', () => {
            $('#modalZ').modal('show');
        });

        Livewire.on('itemnonsales', () => {
            $('#nonSales').modal('show');
        });

        Livewire.on('itemnonactive', () => {
            $('#nonActive').modal('show');
        });

        Livewire.on('itemnotfound', () => {
            $('#exampleModal').modal('show');
        });
        Livewire.on('closeModal', () => {
            $('#exampleModal').modal('hide');
        });
        Livewire.on('closeModalCheapest', () => {
            $('#modalCheapest').modal('hide');
        });
        Livewire.on('openTheModal', () => {
            $('#selectDiscount').modal('show');
        });
        Livewire.on('openModalCheapest', () => {
            $('#modalCheapest').modal('show');
        });
        Livewire.on('openModalOTP', () => {
            $('#modalOTP').modal('show');
        });
        Livewire.on('closeModalOTP', () => {
            $('#modalOTP').modal('hide');
        });

        Livewire.on('openModalProcessDiscountBlade', () => {
            $('#modalProcessDiscount').modal('show');
        });

        Livewire.on('openModalProcessDiscBundleBlade', () => {
            $('#modalDiscBundle').modal('show');
        });

        Livewire.on('salesModal', () => {
            $('#salesModal').modal('show');
            setTimeout(() => {
                var searchSalesModal = document.getElementById('searchSalesModal').focus();;
                if (searchSalesModal) {
                    searchSalesModal.focus();
                }
            }, 500); // Adjust the delay as needed after the page has finished reloading
        });

        // Function to update the clock time
        function updateClock() {
            var currentTime = new Date();
            var hours = currentTime.getHours();
            var minutes = currentTime.getMinutes();
            var seconds = currentTime.getSeconds();

            // Add leading zeroes to the time values if less than 10
            hours = (hours < 10 ? '0' : '') + hours;
            minutes = (minutes < 10 ? '0' : '') + minutes;
            seconds = (seconds < 10 ? '0' : '') + seconds;

            // Format the time
            var formattedTime = hours + ':' + minutes + ':' + seconds;

            // Display the time in the HTML element
            document.getElementById('realTimeClock').innerHTML = formattedTime + ' WITA';
        }

        // Update the clock initially
        updateClock();

        // Update the clock every second
        setInterval(updateClock, 1000);

        Livewire.on('countdown', () => {
            let countdown = 15;
            let button = document.getElementById('resendButton');

            Livewire.dispatch('disabledbutton')

            let interval = setInterval(function() {
                countdown--;
                if (countdown > 0) {
                    button.textContent = 'Resend OTP (' + countdown + 's)';
                } else {
                    clearInterval(interval);
                    button.textContent = 'Resend OTP';
                    button.disabled = false;
                    Livewire.dispatch('enablebutton')
                }
            }, 1000);
        });

        function trueSuggestion() {
            Livewire.dispatch('trueSuggestion');
        }

        Livewire.on('toPrint', (no) => {
            var url = "{{ route('report.print', ':no') }}".replace(':no', no);

            // Open new tab for printing
            var printWindow = window.open(url, "_blank");

            // Focus back on the current window
            window.focus();
        });

        document.addEventListener('visibilitychange', function() {
            if (document.visibilityState === 'visible') {
               Livewire.dispatch('tabFocusedforNotifySuccess');
            } 
        });

        Livewire.on('aftersuccessToBrowser', () => {
            window.location.reload();
        });
    </script>
