@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.gharjanaune.store') }}" class="needs-validation" novalidate=""
                    id="birth-form">
                    @csrf

                    <div class="card-header">
                        <h4>Add 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') }}" 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="सिफारिस सम्बन्धमा ।"
                                    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="text" class="form-control nepali-input" name="previous_ward_no"
                                    value="{{ old('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 nepali-input" name="office_name"
                                    value="भूमि प्रशासन कार्यालय" 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 nepali-input" name="office_address"
                                    value="भक्तपुर ।" 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 nepali-input" name="applicant_name"
                                    value="{{ old('applicant_name') }}" 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 nepali-input" name="applicant_municipality"
                                    value="{{ old('applicant_municipality') }}" 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 nepali-input" name="applicant_ward"
                                    value="{{ old('applicant_ward') }}" required="">
                                <div class="invalid-feedback">
                                    कृपया निवेदकको नाम भर्नुहोस्
                                </div>
                            </div>

                            <div class="form-group col-md-6 col-6 mb-3">
                                <label>के निवेदक एक भन्दा बदि छ</label>
                                <select name="applicant_more" class="form-control" required>
                                    <option value="0" {{ old('applicant_more') == '0' ? 'selected' : '' }}>छैन
                                    </option>
                                    <option value="1" {{ old('applicant_more') == '1' ? 'selected' : '' }}>
                                        छ</option>
                                </select>
                                <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') == 'Male' ? 'selected' : '' }}>पुरुष
                                    </option>
                                    <option value="Female" {{ old('gender') == 'Female' ? 'selected' : '' }}>
                                        महिला</option>
                                </select>
                                <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 nepali-input" name="plot_no"
                                    value="{{ old('plot_no') }}" 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 nepali-input" name="area"
                                    value="{{ old('area') }}" required="">
                                <div class="invalid-feedback">
                                    कृपया निवेदकको नाम भर्नुहोस्
                                </div>
                            </div>

                             <div class="form-group col-md-6 col-6 mb-3">
                                <label>निर्माण सम्पन्न छ</label>
                                <select name="is_complete" class="form-control" required>
                                    <option value="0" {{ old('is_complete') == '0' ? 'selected' : '' }}>छैन
                                    </option>
                                    <option value="1" {{ old('is_complete') == '1' ? 'selected' : '' }}>
                                        छ</option>
                                </select>
                                <div class="invalid-feedback">
                                    कृपया चयन गर्नुहोस्
                                </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')
    <!-- 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();
            });

            // Optional: Client-side validation before submit
            $('#birth-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);
                }
            });
        });
    </script>
@endpush