class ProductCard extends React.Component {
    constructor(props) {
       
        super(props);
        this.entId = this.props.enterpriseId;
        this.index = this.props.index;
       
        this.state = { product: this.props.product, prices: this.props.prices, isStock: this.props.displayStock }
    }
    
    render() {

        return (
            <>
                {
                    this.index % 2 == 0 ? (
                        <div className="break" id="break">
                     
                        </div>
                    ) : (
                            <div className="break" id="noBreak">
                            </div>
                            )
                }
                {/* Tarjeta de Detalle de Producto */}
                <div className="col-xs-12 col-lg-6">
                    <div className="panel panel-default product-card" style={{ borderRadius: '8px', overflow: 'hidden', boxShadow: '0 2px 8px rgba(0,0,0,0.08)' }}>

                        {/* Encabezado con Nombre del Producto */}
                        <div className="panel-heading" style={{ background: '#f8f9fa', borderBottom: '1px solid #e9ecef', padding: '14px 18px' }}>
                            <h3 className="panel-title" style={{ fontWeight: '600', fontSize: '18px', color: '#2c3e50', margin: 0 }}>
                                {this.state.product?.productName || 'Sin Nombre de Producto'}
                            </h3>
                        </div>

                        {/* Cuerpo de la Tarjeta */}
                        <div className="panel-body card" style={{ padding: '15px' }}>
                            <div className="row pictPrice" style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center' }}>

                              

                                {/* Columna Derecha: Imagen */}
                                <div className="col-xs-12 col-sm-6 text-center" style={{ marginTop: '10px', height: '100%' }}>
                                    <div style={{
                                        width: '100%',
                                        height: '100%',
                                        display: 'flex',
                                        alignItems: 'center',
                                        justifyContent: 'center',
                                        background: '#fafafa',
                                        borderRadius: '6px',
                                        border: '1px solid #eaeaea',
                                        overflow: 'hidden'
                                    }}>
                                        <img
                                            src={this.state.product?.pict || '/images/products/noImage.png'}
                                            alt={this.state.product?.productName || 'Producto'}
                                            style={{ maxHeight: '100%', maxWidth: '100%', objectFit: 'contain' }}
                                            onError={(e) => { e.target.src = '/images/products/noImage.png'; }}
                                        />
                                    </div>
                                </div>


                                {/* Columna Izquierda: Información, Precios y Stock */}
                                <div className="col-xs-12 col-sm-6">

                                    {/* Lista de Precios */}
                                    <div className="priceList" style={{ marginBottom: '14px' }}>
                                        <span style={
                                            {
                                                fontSize: '14px',
                                                fontWeight: 'bold',
                                                textTransform: 'uppercase',
                                                color: '#7f8c8d', display: 'block',
                                                marginBottom: '6px'
                                            }}>
                                            Lista de Precios
                                        </span>

                                        <ul className="list-group" style={{ margin: 0 }}>
                                            {this.state.prices && this.state.prices.map((item) => (
                                                <li
                                                    key={item.priceID || item.priceName}
                                                    className="list-group-item"
                                                    style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '8px 12px' }}
                                                >
                                                    <span style={{ color: '#555', fontSize: '14px' }}>{item.priceName}</span>
                                                    <span className="badge" style={{ backgroundColor: '#27ae60', fontSize: '13px', fontWeight: 'bold' }}>
                                                        {`L. ${(item.price || 0).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`}
                                                    </span>
                                                </li>
                                            ))}
                                        </ul>
                                    </div>

                                    <hr style={{ margin: '12px 0', borderColor: '#eee' }} />

                                    {/* Código de Barra */}
                                    {this.state.product?.productBarCode && (
                                        <div className="barcode" style={{ marginBottom: '8px', fontSize: '12px', color: '#666' }}>
                                            <span className="glyphicon glyphicon-barcode" style={{ marginRight: '6px' }}></span>
                                            {this.state.product.productBarCode}
                                        </div>
                                    )}

                                    {/* Existencias / Stock */}
                                    {this.state.isStock && (

                                        <div className="stock" style={{
                                            borderRadius: '4px',
                                            background: (this.state.product?.stock || 0) > 0 ? '#e8f5e9' : '#ffebee',
                                            color: (this.state.product?.stock || 0) > 0 ? '#2e7d32' : '#c62828',
                                            fontSize: '14px',
                                            fontWeight: '600'
                                        }}>
                                            <span className="glyphicon glyphicon-tasks" style={{ marginRight: '6px' }}></span>
                                            Existencias: {(this.state.product?.stock || 0).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
                                        </div>

                                    )}
                                                    <hr className="hrQty" style={{ display: "none", margin: '12px 0', borderColor: '#eee' }} />

                                                    {/* Cantidad / Stock */}
                                                    <div className="qty" style={{
                                                        display: 'none',
                                                    }}>
                                                        <span className="glyphicon glyphicon-ok-sign" style={{ marginRight: '6px' }}></span>
                                                    </div>
                                   
                                </div>



                            </div>
                        </div>

                    </div>
                </div>
               
            </>

         
        )
    }

    componentDidMount() {
       
       /* if (this.state.product.productID == 31826) {
            const prices = await fetch('/global/getProductPricesForCatalog?pid=' + this.state.product.productID + '&entId=' + this.entId, { method: 'post' });
            const pp = await prices.json();
            console.log(pp);
            this.setState({ prices: pp });
        }*/
        //console.log("componentDidMount - product");
    }
    componentDidUpdate() {
        //console.log("componentDidUpdate - products");
    }
    componentWillUnmount() {
        //console.log("componentWillUnmount - Products");
    }

    /*
       <div className='col-lg-4 border-bottom prodCard'>
                <div className='card m-2'>
                    <div className='card-body'>

                        <div className="row">
                            <div className="col-lg-4">
                                <img className="card-img" src={((this.state.product.pict == null) ?'/images/products/noImage.png':this.state.product.pict)} alt="producto" />
                            </div>
                            <div className="col-lg-8">
                                <div className="pt-2 border-top">
                                    <b> {this.state.product.productName} </b>
                                </div>
                                <div>
                                    <ul className="list-group">
                                            {this.state.prices.map((item) => {
                                                console.log(item);
                                                return (<div className="row list-group-item">
                                                    <div className="col-lg-6 col-md-4" key={item.priceID}> {item.priceName} </div>
                                                    <div className="col-lg-6 col-md-2" key={item.price}> {'L. ' +item.price.toFixed(2).replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,')} </div>
                                                </div>)
                                            })}
                                    </ul>
                                </div>
                            </div>
                        </div>

                    </div>

                </div>

            </div>
     */
}