@csrf
<div class="row g-4">
    <div class="col-lg-6">
        <h6 class="text-uppercase text-muted small fw-bold mb-3"><i class="bi bi-person me-1"></i>Father</h6>
        <div class="mb-3"><label class="form-label">Father Name</label>
            <input type="text" name="father_name" value="{{ old('father_name', $family->father_name) }}" class="form-control"></div>
        <div class="row g-2">
            <div class="col-md-6 mb-3"><label class="form-label">CNIC</label>
                <input type="text" name="father_cnic" value="{{ old('father_cnic', $family->father_cnic) }}" class="form-control js-cnic @error('father_cnic') is-invalid @enderror" maxlength="15" placeholder="00000-0000000-0">
                @error('father_cnic')<div class="invalid-feedback">{{ $message }}</div>@enderror</div>
            <div class="col-md-6 mb-3"><label class="form-label">Mobile</label>
                <input type="text" name="father_mobile" value="{{ old('father_mobile', $family->father_mobile) }}" class="form-control"></div>
        </div>
        <div class="mb-3"><label class="form-label">Occupation</label>
            <input type="text" name="father_occupation" value="{{ old('father_occupation', $family->father_occupation) }}" class="form-control"></div>
    </div>

    <div class="col-lg-6">
        <h6 class="text-uppercase text-muted small fw-bold mb-3"><i class="bi bi-person-heart me-1"></i>Mother</h6>
        <div class="mb-3"><label class="form-label">Mother Name</label>
            <input type="text" name="mother_name" value="{{ old('mother_name', $family->mother_name) }}" class="form-control"></div>
        <div class="row g-2">
            <div class="col-md-6 mb-3"><label class="form-label">CNIC</label>
                <input type="text" name="mother_cnic" value="{{ old('mother_cnic', $family->mother_cnic) }}" class="form-control js-cnic" maxlength="15" placeholder="00000-0000000-0"></div>
            <div class="col-md-6 mb-3"><label class="form-label">Mobile</label>
                <input type="text" name="mother_mobile" value="{{ old('mother_mobile', $family->mother_mobile) }}" class="form-control"></div>
        </div>
    </div>

    <div class="col-lg-6">
        <h6 class="text-uppercase text-muted small fw-bold mb-3"><i class="bi bi-shield-check me-1"></i>Guardian (if different)</h6>
        <div class="row g-2">
            <div class="col-md-5 mb-3"><label class="form-label">Name</label>
                <input type="text" name="guardian_name" value="{{ old('guardian_name', $family->guardian_name) }}" class="form-control"></div>
            <div class="col-md-4 mb-3"><label class="form-label">CNIC</label>
                <input type="text" name="guardian_cnic" value="{{ old('guardian_cnic', $family->guardian_cnic) }}" class="form-control js-cnic" maxlength="15" placeholder="00000-0000000-0"></div>
            <div class="col-md-3 mb-3"><label class="form-label">Relation</label>
                <input type="text" name="guardian_relation" value="{{ old('guardian_relation', $family->guardian_relation) }}" class="form-control"></div>
        </div>
    </div>

    <div class="col-lg-6">
        <h6 class="text-uppercase text-muted small fw-bold mb-3"><i class="bi bi-geo-alt me-1"></i>Contact</h6>
        <div class="row g-2">
            <div class="col-md-6 mb-3"><label class="form-label">Email</label>
                <input type="email" name="email" value="{{ old('email', $family->email) }}" class="form-control @error('email') is-invalid @enderror">
                @error('email')<div class="invalid-feedback">{{ $message }}</div>@enderror</div>
            <div class="col-md-6 mb-3"><label class="form-label">Emergency Contact</label>
                <input type="text" name="emergency_contact" value="{{ old('emergency_contact', $family->emergency_contact) }}" class="form-control"></div>
        </div>
        <div class="mb-3"><label class="form-label">Address</label>
            <textarea name="address" rows="2" class="form-control">{{ old('address', $family->address) }}</textarea></div>
    </div>
</div>

<div class="mt-2 d-flex gap-2">
    <button class="btn btn-primary"><i class="bi bi-check-lg me-1"></i>{{ $submitLabel ?? 'Save' }}</button>
    <a href="{{ route('families.index') }}" class="btn btn-light border">Cancel</a>
</div>
