<?php
use EasyRestaurantManager\Services\Arr;
$cat = EASY_RESTAURANT_MANAGER_PLUGIN_URL . '/assets/images/cat.jpg';
$backgroundColor = Arr::get($attributes, 'backgroundColor', '#fff');
$textColor = Arr::get($attributes, 'textColor', '#333333');
$primaryTextColor = Arr::get($attributes, 'primaryTextColor', '#ffffff');
$primaryBackgroundColor = Arr::get($attributes, 'primaryBackgroundColor', '#0073aa');
$category_item_background_color = Arr::get($attributes, 'category_item_background_color', '#fff');
$category_item_text_color = Arr::get($attributes, 'category_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);
$template = Arr::get($attributes, 'template', 'modern');
$title = Arr::get($attributes, 'title', 'Our Menu Categories');
$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.');
$blockStyle = "background-color: " . esc_attr($backgroundColor) . "; color: " . esc_attr($textColor) . "; width: " . esc_attr($width) . "; padding: " . esc_attr($padding) . "px; margin: " . esc_attr($margin) . "px;";
$headerStyle = "background-color: " . esc_attr($primaryBackgroundColor) . "; color: " . esc_attr($primaryTextColor) . "; padding: 30px 20px; border-radius: " . esc_attr($borderRadius) . "px; margin-bottom: 30px; text-align: center;";
?>
<div class="category-block-wrapper" style="<?php echo $blockStyle; ?>">
    <div class="category-header" style="<?php echo $headerStyle; ?>">
        <?php if (!empty($title)): ?>
            <h2 style="color: <?php echo esc_attr($primaryTextColor); ?>; font-size: 2.5em; margin: 0 0 15px 0; font-weight: bold;">
                <?php echo wp_kses_post($title); ?>
            </h2>
        <?php endif; ?>
        
        <?php if (!empty($description)): ?>
            <p style="color: <?php echo esc_attr($primaryTextColor); ?>; font-size: 1.1em; margin: 0; opacity: 0.9; line-height: 1.6;">
                <?php echo wp_kses_post($description); ?>
            </p>
        <?php endif; ?>
    </div>

    <div class="category-content">
        <?php
        if(empty($categories)) {
            ?>
            <div class="category-empty" style="text-align: center; padding: 40px 20px;">
                <p style="color: <?php echo esc_attr($textColor); ?>; opacity: 0.6;">
                    <?php _e('No categories to display. Please add categories in your attributes.', 'easy-restaurant-manager'); ?>
                    <a href="<?php echo esc_url($add_category_url); ?>"><?php _e('Add Categories', 'easy-restaurant-manager'); ?></a>
                </p>
            </div>
            <?php
        } else {
            switch ($template) {
                case 'classic':
                    ?>
                    <div class="category-classic" style="display: flex; flex-wrap: wrap; gap: 20px;">
                        <?php foreach ($categories as $category): ?>
                            <div class="category-item" style="flex: 1 1 300px; max-width: 300px; background-color: <?php echo esc_attr($category_item_background_color); ?>; color: <?php echo esc_attr($category_item_text_color); ?>; padding: 20px; border-radius: <?php echo esc_attr($borderRadius); ?>px; border: 1px solid <?php echo esc_attr($borderColor); ?>;">
                                <?php if (!empty($category->image)): ?>
                                    <img src="<?php echo esc_url($category->image); ?>" alt="<?php echo esc_attr($category->name); ?>" style="width: 100%; height: 150px; object-fit: cover; border-radius: 4px; margin-bottom: 15px;" />
                                <?php endif; ?>
                                <h3 style="margin: 0 0 10px 0; font-size: 1.4em; font-weight: bold;">
                                    <?php echo esc_html($category->name); ?>
                                </h3>
                                <p style="margin: 0; opacity: 0.8; line-height: 1.5;">
                                    <?php echo esc_html($category->description); ?>
                                </p>
                            </div>
                        <?php endforeach; ?>
                    </div>
                    <?php
                    break;
                case 'minimal':
                    ?>
                    <div class="category-minimal" style="display: flex; flex-wrap: wrap; gap: 20px;">
                        <?php foreach ($categories as $category): ?>
                            <div class="category-item" style="flex: 1 1 300px; max-width: 300px; color: <?php echo esc_attr($category_item_text_color); ?>; padding: 15px 0; border-bottom: 1px solid <?php echo esc_attr($borderColor); ?>; display: flex; align-items: center; gap: 15px;">
                                <?php if (!empty($category->image)): ?>
                                    <img src="<?php echo esc_url($category->image); ?>" alt="<?php echo esc_attr($category->name); ?>" style="width: 50px; height: 50px; object-fit: cover; border-radius: 4px;" />
                                <?php endif;
                                ?>
                                <div>
                                    <h3 style="margin: 0 0 5px 0; font-size: 1.2em; font-weight: 500;">
                                        <?php echo esc_html($category->name); ?>
                                    </h3>
                                    <p style="margin: 0; opacity: 0.7; font-size: 0.9em; line-height: 1.4;">
                                        <?php echo esc_html($category->description); ?>
                                    </p>
                                </div>
                            </div>
                        <?php endforeach; ?>
                    </div>
                    <?php
                    break;
                case 'modern':
                    ?>
                    <div class="category-modern" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px;">
                        <?php foreach ($categories as $category): ?>
                            <div class="category-item" style="background-color: <?php echo esc_attr($category_item_background_color); ?>; color: <?php echo esc_attr($category_item_text_color); ?>; padding: 25px; border-radius: <?php echo esc_attr($borderRadius); ?>px; border: 1px solid <?php echo esc_attr($borderColor); ?>; box-shadow: 0 4px 6px rgba(0,0,0,0.1); transition: transform 0.3s ease; text-align: center;">
                                <?php if (!empty($category->image)): ?>
                                    <img src="<?php echo esc_url($category->image); ?>" alt="<?php echo esc_attr($category->name); ?>" style="width: 80px; height: 80px; object-fit: cover; border-radius: 50%; border: 3px solid <?php echo esc_attr($borderColor); ?>; margin-bottom: 20px;" />
                                <?php endif;
                                ?>
                                <h3 style="margin: 0 0 10px 0; font-size: 1.4em; font-weight: bold;">
                                    <?php echo esc_html($category->name); ?>
                                </h3>
                                <p style="margin: 0; opacity: 0.8; line-height: 1.5;">
                                    <?php echo esc_html($category->description); ?>
                                </p>
                            </div>
                        <?php endforeach; ?>
                    </div>
                    <?php
                    break;
            }
        }
        ?>
    </div>
</div>
