<?php
if(!defined('ABSPATH')) exit;

/**
 * View Extra Detail - SaaS Premium UI
 * UPDATED: Dynamic Currency Support for Detail View
 */
function afdp_view_extra_tab($extra_id) {
    // Logic: Use consistent option name
    $extras = get_option('fd_extras', []);
    
    if(!isset($extras[$extra_id])){
        echo '<div class="notice notice-error is-dismissible"><p>Extra resource not found.</p></div>';
        return;
    }

    $item = $extras[$extra_id];
    $img_id = !empty($item['file_id']) ? $item['file_id'] : 0;
    $img_url = $img_id ? wp_get_attachment_url($img_id) : '';

    // --- DYNAMIC CURRENCY LOGIC ---
    $currency_code = get_option('afdp_currency', 'USD');
    $symbols = [
        'USD'=>'$', 'GBP'=>'£', 'EUR'=>'€', 'INR'=>'₹', 
        'AED'=>'د.إ', 'BDT'=>'৳', 'CAD'=>'C$', 'SAR'=>'SR'
    ];
    $currency = isset($symbols[$currency_code]) ? $symbols[$currency_code] : '$';
    ?>

    <style>
        :root { 
            --fd-primary: #e53935; 
            --fd-primary-hover: #c62828;
            --fd-border: #ccd0d4; 
            --fd-text: #1d2327;
            --fd-muted: #64748b;
        }

        .afd-view-wrapper { margin-top: 10px; max-width: 1000px; }
        
        /* Header */
        .afd-view-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; }
        .afd-view-header h1 { margin: 0; font-size: 26px; font-weight: 800; color: var(--fd-text); }

        /* Card Layout */
        .afd-card { background: #fff; border: 1px solid var(--fd-border); border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); overflow: hidden; }
        .afd-card-body { padding: 40px; display: grid; grid-template-columns: 320px 1fr; gap: 40px; }

        /* Sidebar UI */
        .afd-img-frame { border: 1px solid #eee; border-radius: 12px; overflow: hidden; width: 100%; aspect-ratio: 1/1; box-shadow: 0 5px 15px rgba(0,0,0,0.08); background: #f8f9fa; }
        .afd-img-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .afd-price-display { font-size: 36px; font-weight: 800; color: var(--fd-primary); display: block; margin-top: 20px; }

        /* Typography & Badges */
        .afd-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--fd-muted); margin-bottom: 12px; display: block; }
        .afd-description { line-height: 1.8; color: #475569; font-size: 15px; margin-top: 0; }
        
        .afd-tag { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; margin: 0 8px 8px 0; background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; }
        .afd-tag-status { background: #f0fdf4; color: #166534; border-color: #bbf7d0; }
        .afd-tag-out { background: #fff5f5; color: var(--fd-primary); border-color: #fecaca; }

        /* Buttons */
        .btn-fd { display: inline-flex; align-items: center; gap: 8px; padding: 10px 24px; border-radius: 8px; font-size: 14px; font-weight: 600; text-decoration: none; transition: 0.2s; border: 1px solid transparent; }
        .btn-edit-fd { background: var(--fd-primary); color: #fff; }
        .btn-edit-fd:hover { background: var(--fd-primary-hover); }
        .btn-back-fd { color: var(--fd-muted); margin-top: 20px; padding-left: 0; }
        .btn-back-fd:hover { color: var(--fd-text); }
        .btn-fd svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.5; }
    </style>

    <div class="wrap afd-view-wrapper">
        <div class="afd-view-header">
            <h1><?php echo esc_html($item['name']); ?></h1>
            <a href="?page=awesome_food_delivery&tab=extras&sub=add&edit=<?php echo esc_attr($extra_id); ?>" class="btn-fd btn-edit-fd">
                <svg viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4L18.5 2.5z"></path></svg>
                Modify Extra
            </a>
        </div>

        <div class="afd-card">
            <div class="afd-card-body">
                
                <div class="afd-view-sidebar">
                    <div class="afd-img-frame">
                        <?php if($img_url): ?>
                            <img src="<?php echo esc_url($img_url); ?>" alt="Extra Icon">
                        <?php else: ?>
                            <div style="height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#cbd5e1;">
                                <span class="dashicons dashicons-plus" style="font-size:64px; width:64px; height:64px;"></span>
                                <p style="font-size: 12px; font-weight:600;">No Icon Assigned</p>
                            </div>
                        <?php endif; ?>
                    </div>
                    
                    <div style="text-align:center; padding-top: 10px;">
                        <span class="afd-price-display">
                            <?php echo esc_html( $currency ); ?>
                            <?php echo esc_html( number_format( floatval( $item['price'] ?? 0 ), 2 ) ); ?>
                        </span>
                        <span class="afd-section-title" style="margin-top:-5px;">Price per selection</span>
                    </div>
                </div>

                <div class="afd-view-main">
                    <div style="margin-bottom:35px;">
                        <span class="afd-section-title">Availability Status</span>
                        <?php if(isset($item['quantity']) && $item['quantity'] > 0): ?>
                            <span class="afd-tag afd-tag-status">
                                <span class="dashicons dashicons-yes" style="font-size:16px; margin-right:5px; margin-top:3px;"></span>
                                Available (<?php echo esc_html($item['quantity']); ?> in stock)
                            </span>
                        <?php else: ?>
                            <span class="afd-tag afd-tag-out">
                                <span class="dashicons dashicons-no" style="font-size:16px; margin-right:5px; margin-top:3px;"></span>
                                Currently Unavailable
                            </span>
                        <?php endif; ?>
                    </div>

                    <div style="margin-bottom:35px;">
                        <span class="afd-section-title">Resource Type</span>
                        <div class="afd-description">
                            This is a <b>Global Extra</b>. It can be attached to any food item in your menu. Changes made here will automatically update the pricing and availability across all items linked to this extra.
                        </div>
                    </div>

                    <div>
                        <span class="afd-section-title">Technical Reference</span>
                        <span class="afd-tag">System ID: #EXT-<?php echo esc_html($extra_id); ?></span>
                        <span class="afd-tag">Slug: <?php echo esc_attr(sanitize_title($item['name'])); ?></span>
                    </div>
                </div>

            </div>
        </div>

        <a href="?page=awesome_food_delivery&tab=extras&sub=all" class="btn-fd btn-back-fd">
            <svg viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
            Back to Extras Directory
        </a>
    </div>
    <?php
}