<?php
if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
use EasyRestaurantManager\Services\Arr;

$backgroundColor = Arr::get($attributes, 'backgroundColor', '#fff');
$textColor = Arr::get($attributes, 'textColor', '#333333');
$menu_item_background_color = Arr::get($attributes, 'menu_item_background_color', '#fff');
$menu_item_text_color = Arr::get($attributes, 'menu_item_text_color', '#333333');
$borderColor = Arr::get($attributes, 'borderColor', '#dadee3');
$borderRadius = Arr::get($attributes, 'borderRadius', 0);
$width = Arr::get($attributes, 'width', '100%');
$padding = Arr::get($attributes, 'padding', 10);
$margin = Arr::get($attributes, 'margin', 0);
$labelFontSize = Arr::get($attributes, 'labelFontSize', 16);
$perPage = Arr::get($attributes, 'perPage', 10);
$button_label = Arr::get($attributes, 'button_label', 'View Details');
$buttonBackgroundColor = Arr::get($attributes, 'buttonBackgroundColor', '#0073aa');
$buttonTextColor = Arr::get($attributes, 'buttonTextColor', '#ffffff');
$show_details_button = Arr::get($attributes, 'show_details_button', true);
$template = Arr::get($attributes, 'template', 'modern');
$title = Arr::get($attributes, 'title', 'Our Menu');
$description = Arr::get($attributes, 'description', 'Enjoy the unique dishes from the best/elite restaurant that only our restaurant has. Fusce malesuada, lorem vitae euismod lobortis.');

$itemsToShow = array_slice($menus, 0, $perPage);

$blockStyle = "background-color: " . esc_attr($backgroundColor) . "; color: " . esc_attr($textColor) . "; width: " . esc_attr($width) . "; padding: " . esc_attr($padding) . "px; margin: " . esc_attr($margin) . "px;";
$headerBlockStyle = "background-color: " . esc_attr($buttonBackgroundColor) . "; color: " . esc_attr($buttonTextColor) . "; padding: 30px; border-bottom: 1px solid " . esc_attr($borderColor) . ";";
?>

