<div class="row justify-content-center">
<div class="col-lg-8">
<div class="card">
    <div class="card-header"><h5 class="mb-0"><i class="fas fa-plus me-2"></i><?= lang('sports.create') ?></h5></div>
    <div class="card-body">
        <form method="POST" action="/sports" data-ajax="true">
            <?= csrf_field() ?>
            <div class="row g-3">
                <div class="col-md-4">
                    <label class="form-label">Sport Code <span class="text-danger">*</span></label>
                    <input type="text" name="sport_code" class="form-control" required maxlength="20">
                    <div class="invalid-feedback" data-field="sport_code"></div>
                </div>
                <div class="col-md-4">
                    <label class="form-label">Category <span class="text-danger">*</span></label>
                    <select name="category_id" class="form-select" required>
                        <option value="">-- Select --</option>
                        <?php foreach ($categories as $c): ?>
                        <option value="<?= $c['id'] ?>"><?= e($c['name_en']) ?></option>
                        <?php endforeach; ?>
                    </select>
                    <div class="invalid-feedback" data-field="category_id"></div>
                </div>
                <div class="col-md-4">
                    <label class="form-label">Gender Restriction</label>
                    <select name="gender_restriction" class="form-select">
                        <option value="both">Both</option>
                        <option value="male">Male</option>
                        <option value="female">Female</option>
                        <option value="mixed">Mixed</option>
                    </select>
                </div>
                <div class="col-md-6">
                    <label class="form-label">Name (English) <span class="text-danger">*</span></label>
                    <input type="text" name="name_en" class="form-control" required>
                    <div class="invalid-feedback" data-field="name_en"></div>
                </div>
                <div class="col-md-6">
                    <label class="form-label">Name (Arabic) <span class="text-danger">*</span></label>
                    <input type="text" name="name_ar" class="form-control" dir="rtl" required>
                    <div class="invalid-feedback" data-field="name_ar"></div>
                </div>
                <div class="col-12">
                    <label class="form-label">Description (English)</label>
                    <textarea name="description_en" class="form-control" rows="3"></textarea>
                </div>
                <div class="col-md-4">
                    <label class="form-label">Min Players</label>
                    <input type="number" name="min_players" class="form-control" min="1">
                </div>
                <div class="col-md-4">
                    <label class="form-label">Max Players</label>
                    <input type="number" name="max_players" class="form-control" min="1">
                </div>
                <div class="col-md-4">
                    <label class="form-label">Sort Order</label>
                    <input type="number" name="sort_order" class="form-control" value="0">
                </div>
                <div class="col-md-4">
                    <div class="form-check mt-4">
                        <input type="checkbox" name="team_sport" value="1" class="form-check-input" id="teamSport">
                        <label class="form-check-label" for="teamSport">Team Sport</label>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-check mt-4">
                        <input type="checkbox" name="requires_medical_clearance" value="1" class="form-check-input" id="medClear">
                        <label class="form-check-label" for="medClear">Requires Medical Clearance</label>
                    </div>
                </div>
            </div>
            <div class="mt-4 d-flex gap-2">
                <button type="submit" class="btn btn-primary"><i class="fas fa-save me-1"></i><?= lang('common.save') ?></button>
                <a href="/sports" class="btn btn-secondary"><?= lang('common.cancel') ?></a>
            </div>
        </form>
    </div>
</div>
</div>
</div>