<?php
/**
 * Add/Edit ingredient modal.
 *
 * @package RestaurantCosting
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

$food_types = RC_Ingredient_Repository::food_type_options();
?>
<div id="rc-ingredient-modal" class="rc-modal" role="dialog" aria-modal="true" aria-labelledby="rc-ingredient-modal-title" hidden>
	<div class="rc-modal-backdrop" tabindex="-1"></div>
	<div class="rc-modal-dialog" style="max-width: 600px;">
		<header class="rc-modal-header">
			<h2 id="rc-ingredient-modal-title"><?php esc_html_e( 'Add ingredient', 'restaurant-costing' ); ?></h2>
			<button type="button" class="rc-modal-close" aria-label="Close">&times;</button>
		</header>
		<form id="rc-ingredient-modal-form">
			<input type="hidden" id="rc-ingredient-id" name="id" value="" />
			<div class="rc-modal-body">
				<p class="rc-modal-error" id="rc-ingredient-modal-error" hidden></p>
				
				<table class="form-table">
					<!-- CORE INFO -->
					<tr>
						<th scope="row"><label for="rc-new-ingredient-name"><?php esc_html_e( 'Name', 'restaurant-costing' ); ?> *</label></th>
						<td><input type="text" id="rc-new-ingredient-name" name="name" class="regular-text" required /></td>
					</tr>
					<tr>
						<th scope="row"><label for="rc-new-ingredient-type"><?php esc_html_e( 'Product Type', 'restaurant-costing' ); ?></label></th>
						<td>
							<select id="rc-new-ingredient-type" name="food_type">
								<?php foreach ( $food_types as $type ) : ?>
									<option value="<?php echo esc_attr( $type ); ?>"><?php echo esc_html( $type ); ?></option>
								<?php endforeach; ?>
							</select>
						</td>
					</tr>
					<tr>
						<th scope="row"><label for="rc-new-ingredient-supplier"><?php esc_html_e( 'Supplier', 'restaurant-costing' ); ?></label></th>
						<td><input type="text" id="rc-new-ingredient-supplier" name="supplier" class="regular-text" /></td>
					</tr>

					<!-- COSTING SECTION -->
					<tr style="border-top: 2px solid #eee;"><th colspan="2" style="padding-top:20px; font-weight:bold; text-align:left;"><?php esc_html_e( 'Costing & Sizing', 'restaurant-costing' ); ?></th></tr>
					<tr>
						<th scope="row"><label for="rc-new-ingredient-unit"><?php esc_html_e( 'Reference unit', 'restaurant-costing' ); ?></label></th>
						<td>
							<select id="rc-new-ingredient-unit" name="unit">
								<option value="g">g</option>
								<option value="ml">ml</option>
								<option value="ea">ea</option>
							</select>
						</td>
					</tr>
					<tr>
						<th scope="row"><label for="rc-new-ingredient-weight"><?php esc_html_e( 'Weight (grams/ml/ea)', 'restaurant-costing' ); ?> *</label></th>
						<td><input type="number" id="rc-new-ingredient-weight" name="weight_grams" step="0.01" min="0.01" value="100" class="small-text" required /></td>
					</tr>
					<tr>
						<th scope="row"><label for="rc-new-ingredient-size"><?php esc_html_e( 'Product Size', 'restaurant-costing' ); ?></label></th>
						<td><input type="text" id="rc-new-ingredient-size" name="size_label" class="regular-text" placeholder="ie. 355ml" /></td>
					</tr>
					<tr>
						<th scope="row"><label for="rc-new-ingredient-package-cost"><?php esc_html_e( 'Package Cost', 'restaurant-costing' ); ?></label></th>
						<td><input type="number" id="rc-new-ingredient-package-cost" name="package_cost" step="0.01" min="0" class="small-text" /></td>
					</tr>
					<tr>
						<th scope="row"><label for="rc-new-ingredient-package-size"><?php esc_html_e( 'Package Size (qty)', 'restaurant-costing' ); ?></label></th>
						<td><input type="number" id="rc-new-ingredient-package-size" name="package_size" step="0.01" min="0" class="small-text" /></td>
					</tr>
					<tr>
						<th scope="row"><label for="rc-new-ingredient-cost"><?php esc_html_e( 'Food cost', 'restaurant-costing' ); ?> *</label></th>
						<td>
							<div style="display:flex; gap:10px; align-items:center;">
								<input type="number" id="rc-new-ingredient-cost" name="food_cost" step="0.01" min="0" value="0" class="small-text" required />
								<button type="button" id="rc-calc-cost" class="button button-small"><?php esc_html_e( 'Calculate', 'restaurant-costing' ); ?></button>
							</div>
						</td>
					</tr>

					<?php if ( ! get_option( 'rc_hide_nutrition', 0 ) ) : ?>
					<!-- NUTRITION SECTION -->
					<tr style="border-top: 2px solid #eee;"><th colspan="2" style="padding-top:20px; font-weight:bold; text-align:left;"><?php esc_html_e( 'Nutrition (per reference amount)', 'restaurant-costing' ); ?></th></tr>
					<tr>
						<td>
							<div class="rc-nutrition-grid" style="display:grid; grid-template-columns: 1fr 1fr; gap: 10px;">
								<div class="nutri-field">
									<label><?php esc_html_e( 'Calories', 'restaurant-costing' ); ?></label>
									<input type="number" id="rc-nutri-calories" name="calories" step="0.1" class="small-text" />
								</div>
								<div class="nutri-field">
									<label><?php esc_html_e( 'Protein (g)', 'restaurant-costing' ); ?></label>
									<input type="number" id="rc-nutri-protein" name="protein_grams" step="0.1" class="small-text" />
								</div>
								<div class="nutri-field">
									<label><?php esc_html_e( 'Total Fat (g)', 'restaurant-costing' ); ?></label>
									<input type="number" id="rc-nutri-fat" name="fat_grams" step="0.1" class="small-text" />
								</div>
								<div class="nutri-field">
									<label><?php esc_html_e( 'Sat. Fat (g)', 'restaurant-costing' ); ?></label>
									<input type="number" id="rc-nutri-satfat" name="saturated_fat_grams" step="0.1" class="small-text" />
								</div>
								<div class="nutri-field">
									<label><?php esc_html_e( 'Carbs (g)', 'restaurant-costing' ); ?></label>
									<input type="number" id="rc-nutri-carbs" name="carb_grams" step="0.1" class="small-text" />
								</div>
								<div class="nutri-field">
									<label><?php esc_html_e( 'Fiber (g)', 'restaurant-costing' ); ?></label>
									<input type="number" id="rc-nutri-fiber" name="fiber_grams" step="0.1" class="small-text" />
								</div>
								<div class="nutri-field">
									<label><?php esc_html_e( 'Sugar (g)', 'restaurant-costing' ); ?></label>
									<input type="number" id="rc-nutri-sugar" name="sugar_grams" step="0.1" class="small-text" />
								</div>
								<div class="nutri-field">
									<label><?php esc_html_e( 'Cholest (mg)', 'restaurant-costing' ); ?></label>
									<input type="number" id="rc-nutri-chol" name="cholesterol_mg" step="0.1" class="small-text" />
								</div>
								<div class="nutri-field">
									<label><?php esc_html_e( 'Sodium (mg)', 'restaurant-costing' ); ?></label>
									<input type="number" id="rc-nutri-sodium" name="sodium_mg" step="0.1" class="small-text" />
								</div>
							</div>
						</td>
						<td></td>
					</tr>
					<?php endif; ?>
				</table>
			</div>
			<footer class="rc-modal-footer">
				<button type="submit" id="rc-modal-submit" class="button button-primary"><?php esc_html_e( 'Save ingredient', 'restaurant-costing' ); ?></button>
				<button type="button" class="button rc-modal-cancel"><?php esc_html_e( 'Cancel', 'restaurant-costing' ); ?></button>
			</footer
		</form>
	</div>
</div>

<style>
    .nutri-field label { display: block; font-size: 11px; color: #666; text-transform: uppercase; margin-bottom: 2px; }
    .nutri-field input { width: 100% !important; }
</style>
