@extends('layouts.admin')

@section('title','Create Member')

@section('content')
<div class="dashboard-header" style="margin-bottom: 24px; display: flex; justify-content: space-between; align-items: center;">
    <div>
        <nav style="font-size:0.8rem; color:var(--text-muted); margin-bottom:4px;">
            <a href="{{ route('admin.members.index') }}" style="color:var(--text-muted); text-decoration:none;">Members</a>
            <span style="margin:0 6px;">/</span>
            <span style="color:var(--primary); font-weight:600;">Create</span>
        </nav>
        <h1 style="font-family:'Oswald',sans-serif; font-size:2rem; color:var(--primary); margin:0;">Create Member</h1>
    </div>
    <a href="{{ route('admin.members.index') }}" class="btn btn-outline">
        <i class="fas fa-arrow-left"></i> Back
    </a>
</div>

@if($errors->any())
<div class="badge badge-red" style="padding: 12px; margin-bottom: 24px; display: block; border-radius: var(--radius); text-transform: none; letter-spacing: normal;">
    <ul style="margin:0; padding-left:18px; font-weight: 500;">
        @foreach($errors->all() as $error)
            <li>{{ $error }}</li>
        @endforeach
    </ul>
</div>
@endif

<form method="POST" action="{{ route('admin.members.store') }}" enctype="multipart/form-data">
    @csrf
    <div class="admin-card">
        <div class="admin-card-header">
            <span class="admin-card-title"><i class="fas fa-user" style="color:var(--primary);margin-right:8px;"></i> Member Details</span>
        </div>
        <div class="admin-card-body">
            <div style="display:grid; grid-template-columns:1fr 1fr; gap:20px;">
                <div class="form-group" style="margin-bottom:0;">
                    <label class="form-label">First Name <span style="color:var(--secondary);">*</span></label>
                    <input type="text" name="first_name" class="form-control" value="{{ old('first_name') }}" required>
                </div>
                <div class="form-group" style="margin-bottom:0;">
                    <label class="form-label">Last Name <span style="color:var(--secondary);">*</span></label>
                    <input type="text" name="last_name" class="form-control" value="{{ old('last_name') }}" required>
                </div>
                <div class="form-group" style="margin-bottom:0;">
                    <label class="form-label">Email</label>
                    <input type="email" name="email" class="form-control" value="{{ old('email') }}">
                </div>
                <div class="form-group" style="margin-bottom:0;">
                    <label class="form-label">Phone</label>
                    <input type="text" name="phone" class="form-control" value="{{ old('phone') }}">
                </div>
                <div class="form-group" style="margin-bottom:0;">
                    <label class="form-label">Gender <span style="color:var(--secondary);">*</span></label>
                    <select name="gender" class="form-control" required>
                        <option value="male" {{ old('gender') == 'male' ? 'selected' : '' }}>Male</option>
                        <option value="female" {{ old('gender') == 'female' ? 'selected' : '' }}>Female</option>
                        <option value="other" {{ old('gender') == 'other' ? 'selected' : '' }}>Other</option>
                    </select>
                </div>
                <div class="form-group" style="margin-bottom:0;">
                    <label class="form-label">Date of Birth</label>
                    <input type="date" name="dob" class="form-control" value="{{ old('dob') }}">
                </div>
                <div class="form-group" style="margin-bottom:0;">
                    <label class="form-label">District <span style="color:var(--secondary);">*</span></label>
                    <select name="district_id" class="form-control" required>
                        <option value="">Select district</option>
                        @foreach($districts as $d)
                            <option value="{{ $d->id }}" {{ old('district_id') == $d->id ? 'selected' : '' }}>{{ $d->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group" style="margin-bottom:0;">
                    <label class="form-label">Club</label>
                    <select name="club_id" class="form-control">
                        <option value="">None</option>
                        @foreach($clubs as $c)
                            <option value="{{ $c->id }}" {{ old('club_id') == $c->id ? 'selected' : '' }}>{{ $c->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group" style="margin-bottom:0;">
                    <label class="form-label">Belt Rank <span style="color:var(--secondary);">*</span></label>
                    <select name="belt_rank" class="form-control" required>
                        @foreach($belts as $b)
                            <option value="{{ $b }}" {{ old('belt_rank') == $b ? 'selected' : '' }}>{{ $b }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group" style="margin-bottom:0;">
                    <label class="form-label">Status <span style="color:var(--secondary);">*</span></label>
                    <select name="status" class="form-control" required>
                        <option value="active">Active</option>
                        <option value="pending">Pending</option>
                        <option value="suspended">Suspended</option>
                    </select>
                </div>
                <div class="form-group" style="margin-bottom:0;">
                    <label class="form-label">Expiry Date</label>
                    <input type="date" name="expiry_date" class="form-control" value="{{ old('expiry_date') }}">
                </div>
                <div class="form-group" style="grid-column:1 / -1; margin-bottom:0;">
                    <label class="form-label">Address</label>
                    <input type="text" name="address" class="form-control" value="{{ old('address') }}">
                </div>
                <div class="form-group" style="grid-column:1 / -1; margin-bottom:0;">
                    <label class="form-label">Photo (optional)</label>
                    <input type="file" name="photo" class="form-control">
                </div>
            </div>
            
            <div style="display:flex; justify-content:flex-end; gap:8px; margin-top:24px; padding-top:20px; border-top:1px solid var(--border-color);">
                <a href="{{ route('admin.members.index') }}" class="btn btn-outline">Cancel</a>
                <button type="submit" class="btn btn-primary">Create Member</button>
            </div>
        </div>
    </div>
</form>
@endsection
