@extends('layouts.location')

@section('title', 'Generate Picklist')
@section('page-title', 'Generate Picklist')

@section('content')

{{-- Show popup alert if there’s a replenishment or any other message --}}
@if(session('popup_message'))
    <script>
        alert(@json(session('popup_message')));
    </script>
@endif

@if(session('success'))
    <div class="alert alert-success">
        {{ session('success') }}
    </div>
@endif

@if(session('error'))
    <div class="alert alert-danger">
        {{ session('error') }}
    </div>
@endif

@if(session('warning'))
    <div class="alert alert-warning">
        <i class="fas fa-exclamation-triangle"></i> {{ session('warning') }}
        @if(session('existing_pic_ids'))
            <div class="mt-2">
                <strong>Existing Pic IDs:</strong>
                @foreach(session('existing_pic_ids') as $picId)
                    <a href="{{ route('location.picklist.print', $picId) }}" target="_blank" class="btn btn-sm btn-outline-primary ml-1">
                        <i class="fas fa-print"></i> {{ $picId }}
                    </a>
                @endforeach
            </div>
        @endif
    </div>
@endif

@if($errors->any())
    <div class="alert alert-danger">
        <ul class="mb-0">
            @foreach($errors->all() as $err)
                <li>{{ $err }}</li>
            @endforeach
        </ul>
    </div>
@endif

<div class="card mt-4">
    <div class="card-body">
        <h5 class="card-title"><i class="fas fa-list"></i> Generate Picklist</h5>

        <form id="picklistForm" action="{{ route('location.picklist.process') }}" method="POST">
            @csrf
            <!-- Generate for all eligible SOs -->
            <button id="runPicklistBtn" type="submit" class="btn btn-primary">
                <i class="fas fa-play"></i> <span class="btn-text">Run Picklist Generation</span>
            </button>
        </form>
    </div>
</div>

{{-- Print Picklist Table --}}
<div class="card mt-4">
    <div class="card-body">
        <h5 class="card-title"><i class="fas fa-print"></i> Print Picklist</h5>
        
        @if(isset($picklistData) && $picklistData->count() > 0)
            <div class="table-responsive">
                <table id="picklistPrintTable" class="table table-striped table-bordered">
                    <thead class="table-dark">
                        <tr>
                            <th data-sort-key="pic_id" data-sort-type="string" style="cursor: pointer;">Pic ID</th>
                            <th data-sort-key="so_numbers" data-sort-type="string" style="cursor: pointer;">Sales Order Number(s)</th>
                            <th data-sort-key="packing_date" data-sort-type="number" style="cursor: pointer;">Packing Completed At</th>
                            {{-- <th>Category</th> --}}
                            {{-- <th>SKU</th> --}}
                            {{-- <th>Required Qty</th> --}}
                            {{-- <th>Rack</th> --}}
                            {{-- <th>Sequence</th> --}}
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($picklistData as $item)
                            <tr>
                                <td data-sort-value="{{ $item->pic_id }}">{{ $item->pic_id }}</td>
                                <td data-sort-value="{{ $item->so_numbers }}">{{ $item->so_numbers }}</td>
                                <td data-sort-value="{{ $item->packing_date_complete ? \Carbon\Carbon::parse($item->packing_date_complete)->timestamp : '' }}">
                                    {{ $item->packing_date_complete ? \Carbon\Carbon::parse($item->packing_date_complete)->format('d/m/Y H:i') : '-' }}
                                </td>
                                {{-- <td>{{ $item->category }}</td> --}}
                                {{-- <td>{{ $item->sku }}</td> --}}
                                {{-- <td>{{ $item->required_qty }}</td> --}}
                                {{-- <td>{{ $item->rack }}</td> --}}
                                {{-- <td>{{ $item->sequence }}</td> --}}
                                <td>
                                    <button type="button" class="btn btn-sm btn-outline-primary" 
                                            onclick="printPicklistByPicId('{{ $item->pic_id }}')">
                                        <i class="fas fa-print"></i> <span class="btn-text">Print</span>
                                    </button>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            
        @else
            <div class="alert alert-info">
                <i class="fas fa-info-circle"></i> No picklist data available. Generate a picklist first.
            </div>
        @endif
    </div>
</div>


