{{-- Script Alpine para o Modal (movido do app.blade.php para melhor organização) --}}
<script>
    document.addEventListener('DOMContentLoaded', () => {
        console.log(window.Alpine);
        windows.Alpine.data('modal', () => ({
            open: false,
            toggle() {
                this.open = !this.open;
            },
        }));
        document.addEventListener('alpine:init', () => {
            console.log(window.Alpine)
        });
    })

    function closemanualmodal() {
        // Lógica de fechamento manual do modal (se for o modalalep2)
        document.querySelector('.modalalep2').style.display = 'none';
        // Você pode precisar de lógica adicional para resetar o Alpine no modalalep ou usar eventos.
    }
</script>

<div x-data="modal" id="modalalep">
{{-- <div x-data="{ open: false }" id="modalalep"> --}}
    <template x-if="open">
        <div class="fixed inset-0 z-[999] overflow-y-auto bg-[black]/60"
            :class="open && '!block'" id="modalobserver" onchange="teste()">
            <div class="flex min-h-screen items-start justify-center px-4"
                @click.self="open = false">
                <div
                    class="panel animate__animated animate__zoomInUp my-8 w-full max-w-lg overflow-hidden rounded-lg border-0 p-0">
                    <div
                        class="flex items-center justify-between bg-[#fbfbfb] px-5 py-3 dark:bg-[#121c2c]">
                        <h5 class="text-lg font-bold titulomodal">Scanner Alep</h5>
                        <button type="button" class="text-white-dark hover:text-dark"
                            @click="toggle">
                            </button>
                    </div>
                    <div class="p-5">
                        <video id="preview" class="w-full" autoplay></video>
                        <div id="qrCodeResult"></div>
                    </div>
                </div>
            </div>
        </div>
    </template>
</div>

<div class="modalalep2">
    <div class="fixed inset-0 z-[999] hidden overflow-y-auto bg-[black]/60"
        :class="open && '!block'" id="modalobserver">
        <div class="flex min-h-screen items-start justify-center px-4"
            @click.self="closemanualmodal()">
            <div
                class="panel animate__animated animate__zoomInUp my-8 w-full max-w-lg overflow-hidden rounded-lg border-0 p-0">
                <div
                    class="flex items-center justify-between bg-[#fbfbfb] px-5 py-3 dark:bg-[#121c2c]">
                    <h5 class="text-lg font-bold titulomodal">Scanner Alep</h5>
                    <button type="button"
                        class="text-white-dark hover:text-dark closemodalbtn"
                        onclick="closemanualmodal()">
                        <i class="fa-solid fa-xmark"></i>
                    </button>
                </div>
                <div class="p-5"> <div id="docuresult"></div>
                </div>
            </div>
        </div>
    </div>

</div>

<style>
    .modalalep2 {
        display: none;
    }

    .panel.mt-6 {
        overflow: auto;
    }

    a.showdocbtn {
        height: 45px;
        width: 45px;
        display: block;
        background-color: #00ab55;
        border-radius: 10px;
        text-align: center;
        line-height: 45px;
        color: #ffffff;
        font-size: 25px;
    }

    td.obs {
        width: 250px !important;
        text-wrap: pretty;
        display: -webkit-inline-box;
        text-align: center;
    }

    span.yes,
    span.nop {
        font-weight: 900;
        width: 100%;
        display: block;
        text-align: center;
        border-radius: 1rem;
        font-size: 12px;
    }

    span.yes {
        background-color: #00ab55;
        color: #ffffff;
    }

    span.nop {
        background-color: #c3c3c3;
        color: #060818;
    }

    span.entradautilizada {
        background-color: #00ab55;
        padding: 1px 2rem;
        color: #ffffff;
        width: 100%;
        display: block;
        border-radius: 5px;
    }

    .closemodalbtn {
        font-size: 36px;
        position: absolute;
        top: 5px;
        right: 5px;
        z-index: 999;
        color: #ffffff;
    }

    tr.bgutilizado.negado {
        background-color: #c14242;
        color: #ffffff;
    }

    tr.bgutilizado.permitido {
        background-color: #5ec892;
        color: black;
        font-weight: 700;
    }

    button.acepted,
    button.negate {
        margin-bottom: 1rem;
        border: solid 0px;
        background-color: transparent;
        color: #ffffff !important;
    }

    button.negate {
        float: left;
    }

    button.acepted {
        float: right;
        background-color: #00ab55 !important;
    }

    button.negate {
        float: left;
        background-color: #e7515a;
    }

    .row.actions {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        align-content: center;
        flex-wrap: nowrap;
        justify-content: flex-start;
        row-gap: 1rem;
        padding-top: 1rem;
        column-gap: 14px;
    }

    @media (max-width: 768px) {
        .row.actions {
            display: flex;
            flex-direction: column;
            align-items: center;
            align-content: center;
            flex-wrap: nowrap;
            justify-content: center;
            row-gap: 1rem;
            padding-top: 1rem;
        }
    }
</style>