<div class="menu-block-wrapper" style="<?php echo $blockStyle; ?>">
    <div class="menu-header" style="<?php echo $headerBlockStyle; ?> margin-bottom: 20px; text-align: center; border-radius: <?php echo esc_attr($borderRadius); ?>px; ">
        <?php if (!empty($title)): ?>
            <h2 style="color: <?php echo esc_attr($buttonTextColor); ?>; font-size: <?php echo esc_attr($labelFontSize + 20); ?>px; margin: 0 0 10px; font-weight: bold;">
                <?php echo wp_kses_post($title); ?>
            </h2>
        <?php endif; ?>
        
        <?php if (!empty($description)): ?>
            <p style="color: <?php echo esc_attr($buttonTextColor); ?>; font-size: 16px; margin: 0; opacity: 0.8;">
                <?php echo wp_kses_post($description); ?>
            </p>
        <?php endif; ?>
    </div>

    <div class="menu-content">
        <?php
        if(!empty($menus)) {
        switch ($template) {
            case 'grid':
                ?>
                <div class="menu-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px;">
                    <?php foreach ($itemsToShow as $item): ?>
                        <div class="menu-item-card menu-item" style="border: 1px solid <?php echo esc_attr($borderColor); ?>; border-radius: <?php echo esc_attr($borderRadius); ?>px; padding: 15px; background-color: <?php echo esc_attr($menu_item_background_color); ?>;">
                            <?php if (!empty($item->image)): ?>
                                <img src="<?php echo esc_url($item->image); ?>" alt="<?php echo esc_attr($item->name); ?>" style="width: 100%; height: 150px; object-fit: cover; border-radius: 4px;" />
                            <?php endif; ?>
                            
                            <h4 style="color: <?php echo esc_attr($menu_item_text_color); ?>; margin: 10px 0 5px; font-size: <?php echo esc_attr($labelFontSize); ?>px;">
                                <?php echo esc_html($item->name); ?>
                            </h4>
                            
                            <p style="color: <?php echo esc_attr($menu_item_text_color); ?>; font-size: 14px; margin: 5px 0;">
                                <?php echo wp_kses_post($item->description); ?>
                            </p>
                            
                            <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 10px;">
                                <span style="color: <?php echo esc_attr($menu_item_text_color); ?>; font-weight: bold;">
                                    <?php echo esc_html($item->base_price); echo esc_html(get_option('erm_currency_symbol', ' $')); ?>
                                </span>
                                
                                <?php if ($show_details_button): ?>
                                    <button style="background-color: <?php echo esc_attr($buttonBackgroundColor); ?>; color: <?php echo esc_attr($buttonTextColor); ?>; border: none; padding: 10px; font-weight: 500; border-radius: 4px; font-size: 12px;">
                                        <a href="<?php echo esc_url($item->menu_url); ?>" style="text-decoration: none; color: inherit;"><?php echo esc_html($button_label); ?></a>
                                    </button>
                                <?php endif; ?>
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>
                <?php
                break;
                
            case 'list':
                ?>
                <div class="menu-list">
                    <?php foreach ($itemsToShow as $item): ?>
                        <div class="menu-item-list menu-item" style="display: flex; align-items: center; padding: 15px; border-bottom: 1px solid <?php echo esc_attr($borderColor); ?>; gap: 15px; background-color: <?php echo esc_attr($menu_item_background_color); ?>;">
                            <?php if (!empty($item->image)): ?>
                                <img src="<?php echo esc_url($item->image); ?>" alt="<?php echo esc_attr($item->name); ?>" style="width: 80px; height: 60px; object-fit: cover; border-radius: 4px;" />
                            <?php endif; ?>
                            
                            <div style="flex: 1;">
                                <h4 style="color: <?php echo esc_attr($menu_item_text_color); ?>; margin: 0 0 5px; font-size: <?php echo esc_attr($labelFontSize); ?>px;">
                                    <?php echo esc_html($item->name); ?>
                                </h4>
                                
                                <p style="color: <?php echo esc_attr($menu_item_text_color); ?>; font-size: 14px; margin: 0;">
                                    <?php echo wp_kses_post($item->description); ?>
                                </p>
                            </div>
                            
                            <div style="text-align: right;">
                                <div style="color: <?php echo esc_attr($menu_item_text_color); ?>; font-weight: bold; margin-bottom: 5px;">
                                    <?php echo esc_html($item->base_price); echo esc_html(get_option('erm_currency_symbol', ' $')); ?>
                                </div>
                                
                                <?php if ($show_details_button): ?>
                                    <button style="background-color: <?php echo esc_attr($buttonBackgroundColor); ?>; color: <?php echo esc_attr($buttonTextColor); ?>; border: none; padding: 6px 10px; font-weight: 500; border-radius: 4px; font-size: 12px;">
                                        <a href="<?php echo esc_url($item->menu_url); ?>" style="text-decoration: none; color: inherit;"><?php echo esc_html($button_label); ?></a>
                                    </button>
                                <?php endif; ?>
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>
                <?php
                break;
                
            case 'modern':
                ?>
                <div class="menu-modern" style="display: flex; flex-direction: column; gap: 25px;">
                    <?php foreach ($itemsToShow as $item): ?>
                        <div class="menu-item-modern menu-item" style="display: flex; background-color: <?php echo esc_attr($menu_item_background_color); ?>; border-radius: <?php echo esc_attr($borderRadius); ?>px; overflow: hidden; box-shadow: 0 4px 6px rgba(0,0,0,0.1); border: 1px solid <?php echo esc_attr($borderColor); ?>;">
                            <?php if (!empty($item->image)): ?>
                                <img src="<?php echo esc_url($item->image); ?>" alt="<?php echo esc_attr($item->name); ?>" style="width: 200px; height: 140px; object-fit: cover;" />
                            <?php endif; ?>
                            
                            <div style="padding: 20px; flex: 1; display: flex; flex-direction: column; justify-content: space-between;">
                                <div>
                                    <h4 style="color: <?php echo esc_attr($menu_item_text_color); ?>; margin: 0 0 8px; font-size: <?php echo esc_attr($labelFontSize); ?>px;">
                                        <?php echo esc_html($item->name); ?>
                                    </h4>
                                    
                                    <p style="color: <?php echo esc_attr($menu_item_text_color); ?>; font-size: 14px; margin: 0; opacity: 0.8;">
                                        <?php echo wp_kses_post($item->description); ?>
                                    </p>
                                </div>
                                
                                <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 15px;">
                                    <span style="color: <?php echo esc_attr($menu_item_text_color); ?>; font-weight: bold; font-size: 18px;">
                                        <?php echo esc_html($item->base_price); echo esc_html(get_option('erm_currency_symbol', ' $')); ?>
                                    </span>
                                    
                                    <?php if ($show_details_button): ?>
                                        <button style="background-color: <?php echo esc_attr($buttonBackgroundColor); ?>; color: <?php echo esc_attr($buttonTextColor); ?>; border: none; padding: 10px; font-weight: 500; border-radius: 4px; font-size: 12px;">
                                            <a href="<?php echo esc_url($item->menu_url); ?>" style="text-decoration: none; color: inherit;"><?php echo esc_html($button_label); ?></a>
                                        </button>
                                    <?php endif; ?>
                                </div>
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>
                <?php
                break;
                
            default: // classic
                ?>
                <div class="menu-classic">
                    <?php foreach ($itemsToShow as $item): ?>
                        <div class="menu-item-classic menu-item" style="padding: 20px 0; border-bottom: 1px solid <?php echo esc_attr($borderColor); ?>; background-color: <?php echo esc_attr($menu_item_background_color); ?>;">
                            <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px;">
                                <h4 style="color: <?php echo esc_attr($menu_item_text_color); ?>; margin: 0; font-size: <?php echo esc_attr($labelFontSize); ?>px;">
                                    <?php echo esc_html($item->name); ?>
                                </h4>
                                
                                <span style="color: <?php echo esc_attr($menu_item_text_color); ?>; font-weight: bold;">
                                    <?php echo esc_html($item->base_price); echo esc_html(get_option('erm_currency_symbol', ' $')); ?>
                                </span>
                            </div>
                            
                            <p style="color: <?php echo esc_attr($menu_item_text_color); ?>; font-size: 14px; margin: 0 0 10px; opacity: 0.8;">
                                <?php echo wp_kses_post($item->description); ?>
                            </p>
                            
                            <?php if ($show_details_button): ?>
                                <button style="background-color: <?php echo esc_attr($buttonBackgroundColor); ?>; color: <?php echo esc_attr($buttonTextColor); ?>; border: none; padding: 5px 10px; border-radius: 4px; font-size: 12px;">
                                <a href="<?php echo esc_url($item->menu_url); ?>" style="text-decoration: none; color: inherit;"><?php echo esc_html($button_label); ?></a>
                                </button>
                            <?php endif; ?>
                        </div>
                    <?php endforeach; ?>
                </div>
                <?php
                break;
        }
        ?>
        <?php } else { ?>
            <p style="color: <?php echo esc_attr($textColor); ?>; font-size: 16px; margin: 0; opacity: 0.8; text-align: center;">No menus found</p>
        <?php } ?>
    </div>

    <?php if ($perPage < count($menus)): ?>
        <div style="text-align: center; margin-top: 20px;">
            <button class="erm_load_more_menu_items" style="background-color: <?php echo esc_attr($buttonBackgroundColor); ?>; color: <?php echo esc_attr($buttonTextColor); ?>; border: none; padding: 10px 20px; border-radius: 4px; font-size: 14px;">
                <?php echo esc_html__('Load More Items', 'fluent-raise'); ?>
            </button>
        </div>
    <?php endif; ?>
