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

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

                    <div class="card-header">
                        <h4>Edit Oxygen Record</h4>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <!-- Chalani No -->
                            <div class="form-group col-md-6 col-6 mb-3">
                                <label>चलानी नं</label>
                                <input type="text" class="form-control" id="unique-input" name="chalani_no"
                                    value="{{ old('chalani_no', $oxygen->chalani_no) }}" inputmode="numeric">
                                <div class="invalid-feedback">
                                    कृपया चलानी नं भर्नुहोस्
                                </div>
                            </div>

                            <!-- Subject -->
                            <div class="form-group col-md-12 col-12 mb-3">
                                <label>विषय</label>
                                <input type="text" class="form-control" name="subject"
                                    value="{{ old('subject', $oxygen->subject) }}" required="">
                                <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="{{ old('office_name', $oxygen->office_name) }}" 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 nepali-input" name="office_address"
                                    value="{{ old('office_address', $oxygen->office_address) }}" 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', $oxygen->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', $oxygen->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', $oxygen->gender) == 'Male' ? 'selected' : '' }}>Male</option>
                                    <option value="Female" {{ old('gender', $oxygen->gender) == 'Female' ? 'selected' : '' }}>Female
                                    </option>
                                </select>
                                <div class="invalid-feedback">
                                    कृपया लिङ्ग चयन गर्नुहोस्
                                </div>
                            </div>

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

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

                            <!-- Disease -->
                            <div class="form-group col-md-6 col-6 mb-3">
                                <label>Disease</label>
                                <input type="text" class="form-control nepali-input" name="disease"
                                    value="{{ old('disease', $oxygen->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', $oxygen->relation || $oxygen->relation_name ? 'checked' : '') }}>
                                    <label class="custom-control-label" for="has_spouse_checkbox">पति/पत्नीको जानकारी
                                        राख्नुहोस् (Include Spouse Information)</label>
                                </div>
                            </div>

                            <!-- Spouse Information Fields -->
                            <div id="spouse_fields_wrapper"
                                style="display: {{ old('has_spouse', $oxygen->relation || $oxygen->relation_name) ? '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', $oxygen->relation) }}">
                                        <div class="invalid-feedback">
                                            कृपया सम्बन्ध भर्नुहोस्
                                        </div>
                                    </div>
                                    <div class="form-group col-md-6 col-6 mb-3">
                                        <label>Applicant Relation</label>
                                        <input type="text" class="form-control nepali-input" name="relation_name"
                                            value="{{ old('relation_name', $oxygen->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>
                        <a href="{{ route('vendor.oxygen.index') }}" class="btn btn-secondary">रद्द गर्नुहोस्</a>
                    </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