<?php
/**
 * Single DAC Item Template - Modern E-Commerce Design
 */
get_header();
?>

<div id="primary" class="content-area">
    <main id="main" class="site-main">
        <?php
        global $wpdb;

        while (have_posts()):
            the_post();

            $table = $wpdb->prefix . 'dac_items';
            $post_id = get_the_ID();

            $item = $wpdb->get_row(
                $wpdb->prepare("SELECT * FROM $table WHERE post_id = %d", $post_id)
            );

            $item_id        = $item->id        ?? '';
            $sale_price     = $item->sale_price     ?? '';
            $purchase_price = $item->purchase_price ?? '';
            $stock_limit    = $item->stock_limit    ?? '';
            $sku            = $item->sku            ?? '';
            $image_url      = $item->image_url      ?? '';
            $category_name  = $item->category_name  ?? '';
            $exp_date       = $item->exp_date       ?? '';
            $enabled        = $item->enabled        ?? '';

            $settings_raw = get_option('devsaccounting_settings');
            $settings = json_decode($settings_raw, true);
          
            $purchase_slug = $settings['purchase_page'] ?? '';
            $purchase_url = home_url('/' . $purchase_slug . '/?item_id=' . $item_id);
            
            $is_enabled = ($enabled == 1);
            $button_name = !empty($settings['buy_now_button_name'])
                ? $settings['buy_now_button_name']
                : 'Buy Now';
            ?>

            <div id="primary" class="content-area" style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f8f9fa; padding: 20px 0; margin-top: 0;">
                <article id="post-<?php the_ID(); ?>" <?php post_class(); ?> style="max-width: 1280px; margin: 0 auto; padding: 0 20px;">
                    
                    <!-- BREADCRUMB -->
                    <nav style="margin-bottom: 24px; font-size: 14px;">
                        <a href="<?php echo esc_url(home_url()); ?>" style="color: #6b7280; text-decoration: none;">Home</a>
                        <span style="color: #d1d5db; margin: 0 8px;">/</span>
                        <span style="color: #9ca3af;"><?php the_title(); ?></span>
                    </nav>

                    <!-- MAIN PRODUCT SECTION -->
                    <div style="
                        display: grid;
                        grid-template-columns: 1fr 1fr;
                        gap: 48px;
                        padding: 40px;
                        background: #ffffff;
                        border-radius: 20px;
                        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
                        margin-bottom: 32px;
                    ">
                        <!-- IMAGE GALLERY -->
                        <div>
                            <div class="simple-image-modal"
                                data-src="<?php echo esc_url( get_the_post_thumbnail_url() ); ?>"
                                data-alt="<?php echo esc_attr( get_the_title() ); ?>"
                                style="
                                    cursor: zoom-in; 
                                    border-radius: 16px; 
                                    overflow: hidden; 
                                    background: #f3f4f6;
                                    position: relative;
                                    aspect-ratio: 1;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    transition: all 0.3s ease;
                                "
                                onmouseover="this.style.background='#e5e7eb';"
                                onmouseout="this.style.background='#f3f4f6';">
                                
                                <?php if (isset($image_url) && $image_url): ?>
                                    <img class="single-image-modal" 
                                        src="<?php echo esc_url($image_url); ?>" 
                                        alt="<?php the_title_attribute(); ?>"
                                        style="width: 100%; height: 100%; object-fit: cover; display: block;">
                                <?php elseif (has_post_thumbnail()): ?>
                                    <?php the_post_thumbnail('large', [
                                        'style' => 'width: 100%; height: 100%; object-fit: cover; display: block;'
                                    ]); ?>
                                <?php else: ?>
                                    <div style="padding: 40px; display:flex; justify-content: center; align-items: center; color:#d1d5db; font-size: 16px;">
                                        No Image Available
                                    </div>
                                <?php endif; ?>
                            </div>
                            <p style="color: #9ca3af; font-size: 13px; margin-top: 12px; text-align: center;">Click to zoom</p>
                        </div>

                        <!-- PRODUCT DETAILS -->
                        <div>
                            <!-- STATUS BADGE -->
                            <div style="margin-bottom: 20px;">
                                <?php if ($enabled == 0): ?>
                                    <span style="
                                        display: inline-block;
                                        background: #fee2e2;
                                        color: #dc2626;
                                        padding: 8px 16px;
                                        border-radius: 20px;
                                        font-size: 13px;
                                        font-weight: 600;
                                        text-transform: uppercase;
                                        letter-spacing: 0.5px;
                                    ">Out of Stock</span>
                                <?php else: ?>
                                    <span style="
                                        display: inline-block;
                                        background: #dcfce7;
                                        color: #15803d;
                                        padding: 8px 16px;
                                        border-radius: 20px;
                                        font-size: 13px;
                                        font-weight: 600;
                                        text-transform: uppercase;
                                        letter-spacing: 0.5px;
                                    ">In Stock</span>
                                <?php endif; ?>
                            </div>

                            <!-- TITLE & CATEGORY -->
                            <h1 style="
                                margin: 16px 0 8px 0;
                                font-size: 32px;
                                font-weight: 700;
                                color: #111827;
                                line-height: 1.2;
                            "><?php the_title(); ?></h1>
                            
                            <?php if ($category_name): ?>
                                <p style="margin: 0 0 24px 0; color: #6b7280; font-size: 16px;">
                                    <strong style="color: #9ca3af;">Category:</strong> <?php echo esc_html($category_name); ?>
                                </p>
                            <?php endif; ?>

                            <!-- PRICE SECTION -->
                            <div style="
                                padding: 24px;
                                background: linear-gradient(135deg, #f0fdf4 0%, #f0fdf4 100%);
                                border: 1px solid #bbf7d0;
                                border-radius: 16px;
                                margin-bottom: 32px;
                            ">
                                <div style="font-size: 14px; color: #6b7280; margin-bottom: 8px;">Price</div>
                                <div style="display: flex; align-items: center; gap: 12px;">
                                    <span style="
                                        color: #15803d;
                                        font-size: 36px;
                                        font-weight: 700;
                                    ">$<?php echo esc_html($sale_price); ?></span>
                                    <?php if ($purchase_price && $purchase_price != $sale_price): ?>
                                        <span style="
                                            color: #9ca3af;
                                            font-size: 16px;
                                            text-decoration: line-through;
                                        ">$<?php echo esc_html($purchase_price); ?></span>
                                        <span style="
                                            background: #fef2f2;
                                            color: #dc2626;
                                            padding: 4px 12px;
                                            border-radius: 8px;
                                            font-size: 13px;
                                            font-weight: 600;
                                        ">Sale</span>
                                    <?php endif; ?>
                                </div>
                            </div>

                            <!-- PRODUCT SPECS -->
                            <div style="margin-bottom: 32px;">
                                <h3 style="margin: 0 0 16px 0; font-size: 16px; font-weight: 600; color: #111827;">Product Details</h3>
                                <div style="
                                    display: grid;
                                    grid-template-columns: 1fr 1fr;
                                    gap: 16px;
                                ">
                                    <div style="padding: 16px; background: #f9fafb; border-radius: 12px; border: 1px solid #e5e7eb;">
                                        <div style="font-size: 13px; color: #9ca3af; margin-bottom: 6px;">SKU</div>
                                        <div style="font-weight: 600; color: #111827;"><?php echo esc_html($sku) ?: 'N/A'; ?></div>
                                    </div>
                                    
                                    
                                </div>
                            </div>

                            <!-- CTA BUTTONS -->
                            <div style="display: flex; gap: 12px;">
                                <?php if ($is_enabled): ?>
                                    <a href="<?php echo esc_url($purchase_url); ?>" 
                                       style="
                                        flex: 1;
                                        display: flex;
                                        align-items: center;
                                        justify-content: center;
                                        background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
                                        color: #fff;
                                        padding: 16px 24px;
                                        border-radius: 12px;
                                        font-size: 16px;
                                        text-decoration: none;
                                        font-weight: 600;
                                        border: none;
                                        cursor: pointer;
                                        transition: all 0.3s ease;
                                        box-shadow: 0 4px 12px rgba(22, 163, 74, 0.3);
                                    "
                                    onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 6px 16px rgba(22, 163, 74, 0.4)';" 
                                    onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 12px rgba(22, 163, 74, 0.3)';">
                                    <span style="font-size: 22px; line-height: 1; color: white; margin-right: 10px">
                                      🛒
                                    </span>

                                         <?php echo esc_html($button_name); ?>
                                    </a>
                                    <button 
                                        onclick="alert('Product added to wishlist!')"
                                        style="
                                        display: flex;
                                        align-items: center;
                                        justify-content: center;
                                        width: 56px;
                                        height: 56px;
                                        background: #fff;
                                        color: #6b7280;
                                        border: 2px solid #e5e7eb;
                                        border-radius: 12px;
                                        font-size: 20px;
                                        cursor: pointer;
                                        transition: all 0.3s ease;
                                    "
                                    onmouseover="this.style.borderColor='#f97316'; this.style.color='#f97316';"
                                    onmouseout="this.style.borderColor='#e5e7eb'; this.style.color='#6b7280';">
                                        ❤️
                                    </button>
                                <?php else: ?>
                                    <button 
                                        disabled
                                        style="
                                        flex: 1;
                                        display: flex;
                                        align-items: center;
                                        justify-content: center;
                                        background: #e5e7eb;
                                        color: #9ca3af;
                                        padding: 16px 24px;
                                        border-radius: 12px;
                                        font-size: 16px;
                                        font-weight: 600;
                                        border: none;
                                        cursor: not-allowed;
                                    ">
                                        Out of Stock
                                    </button>
                                <?php endif; ?>
                            </div>

                            <?php do_action('devsaccounting_after_item_details_image'); ?>
                        </div>
                    </div>

                    <!-- DESCRIPTION SECTION -->
                    <?php if (get_the_content()): ?>
                        <div style="
                            padding: 40px;
                            background: #ffffff;
                            border-radius: 20px;
                            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
                            margin-bottom: 32px;
                        ">
                            <h2 style="
                                margin: 0 0 24px 0;
                                font-size: 24px;
                                font-weight: 700;
                                color: #111827;
                            ">About This Product</h2>
                            <div style="
                                color: #6b7280;
                                line-height: 1.8;
                                font-size: 16px;
                            ">
                                <?php the_content(); ?>
                            </div>
                        </div>
                    <?php endif; ?>
                </article>
            </div>

        <?php endwhile; ?>

    </main>
</div>

<style>
    @media (max-width: 768px) {
        div[style*="grid-template-columns: 1fr 1fr"] {
            grid-template-columns: 1fr !important;
        }
        h1 {
            font-size: 24px !important;
        }
    }
</style>
<?php get_footer(); ?>