<div wire:ignore.self class="modal fade" id="modalGetSAP" data-bs-backdrop="static" tabindex="-1" aria-labelledby="modalGetSAPLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalGetSAPLabel">Get SAP Trans</h5>
                <div id="loadingSpinner" class="spinner-border text-primary" role="status" style="display: none;">
                    <span class="visually-hidden">Loading...</span>
                </div>
                @if($isloading)
                <div id="loadingSpinner" class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
                @endif
            </div>
            <div class="modal-body">
                <div class="col-auto">
                    <div class="form-check">
                        <input type="checkbox" id="selectAll" class="form-check-input" wire:model.live="isCheckedAll" checked>
                        <label class="form-check-label" for="selectAll">Get All Trans</label>
                    </div>
                </div>
            </div>
            <div class="mt-2 mx-2 row align-items-center">
                <div class="col">
                    <label for="startDate">Start Date</label>
                    <input type="date" class="form-control" id="startDate" wire:model.live="startDate"  @if($isCheckedAll) disabled @endif>
                </div>
                <div class="col">
                    <label for="endDate">End Date</label>
                    <input type="date" class="form-control" id="endDate" wire:model.live="endDate" @if($isCheckedAll) disabled @endif>
                </div>
            </div>
            <div wire:ignore.self class="modal-footer mt-4">
                <button type="button" id="closeSyncAll" class="button-custom-danger" data-bs-dismiss="modal" @if($isloading) disabled="true" @endif>Close</button>
           
                <button id="buttonSync" type="button" class="custom-button1"
                        wire:click="firstClick" 
                        @if($isloading) disabled="true" @endif
                        onclick="disableButton(this)"
                >          
                @if(!$isloading)
                    <span id="innerSpan">Get Trans</span>
                @else
                    <span id="loadingSpinner2" class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                    <span id="innerSpan">Loading . . .</span>
                @endif      
                </button>
            </div>
        </div>
    </div>
</div>
@livewireScripts

<script>
    function disableButton(button) {
        button.disabled = true;
        var closeButton = document.getElementById('closeSyncAll');
        
        if (closeButton !== null) {
            closeButton.disabled = true;
        }

    }
</script>
