@php
    $layout = auth()->user()->role === 'super_admin' ? 'layouts.admin' : 'layouts.app';
@endphp

@extends($layout)

@section('title', 'Register New Group')

@section('content')
<div class="container-fluid px-4 py-3">
    <!-- Header -->
    <div class="dashboard-header">
        <div class="container-fluid">
            <div class="row align-items-center dashboard-header-content">
                <div class="col-lg-6">
                    <h1 class="dashboard-title">
                        <i class="fas fa-tachometer-alt" style="color: var(--dhis2-blue-primary);"></i>
                        Register New Group
                    </h1>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="javascript:history.back()">Back</a></li>
                            <li class="breadcrumb-item"><a href="{{ route('component1.dashboard') }}">Component 1 Dashboard</a></li>
                            <li class="breadcrumb-item active">Groups</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="container py-4">
    <div class="row justify-content-center">
        <div class="col-lg-10">
            <h3 class="text-success mb-4 text-center fw-bold">Register New VSLA/Community Group</h3>

            <div class="card border-secondary border-2 shadow-lg rounded-3">
                <div class="card-body p-4 p-md-5">
                    <form action="{{ route('component1.groups.store') }}" method="POST">
                        @csrf

                        <h5 class="mb-3 text-primary border-bottom border-secondary pb-2"><i class="fas fa-users me-2"></i> Group Details</h5>
                        <div class="row g-4 mb-4">
                            <div class="col-md-6">
                                <label class="form-label fw-bold">Group Name <span class="text-danger">*</span></label>
                                <input style="border: 1px solid #444;" type="text" name="name" class="form-control @error('name') is-invalid @enderror" value="{{ old('name') }}" required>
                                @error('name') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>

                            <div class="col-md-6">
                                <label class="form-label fw-bold">VSLA Type <span class="text-danger">*</span></label>
                                <select style="border: 1px solid #444;" name="nature" class="form-select @error('nature') is-invalid @enderror" required>
                                    <option value="">-- Select VSLA Type --</option>
                                    <option value="new" {{ old('nature') == 'new' ? 'selected' : '' }}>New</option>
                                    <option value="progressing" {{ old('nature') == 'progressing' ? 'selected' : '' }}>Progressing</option>
                                    <option value="matured" {{ old('nature') == 'matured' ? 'selected' : '' }}>Matured</option>
                                </select>
                                @error('nature') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>

                            <div class="col-md-4">
                                <label class="form-label fw-bold">State <span class="text-danger">*</span></label>
                                <input style="border: 1px solid #444;" type="text" name="state" class="form-control @error('state') is-invalid @enderror" value="{{ old('state') }}" required>
                                @error('state') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>

                            <div class="col-md-4">
                                <label class="form-label fw-bold">County <span class="text-danger">*</span></label>
                                <input style="border: 1px solid #444;" type="text" name="county" class="form-control @error('county') is-invalid @enderror" value="{{ old('county') }}" required>
                                @error('county') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>

                            <div class="col-md-4">
                                <label class="form-label fw-bold">Payam <span class="text-danger">*</span></label>
                                <input style="border: 1px solid #444;" type="text" name="payam" class="form-control @error('payam') is-invalid @enderror" value="{{ old('payam') }}" required>
                                @error('payam') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>
                        </div>

                        <h5 class="mb-3 mt-4 text-primary border-bottom border-secondary pb-2"><i class="fas fa-handshake me-2"></i> Establishment & Dates</h5>
                        <div class="row g-4 mb-4">
                            <div class="col-md-6">
                                <label class="form-label fw-bold">Establishing Org</label>
                                <input style="border: 1px solid #444;" type="text" name="establishing_org_name" class="form-control" value="{{ old('establishing_org_name') }}">
                            </div>

                            <div class="col-md-6">
                                <label class="form-label fw-bold">Establishment Type <span class="text-danger">*</span></label>
                                <select style="border: 1px solid #444;" name="establishment_type" class="form-select @error('establishment_type') is-invalid @enderror" required>
                                    <option value="">-- Select Type --</option>
                                    <option value="self" {{ old('establishment_type') == 'self' ? 'selected' : '' }}>Self</option>
                                    <option value="cso" {{ old('establishment_type') == 'cso' ? 'selected' : '' }}>CSO</option>
                                    <option value="ngo" {{ old('establishment_type') == 'ngo' ? 'selected' : '' }}>NGO</option>
                                    <option value="government" {{ old('establishment_type') == 'government' ? 'selected' : '' }}>Government</option>
                                </select>
                                @error('establishment_type') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>

                            <div class="col-md-4">
                                <label class="form-label fw-bold">Formation Date <span class="text-danger">*</span></label>
                                <input style="border: 1px solid #444;" type="date" name="date_formation" class="form-control @error('date_formation') is-invalid @enderror" value="{{ old('date_formation') }}" required>
                                @error('date_formation') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>

                            <div class="col-md-4">
                                <label class="form-label fw-bold">VSLA Registration Date</label>
                                <input style="border: 1px solid #444;" type="date" name="vsla_registration_date" class="form-control" value="{{ old('vsla_registration_date') }}">
                            </div>

                            <div class="col-md-4">
                                <label class="form-label fw-bold">Leadership <span class="text-danger">*</span></label>
                                <select style="border: 1px solid #444;" name="leadership" class="form-select @error('leadership') is-invalid @enderror" required>
                                    <option value="">-- Select Leadership --</option>
                                    <option value="adolescent_girl" {{ old('leadership') == 'adolescent_girl' ? 'selected' : '' }}>Adolescent Girl</option>
                                    <option value="woman" {{ old('leadership') == 'woman' ? 'selected' : '' }}>Woman</option>
                                </select>
                                @error('leadership') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="average_participation">Average Training Participation (%) <span class="text-danger">*</span></label>
                                    <input type="number" name="average_participation" id="average_participation" 
                                        class="form-control @error('average_participation') is-invalid @enderror"
                                        value="{{ old('average_participation', $group->average_participation ?? '') }}" 
                                        step="0.01" min="0" max="100" placeholder="e.g. 87.5">
                                    @error('average_participation')
                                        <span class="invalid-feedback">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Received Completion Certificate?</label><br>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="received_certificate" id="cert_yes" value="1" 
                                            {{ old('received_certificate', $group->received_certificate ?? false) ? 'checked' : '' }}>
                                        <label class="form-check-label" for="cert_yes">Yes</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="received_certificate" id="cert_no" value="0" 
                                            {{ old('received_certificate', $group->received_certificate ?? false) ? '' : 'checked' }}>
                                        <label class="form-check-label" for="cert_no">No</label>
                                    </div>
                                    @error('received_certificate')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label fw-bold">Snapshot Month <span class="text-danger">*</span></label>
                                <input style="border: 1px solid #444;" type="month" name="month" class="form-control @error('month') is-invalid @enderror" value="{{ old('month') }}" required>
                                @error('month') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>
                        </div>

                        <div class="mt-4 pt-3 border-top border-secondary text-end">
                            <a href="{{ route('component1.groups.index') }}" class="btn btn-outline-secondary me-2"><i class="fas fa-times me-1"></i> Cancel</a>
                            <button type="submit" class="btn btn-success"><i class="fas fa-save me-1"></i> Save Group</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection