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

                <div class="card-header">
                    <h4>Edit Unmarried</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', $unmarried->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', $unmarried->subject) }}" required="">
                            <div class="invalid-feedback">
                                कृपया विषय भर्नुहोस्
                            </div>
                        </div>

                        <!-- Send To Address -->
                        <div class="form-group col-md-6 col-6 mb-3">
                            <label>साविक वडा नं</label>
                            <input type="number" class="form-control" name="previous_ward_no"
                                value="{{ old('previous_ward_no', $unmarried->previous_ward_no) }}">
                            <div class="invalid-feedback">
                                कृपया ठेगना भर्नुहोस्
                            </div>
                        </div>

                        <div class="form-group col-md-6 col-6 mb-3">
                            <label>जिल्ला </label>
                            <input type="text" class="form-control" name="district" value="{{ old('district', $unmarried->district) }}" required="">
                            <div class="invalid-feedback">
                                कृपया जिल्ला भर्नुहोस्
                            </div>
                        </div>

                        <div class="form-group col-md-6 col-6 mb-3">
                            <label>प्रदेश</label>
                            <input type="text" class="form-control" name="provinance" value="{{ old('provinance', $unmarried->provinance) }}" required="">
                            <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" name="applicant_name"
                                value="{{ old('applicant_name', $unmarried->applicant_name) }}" required="">
                            <div class="invalid-feedback">
                                कृपया निवेदकको नाम भर्नुहोस्
                            </div>
                        </div>

                        <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', $unmarried->gender) == 'Male' ? 'selected' : '' }}>Male</option>
                                <option value="Female" {{ old('gender', $unmarried->gender) == 'Female' ? 'selected' : '' }}>Female</option>
                            </select>
                            <div class="invalid-feedback">
                                कृपया लिङ्ग चयन गर्नुहोस्
                            </div>
                        </div>

                        <div class="form-group col-md-6 col-6 mb-3">
                            <label>विवाहित</label>
                            <select name="marital_status" class="form-control" required>
                                <option value="">--Select--</option>
                                <option value="Married" {{ old('marital_status', $unmarried->marital_status) == 'Married' ? 'selected' : '' }}>Married</option>
                                <option value="Unmarried" {{ old('marital_status', $unmarried->marital_status) == 'Unmarried' ? 'selected' : '' }}>Unmarried</option>
                            </select>
                            <div class="invalid-feedback">
                                कृपया वैवाहिक स्थिति चयन गर्नुहोस्
                            </div>
                        </div>

                         <div class="form-group col-md-6 col-6 mb-3">
                            <label>निवेदककाे अविवाहित रहेकाे मिति</label>
                            <input type="date" class="form-control" name="unmarried_date"
                                value="{{ old('unmarried_date', $unmarried->unmarried_date) }}">
                            <div class="invalid-feedback">
                                कृपया निवेदकको अविवाहित रहेकाे मिति भर्नुहोस्
                            </div>
                        </div>

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

                        <div class="form-group col-md-6 col-6 mb-3">
                            <label>निवेदककाे राष्ट्रिय परिचय नं</label>
                            <input type="text" class="form-control" name="applicant_id_no"
                                value="{{ old('applicant_id_no', $unmarried->applicant_id_no) }}">
                            <div class="invalid-feedback">
                                कृपया निवेदकको राष्ट्रिय परिचय नं भर्नुहोस्
                            </div>
                        </div>

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

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

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

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

                        <!-- Relations Section -->
                        <div class="col-12">
                            <div class="card-header">
                                <div class="d-flex justify-content-between align-items-center">
                                    <h6 class="text-primary mb-0">साक्षाी बसेकाे नामहरू (वैकल्पिक)</h6>
                                    <button type="button" class="btn btn-sm btn-success add-relation-top-btn">
                                        <i class="fas fa-plus"></i> थप साक्षी
                                    </button>
                                </div>
                            </div>
                            <div id="relations-container">
                                @php
                                    $relations = is_string($unmarried->relations) ? json_decode($unmarried->relations, true) : $unmarried->relations;
                                    $relations = $relations ?? [];
                                @endphp

                                @if(count($relations) > 0)
                                    @foreach($relations as $index => $relation)
                                        <div class="row relation-row" data-index="{{ $index }}">
                                            <div class="form-group col-md-3 col-3 mb-3">
                                                <label>साक्षी</label>
                                                <input type="text" class="form-control" name="relations[{{ $index }}][relation]"
                                                    value="{{ old("relations.{$index}.relation", $relation['relation'] ?? '') }}">
                                                <div class="invalid-feedback">
                                                    कृपया साक्षी भर्नुहोस्
                                                </div>
                                            </div>

                                            <div class="form-group col-md-3 col-3 mb-3">
                                                <label>नागरिकता न‌ं</label>
                                                <input type="text" class="form-control" name="relations[{{ $index }}][citizen_no]"
                                                    value="{{ old("relations.{$index}.citizen_no", $relation['citizen_no'] ?? '') }}">
                                                <div class="invalid-feedback">
                                                    कृपया नागरिकता न‌ं भर्नुहोस्
                                                </div>
                                            </div>

                                            <div class="form-group col-md-2 col-2 d-flex align-items-end">
                                                <button type="button" class="btn btn-danger remove-relation-btn mb-3"
                                                    style="width: 100%;">
                                                    <i class="fas fa-minus"></i>
                                                </button>
                                            </div>
                                        </div>
                                    @endforeach
                                @else
                                    <!-- No relations exist - show empty state (no rows) -->
                                    <p class="text-muted text-center p-3">कुनै साक्षीहरू छैनन्। साक्षी थप्नको लागि माथिको बटन प्रयोग गर्नुहोस्।</p>
                                @endif
                            </div>
                        </div>
                        <!-- End Relations Section -->

                    </div>
                </div>
                <div class="card-footer text-right">
                    <button type="submit" class="btn btn-primary">अद्यावधिक गर्नुहोस्</button>
                    <a href="{{ route('vendor.vendor-unmarried.index') }}" class="btn btn-secondary">रद्द गर्नुहोस्</a>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Initialize relationIndex based on existing rows
        let relationIndex = document.querySelectorAll('.relation-row').length;
        const container = document.getElementById('relations-container');
        const addButton = document.querySelector('.add-relation-top-btn');

        // Remove the empty message if it exists
        function removeEmptyMessage() {
            const emptyMessage = container.querySelector('p.text-muted');
            if (emptyMessage) {
                emptyMessage.remove();
            }
        }

        function addRelationRow() {
            removeEmptyMessage();
            
            const newRow = document.createElement('div');
            newRow.className = 'row relation-row';
            newRow.setAttribute('data-index', relationIndex);

            newRow.innerHTML = `
                <div class="form-group col-md-3 col-3 mb-3">
                    <label>साक्षी</label>
                    <input type="text" class="form-control" name="relations[${relationIndex}][relation]">
                    <div class="invalid-feedback">
                        कृपया साक्षी भर्नुहोस्
                    </div>
                </div>

                <div class="form-group col-md-3 col-3 mb-3">
                    <label>नागरिकता न‌ं</label>
                    <input type="text" class="form-control" name="relations[${relationIndex}][citizen_no]">
                    <div class="invalid-feedback">
                        कृपया नागरिकता न‌ं भर्नुहोस्
                    </div>
                </div>

                <div class="form-group col-md-2 col-2 d-flex align-items-end">
                    <button type="button" class="btn btn-danger remove-relation-btn mb-3" style="width: 100%;">
                        <i class="fas fa-minus"></i>
                    </button>
                </div>
            `;

            container.appendChild(newRow);
            relationIndex++;
        }

        // Add new row when clicking the button
        if (addButton) {
            addButton.addEventListener('click', addRelationRow);
        }

        // Remove row when clicking remove button
        container.addEventListener('click', function(e) {
            const removeBtn = e.target.closest('.remove-relation-btn');
            if (removeBtn) {
                const row = removeBtn.closest('.relation-row');
                row.remove();
                
                // If no rows left, show empty message
                if (container.querySelectorAll('.relation-row').length === 0) {
                    const emptyMessage = document.createElement('p');
                    emptyMessage.className = 'text-muted text-center p-3';
                    emptyMessage.textContent = 'कुनै साक्षीहरू छैनन्। साक्षी थप्नको लागि माथिको बटन प्रयोग गर्नुहोस्।';
                    container.appendChild(emptyMessage);
                }
            }
        });
    });
</script>

<!-- JavaScript to handle validation and remove errors on input -->
<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 (relations are optional)
        $('#birth-form').on('submit', function(e) {
            let isValid = true;
            
            // Check only required fields (excluding relation fields since they're optional)
            $(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);
            }
        });
    });
</script>
@endpush