@extends('layouts.restaurant')
@section('title', 'Bakery')

@section('content')
    <!-- Main content -->
    <section class="content min-height-90hv no-print">

        <div class="row">
            <div class="col-md-12 text-center">
                <h3>Bakery @lang( 'restaurant.orders' )</h3>
            </div>
        </div>


        <div class="box">
            <div class="box-header">
                <button type="button" class="btn btn-sm btn-primary pull-right" id="refresh_line_orders"><i class="fas fa-sync"></i> @lang( 'restaurant.refresh' )</button>
                <button type="button" class="btn btn-sm btn-success pull-right" id="confirm_all_btn" style="margin-right: 10px;"><i class="fas fa-check"></i> Confirm All</button>
            </div>
            <div class="box-body">
                <input type="hidden" id="orders_for" value="bakery">
                <input type="hidden" id="__orders_refresh_interval" value="{{ config('constants.orders_refresh_interval', 10) }}">
                <div class="row" id="line_orders_div">
                    @include('restaurant.partials.line_orders', array('line_orders' => $line_orders, 'orders_for' => 'bakery'))
                </div>
            </div>
            <div class="overlay hide">
                <i class="fas fa-sync fa-spin"></i>
            </div>
        </div>

    </section>
    <!-- /.content -->

@endsection

@section('javascript')
    <script type="text/javascript">
        $(document).ready(function(){
            // Function to play beep sound
            function playBeep() {
                var audio = new Audio('data:audio/wav;base64,UklGRnoGAABXQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YQoGAACBhYqFbF1fdJivrJBhNjVgodDbq2EcBj+a2/LDciUFLIHO8tiJNwgZaLvt559NEAxQp+PwtmMcBjiR1/LMeSwFJHfH8N2QQAoUXrTp66hVFApGn+DyvmwhBSuBzvLaiTcIGWi77eefTRAMUKfj8LZjHAY4ktfyznksBS');
                audio.play().catch(function(e) { console.log('Audio play failed:', e); });
            }
            
            // Function to flash screen
            function flashScreen() {
                $('body').css('background-color', '#fff3cd');
                setTimeout(function() {
                    $('body').css('background-color', '');
                }, 300);
            }
            
            // Auto refresh function
            function refreshLineOrders() {
                var orders_for = $('#orders_for').val();
                $('.overlay').removeClass('hide');
                
                // Store old order IDs before refresh
                var oldOrderIds = $('.line_order_div').map(function() {
                    return $(this).data('transaction-id');
                }).get();
                
                $.ajax({
                    method: "POST",
                    url: '/modules/refresh-line-orders-list',
                    dataType: "html",
                    data: { orders_for: orders_for },
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(result){
                        $('#line_orders_div').html(result);
                        $('.overlay').addClass('hide');
                        
                        // Check for new or updated orders
                        var hasNewItems = $('.line_order_div').find('[style*="background-color: #fff9c4"]').length > 0;
                        var newOrderIds = $('.line_order_div').map(function() {
                            return $(this).data('transaction-id');
                        }).get();
                        
                        var hasNewOrders = newOrderIds.some(function(id) {
                            return oldOrderIds.indexOf(id) === -1;
                        });
                        
                        // Play beep and flash if there are new items or new orders
                        if (hasNewItems || hasNewOrders) {
                            playBeep();
                            flashScreen();
                        }
                    }
                });
            }

            // Auto refresh orders based on config interval
            var refresh_interval = parseInt($('#__orders_refresh_interval').val()) * 1000;
            setInterval(function(){ 
                refreshLineOrders();
            }, refresh_interval);

            // Refresh line orders button
            $(document).on('click', '#refresh_line_orders', function(e){
                e.preventDefault();
                refreshLineOrders();
                toastr.success('Orders refreshed');
            });

            // Mark as cooked
            $(document).on('click', '.mark_as_cooked_btn', function(e){
                e.preventDefault();
                var _this = $(this);
                var href = _this.data('href');
                $.ajax({
                    method: "GET",
                    url: href,
                    dataType: "json",
                    success: function(result){
                        if(result.success == true){
                            toastr.success(result.msg);
                            _this.closest('.line_order_div').remove();
                        } else {
                            toastr.error(result.msg);
                        }
                    }
                });
            });

            // Confirm All button
            $(document).on('click', '#confirm_all_btn', function(e){
                e.preventDefault();
                
                var line_order_count = $('#line_orders_div .line_order_div').length;
                if(line_order_count === 0) {
                    toastr.warning('No orders to confirm');
                    return;
                }

                $('.overlay').removeClass('hide');
                
                // Collect all mark as cooked buttons ONLY from the current screen's line_orders_div
                var promises = [];
                $('#line_orders_div .mark_as_cooked_btn').each(function(){
                    var href = $(this).data('href');
                    promises.push(
                        $.ajax({
                            method: "GET",
                            url: href,
                            dataType: "json"
                        })
                    );
                });

                // Execute all requests
                $.when.apply($, promises).done(function(){
                    $('.overlay').addClass('hide');
                    toastr.success('All orders confirmed successfully');
                    $('#line_orders_div .line_order_div').remove();
                }).fail(function(){
                    $('.overlay').addClass('hide');
                    toastr.error('Some orders could not be confirmed');
                    location.reload();
                });
            });
        });
    </script>
@endsection