<div class="row justify-content-center"><div class="col-lg-8"><div class="card"><div class="card-header"><h5 class="mb-0">New Match</h5></div><div class="card-body">
<form method="POST" action="/sports/matches" data-ajax="true"><?=csrf_field()?>
<div class="row g-3">
<div class="col-md-6"><label class="form-label">Sport <span class="text-danger">*</span></label><select name="sport_id" class="form-select" required id="matchSport"><option value="">--</option><?php foreach($sports as $s):?><option value="<?=$s['id']?>"><?=e($s['name_en'])?></option><?php endforeach;?></select></div>
<div class="col-md-6"><label class="form-label">Type</label><select name="match_type" class="form-select"><?php foreach(['league','friendly','tournament','playoff','final','exhibition'] as $t):?><option value="<?=$t?>"><?=ucfirst($t)?></option><?php endforeach;?></select></div>
<div class="col-md-6"><label class="form-label">Home Team <span class="text-danger">*</span></label><select name="home_team_id" class="form-select" required id="homeTeam"><option value="">-- Select sport first --</option></select></div>
<div class="col-md-6"><label class="form-label">Away Team <span class="text-danger">*</span></label><select name="away_team_id" class="form-select" required id="awayTeam"><option value="">-- Select sport first --</option></select></div>
<div class="col-md-4"><label class="form-label">Date <span class="text-danger">*</span></label><input type="date" name="match_date" class="form-control datepicker" required></div>
<div class="col-md-4"><label class="form-label">Start Time</label><input type="time" name="start_time" class="form-control"></div>
<div class="col-md-4"><label class="form-label">Facility</label><select name="facility_id" class="form-select"><option value="">--</option><?php foreach($facilities as $f):?><option value="<?=$f['id']?>"><?=e($f['name_en'])?></option><?php endforeach;?></select></div>
<div class="col-md-6"><label class="form-label">League</label><select name="league_id" class="form-select"><option value="">None</option><?php foreach($leagues as $l):?><option value="<?=$l['id']?>"><?=e($l['name'])?></option><?php endforeach;?></select></div>
<div class="col-md-3"><label class="form-label">Round</label><input type="number" name="round_number" class="form-control"></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>Save</button><a href="/sports/matches" class="btn btn-secondary">Cancel</a></div>
</form></div></div></div></div>
<script>
document.getElementById('matchSport').addEventListener('change',function(){
    const sportId=this.value;if(!sportId)return;
    fetch('/api/sports/teams/list?sport_id='+sportId).then(r=>r.json()).then(teams=>{
        ['homeTeam','awayTeam'].forEach(id=>{
            const sel=document.getElementById(id);sel.innerHTML='<option value="">--</option>';
            teams.forEach(t=>{sel.innerHTML+='<option value="'+t.id+'">'+t.name_en+'</option>';});
        });
    });
});
</script>