<?php
/**
 * Add ingredient modal (shared).
 *
 * @package RestaurantCosting
 */

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

$food_types     = RC_Ingredient_Repository::food_type_options();
$supplier_list  = RC_Supplier_Repository::get_all();
$area_list      = RC_Area_Repository::get_all();
?>
<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">
		<header class="rc-modal-header">
			<h2 id="rc-ingredient-modal-title"><?php esc_html_e( 'Ingredient Details', 'restaurant-costing' ); ?></h2>
			<button type="button" class="rc-modal-close" aria-label="<?php esc_attr_e( 'Close', 'restaurant-costing' ); ?>">&times;</button>
		</header>
		<form id="rc-ingredient-modal-form">
			<input type="hidden" id="rc-new-ingredient-id" name="id" value="">
			
			<div class="rc-modal-body">
				<div id="rc-sub-recipe-notice" class="notice notice-info inline" style="display:none; margin:0 0 12px;">
					<p style="margin:6px 0; display:flex; align-items:center; gap:12px;">
						<span><?php esc_html_e( 'This is a sub-recipe ingredient — its values are automatically derived from the source recipe.', 'restaurant-costing' ); ?></span>
						<a href="#" id="rc-edit-recipe-button-top" class="button button-primary button-small" style="flex-shrink:0;"><?php esc_html_e( 'Edit Source Recipe &rarr;', 'restaurant-costing' ); ?></a>
					</p>
				</div>
				<p class="rc-modal-error" id="rc-ingredient-modal-error" hidden></p>
				<table class="form-table" role="presentation">
					<!-- Core info -->
					<tr>
						<th scope="row"><label for="rc-new-ingredient-name"><?php esc_html_e( 'Name', 'restaurant-costing' ); ?> <span class="required">*</span></label></th>
						<td><input type="text" id="rc-new-ingredient-name" name="name" class="regular-text" required autocomplete="off" /></td>
					</tr>
					<tr>
						<th scope="row"><label for="rc-new-ingredient-type"><?php esc_html_e( 'Product Type', 'restaurant-costing' ); ?></label></th>
						<td style="display: flex; gap: 6px; align-items: center;">
							<select id="rc-new-ingredient-type" name="food_type" style="flex: 1;">
								<?php foreach ( $food_types as $type ) : ?>
									<option value="<?php echo esc_attr( $type ); ?>"><?php echo esc_html( $type ); ?></option>
								<?php endforeach; ?>
							</select>
							<button type="button" id="rc-add-food-type" class="button button-small" title="<?php esc_attr_e( 'Add new product type', 'restaurant-costing' ); ?>">+</button>
						</td>
					</tr>
					<tr id="rc-new-food-type-row" style="display: none;">
						<th scope="row"><label for="rc-new-food-type-input"><?php esc_html_e( 'New product type', 'restaurant-costing' ); ?></label></th>
						<td style="display: flex; gap: 6px; align-items: center;">
							<input type="text" id="rc-new-food-type-input" class="regular-text" style="flex: 1;" />
							<button type="button" id="rc-save-food-type" class="button button-primary button-small"><?php esc_html_e( 'Save', 'restaurant-costing' ); ?></button>
							<button type="button" id="rc-cancel-food-type" class="button button-small"><?php esc_html_e( 'Cancel', 'restaurant-costing' ); ?></button>
						</td>
					</tr>
					<tr>
						<th scope="row"><label for="rc-new-ingredient-supplier"><?php esc_html_e( 'Supplier', 'restaurant-costing' ); ?></label></th>
						<td style="display: flex; gap: 6px; align-items: center;">
							<select id="rc-new-ingredient-supplier" name="supplier" style="flex: 1;">
								<option value=""><?php esc_html_e( 'Select supplier...', 'restaurant-costing' ); ?></option>
								<?php foreach ( $supplier_list as $sup ) : ?>
									<option value="<?php echo esc_attr( $sup->business_name ); ?>"><?php echo esc_html( $sup->business_name ); ?></option>
								<?php endforeach; ?>
							</select>
							<button type="button" id="rc-add-supplier" class="button button-small" title="<?php esc_attr_e( 'Add new supplier', 'restaurant-costing' ); ?>">+</button>
						</td>
					</tr>
					<tr id="rc-new-supplier-row" style="display: none;">
						<th scope="row"><label for="rc-new-supplier-input"><?php esc_html_e( 'New supplier', 'restaurant-costing' ); ?></label></th>
						<td style="display: flex; gap: 6px; align-items: center;">
							<input type="text" id="rc-new-supplier-input" class="regular-text" style="flex: 1;" />
							<button type="button" id="rc-save-supplier" class="button button-primary button-small"><?php esc_html_e( 'Save', 'restaurant-costing' ); ?></button>
							<button type="button" id="rc-cancel-supplier" class="button button-small"><?php esc_html_e( 'Cancel', 'restaurant-costing' ); ?></button>
						</td>
					</tr>
					<tr>
						<th scope="row"><label for="rc-new-ingredient-area"><?php esc_html_e( 'Area', 'restaurant-costing' ); ?></label></th>
						<td style="display: flex; gap: 6px; align-items: center;">
							<select id="rc-new-ingredient-area" name="area" style="flex: 1;">
								<option value=""><?php esc_html_e( 'No area', 'restaurant-costing' ); ?></option>
								<?php foreach ( $area_list as $area ) : ?>
									<option value="<?php echo esc_attr( $area->name ); ?>"><?php echo esc_html( $area->name ); ?></option>
								<?php endforeach; ?>
							</select>
							<button type="button" id="rc-add-area" class="button button-small" title="<?php esc_attr_e( 'Add new area', 'restaurant-costing' ); ?>">+</button>
						</td>
					</tr>
					<tr id="rc-new-area-row" style="display: none;">
						<th scope="row"><label for="rc-new-area-input"><?php esc_html_e( 'New area', 'restaurant-costing' ); ?></label></th>
						<td style="display: flex; gap: 6px; align-items: center;">
							<input type="text" id="rc-new-area-input" class="regular-text" style="flex: 1;" />
							<button type="button" id="rc-save-area" class="button button-primary button-small"><?php esc_html_e( 'Save', 'restaurant-costing' ); ?></button>
							<button type="button" id="rc-cancel-area" class="button button-small"><?php esc_html_e( 'Cancel', 'restaurant-costing' ); ?></button>
						</td>
					</tr>
					<!-- Costing -->
					<tr style="border-top: 2px solid #eee;"><th colspan="2" style="padding-top:16px; font-weight:bold; text-align:left;"><?php esc_html_e( 'Costing', '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-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="<?php esc_attr_e( 'ie. 355ml', 'restaurant-costing' ); ?>" /></td>
					</tr>
					<tr>
						<th scope="row"><label for="rc-new-ingredient-weight"><?php esc_html_e( 'Weight (grams/ml/ea)', 'restaurant-costing' ); ?> <span class="required">*</span></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 />
							<span class="rc-weight-unit-label">g</span>
						</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-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-cost"><?php esc_html_e( 'Food cost', 'restaurant-costing' ); ?> <span class="required">*</span></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>
							<p class="description"><?php esc_html_e( 'Calculate: (Package Cost ÷ Package Size) × Weight', 'restaurant-costing' ); ?></p>
						</td>
					</tr>
					<tr>
						<th scope="row"><label for="rc-new-ingredient-min-level"><?php esc_html_e( 'Min Level', 'restaurant-costing' ); ?></label></th>
						<td><input type="number" id="rc-new-ingredient-min-level" name="min_level" step="1" min="0" value="0" class="small-text" /></td>
					</tr>

					<?php if ( ! get_option( 'rc_hide_nutrition', 0 ) ) : ?>
					<!-- Nutrition -->
					<tr style="border-top: 2px solid #eee;"><th colspan="2" style="padding-top:16px; font-weight:bold; text-align:left;"><?php esc_html_e( 'Nutrition (per reference amount)', 'restaurant-costing' ); ?></th></tr>
					<tr>
						<td colspan="2">
							<div class="rc-nutrition-grid" style="display:grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px 12px;">
								<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( '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( 'Trans Fat (g)', 'restaurant-costing' ); ?></label><input type="number" id="rc-nutri-transfat" name="trans_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( '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( 'Sodium (mg)', 'restaurant-costing' ); ?></label><input type="number" id="rc-nutri-sodium" name="sodium_mg" step="0.1" class="small-text" /></div>
								<div class="nutri-field"><label><?php esc_html_e( 'Vit A (RE)', 'restaurant-costing' ); ?></label><input type="number" id="rc-nutri-vita" name="vit_a" step="0.1" class="small-text" /></div>
								<div class="nutri-field"><label><?php esc_html_e( 'Vit C (mg)', 'restaurant-costing' ); ?></label><input type="number" id="rc-nutri-vitc" name="vit_c_mg" step="0.1" class="small-text" /></div>
								<div class="nutri-field"><label><?php esc_html_e( 'Potassium (mg)', 'restaurant-costing' ); ?></label><input type="number" id="rc-nutri-potassium" name="potassium_mg" step="0.1" class="small-text" /></div>
								<div class="nutri-field"><label><?php esc_html_e( 'Calcium (mg)', 'restaurant-costing' ); ?></label><input type="number" id="rc-nutri-calcium" name="calcium_mg" step="0.1" class="small-text" /></div>
								<div class="nutri-field"><label><?php esc_html_e( 'Iron (mg)', 'restaurant-costing' ); ?></label><input type="number" id="rc-nutri-iron" name="iron_mg" step="0.1" class="small-text" /></div>
							</div>
						</td>
					</tr>
					<?php endif; ?>

					<!-- Ingredients text -->
					<tr>
						<th scope="row"><label for="rc-new-ingredient-ingredients-text"><?php esc_html_e( 'Ingredients', 'restaurant-costing' ); ?></label></th>
						<td><textarea id="rc-new-ingredient-ingredients-text" name="ingredients_text" rows="3" class="large-text"></textarea></td>
					</tr>
				</table>
			</div>
			<footer class="rc-modal-footer">
				<button type="button" id="rc-edit-recipe-button" class="button button-primary" style="display:none;"><?php esc_html_e( 'Edit Source Recipe &rarr;', 'restaurant-costing' ); ?></button>
				<div style="flex:1;"></div>
				<button type="submit" id="rc-save-ingredient-btn" class="button button-primary"><?php esc_html_e( 'Save', 'restaurant-costing' ); ?></button>
				<button type="button" id="rc-copy-ingredient" class="button" style="display:none;"><?php esc_html_e( 'Copy to New', 'restaurant-costing' ); ?></button>
				<button type="button" class="button rc-modal-cancel"><?php esc_html_e( 'Cancel', 'restaurant-costing' ); ?></button>
				<button type="button" id="rc-delete-ingredient" class="button" style="display:none;"><?php esc_html_e( 'Delete', 'restaurant-costing' ); ?></button>
			</footer>
			<div class="rc-prev-next" style="display:none;">
				<a href="#" id="rc-prev-ingredient">&larr; Previous Ingredient</a>
				<a href="#" id="rc-next-ingredient">Next Ingredient &rarr;</a>
			</div>
		</form>
	</div>
</div>

<style>
	/* Inline: disabled state is dynamically toggled by JS (sub-recipe mode),
	   not a static foundation concern. */
	#rc-ingredient-modal input:disabled,
	#rc-ingredient-modal select:disabled,
	#rc-ingredient-modal textarea:disabled { opacity: 0.7; }
	/* Inline: delete button color is component-specific; exists only in this modal. */
	#rc-ingredient-modal #rc-delete-ingredient { color: #e03e3e; border-color: #e03e3e; background: #fff; }
	#rc-ingredient-modal #rc-delete-ingredient:hover { background: #e03e3e; color: #fff; }
	/* Inline: nutrition grid labels are layout-only, no theme impact. */
	.nutri-field label { display: block; font-size: 11px; color: #50575e; text-transform: uppercase; margin-bottom: 2px; }
	.nutri-field input { width: 100% !important; }
</style>
