@extends('frontend.dashboard.layouts.app')

@section('content')
    <div class="page-content">
        <div class="card">
            <div class="card-body p-0">
                <form method="post" action="{{ route('user-oxygen.store') }}" class="needs-validation" novalidate=""
                    id="oxygen-form">
                    @csrf

                    <div class="card-header">
                        <h4>Add Oxygen</h4>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <!-- Subject -->
                            <div class="form-group col-md-12 col-12 mb-3">
                                <label>विषय</label>
                                <input type="text" class="form-control" name="subject" value="सिफारिस सम्बन्धमा"
                                    required="" readonly>
                                <div class="invalid-feedback">
                                    कृपया विषय भर्नुहोस्
                                </div>
                            </div>

                            <!-- Office Name -->
                            <div class="form-group col-md-6 col-6 mb-3">
                                <label>अफिसकाे नाम</label>
                                <input type="text" class="form-control nepali-input" name="office_name"
                                    value="ख्वप अस्पताल" required="">
                                <div class="invalid-feedback">
                                    कृपया अफिसको नाम भर्नुहोस्
                                </div>
                            </div>

                            <!-- Office Address -->
                            <div class="form-group col-md-6 col-6 mb-3">
                                <label>अफिसकाे ठेगना</label>
                                <input type="text" class="form-control" name="office_address"
                                    value="भक्तपुर" required="">
                                <div class="invalid-feedback">
                                    कृपया अफिसको ठेगाना भर्नुहोस्
                                </div>
                            </div>

                            <!-- Previous Ward No -->
                            <div class="form-group col-md-6 col-6 mb-3">
                                <label>साविक वडा नं</label>
                                <input type="text" class="form-control nepali-input" name="previous_ward_no"
                                    value="{{ old('previous_ward_no') }}">
                                <div class="invalid-feedback">
                                    कृपया साविक वडा नं भर्नुहोस्
                                </div>
                            </div>

                            <!-- Applicant Name -->
                            <div class="form-group col-md-6 col-6 mb-3">
                                <label>निवेदक</label>
                                <input type="text" class="form-control nepali-input" name="applicant_name"
                                    value="{{ old('applicant_name') }}" required="">
                                <div class="invalid-feedback">
                                    कृपया निवेदकको नाम भर्नुहोस्
                                </div>
                            </div>

                            <!-- Gender -->
                            <div class="form-group col-md-6 col-6 mb-3">
                                <label>लिङ्ग</label>
                                <select name="gender" class="form-control" required>
                                    <option value="">--Select--</option>
                                    <option value="Male" {{ old('gender') == 'Male' ? 'selected' : '' }}>Male</option>
                                    <option value="Female" {{ old('gender') == 'Female' ? 'selected' : '' }}>Female
                                    </option>
                                </select>
                                <div class="invalid-feedback">
                                    कृपया लिङ्ग चयन गर्नुहोस्
                                </div>
                            </div>

                            <!-- Disease -->
                            <div class="form-group col-md-6 col-6 mb-3">
                                <label>राेग</label>
                                <input type="text" class="form-control nepali-input" name="disease"
                                    value="{{ old('disease') }}" required="">
                                <div class="invalid-feedback">
                                    कृपया रोगको नाम भर्नुहोस्
                                </div>
                            </div>

                            <!-- Checkbox for Spouse Information -->
                            <div class="form-group col-md-12 col-12 mb-3">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input" id="has_spouse_checkbox"
                                        name="has_spouse" value="1" {{ old('has_spouse') ? 'checked' : '' }}>
                                    <label class="custom-control-label" for="has_spouse_checkbox">आफ्नाे परिवारलाई चाहेकाे हाे भने(Needed for family)</label>
                                </div>
                            </div>

                            <!-- Spouse Information Fields (Hidden by default) -->
                            <div id="spouse_fields_wrapper"
                                style="display: {{ old('has_spouse') ? 'block' : 'none' }}; width: 100%;">
                                <div class="row">
                                    <div class="form-group col-md-6 col-6 mb-3">
                                        <label>Relation</label>
                                        <input type="text" class="form-control nepali-input" name="relation"
                                            value="{{ old('relation') }}">
                                        <div class="invalid-feedback">
                                            कृपया सम्बन्ध भर्नुहोस्
                                        </div>
                                    </div>
                                    <div class="form-group col-md-6 col-6 mb-3">
                                        <label>Relation Name</label>
                                        <input type="text" class="form-control nepali-input" name="relation_name"
                                            value="{{ old('relation_name') }}">
                                        <div class="invalid-feedback">
                                            कृपया सम्बन्धित व्यक्तिको नाम भर्नुहोस्
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer text-right">
                        <button type="submit" class="btn btn-primary">सुरक्षित गर्नुहोस्</button>
                        <button type="reset" class="btn btn-secondary">रद्द गर्नुहोस्</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        $(document).ready(function() {
            // Remove validation error on input change
            $('input, select').on('input change', function() {
                $(this).removeClass('is-invalid');
                $(this).next('.invalid-feedback').hide();
            });

            // Client-side validation before submit
            $('#oxygen-form').on('submit', function(e) {
                let isValid = true;
                $(this).find('[required]').each(function() {
                    if (!$(this).val()) {
                        $(this).addClass('is-invalid');
                        isValid = false;
                    }
                });
                if (!isValid) {
                    e.preventDefault();
                    $('html, body').animate({
                        scrollTop: $('.is-invalid:first').offset().top - 100
                    }, 500);
                }
            });

            // Toggle Spouse Fields on Checkbox Click
            const spouseCheckbox = document.getElementById('has_spouse_checkbox');
            const spouseWrapper = document.getElementById('spouse_fields_wrapper');

            if (spouseCheckbox) {
                spouseCheckbox.addEventListener('change', function() {
                    if (this.checked) {
                        spouseWrapper.style.display = 'block';
                    } else {
                        spouseWrapper.style.display = 'none';
                        // Clear spouse field values when hiding
                        const spouseInputs = spouseWrapper.querySelectorAll('input');
                        spouseInputs.forEach(input => {
                            input.value = '';
                        });
                    }
                });
            }
        });
    </script>
@endpush