<script>
function printSalesOrderDirectly(picId, salesOrderNumber) {
    // Return a Promise so callers can await loader restore
    return fetch(`/location-user/sales-order-items/${salesOrderNumber}`)
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.json();
        })
        .then(data => {
            // Create table content
            let tableRows = '';
            if (data && data.items && data.items.length > 0) {
                // Combine items with picklist data
                data.items.forEach((item, index) => {
                    const picklistItem = data.picklist_data[index] || {};
                    tableRows += `
                        <tr>
                            <td>${index + 1}</td>
                            <td>${picklistItem.rack || 'N/A'}</td>
                            <td>${picklistItem.sku || 'N/A'}</td>
                            <td>${item.item_name}</td>
                            <td>${picklistItem.required_qty || 'N/A'}</td>
                        </tr>
                    `;
                });
            } else {
                tableRows = '<tr><td colspan="5" class="text-center">No items found for this sales order</td></tr>';
            }
            
            // Create print window
            var printWindow = window.open('', '_blank');
            printWindow.document.write(`
                <html>
                <head>
                    <title>Sales Order Details - ${salesOrderNumber}</title>
                    <style>
                        body { font-family: Arial, sans-serif; margin: 20px; }
                        h2 { color: #333; margin-bottom: 20px; }
                        .header-info { margin-bottom: 20px; }
                        .header-info p { margin: 5px 0; font-size: 16px; }
                        table { width: 100%; border-collapse: collapse; margin-top: 20px; }
                        th, td { border: 1px solid #000; padding: 8px; text-align: left; }
                        th { background-color: #f2f2f2; font-weight: bold; }
                        .actions { margin-bottom: 10px; }
                        .actions button { margin-right: 8px; padding: 6px 10px; }
                        .no-print { display: block; }
                        .text-center { text-align: center; }
                        @media print {
                            body { margin: 0; }
                            table { page-break-inside: auto; }
                            tr { page-break-inside: avoid; page-break-after: auto; }
                            .no-print { display: none !important; }
                        }
                    </style>
                </head>
                <body>
                    <div class="actions no-print">
                        <button onclick="window.print()">Print</button>
                        <button onclick="window.close()">Close</button>
                    </div>
                    <h2>Sales Order Details</h2>
                    <div class="header-info">
                        <p><strong>Pic ID:</strong> ${picId}</p>
                        <p><strong>Sales Order Number:</strong> ${salesOrderNumber}</p>
                    </div>
                    <table>
                        <thead>
                            <tr>
                                <th>Sr. No.</th>
                                <th>Location</th>
                                <th>SKU</th>
                                <th>Item</th>
                                <th>Req. Qty</th>
                            </tr>
                        </thead>
                        <tbody>
                            ${tableRows}
                        </tbody>
                    </table>
                </body>
                </html>
            `);
            
            printWindow.document.close();
            printWindow.focus();
            printWindow.print();
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Error loading sales order items. Please try again.');
            // Re-throw so upstream can handle if needed
            throw error;
        });
}
</script>

<script>
// Simple client-side sorting for the Print Picklist table
document.addEventListener('DOMContentLoaded', function () {
    const table = document.getElementById('picklistPrintTable');
    if (!table) return;

    const getCellValue = (row, index) => {
        const cell = row.children[index];
        if (!cell) return '';
        return cell.getAttribute('data-sort-value') || cell.textContent || '';
    };

    const compareValues = (a, b, type, asc) => {
        if (type === 'datetime') {
            const ta = a ? Date.parse(a) : 0;
            const tb = b ? Date.parse(b) : 0;
            return asc ? ta - tb : tb - ta;
        }
        if (type === 'number') {
            const na = parseFloat(a) || 0;
            const nb = parseFloat(b) || 0;
            return asc ? na - nb : nb - na;
        }
        const sa = (a || '').toString().toLowerCase();
        const sb = (b || '').toString().toLowerCase();
        if (sa < sb) return asc ? -1 : 1;
        if (sa > sb) return asc ? 1 : -1;
        return 0;
    };

    const headers = table.querySelectorAll('thead th[data-sort-key]');
    headers.forEach((th, index) => {
        let asc = true;
        th.addEventListener('click', function () {
            const type = th.getAttribute('data-sort-type') || 'string';
            const tbody = table.tBodies[0];
            if (!tbody) return;

            const rows = Array.from(tbody.querySelectorAll('tr'));
            rows.sort((rowA, rowB) => {
                const a = getCellValue(rowA, index);
                const b = getCellValue(rowB, index);
                return compareValues(a, b, type, asc);
            });

            rows.forEach(row => tbody.appendChild(row));
            asc = !asc;
        });
    });
});

</script>

