@extends('layouts.admin-simple')

@section('title', 'Low Stock Alerts')

@section('breadcrumb')
    <li class="breadcrumb-item">Warehouse</li>
    <li class="breadcrumb-item"><a href="{{ route('warehouse.inventory.index') }}">Inventory</a></li>
    <li class="breadcrumb-item active">Low Stock Alerts</li>
@endsection

@section('page-title')
    <div class="d-flex justify-content-between align-items-center w-100">
        <div class="page-title-left">
            <h3 class="mb-1">Low Stock Alerts</h3>
            <p class="text-muted mb-0" style="font-size: 13px;">Items requiring immediate attention for restocking</p>
        </div>
        <div class="page-actions-right d-flex align-items-center">
            <button type="button" onclick="refreshAlerts()" class="btn btn-sm btn-outline-primary mr-2" title="Refresh alerts">
                <i class="material-icons mr-1" style="font-size: 16px;">refresh</i>
                Refresh
            </button>
            <button type="button" onclick="exportLowStockReport()" class="btn btn-sm btn-info" title="Export low stock report to Excel">
                <i class="material-icons mr-1" style="font-size: 16px;">file_download</i>
                Export
            </button>
        </div>
    </div>
@endsection

@section('content')
    <!-- Statistics Cards -->
    <div class="row mb-4">
        <div class="col-xl-3 col-md-6 mb-4">
            <x-warehouse.stats-card
                title="Critical Items"
                :value="0"
                icon="error"
                color="danger"
                subtitle="Out of stock or below minimum"
                :loading="false"
            />
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <x-warehouse.stats-card
                title="Low Stock Items"
                :value="0"
                icon="warning"
                color="warning"
                subtitle="Below minimum levels"
                :loading="false"
            />
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <x-warehouse.stats-card
                title="Total Shortage Value"
                :value="0"
                icon="attach_money"
                color="info"
                subtitle="Estimated shortage cost"
                :loading="false"
                :currency="true"
            />
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <x-warehouse.stats-card
                title="Avg Days Left"
                :value="0"
                icon="schedule"
                color="success"
                subtitle="Before stockout"
                :loading="false"
            />
        </div>
    </div>

    <!-- Filters Panel -->
    <div class="card mb-4">
        <div class="card-header">
            <h5 class="mb-0 d-flex align-items-center">
                <i class="material-icons mr-2">filter_list</i>
                Filters
            </h5>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-xl-3 col-md-6 mb-3">
                    <label class="form-label">Priority Level</label>
                    <select id="filter-priority" class="form-control">
                        <option value="">All Priorities</option>
                        <option value="critical">Critical (Out of Stock)</option>
                        <option value="high">High (< 25% of minimum)</option>
                        <option value="medium">Medium (< 50% of minimum)</option>
                        <option value="low">Low (< minimum level)</option>
                    </select>
                </div>

                <div class="col-xl-3 col-md-6 mb-3">
                    <label class="form-label">Category</label>
                    <select id="filter-category" class="form-control">
                        <option value="">All Categories</option>
                        @foreach(\App\Models\Warehouse\ItemCategory::orderBy('category_name')->get() as $category)
                            <option value="{{ $category->id }}">{{ $category->category_name }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="col-xl-3 col-md-6 mb-3">
                    <label class="form-label">Days Remaining</label>
                    <select id="filter-days" class="form-control">
                        <option value="">All Items</option>
                        <option value="0">Out of Stock</option>
                        <option value="1-3">1-3 Days</option>
                        <option value="4-7">4-7 Days</option>
                        <option value="8-14">8-14 Days</option>
                        <option value="15+">15+ Days</option>
                    </select>
                </div>

                <div class="col-xl-3 col-md-6 mb-3">
                    <label class="form-label">Action Required</label>
                    <select id="filter-action" class="form-control">
                        <option value="">All Items</option>
                        <option value="urgent">Urgent Reorder</option>
                        <option value="standard">Standard Reorder</option>
                        <option value="review">Review Minimum Levels</option>
                    </select>
                </div>
            </div>

            <div class="d-flex justify-content-between align-items-center mt-3 pt-3 border-top">
                <button type="button" onclick="applyFilters()" class="btn btn-primary">
                    <i class="material-icons mr-1" style="font-size: 18px; vertical-align: middle;">filter_list</i>
                    Apply Filters
                </button>

                <button type="button" onclick="clearFilters()" class="btn btn-outline-secondary">
                    <i class="material-icons mr-1" style="font-size: 18px; vertical-align: middle;">clear</i>
                    Clear Filters
                </button>
            </div>
        </div>
    </div>

    <!-- Low Stock Alerts Table -->
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="mb-0 d-flex align-items-center">
                <i class="material-icons mr-2">list</i>
                Low Stock Alert Items
            </h5>
            <div class="d-flex align-items-center">
                <label class="text-muted mr-2" style="font-size: 14px;">Show:</label>
                <select id="entries-per-page" class="form-control form-control-sm" style="width: auto;">
                    <option value="10">10</option>
                    <option value="25">25</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                </select>
                <span class="text-muted ml-2" style="font-size: 14px;">entries</span>
            </div>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table id="low-stock-table" class="table table-hover">
                    <thead>
                        <tr>
                            <th>Priority</th>
                            <th>Item</th>
                            <th>Category</th>
                            <th>Current Stock</th>
                            <th>Min Level</th>
                            <th>Shortage</th>
                            <th>Days Left</th>
                            <th>Value at Risk</th>
                            <th>Last Updated</th>
                            <th class="text-right">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- Data will be populated by DataTables -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/dataTables.bootstrap4.min.css">
    <style>
        .btn-sm {
            padding: 6px 12px;
            font-size: 12px;
            line-height: 1.5;
            border-radius: 4px;
        }

        .btn-sm .material-icons {
            font-size: 16px !important;
        }

        .table th {
            border-top: none;
            font-weight: 600;
            color: #495057;
            background-color: #f8f9fa;
        }

        .table-responsive {
            border-radius: 0.375rem;
        }

        .priority-badge {
            display: inline-flex;
            align-items: center;
            padding: 0.25rem 0.75rem;
            font-size: 0.75rem;
            font-weight: 500;
            line-height: 1;
            border-radius: 0.375rem;
        }

        .priority-critical {
            color: #fff;
            background-color: #e74c3c;
            border: 1px solid #c0392b;
        }

        .priority-high {
            color: #fff;
            background-color: #f39c12;
            border: 1px solid #e67e22;
        }

        .priority-medium {
            color: #856404;
            background-color: #fff3cd;
            border: 1px solid #ffeaa7;
        }

        .priority-low {
            color: #155724;
            background-color: #d4edda;
            border: 1px solid #c3e6cb;
        }

        .pulse-warning {
            animation: pulseWarning 2s infinite;
        }

        @keyframes pulseWarning {
            0% { background-color: transparent; }
            50% { background-color: rgba(255, 193, 7, 0.1); }
            100% { background-color: transparent; }
        }

        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        /* Update stats cards dynamically */
        .stats-card-value {
            transition: all 0.3s ease;
        }

        /* UAE Dirham Symbol */
        .dirham-symbol-inline {
            position: relative;
        }

        .dirham-symbol-inline::before {
            content: '';
            display: inline-block;
            width: 16px;
            height: 16px;
            margin-right: 4px;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1000 870' width='16' height='16' style='fill: currentColor;'%3E%3Cpath d='m88.3 1c0.4 0.6 2.6 3.3 4.7 5.9 15.3 18.2 26.8 47.8 33 85.1 4.1 24.5 4.3 32.2 4.3 125.6v87h-41.8c-38.2 0-42.6-0.2-50.1-1.7-11.8-2.5-24-9.2-32.2-17.8-6.5-6.9-6.3-7.3-5.9 13.6 0.5 17.3 0.7 19.2 3.2 28.6 4 14.9 9.5 26 17.8 35.9 11.3 13.6 22.8 21.2 39.2 26.3 3.5 1 10.9 1.4 37.1 1.6l32.7 0.5v43.3 43.4l-46.1-0.3-46.3-0.3-8-3.2c-9.5-3.8-13.8-6.6-23.1-14.9l-6.8-6.1 0.4 19.1c0.5 17.7 0.6 19.7 3.1 28.7 8.7 31.8 29.7 54.5 57.4 61.9 6.9 1.9 9.6 2 38.5 2.4l30.9 0.4v89.6c0 54.1-0.3 94-0.8 100.8-0.5 6.2-2.1 17.8-3.5 25.9-6.5 37.3-18.2 65.4-35 83.6l-3.4 3.7h169.1c101.1 0 176.7-0.4 187.8-0.9 19.5-1 63-5.3 72.8-7.4 3.1-0.6 8.9-1.5 12.7-2.1 8.1-1.2 21.5-4 40.8-8.9 27.2-6.8 52-15.3 76.3-26.1 7.6-3.4 29.4-14.5 35.2-18 3.1-1.8 6.8-4 8.2-4.7 3.9-2.1 10.4-6.3 19.9-13.1 4.7-3.4 9.4-6.7 10.4-7.4 4.2-2.8 18.7-14.9 25.3-21 25.1-23.1 46.1-48.8 62.4-76.3 2.3-4 5.3-9 6.6-11.1 3.3-5.6 16.9-33.6 18.2-37.8 0.6-1.9 1.4-3.9 1.8-4.3 2.6-3.4 17.6-50.6 19.4-60.9 0.6-3.3 0.9-3.8 3.4-4.3 1.6-0.3 24.9-0.3 51.8-0.1 53.8 0.4 53.8 0.4 65.7 5.9 6.7 3.1 8.7 4.5 16.1 11.2 9.7 8.7 8.8 10.1 8.2-11.7-0.4-12.8-0.9-20.7-1.8-23.9-3.4-12.3-4.2-14.9-7.2-21.1-9.8-21.4-26.2-36.7-47.2-44l-8.2-3-33.4-0.4-33.3-0.5 0.4-11.7c0.4-15.4 0.4-45.9-0.1-61.6l-0.4-12.6 44.6-0.2c38.2-0.2 45.3 0 49.5 1.1 12.6 3.5 21.1 8.3 31.5 17.8l5.8 5.4v-14.8c0-17.6-0.9-25.4-4.5-37-7.1-23.5-21.1-41-41.1-51.8-13-7-13.8-7.2-58.5-7.5-26.2-0.2-39.9-0.6-40.6-1.2-0.6-0.6-1.1-1.6-1.1-2.4 0-0.8-1.5-7.1-3.5-13.9-23.4-82.7-67.1-148.4-131-197.1-8.7-6.7-30-20.8-38.6-25.6-3.3-1.9-6.9-3.9-7.8-4.5-4.2-2.3-28.3-14.1-34.3-16.6-3.6-1.6-8.3-3.6-10.4-4.4-35.3-15.3-94.5-29.8-139.7-34.3-7.4-0.7-17.2-1.8-21.7-2.2-20.4-2.3-48.7-2.6-209.4-2.6-135.8 0-169.9 0.3-169.4 1zm330.7 43.3c33.8 2 54.6 4.6 78.9 10.5 74.2 17.6 126.4 54.8 164.3 117 3.5 5.8 18.3 36 20.5 42.1 10.5 28.3 15.6 45.1 20.1 67.3 1.1 5.4 2.6 12.6 3.3 16 0.7 3.3 1 6.4 0.7 6.7-0.5 0.4-100.9 0.6-223.3 0.5l-222.5-0.2-0.3-128.5c-0.1-70.6 0-129.3 0.3-130.4l0.4-1.9h71.1c39 0 78 0.4 86.5 0.9zm297.5 350.3c0.7 4.3 0.7 77.3 0 80.9l-0.6 2.7-227.5-0.2-227.4-0.3-0.2-42.4c-0.2-23.3 0-42.7 0.2-43.1 0.3-0.5 97.2-0.8 227.7-0.8h227.2zm-10.2 171.7c0.5 1.5-1.9 13.8-6.8 33.8-5.6 22.5-13.2 45.2-20.9 62-3.8 8.6-13.3 27.2-15.6 30.7-1.1 1.6-4.3 6.7-7.1 11.2-18 28.2-43.7 53.9-73 72.9-10.7 6.8-32.7 18.4-38.6 20.2-1.2 0.3-2.5 0.9-3 1.3-0.7 0.6-9.8 4-20.4 7.8-19.5 6.9-56.6 14.4-86.4 17.5-19.3 1.9-22.4 2-96.7 2h-76.9v-129.7-129.8l220.9-0.4c121.5-0.2 221.6-0.5 222.4-0.7 0.9-0.1 1.8 0.5 2.1 1.2z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
            vertical-align: middle;
        }
    </style>
@endpush

@push('scripts')
    <script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.7/js/dataTables.bootstrap4.min.js"></script>

    <script>
        let lowStockTable;

        $(document).ready(function() {
            initializeDataTable();
            loadSummaryData();

            // Entries per page change handler
            $('#entries-per-page').change(function() {
                lowStockTable.page.len($(this).val()).draw();
            });
        });

        function initializeDataTable() {
            lowStockTable = $('#low-stock-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: '{{ route("warehouse.inventory.low-stock") }}',
                    type: 'GET',
                    data: function(d) {
                        d.priority = $('#filter-priority').val();
                        d.category = $('#filter-category').val();
                        d.days = $('#filter-days').val();
                        d.action = $('#filter-action').val();
                    },
                    headers: {
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    error: function(xhr, error, code) {
                        console.error('DataTable Ajax Error:', error, code);
                        console.error('Response Status:', xhr.status);
                        console.error('Response Text:', xhr.responseText);
                        console.error('Full XHR Object:', xhr);

                        // Show user-friendly error message
                        showAlert('Error loading low stock data. Please refresh the page.', 'error');
                    }
                },
                columns: [
                    {
                        data: null,
                        name: 'priority',
                        orderable: false,
                        render: function(data, type, row) {
                            let priorityClass = 'priority-low';
                            let priorityText = 'Low';

                            if (row.current_stock <= 0) {
                                priorityClass = 'priority-critical';
                                priorityText = 'Critical';
                            } else if (row.current_stock <= row.min_level * 0.25) {
                                priorityClass = 'priority-high';
                                priorityText = 'High';
                            } else if (row.current_stock <= row.min_level * 0.5) {
                                priorityClass = 'priority-medium';
                                priorityText = 'Medium';
                            }

                            return `<span class="priority-badge ${priorityClass}">${priorityText}</span>`;
                        }
                    },
                    {
                        data: null,
                        name: 'item_name',
                        render: function(data, type, row) {
                            return `
                                <div class="d-flex align-items-center">
                                    <div class="mr-3">
                                        <div class="bg-warning text-white d-flex align-items-center justify-content-center rounded-circle" style="width: 40px; height: 40px;">
                                            <i class="material-icons" style="font-size: 20px;">warning</i>
                                        </div>
                                    </div>
                                    <div>
                                        <div class="font-weight-medium">${row.item_name}</div>
                                        <small class="text-muted">${row.item_code || 'No code'}</small>
                                    </div>
                                </div>
                            `;
                        }
                    },
                    {
                        data: 'category',
                        name: 'category',
                        render: function(data) {
                            return `
                                <div>
                                    <i class="material-icons text-muted mr-1" style="font-size: 14px; vertical-align: middle;">category</i>
                                    <span>${data || 'Uncategorized'}</span>
                                </div>
                            `;
                        }
                    },
                    {
                        data: 'current_stock',
                        name: 'current_stock',
                        className: 'text-right',
                        render: function(data, type, row) {
                            const color = data <= 0 ? 'danger' : 'warning';
                            return `<span class="badge badge-${color}">${data} ${row.unit || 'units'}</span>`;
                        }
                    },
                    {
                        data: 'min_level',
                        name: 'min_level',
                        className: 'text-right',
                        render: function(data, type, row) {
                            return `<span class="badge badge-info">${data} ${row.unit || 'units'}</span>`;
                        }
                    },
                    {
                        data: 'shortage',
                        name: 'shortage',
                        className: 'text-right',
                        render: function(data, type, row) {
                            return data > 0 ?
                                `<span class="badge badge-danger">${data} ${row.unit || 'units'}</span>` :
                                '<span class="text-success">-</span>';
                        }
                    },
                    {
                        data: 'days_left',
                        name: 'days_left',
                        className: 'text-center',
                        render: function(data) {
                            if (data <= 0) {
                                return '<span class="badge badge-danger">Out of Stock</span>';
                            } else if (data <= 3) {
                                return `<span class="badge badge-danger">${data} days</span>`;
                            } else if (data <= 7) {
                                return `<span class="badge badge-warning">${data} days</span>`;
                            } else {
                                return `<span class="badge badge-success">${data} days</span>`;
                            }
                        }
                    },
                    {
                        data: 'stock_value',
                        name: 'stock_value',
                        className: 'text-right',
                        render: function(data) {
                            return data ? `<span class="dirham-symbol-inline">${parseFloat(data).toFixed(2)}</span>` : '<span class="dirham-symbol-inline">0.00</span>';
                        }
                    },
                    {
                        data: 'last_updated',
                        name: 'last_updated',
                        render: function(data) {
                            return `
                                <div>
                                    <i class="material-icons text-muted mr-1" style="font-size: 14px; vertical-align: middle;">schedule</i>
                                    <span>${data}</span>
                                </div>
                            `;
                        }
                    },
                    {
                        data: null,
                        name: 'actions',
                        orderable: false,
                        searchable: false,
                        render: function(data) {
                            return `
                                <div class="btn-group" role="group">
                                    <button onclick="adjustStock(${data.id})" class="btn btn-sm btn-outline-primary" title="Adjust Stock">
                                        <i class="material-icons" style="font-size: 16px;">edit</i>
                                    </button>
                                    <button onclick="viewHistory(${data.id})" class="btn btn-sm btn-outline-info" title="View History">
                                        <i class="material-icons" style="font-size: 16px;">history</i>
                                    </button>
                                </div>
                            `;
                        }
                    }
                ],
                order: [[0, 'desc'], [3, 'asc']],
                pageLength: 25,
                lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]],
                language: {
                    processing: '<div class="text-center"><div class="spinner-border text-primary" role="status"><span class="sr-only">Loading...</span></div></div>',
                    emptyTable: 'No low stock alerts found',
                    zeroRecords: 'No matching alerts found'
                },
                drawCallback: function(settings) {
                    $('#entries-per-page').val(settings._iDisplayLength);

                    // Add pulse animation to critical items
                    $('.priority-critical').closest('tr').addClass('pulse-warning');

                    // Update summary cards after table loads
                    updateSummaryCards();
                },
                createdRow: function(row, data) {
                    if (data.current_stock <= 0) {
                        $(row).addClass('table-danger');
                    } else if (data.current_stock <= data.min_level * 0.5) {
                        $(row).addClass('table-warning');
                    }
                }
            });
        }

        function loadSummaryData() {
            // Update summary cards when table data changes
            lowStockTable.on('draw', function() {
                updateSummaryCards();
            });
        }

        function updateSummaryCards() {
            const tableData = lowStockTable.rows().data();
            let criticalCount = 0;
            let lowStockCount = 0;
            let totalShortageValue = 0;
            let totalDaysLeft = 0;
            let validDaysCount = 0;

            for (let i = 0; i < tableData.length; i++) {
                const row = tableData[i];

                if (row.current_stock <= 0) {
                    criticalCount++;
                } else {
                    lowStockCount++;
                }

                totalShortageValue += row.shortage * (row.stock_value / Math.max(1, row.current_stock));

                if (row.days_left > 0) {
                    totalDaysLeft += row.days_left;
                    validDaysCount++;
                }
            }

            // Update stats cards with animation
            animateValue('#criticalItems h3', criticalCount);
            animateValue('#lowStockItems h3', lowStockCount);
            animateValueCurrency('#shortageValue h3', totalShortageValue);
            animateValue('#avgDaysLeft h3', validDaysCount > 0 ? Math.round(totalDaysLeft / validDaysCount) : 0);
        }

        function animateValue(selector, endValue) {
            const element = $(selector);
            const startValue = parseInt(element.text()) || 0;
            const duration = 1000;
            const stepTime = 50;
            const steps = duration / stepTime;
            const increment = (endValue - startValue) / steps;
            let currentValue = startValue;
            let step = 0;

            const timer = setInterval(() => {
                currentValue += increment;
                step++;

                if (step >= steps) {
                    currentValue = endValue;
                    clearInterval(timer);
                }

                element.text(Math.round(currentValue));
            }, stepTime);
        }

        function animateValueCurrency(selector, endValue) {
            const element = $(selector);
            // Extract numeric value from existing content, handling dirham symbol
            const currentText = element.text().replace(/[^\d.]/g, '');
            const startValue = parseFloat(currentText) || 0;
            const duration = 1000;
            const stepTime = 50;
            const steps = duration / stepTime;
            const increment = (endValue - startValue) / steps;
            let currentValue = startValue;
            let step = 0;

            const timer = setInterval(() => {
                currentValue += increment;
                step++;

                if (step >= steps) {
                    currentValue = endValue;
                    clearInterval(timer);
                }

                element.html('<span class="dirham-symbol-inline">' + currentValue.toFixed(2) + '</span>');
            }, stepTime);
        }

        function applyFilters() {
            lowStockTable.draw();
        }

        function clearFilters() {
            $('#filter-priority, #filter-category, #filter-days, #filter-action').val('');
            lowStockTable.draw();
        }

        function refreshAlerts() {
            const btn = event.target.closest('button');
            const originalHtml = btn.innerHTML;
            btn.innerHTML = '<i class="material-icons mr-1" style="font-size: 16px; animation: spin 1s linear infinite;">sync</i>Refreshing...';
            btn.disabled = true;

            setTimeout(() => {
                lowStockTable.ajax.reload(null, false);
                btn.innerHTML = originalHtml;
                btn.disabled = false;
                showAlert('Alerts refreshed successfully!', 'success');
            }, 800);
        }

        function adjustStock(itemId) {
            window.location.href = `{{ url('warehouse/inventory') }}/${itemId}/adjust`;
        }

        function viewHistory(itemId) {
            window.location.href = `{{ url('warehouse/inventory') }}/${itemId}/stock-movements`;
        }

        function exportLowStockReport() {
            const btn = event.target.closest('button');
            const originalHtml = btn.innerHTML;
            btn.innerHTML = '<i class="material-icons mr-1" style="font-size: 16px; animation: spin 1s linear infinite;">sync</i>Exporting...';
            btn.disabled = true;

            setTimeout(() => {
                btn.innerHTML = originalHtml;
                btn.disabled = false;
                showAlert('Export functionality is not yet implemented', 'info');
            }, 800);
        }

        function showAlert(message, type) {
            const alertClass = type === 'success' ? 'alert-success' : type === 'info' ? 'alert-info' : 'alert-danger';
            const alert = `
                <div class="alert ${alertClass} alert-dismissible fade show position-fixed" style="top: 20px; right: 20px; z-index: 9999;">
                    ${message}
                    <button type="button" class="close" data-dismiss="alert">&times;</button>
                </div>
            `;
            $('body').append(alert);
            setTimeout(() => $('.alert').alert('close'), 5000);
        }
    </script>
@endpush