<?= $this->include('/Styles/header'); ?>

<!-- SweetAlert2 CDN -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<style>
.container { max-width: auto; margin: 50px auto; }
.card { border: 1px solid #ddd; border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); overflow: hidden; }
.card-header { background-color: #be7d40; color: #fff; padding: 15px 20px; font-size: 20px; font-weight: 600; }
.card-body { padding: 25px; }
.form-control { width: 100%; padding: 8px 12px; margin-bottom: 12px; border: 1px solid #ccc; border-radius: 6px; font-size: 14px; }
.form-label { font-weight: 500; margin-bottom: 5px; display: block; }
.btn { padding: 6px 14px; border-radius: 6px; border: none; cursor: pointer; font-weight: 500; }
.btn-primary { background-color: #0d6efd; color: #fff; }
.btn-primary:hover { background-color: #0b5ed7; }
.btn-success { background-color: #198754; color: #fff; }
.btn-success:hover { background-color: #157347; }
.btn-danger { background-color: #dc3545; color: #fff; }
.btn-danger:hover { background-color: #bb2d3b; }
.variant { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.variant input, .variant select { flex: 1; padding: 8px 10px; }
.variant button { flex: 0 0 auto; }
</style>

<div class="container">
    <div class="card">
        <div class="card-header">Add Product</div>
        <div class="card-body">

            <form method="post" action="<?= site_url('products/save') ?>" enctype="multipart/form-data">

                <label class="form-label">Category</label>
                <select name="category_id" class="form-control" required>
                    <option value="">-- Select Category --</option>
                    <?php foreach($categories as $cat): ?>
                        <option value="<?= $cat['id'] ?>"><?= $cat['category_name'] ?></option>
                    <?php endforeach; ?>
                </select>

                <label class="form-label">Product Name</label>
                <input type="text" name="name" class="form-control" placeholder="Enter Product Name" required>

                <label class="form-label">Product Image</label>
                <input type="file" name="image" class="form-control">
                  <br><br>
    <button type="button" class="btn btn-primary" onclick="addVariant()">+ Add Variant</button>
              <br/> <br/>

            
                <div id="variants">
                    <div class="variant">
                        <input type="text" name="sku_name[]" class="form-control" placeholder="SKU Name" required>
                        <input type="text" name="unit[]" class="form-control" placeholder="Unit (e.g., 250gm)">
                        <input type="number" step="0.01" name="price[]" class="form-control" placeholder="Price" required>
                        <input type="number" step="0.01" name="offer_price[]" class="form-control" placeholder="Offer Price">
                        <input type="number" step="0.01" name="quantity[]" class="form-control" placeholder="Quantity" required>
                        <button type="button" class="btn btn-danger" onclick="this.parentNode.remove()">Remove</button>
                    </div>
                </div>

                
                <button type="submit" class="btn btn-success">Sell Product</button>
            </form>

        </div>
    </div>
</div>

<script>
function addVariant(){
    const container = document.getElementById('variants');
    const div = document.createElement('div');
    div.className = 'variant';
    div.innerHTML = `
        <input type="text" name="sku_name[]" class="form-control" placeholder="SKU Name" required>
        <input type="text" name="unit[]" class="form-control" placeholder="Unit (e.g., 250gm)">
        <input type="number" step="0.01" name="price[]" class="form-control" placeholder="Price" required>
        <input type="number" step="0.01" name="offer_price[]" class="form-control" placeholder="Offer Price">
        <input type="number" step="0.01" name="quantity[]" class="form-control" placeholder="Quantity" required>
        <button type="button" class="btn btn-danger" onclick="this.parentNode.remove()">Remove</button>
    `;
    container.appendChild(div);
}

// SweetAlert for flashdata
<?php if(session()->getFlashdata('sweetalert')): 
    $alert = session()->getFlashdata('sweetalert'); ?>
Swal.fire({
    icon: '<?= $alert['type'] ?>',
    title: '<?= $alert['type']=='success'?'Success':'Error' ?>',
    text: '<?= $alert['msg'] ?>',
    timer: 3000,
    timerProgressBar: true,
    showConfirmButton: false
});
<?php endif; ?>
</script>
