@extends('layouts.app')

@section('content')
    <style>
        .container {
            max-width: 1775px;
        }
    </style>
    <div class="goods-receipt-page">
        <div class="row justify-content-center">
            <div class="col">
                <div class="">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="title-page mb-0 fw-bolder">{{ __('Goods receipt') }}</h5>
                        <div class="logo">
                            <img src="{{ asset('assets/SoftComp - Logo-01.png') }}" alt="Image Description">
                        </div>
                        {{-- <a href="{{ route('welcome.dashboard') }}" class="btn badge btn-primary">POS</a> --}}
                    </div>
                    <div class="card-body">
                        @if (session('status'))
                            <div class="alert alert-success" role="alert">
                                {{ session('status') }}
                            </div>
                        @endif

                        <livewire:pos.purchase-order.index />

                    </div>
                </div>
            </div>
        </div>
    </div>
    @if ($istutorials)
        <script>
            const goodsReceiptsPopup = () => {
                const driver = window.driver.js.driver;
                const driverObj = driver({
                    showProgress: true,
                    steps: [
                        {
                            element: '.create-new-goods-receipt-pop',
                            popover: {
                                description: 'Click this button to create a new goods receipt and record items received from the supplier.'
                            }
                        },
                        {
                            element: '.goodsReceipt-detail-pop',
                            popover: {
                                description: 'Click this button to view the details of the goods receipt.'
                            },
                            onDeselected: () => {
                                $.ajax({
                                    type: "POST",
                                    url: '/update-status-driver',
                                    data: {
                                        menu: "Goods Receipt",
                                        _token: '{{ csrf_token() }}'
                                    },
                                    success: function(data) {
                                    },
                                    error: function(data, textStatus, errorThrown) {
                                    },
                                });
                            }
                        },
                        {
                            element: '.go-sales-pop',
                            popover: {
                                description: 'Now proceed to the Sales menu.'
                            }
                        },
                    ]
                });

                driverObj.drive();
            }

        </script>
    @endif

    <!-- OCR Modal -->
    <div wire:ignore.self class="modal fade" id="ocrModal" tabindex="-1" aria-labelledby="ocrModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="ocrModalLabel">
                        <i class="bi bi-camera"></i> Add Receipt with OCR
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body p-0" style="height: 80vh; overflow: hidden;">
                    <iframe 
                        id="ocrIframe"
                        src=""
                        width="100%" 
                        height="100%"
                        frameborder="0"
                        style="border-radius: 0.375rem;">
                    </iframe>
                </div>
            </div>
        </div>
    </div>

    <!-- Success Modal - Data Receipt Sudah Ditambahkan -->
    <div wire:ignore.self class="modal fade" id="receiptSuccessModal" tabindex="-1" aria-labelledby="receiptSuccessModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header bg-success text-white">
                    <h5 class="modal-title" id="receiptSuccessModalLabel">
                        <i class="bi bi-check-circle-fill"></i> Berhasil
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center py-4">
                    <i class="bi bi-check-circle-fill text-success" style="font-size: 4rem;"></i>
                    <h4 class="mt-3 mb-2">Data Receipt Sudah Ditambahkan</h4>
                    <p class="text-muted">Data receipt telah berhasil disimpan ke sistem.</p>
                </div>
                <div class="modal-footer justify-content-center">
                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal" id="closeReceiptSuccessBtn">
                        OK
                    </button>
                </div>
            </div>
        </div>
    </div>

@endsection

