<?php
require_once("../php/db_connect.php");

if (session_status() === PHP_SESSION_NONE) {
    session_start();
}

$shopId = isset($_GET['shop_id']) ? (int)$_GET['shop_id'] : 0;
$serviceId = isset($_GET['service_id']) ? (int)$_GET['service_id'] : 0;

$shop = null;

if ($shopId > 0) {
    $shopStmt = $conn->prepare("
        SELECT id, shop_name, shop_type
        FROM users
        WHERE id = ?
        LIMIT 1
    ");
    $shopStmt->bind_param("i", $shopId);
    $shopStmt->execute();
    $shopResult = $shopStmt->get_result();
    $shop = $shopResult->fetch_assoc();
}

$selectedService = null;

if ($serviceId > 0) {
    $serviceStmt = $conn->prepare("
        SELECT *
        FROM services
        WHERE id = ?
          AND owner_shop_id = ?
          AND status = 'active'
        LIMIT 1
    ");
    $serviceStmt->bind_param("ii", $serviceId, $shopId);
    $serviceStmt->execute();
    $serviceResult = $serviceStmt->get_result();
    $selectedService = $serviceResult->fetch_assoc();
}
?>


<div class="create-order-page">
    <div class="create-order-header">
        
        <h1>Create Order</h1>
        <p>Place your order for <?php echo htmlspecialchars($shop["shop_name"] ?? "this shop"); ?></p>
    </div>

    <div class="create-order-card">
        <div class="order-shop-summary">
            <h2><?php echo htmlspecialchars($shop["shop_name"] ?? "Unnamed Shop"); ?></h2>
            <p><strong>Shop Type:</strong> <?php echo htmlspecialchars($shop["shop_type"] ?? "Not specified"); ?></p>
           
        </div>

        <form class="create-order-form" action="customer.php?page=customer-order-summary" method="POST" enctype="multipart/form-data">
            <input type="hidden" name="shop_id" value="<?php echo (int)$shopId; ?>">
            <input type="hidden" name="service_id[]" value="<?php echo (int)($selectedService['id'] ?? 0); ?>">

<input type="hidden" name="service_type[]" value="<?php echo htmlspecialchars($selectedService['service_type'] ?? ''); ?>">

<input type="hidden" name="service_name[]" value="<?php echo htmlspecialchars($selectedService['service_name'] ?? ''); ?>">

            <div class="form-group full">
                <label>Selected Service</label>
                <div class="selected-service-display">
                    <?php
                        if ($selectedService) {
                            echo htmlspecialchars($selectedService['service_name']);
                            if (!empty($selectedService['service_type'])) {
                                echo ' (' . htmlspecialchars($selectedService['service_type']) . ')';
                            }
                        } else {
                            echo 'No service selected';
                        }
                    ?>
                </div>
            </div>

            <div class="form-grid">
                <div class="form-group">
                    <label for="quantity">Quantity</label>
                   <input type="number" name="quantity[]" id="quantity" min="1" value="1" required>
                </div>

               
<div class="form-group" id="jersey-size-group" style="display:none;">
    <label>Size</label>
    <div class="jersey-size-options">
        <label class="jersey-size-box">
            <input type="radio" name="size[]" value="S">
            <span>S</span>
        </label>

        <label class="jersey-size-box">
            <input type="radio" name="size" value="M">
            <span>M</span>
        </label>

        <label class="jersey-size-box">
            <input type="radio" name="size" value="L">
            <span>L</span>
        </label>

        <label class="jersey-size-box">
            <input type="radio" name="size" value="XL">
            <span>XL</span>
        </label>
    </div>
</div>

                <div class="form-group">
                    <label for="due_date">Due Date</label>
                    <input type="date" name="due_date" id="due_date">
                </div>

                <div class="form-group">
                    <label for="reference_file">Design / Reference File</label>
                    <input type="file" name="reference_file" id="reference_file">
                </div>

                <div class="form-group full">
                    <label for="notes">Notes / Custom Instructions</label>
                    <textarea name="notes" id="notes" rows="5" placeholder="Enter instructions for your order"></textarea>
                </div>
            </div>

            <div class="form-actions">
                <button type="submit" class="btn-primary">Proceed to Order Summary</button>
                <a href="customer.php?page=shop_view-details&id=<?php echo $shopId; ?>" class="btn-secondary">Cancel</a>
            </div>
        </form>
    </div>
</div>





<style>
.jersey-size-options {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.jersey-size-box {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.jersey-size-box input[type="radio"] {
    display: none;
}

.jersey-size-box span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 30px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    background: #fff;
    color: #999;
    font-size: 18px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.jersey-size-box input[type="radio"]:checked + span {
    border: 2px solid #16a7e3;
    color: #16a7e3;
    background: #fff;
}

.jersey-size-box input[type="radio"]:checked + span::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 0;
    height: 0;
    border-left: 16px solid transparent;
    border-top: 16px solid transparent;
    border-right: 16px solid #16a7e3;
    border-bottom: 16px solid #16a7e3;
    border-bottom-right-radius: 4px;
}

.jersey-size-box input[type="radio"]:checked + span::before {
    content: "✓";
    position: absolute;
    right: 3px;
    bottom: 1px;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    z-index: 2;
}
</style>


<script>
document.addEventListener("DOMContentLoaded", function () {
    const serviceSelect = document.getElementById("service_id");
    const quantityInput = document.getElementById("quantity");
    const selectedPrice = document.getElementById("selected-price");
    const estimatedTotal = document.getElementById("estimated-total");

    function updateTotals() {
        const selectedOption = serviceSelect.options[serviceSelect.selectedIndex];
        const price = parseFloat(selectedOption?.getAttribute("data-price") || 0);
        const quantity = parseInt(quantityInput.value || 0, 10);

        selectedPrice.textContent = "₱" + price.toFixed(2);
        estimatedTotal.textContent = "₱" + (price * quantity).toFixed(2);
    }

    serviceSelect.addEventListener("change", updateTotals);
    quantityInput.addEventListener("input", updateTotals);
    updateTotals();
});
</script>