<script>
// Helper to handle printing when multiple SOs exist under the same pic_id
function printByPicId(btnEl, picId, soNumbersCsv) {
    try {
        const list = (soNumbersCsv || '').split(',').map(s => s.trim()).filter(Boolean);
        if (list.length === 0) {
            alert('No Sales Order numbers found to print.');
            return;
        }
        // Show loader on the button
        let originalIconClass = null;
        let originalText = null;
        if (btnEl) {
            const icon = btnEl.querySelector('i');
            const textSpan = btnEl.querySelector('.btn-text');
            if (icon) { originalIconClass = icon.className; icon.className = 'fas fa-spinner fa-spin'; }
            if (textSpan) { originalText = textSpan.textContent; textSpan.textContent = 'Printing...'; }
            btnEl.disabled = true;
        }

        // Open print window immediately (preserve user gesture, avoid popup blockers)
        const w = window.open('', '_blank');
        if (!w) {
            // Fallback if blocked
            throw new Error('Popup blocked');
        }
        w.document.write('<html><head><title>Preparing Print...</title></head><body><p>Preparing print for '+picId+'...</p></body></html>');
        w.document.close();

        // Fetch all SO data first
        const fetches = list.map(so => fetchSalesOrderJson(so)
            .then(data => ({ so, data }))
            .catch(err => ({ so, data: null, error: err }))
        );

        Promise.all(fetches).then(results => {
            // Aggregate items by same Location (rack) and SKU, summing required_qty
            const agg = new Map(); // key: rack||sku -> { rack, sku, item_name, qty }
            results.forEach(({ so, data }) => {
                if (data && Array.isArray(data.items) && data.items.length) {
                    data.items.forEach((item, idx) => {
                        const pl = (data.picklist_data && data.picklist_data[idx]) || {};
                        const rack = (pl.rack || 'N/A').toString();
                        const sku = (pl.sku || 'N/A').toString();
                        const itemName = (item.item_name || '').toString();
                        const qty = Number(pl.required_qty || 0) || 0;
                        const key = rack + '||' + sku;
                        if (!agg.has(key)) {
                            agg.set(key, { rack, sku, item_name: itemName, qty: 0 });
                        }
                        const row = agg.get(key);
                        row.qty += qty;
                        if (!row.item_name && itemName) row.item_name = itemName; // backfill name if missing
                    });
                }
            });

            // Build HTML rows from aggregation, sorted by rack then SKU
            let combinedRows = '';
            const rows = Array.from(agg.values()).sort((a,b) => {
                if (a.rack === b.rack) return a.sku.localeCompare(b.sku);
                return a.rack.localeCompare(b.rack);
            });
            if (rows.length === 0) {
                combinedRows = '<tr><td colspan="5" class="text-center">No items found for these Sales Orders</td></tr>';
            } else {
                rows.forEach((r, i) => {
                    combinedRows += `
                        <tr>
                            <td>${i + 1}</td>
                            <td>${r.rack}</td>
                            <td>${r.sku}</td>
                            <td>${r.item_name || ''}</td>
                            <td>${r.qty}</td>
                        </tr>`;
                });
            }

            const html = `
                <html>
                <head>
                    <title>Picklist - ${picId}</title>
                    <style>
                        body { font-family: Arial, sans-serif; margin: 20px; }
                        h2 { color: #333; margin: 10px 0; }
                        .header { margin-bottom: 16px; }
                        .header p { margin: 2px 0; }
                        table { width: 100%; border-collapse: collapse; margin-top: 10px; }
                        th, td { border: 1px solid #000; padding: 6px; text-align: left; font-size: 13px; }
                        th { background: #f2f2f2; }
                        .no-print { display: block; margin-bottom: 10px; }
                        @media print { .no-print { display: none !important; } }
                    </style>
                </head>
                <body>
                    <div class="no-print">
                        <button onclick="window.print()">Print</button>
                        <button onclick="window.close()">Close</button>
                    </div>
                    <h2>Picklist</h2>
                    <div class="header">
                        <p><strong>Pic ID:</strong> ${picId}</p>
                        <p><strong>Sales Order(s):</strong> ${list.join(', ')}</p>
                    </div>
                    <table>
                        <thead>
                            <tr>
                                <th>Sr. No.</th>
                                <th>Location</th>
                                <th>SKU</th>
                                <th>Item</th>
                                <th>Req. Qty</th>
                            </tr>
                        </thead>
                        <tbody>
                            ${combinedRows}
                        </tbody>
                    </table>
                </body>
                </html>`;
            // Populate the already-opened window and print
            w.document.open();
            w.document.write(html);
            w.document.close();
            w.focus();
            w.print();
        }).catch(err => {
            console.error('Combined print error', err);
            alert('Error preparing combined print. Please try again.');
        }).finally(() => {
            // Restore button state
            if (btnEl) {
                const icon = btnEl.querySelector('i');
                const textSpan = btnEl.querySelector('.btn-text');
                if (icon && originalIconClass) { icon.className = originalIconClass; }
                if (textSpan && originalText !== null) { textSpan.textContent = originalText; }
                btnEl.disabled = false;
            }
        });
    } catch (e) {
        console.error('printByPicId error', e);
        alert('Error preparing print. Please try again.');
    }
}

