@extends('layouts.layoutapp')

@section('content')
    <style>
        .order-card {
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .order-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }

        .order-status {
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 0.7rem;
        }

        .order-items {
            max-height: 200px;
            overflow-y: auto;
        }

        .time-indicator {
            font-size: 0.75rem;
        }
        
        /* Status-specific styles */
        .status-new {
            background-color: #28a745 !important;
            color: white !important;
        }
        
        .status-processing {
            background-color: #ffc107 !important;
            color: black !important;
        }
        
        .status-completed {
            background-color: #6c757d !important;
            color: white !important;
        }
        
        .card-header-new {
            background-color: #28a745 !important;
            color: white !important;
        }
        
        .card-header-processing {
            background-color: #ffc107 !important;
            color: black !important;
        }
        
        .card-header-completed {
            background-color: #6c757d !important;
            color: white !important;
        }

        /* Loading spinner */
        .loading-spinner {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 3px solid rgba(255,255,255,.3);
            border-radius: 50%;
            border-top-color: #fff;
            animation: spin 1s ease-in-out infinite;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }
    </style>

    <div class="main-content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="card mb-4">
                        <div class="card-header pb-0">
                            <div class="d-flex flex-row justify-content-between align-items-center">
                                <div>
                                    <h5 class="mb-0">Active Orders</h5>
                                    <p class="text-sm mb-0">
                                        <span id="last-updated-text">Last updated: Just now</span>
                                        <span id="loading-spinner" class="loading-spinner ms-2 d-none"></span>
                                    </p>
                                </div>
                                <div>
                                    <a href="{{ route('order-add') }}" class="btn bg-gradient-primary btn-sm mb-0">
                                        <i class="fas fa-plus"></i> &nbsp; New Order
                                    </a>
                                    <button id="manual-refresh" class="btn btn-outline-secondary btn-sm mb-0 ms-2">
                                        <i class="fas fa-sync-alt"></i>
                                    </button>
                                </div>
                            </div>
                        </div>

                        <div class="card-body px-4 pt-0 pb-2">
                            <div id="orders-container">
                                @include('orders.partials.order_list', ['orders' => $orders])
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Order Status Modal -->
    <div class="modal fade" id="orderStatusModal" tabindex="-1" aria-labelledby="orderStatusModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <form id="orderStatusForm">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Update Order Status</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <input type="hidden" id="modal_order_id" name="order_id">
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="order_status" value="new" id="statusNew">
                            <label class="form-check-label" for="statusNew">New</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="order_status" value="processing" id="statusProcessing">
                            <label class="form-check-label" for="statusProcessing">Processing</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="order_status" value="completed" id="statusCompleted">
                            <label class="form-check-label" for="statusCompleted">Completed</label>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">
                            <span id="submit-text">Update Status</span>
                            <span id="submit-spinner" class="loading-spinner d-none"></span>
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        $(document).ready(function() {
            let lastUpdateTime = new Date();
            let isUpdating = false;
            let pollInterval = 30000; // 30 seconds
            
            // Initialize the page
            initEventHandlers();
            startPolling();
            
            function initEventHandlers() {
                // Manual refresh button
                $('#manual-refresh').click(function() {
                    fetchOrders();
                });
                
                // Process order click
                $(document).on('click', '.process-order', function(e) {
                    e.preventDefault();
                    let orderId = $(this).data('order-id');
                    let currentStatus = $('#status-badge-' + orderId).text().trim().toLowerCase();
                    
                    $('#modal_order_id').val(orderId);
                    
                    // Preselect current status
                    $('input[name="order_status"]').prop('checked', false);
                    if (currentStatus === 'new') {
                        $('#statusNew').prop('checked', true);
                    } else if (currentStatus === 'processing') {
                        $('#statusProcessing').prop('checked', true);
                    } else if (currentStatus === 'completed') {
                        $('#statusCompleted').prop('checked', true);
                    }
                    
                    $('#orderStatusModal').modal('show');
                });
                
                // Status form submission
                $('#orderStatusForm').submit(function(e) {
                    e.preventDefault();
                    
                    let orderId = $('#modal_order_id').val();
                    let status = $('input[name="order_status"]:checked').val();
                    let statusText = '';
                    let statusClass = '';
                    let dbStatus = 'A';
                    
                    if (status === 'new') {
                        statusText = 'New';
                        statusClass = 'new';
                        dbStatus = 'A';
                    } else if (status === 'processing') {
                        statusText = 'Processing';
                        statusClass = 'processing';
                        dbStatus = 'P';
                    } else if (status === 'completed') {
                        statusText = 'Completed';
                        statusClass = 'completed';
                        dbStatus = 'CO';
                    }
                    
                    // Show loading state
                    $('#submit-text').addClass('d-none');
                    $('#submit-spinner').removeClass('d-none');
                    
                    $.ajax({
                        url: '/update-orders-status',
                        method: 'POST',
                        data: {
                            _token: '{{ csrf_token() }}',
                            orderId: orderId,
                            status: dbStatus
                        },
                        success: function(response) {
                            if (response.success) {
                                updateOrderStatusUI(orderId, statusClass, statusText);
                                $('#orderStatusModal').modal('hide');
                                showToast('success', 'Order status updated successfully');
                            }
                        },
                        error: function() {
                            showToast('error', 'Failed to update status');
                        },
                        complete: function() {
                            $('#submit-text').removeClass('d-none');
                            $('#submit-spinner').addClass('d-none');
                        }
                    });
                });
            }
            
            function startPolling() {
                // Initial load
                fetchOrders();
                
                // Set up interval polling
                setInterval(function() {
                    if (!isUpdating) {
                        fetchOrders();
                    }
                }, pollInterval);
            }
            
            function fetchOrders() {
                if (isUpdating) return;
                isUpdating = true;
                
                // Show loading state
                $('#loading-spinner').removeClass('d-none');
                
                $.ajax({
                    url: '{{ route("get-orders") }}',
                    method: 'GET',
                    data: {
                        last_updated: lastUpdateTime.toISOString()
                    },
                    dataType: 'json',
                    success: function(response) {
                        if (response.orders && response.orders.length > 0) {
                            // Update the orders container
                            $('#orders-container').html(response.html);
                            
                            // Update the last updated time
                            lastUpdateTime = new Date();
                            updateLastUpdatedText();
                            
                            showToast('info', 'Orders updated');
                        }
                    },
                    error: function(xhr) {
                        console.error('Error fetching orders:', xhr);
                        showToast('error', 'Failed to update orders');
                    },
                    complete: function() {
                        isUpdating = false;
                        $('#loading-spinner').addClass('d-none');
                    }
                });
            }
            
            function updateOrderStatusUI(orderId, statusClass, statusText) {
                let card = $('#order-card-' + orderId);
                let badge = $('#status-badge-' + orderId);
                let cardHeader = card.find('.card-header');
                
                // Remove all status classes
                cardHeader.removeClass('card-header-new card-header-processing card-header-completed');
                badge.removeClass('status-new status-processing status-completed');
                
                // Add new status classes
                cardHeader.addClass('card-header-' + statusClass);
                badge.addClass('status-' + statusClass).text(statusText);
            }
            
            function updateLastUpdatedText() {
                const now = new Date();
                const options = { hour: '2-digit', minute: '2-digit', second: '2-digit' };
                const timeString = now.toLocaleTimeString(undefined, options);
                $('#last-updated-text').text('Last updated: ' + timeString);
            }
            
            function showToast(type, message) {
                // You can implement a toast notification here
                // For example using Bootstrap's toast or a simple alert
                console.log(type + ': ' + message);
            }
        });
    </script>
@endpush