<div class="page-header">
    <div>
        <a href="<?= APP_URL ?>/stock-takings" class="btn btn-ghost btn-sm mb-4" style="padding-left:0;">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
            Back to Stock Taking
        </a>
        <h1>New Stock Taking</h1>
        <div class="page-subtitle">Start a new stock counting session</div>
    </div>
</div>

<div class="card">
    <div class="card-header">
        <h3 class="card-title">Stock Taking Configuration</h3>
    </div>
    <form action="<?= APP_URL ?>/stock-takings/start" method="POST">
        <?= Security::csrfField() ?>
        <div class="card-body">
            <div class="form-group">
                <label class="form-label">Stock Taking Mode <span class="required">*</span></label>
                <div class="grid-2 gap-4">
                    <label class="radio-card">
                        <input type="radio" name="mode" value="category" checked>
                        <div class="radio-card-content">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:24px;">
                                <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path>
                            </svg>
                            <div>
                                <strong>By Category</strong>
                                <p class="text-sm text-muted">Products grouped by category for easier counting</p>
                            </div>
                        </div>
                    </label>
                    <label class="radio-card">
                        <input type="radio" name="mode" value="item">
                        <div class="radio-card-content">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:24px;">
                                <line x1="8" y1="6" x2="21" y2="6"></line>
                                <line x1="8" y1="12" x2="21" y2="12"></line>
                                <line x1="8" y1="18" x2="21" y2="18"></line>
                                <line x1="3" y1="6" x2="3.01" y2="6"></line>
                                <line x1="3" y1="12" x2="3.01" y2="12"></line>
                                <line x1="3" y1="18" x2="3.01" y2="18"></line>
                            </svg>
                            <div>
                                <strong>Item Wise</strong>
                                <p class="text-sm text-muted">Products listed individually in alphabetical order</p>
                            </div>
                        </div>
                    </label>
                </div>
            </div>

            <div class="form-group">
                <label class="form-label">Location <span class="required">*</span></label>
                <select name="location_id" class="form-control" required>
                    <option value="">Select Location...</option>
                    <?php foreach ($locations as $location): ?>
                        <option value="<?= $location['id'] ?>"><?= e($location['name']) ?></option>
                    <?php endforeach; ?>
                </select>
            </div>

            <div class="form-group">
                <label class="form-label">Notes (Optional)</label>
                <textarea name="notes" class="form-control" rows="3" placeholder="Add any notes about this stock taking session..."></textarea>
            </div>
        </div>
        <div class="card-footer">
            <a href="<?= APP_URL ?>/stock-takings" class="btn btn-ghost">Cancel</a>
            <button type="submit" class="btn btn-primary">Start Stock Taking</button>
        </div>
    </form>
</div>

<style>
.radio-card {
    display: block;
    cursor: pointer;
}

.radio-card input[type="radio"] {
    display: none;
}

.radio-card-content {
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    padding: 16px;
    display: flex;
    gap: 12px;
    transition: all 0.2s;
}

.radio-card input[type="radio"]:checked + .radio-card-content {
    border-color: #3b82f6;
    background-color: #eff6ff;
}

.radio-card-content svg {
    color: #6b7280;
    flex-shrink: 0;
}

.radio-card input[type="radio"]:checked + .radio-card-content svg {
    color: #3b82f6;
}
</style>