function fetchSalesOrderJson(so) {
    return fetch(`/location-user/sales-order-items/${so}`).then(r => {
        if (!r.ok) throw new Error('Network response was not ok');
        return r.json();
    });
}

// New function to print picklist using the proper route
function printPicklistByPicId(picId) {
    try {
        // Open the print route in a new window
        const printUrl = `/location-user/picklist/print/${picId}`;
        const printWindow = window.open(printUrl, '_blank', 'width=800,height=600');
        
        if (!printWindow) {
            alert('Popup blocked. Please allow popups for this site and try again.');
            return;
        }
        
        // Focus the new window
        printWindow.focus();
        
    } catch (error) {
        console.error('Error opening print window:', error);
        alert('Error opening print window. Please try again.');
    }
}

function buildSectionForSO(picId, salesOrderNumber, data) {
    try {
        let tableRows = '';
        if (data && data.items && data.items.length > 0) {
            data.items.forEach((item, index) => {
                const picklistItem = (data.picklist_data && data.picklist_data[index]) || {};
                tableRows += `
                    <tr>
                        <td>${index + 1}</td>
                        <td>${picklistItem.rack || 'N/A'}</td>
                        <td>${picklistItem.sku || 'N/A'}</td>
                        <td>${item.item_name}</td>
                        <td>${picklistItem.required_qty || 'N/A'}</td>
                    </tr>`;
            });
        } else {
            tableRows = '<tr><td colspan="5" class="text-center">No items found for this sales order</td></tr>';
        }

        return `
            <div class="so-section">
                <h3>Sales Order: ${salesOrderNumber}</h3>
                <table>
                    <thead>
                        <tr>
                            <th>Sr. No.</th>
                            <th>Location</th>
                            <th>SKU</th>
                            <th>Item</th>
                            <th>Req. Qty</th>
                        </tr>
                    </thead>
                    <tbody>
                        ${tableRows}
                    </tbody>
                </table>
            </div>`;
    } catch (e) {
        console.error('buildSectionForSO error', e);
        return `
            <div class="so-section">
                <h3>Sales Order: ${salesOrderNumber}</h3>
                <div style="color:red">Error loading sales order items.</div>
            </div>`;
    }
}

// Console logging for success/error/popup messages on Generate Picklist page
(function(){
    try {
        const successMsg = @json(session('success'));
        const errorMsg = @json(session('error'));
        const popupMsg = @json(session('popup_message'));
        const validationErrors = @json($errors->any() ? $errors->all() : []);
        const autoMsgResults = @json(session('auto_msg_results'));

        if (successMsg) {
            console.log('[Picklist] SUCCESS:', successMsg);
        }
        if (errorMsg) {
            console.error('[Picklist] ERROR:', errorMsg);
        }
        if (popupMsg) {
            console.warn('[Picklist] NOTICE:', popupMsg);
        }
        if (validationErrors && validationErrors.length) {
            console.error('[Picklist] VALIDATION ERRORS:', validationErrors);
        }
        if (autoMsgResults) {
            console.log('[Picklist] AutoMsg Results:', autoMsgResults);
        }
    } catch (e) {
        console.error('[Picklist] Console log script error:', e);
    }
})();

// Prevent duplicate submissions: disable button and show spinner on first submit
(function(){
    try {
        var form = document.getElementById('picklistForm');
        var btn = document.getElementById('runPicklistBtn');
        if (form && btn) {
            var submitted = false;
            form.addEventListener('submit', function(e) {
                if (submitted) {
                    // Block subsequent submits
                    e.preventDefault();
                    return false;
                }
                submitted = true;
                btn.disabled = true;
                var textSpan = btn.querySelector('.btn-text');
                if (textSpan) {
                    textSpan.innerHTML = 'Running...';
                }
                // Replace icon with spinner
                var icon = btn.querySelector('i');
                if (icon) {
                    icon.className = 'fas fa-spinner fa-spin';
                }
            });
        }
    } catch (e) { console.error('Init submit guard failed', e); }
})();
</script>

@endsection