</div>

<script>
    jQuery(document).ready(function($) {
        $('.erm_load_more_menu_items').click(function() {
            $.ajax({
                url: `${window.RestaurantMangerBlockData.rest_api}/load_more_menu_items`,
                type: 'GET',
                headers: {
                    'X-WP-Nonce': window.RestaurantMangerBlockData.nonce
                },
                data: {
                    perPage: <?php echo esc_attr($perPage); ?>,
                    currentCount: $('.menu-item').length
                },
                success: function(response) {
                    // menus data array
                    let menus = response?.menus;
                    if(!menus || menus.length === 0) {
                        $('.erm_load_more_menu_items').hide();
                        return;
                    }
                    // get the template
                    let template = '<?php echo esc_attr($template); ?>';
                    if(menus && menus.length > 0) {
                        menus.forEach(menu => {
                            let menuHtml = '';
                            switch (template) {
                                case 'grid':
                                    menuHtml = `
                                        <div class="menu-item-card menu-item" style="border: 1px solid <?php echo esc_attr($borderColor); ?>; border-radius: <?php echo esc_attr($borderRadius); ?>px; padding: 15px; background-color: <?php echo esc_attr($menu_item_background_color); ?>;">
                                            <img src="${menu.image}" alt="${menu.name}" style="width: 100%; height: 150px; object-fit: cover; border-radius: 4px;" />
                                            <h4 style="color: <?php echo esc_attr($menu_item_text_color); ?>; margin: 10px 0 5px; font-size: <?php echo esc_attr($labelFontSize); ?>px;">${menu.base_price} ${window.RestaurantMangerBlockData?.currency_symbol}</h4>
                                            <p style="color: <?php echo esc_attr($menu_item_text_color); ?>; font-size: 14px; margin: 5px 0;">${menu.description}</p>
                                              <?php if ($show_details_button): ?>
                                                <button style="background-color: <?php echo esc_attr($buttonBackgroundColor); ?>; color: <?php echo esc_attr($buttonTextColor); ?>; border: none; padding: 10px; font-weight: 500; border-radius: 4px; font-size: 12px;">
                                                    <a href="${menu.menu_url}" style="text-decoration: none; color: inherit;"><?php echo esc_html($button_label); ?></a>
                                                </button>
                                                <?php endif; ?>
                                        </div>
                                    `;
                                    break;
                                case 'list':
                                    menuHtml = `
                                        <div class="menu-item-list menu-item" style="display: flex; align-items: center; padding: 15px; border-bottom: 1px solid <?php echo esc_attr($borderColor); ?>; gap: 15px; background-color: <?php echo esc_attr($menu_item_background_color); ?>;">
                                            <img src="${menu.image}" alt="${menu.name}" style="width: 80px; height: 60px; object-fit: cover; border-radius: 4px;" />
                                            <div style="flex: 1;">
                                                <h4 style="color: <?php echo esc_attr($menu_item_text_color); ?>; margin: 0 0 5px; font-size: <?php echo esc_attr($labelFontSize); ?>px;">${menu.name}</h4>
                                                <p style="color: <?php echo esc_attr($menu_item_text_color); ?>; font-size: 14px; margin: 0;">${menu.description}</p>
                                            </div>
                                            <div style="text-align: right;">
                                                <div style="color: <?php echo esc_attr($menu_item_text_color); ?>; font-weight: bold; margin-bottom: 5px;">
                                                    ${menu.base_price} ${window.RestaurantMangerBlockData?.currency_symbol}
                                                    <?php if ($show_details_button): ?>
                                                        <button style="background-color: <?php echo esc_attr($buttonBackgroundColor); ?>; color: <?php echo esc_attr($buttonTextColor); ?>; border: none; padding: 10px; font-weight: 500; border-radius: 4px; font-size: 12px;">
                                                            <a href="${menu.menu_url}" style="text-decoration: none; color: inherit;"><?php echo esc_html($button_label); ?></a>
                                                        </button>
                                                    <?php endif; ?>
                                                </div>
                                            </div>
                                        </div>
                                    `;
                                    break;
                                case 'modern':
                                    menuHtml = `
                                        <div class="menu-item-modern menu-item" style="display: flex; background-color: <?php echo esc_attr($menu_item_background_color); ?>; border-radius: <?php echo esc_attr($borderRadius); ?>px; overflow: hidden; box-shadow: 0 4px 6px rgba(0,0,0,0.1); border: 1px solid <?php echo esc_attr($borderColor); ?>;">
                                            <img src="${menu.image}" alt="${menu.name}" style="width: 200px; height: 140px; object-fit: cover;" />
                                            <div style="padding: 20px; flex: 1; display: flex; flex-direction: column; justify-content: space-between;">
                                                <div>
                                                    <h4 style="color: <?php echo esc_attr($menu_item_text_color); ?>; margin: 0 0 8px; font-size: <?php echo esc_attr($labelFontSize); ?>px;">${menu.name}</h4>
                                                    <p style="color: <?php echo esc_attr($menu_item_text_color); ?>; font-size: 14px; margin: 0; opacity: 0.8;">${menu.description}</p>
                                                </div>
                                                <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 15px;">
                                                    <span style="color: <?php echo esc_attr($menu_item_text_color); ?>; font-weight: bold; font-size: 18px;">${menu.base_price} ${window.RestaurantMangerBlockData?.currency_symbol}</span>
                                                    <?php if ($show_details_button): ?>
                                                    <button style="background-color: <?php echo esc_attr($buttonBackgroundColor); ?>; color: <?php echo esc_attr($buttonTextColor); ?>; border: none; padding: 10px; font-weight: 500; border-radius: 4px; font-size: 12px;">
                                                        <a href="${menu.menu_url}" style="text-decoration: none; color: inherit;"><?php echo esc_html($button_label); ?></a>
                                                    </button>
                                                    <?php endif; ?>
                                                </div>
                                            </div>
                                        </div>
                                    `;
                                    break;
                                default: // classic
                                    menuHtml = `
                                        <div class="menu-item-classic menu-item" style="padding: 20px 0; border-bottom: 1px solid <?php echo esc_attr($borderColor); ?>; background-color: <?php echo esc_attr($menu_item_background_color); ?>;">
                                            <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px;">
                                                <h4 style="color: <?php echo esc_attr($menu_item_text_color); ?>; margin: 0; font-size: <?php echo esc_attr($labelFontSize); ?>px;">${menu.name}</h4>
                                                <span style="color: <?php echo esc_attr($menu_item_text_color); ?>; font-weight: bold;">${menu.base_price} ${window.RestaurantMangerBlockData?.currency_symbol}</span>
                                            </div>
                                            <p style="color: <?php echo esc_attr($menu_item_text_color); ?>; font-size: 14px; margin: 0 0 10px; opacity: 0.8;">${menu.description}</p>
                                            <?php if ($show_details_button): ?>
                                            <button style="background-color: <?php echo esc_attr($buttonBackgroundColor); ?>; color: <?php echo esc_attr($buttonTextColor); ?>; border: none; padding: 10px; font-weight: 500; border-radius: 4px; font-size: 12px;">
                                                <a href="${menu.menu_url}" style="text-decoration: none; color: inherit;"><?php echo esc_html($button_label); ?></a>
                                            </button>
                                            <?php endif; ?>
                                        </div>
                                    `;
                                    break;
                            }
                            $(`.menu-${template}`).append(menuHtml);
                        });
                    }
                },
                error: function() {
                    console.error('Error loading more menu items.');
                }
            });
        });
    });
</script>