@push('scripts')
<script>
    // OCR Modal Functions
    function openOCRModal() {
        // Direct connection to OCR server with token (without proxy)
        const ocrServerUrl = '{{ env("OCR_SERVER_URL", "https://gr.softcomp.io") }}';
        const sessionToken = '{{ session("session_token") }}';
        const ocrUrl = ocrServerUrl + (sessionToken ? '?token=' + encodeURIComponent(sessionToken) : '');
        document.getElementById('ocrIframe').src = ocrUrl;
    }

    // OCR Communication Variables
    let ocrData = null;
    let ocrCompleted = false;
    let ocrStarted = false;
    let isProcessingSaveDraft = false; // Flag untuk mencegah multiple clicks
    window.shouldRefreshOCRModal = true; // Flag untuk kontrol refresh saat modal OCR ditutup

    // Fungsi untuk menutup modal dengan aman
    function closeModalSafely(shouldRefresh = true) {
        // Reset state SEBELUM hide modal untuk mencegah event loop
        ocrData = null;
        ocrCompleted = false;
        ocrStarted = false;
        isProcessingSaveDraft = false; // Reset flag
        
        // Set flag untuk event listener hidden.bs.modal
        // Jika shouldRefresh = false, berarti nanti akan ada refresh dari tempat lain (misal modal sukses)
        window.shouldRefreshOCRModal = shouldRefresh;
        
        // Hide modal setelah state di-reset
        $('#ocrModal').modal('hide');
    }

    // Event listener untuk menerima pesan dari iframe
    window.addEventListener('message', function(event) {
        // Perbaiki origin validation
        if (!event.origin.includes('gr.softcomp.io')) {
            return;
        }
        
        if (event.data.action === 'ocr-started') {
            ocrStarted = true;
        }
        
        if (event.data.action === 'ocr-completed') {
            ocrCompleted = true;
            ocrData = event.data.data;
        }
        
        if (event.data.action === 'save-as-draft-completed') {
            // Reset flag sebelum close modal
            isProcessingSaveDraft = false;
            closeModalSafely();
        }
        
        if (event.data.action === 'save-as-draft-error') {
            // Reset flag dan tutup modal meskipun ada error
            isProcessingSaveDraft = false;
            closeModalSafely();
        }
        
        if (event.data.action === 'clear-session-storage-completed') {
            closeModalSafely();
        }
        
        if (event.data.action === 'close-modal') {
            closeModalSafely();
        }
        
        // Handle process to receipt completed
        if (event.data.action === 'process-to-receipt-completed' || 
            event.data.action === 'receipt-saved' ||
            event.data.action === 'process-to-receipt-success') {
            // Tutup modal (OCR atau Draft) terlebih dahulu (tanpa refresh)
            // Cek apakah OCR modal terbuka
            if ($('#ocrModal').hasClass('show') || $('#ocrModal').is(':visible')) {
                closeModalSafely(false);
            }
            // Cek apakah Draft modal terbuka
            if ($('#draftModal').hasClass('show') || $('#draftModal').is(':visible')) {
                $('#draftModal').modal('hide');
            }
            
            // Tampilkan modal sukses setelah delay
            setTimeout(function() {
                $('#receiptSuccessModal').modal('show');
            }, 500);
        }
        
        // Handle error saat process to receipt
        if (event.data.action === 'process-to-receipt-error') {
            // Bisa tambahkan modal error jika diperlukan
            console.error('Error processing receipt:', event.data.error);
        }
    });

    // Fungsi untuk menampilkan popup konfirmasi exit
    function showExitConfirmation() {
        if (!ocrStarted) {
            // Jika OCR belum dimulai, langsung tutup modal
            closeModalSafely();
            return;
        }
        
        if (ocrCompleted) {
            // Jika OCR sudah selesai, tampilkan popup konfirmasi
            const popup = document.createElement('div');
            popup.innerHTML = `
                <div style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
                            background: rgba(0,0,0,0.5); z-index: 9999; display: flex; 
                            justify-content: center; align-items: center;">
                    <div style="background: white; padding: 30px; border-radius: 8px; 
                                box-shadow: 0 4px 6px rgba(0,0,0,0.1); text-align: center;">
                        <h4>Simpan Hasil OCR?</h4>
                        <p>Hasil OCR telah selesai. Apakah Anda ingin menyimpan sebagai draft?</p>
                        <button id="saveDraftBtn" style="margin-right: 10px; padding: 10px 20px; 
                                background: #007bff; color: white; border: none; border-radius: 4px;">
                            Save As Draft
                        </button>
                        <button id="cancelBtn" style="padding: 10px 20px; background: #6c757d; 
                                color: white; border: none; border-radius: 4px;">
                            Cancel
                        </button>
                    </div>
                </div>
            `;
            
            document.body.appendChild(popup);
            
            // Event listeners untuk tombol
            document.getElementById('saveDraftBtn').addEventListener('click', function() {
                // Prevent multiple clicks
                if (isProcessingSaveDraft) {
                    return;
                }
                
                isProcessingSaveDraft = true;
                
                const iframe = document.getElementById('ocrIframe');
                iframe.contentWindow.postMessage({
                    action: 'save-as-draft'
                }, '*');
                
                document.body.removeChild(popup);
                
                // Reset flag setelah timeout sebagai fallback
                setTimeout(() => {
                    if (isProcessingSaveDraft) {
                        isProcessingSaveDraft = false;
                    }
                }, 10000); // 10 detik timeout
            });
            
            document.getElementById('cancelBtn').addEventListener('click', function() {
                const iframe = document.getElementById('ocrIframe');
                iframe.contentWindow.postMessage({
                    action: 'clear-session-storage'
                }, '*');
                
                document.body.removeChild(popup);
            });
        } else {
            // Jika OCR sedang berjalan, tampilkan popup konfirmasi
            const popup = document.createElement('div');
            popup.innerHTML = `
                <div style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
                            background: rgba(0,0,0,0.5); z-index: 9999; display: flex; 
                            justify-content: center; align-items: center;">
                    <div style="background: white; padding: 30px; border-radius: 8px; 
                                box-shadow: 0 4px 6px rgba(0,0,0,0.1); text-align: center;">
                        <h4>Simpan Hasil OCR?</h4>
                        <p>OCR sedang berjalan. Apakah Anda yakin ingin keluar?</p>
                        <button id="exitBtn" style="margin-right: 10px; padding: 10px 20px; 
                                background: #dc3545; color: white; border: none; border-radius: 4px;">
                            Exit
                        </button>
                        <button id="stayBtn" style="padding: 10px 20px; background: #6c757d; 
                                color: white; border: none; border-radius: 4px;">
                            Stay
                        </button>
                    </div>
                </div>
            `;
            
            document.body.appendChild(popup);
            
            // Event listeners untuk tombol
            document.getElementById('exitBtn').addEventListener('click', function() {
                const iframe = document.getElementById('ocrIframe');
                iframe.contentWindow.postMessage({
                    action: 'clear-session-storage'
                }, '*');
                
                document.body.removeChild(popup);
            });
            
            document.getElementById('stayBtn').addEventListener('click', function() {
                document.body.removeChild(popup);
            });
        }
    }

    // Event listener untuk modal show (HANYA SEKALI)
    $('#ocrModal').on('show.bs.modal', function () {
        openOCRModal();
        // Reset state
        ocrData = null;
        ocrCompleted = false;
        ocrStarted = false;
    });

    // Event listener untuk modal hide (HANYA SEKALI)
    $('#ocrModal').on('hide.bs.modal', function (e) {
        // Jika sedang processing save draft, allow close
        if (isProcessingSaveDraft) {
            return;
        }
        
        // Hanya prevent default jika OCR sudah dimulai
        if (ocrStarted) {
            e.preventDefault();
            e.stopImmediatePropagation();
            showExitConfirmation();
        }
    });

    // Event listener untuk modal OCR saat ditutup - refresh data menggunakan Livewire
    $('#ocrModal').on('hidden.bs.modal', function () {
        // Refresh data menggunakan Livewire jika diperlukan
        // shouldRefreshOCRModal di-set oleh closeModalSafely()
        const shouldRefresh = window.shouldRefreshOCRModal !== false; // default true
        if (shouldRefresh && !isProcessingSaveDraft) {
            setTimeout(() => {
                Livewire.dispatch('refresh');
            }, 300);
        }
        // Reset flag
        window.shouldRefreshOCRModal = true;
    });

    // Event listener untuk modal success receipt - ketika ditutup, refresh data menggunakan Livewire
    $('#receiptSuccessModal').on('hidden.bs.modal', function () {
        Livewire.dispatch('refresh');
    });
</script>
@endpush