@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.bipanna-treatment.update', $bipannaTreatment->id) }}" class="needs-validation" novalidate=""
                    id="bipanna-treatment-form">
                    @csrf
                    @method('PUT')

                    <div class="card-header">
                        <h4>Edit bipanna-treatment</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', $bipannaTreatment->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', $bipannaTreatment->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', $bipannaTreatment->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', $bipannaTreatment->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', $bipannaTreatment->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', $bipannaTreatment->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', $bipannaTreatment->gender) == 'Male' ? 'selected' : '' }}>Male</option>
                                    <option value="Female" {{ old('gender', $bipannaTreatment->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', $bipannaTreatment->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', $bipannaTreatment->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', $bipannaTreatment->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', $bipannaTreatment->has_spouse) == '1' || old('has_spouse', $bipannaTreatment->has_spouse) == 1 || old('has_spouse', $bipannaTreatment->has_spouse) == true) ? 'checked' : '' }}>
                                    <label class="custom-control-label" for="has_spouse_checkbox">परिवारको जानकारी
                                        राख्नुहोस् (Include Family Information)</label>
                                </div>
                            </div>

                            <!-- Spouse Information Fields -->
                            <div id="spouse_fields_wrapper"
                                style="display: {{ (old('has_spouse', $bipannaTreatment->has_spouse) == '1' || old('has_spouse', $bipannaTreatment->has_spouse) == 1 || old('has_spouse', $bipannaTreatment->has_spouse) == true) ? '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', $bipannaTreatment->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', $bipannaTreatment->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.bipanna-treatment.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
            $('#bipanna-treatment-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');
            const relationInput = document.querySelector('input[name="relation"]');
            const relationNameInput = document.querySelector('input[name="relation_name"]');

            if (spouseCheckbox && spouseWrapper) {
                // Function to check if spouse fields are empty and untick checkbox
                function checkSpouseFieldsAndUntick() {
                    if (spouseCheckbox.checked) {
                        const isRelationEmpty = relationInput && relationInput.value.trim() === '';
                        const isRelationNameEmpty = relationNameInput && relationNameInput.value.trim() === '';
                        
                        // If either field is empty, untick the checkbox
                        if (isRelationEmpty || isRelationNameEmpty) {
                            spouseCheckbox.checked = false;
                            spouseWrapper.style.display = 'none';
                            
                            // Clear both fields when unticking
                            if (relationInput) relationInput.value = '';
                            if (relationNameInput) relationNameInput.value = '';
                        }
                    }
                }

                // Checkbox change event
                spouseCheckbox.addEventListener('change', function() {
                    if (this.checked) {
                        spouseWrapper.style.display = 'block';
                        // Don't clear fields when checking
                    } else {
                        spouseWrapper.style.display = 'none';
                        // Clear spouse field values when hiding
                        if (relationInput) relationInput.value = '';
                        if (relationNameInput) relationNameInput.value = '';
                    }
                });

                // Monitor changes in relation fields
                if (relationInput) {
                    relationInput.addEventListener('input', function() {
                        checkSpouseFieldsAndUntick();
                    });
                }
                
                if (relationNameInput) {
                    relationNameInput.addEventListener('input', function() {
                        checkSpouseFieldsAndUntick();
                    });
                }

                // On page load, ensure wrapper visibility matches checkbox state
                // Don't auto-untick on page load if there's existing data
                if (spouseCheckbox.checked) {
                    spouseWrapper.style.display = 'block';
                    // If checkbox is checked but fields are empty on page load, 
                    // you might want to keep them as is or handle differently
                    const isRelationEmpty = relationInput && relationInput.value.trim() === '';
                    const isRelationNameEmpty = relationNameInput && relationNameInput.value.trim() === '';
                    
                    if (isRelationEmpty && isRelationNameEmpty) {
                        // Optional: You can decide to keep checkbox checked or uncheck it
                        // Uncomment below if you want to uncheck when both fields are empty on load
                        // spouseCheckbox.checked = false;
                        // spouseWrapper.style.display = 'none';
                    }
                } else {
                    spouseWrapper.style.display = 'none';
                }
            }
        });
    </script>
@endpush