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

                    <div class="card-header">
                        <h4>Add Naksa</h4>
                    </div>

                    <div class="card-body">
                        <!-- Display error messages -->
                        @if ($errors->any())
                            <div class="alert alert-danger">
                                <ul class="mb-0">
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif

                        <div class="row">
                            <!-- Chalani No -->
                            <div class="form-group col-md-6 col-6 mb-3">
                                <label>चलानी नं</label>
                                <input type="text" class="form-control nepali-input @error('chalani_no') is-invalid @enderror"
                                    id="unique-input" name="chalani_no"
                                    value="{{ old('chalani_no') }}" inputmode="numeric">
                                @error('chalani_no')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @else
                                    <div class="invalid-feedback">कृपया चलानी नं भर्नुहोस्</div>
                                @enderror
                            </div>

                            <!-- Subject -->
                            <div class="form-group col-md-12 col-12 mb-3">
                                <label>विषय</label>
                                <input type="text" class="form-control @error('subject') is-invalid @enderror"
                                    name="subject" value="मिशिल पेश सम्बन्धमा" required>
                                @error('subject')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @else
                                    <div class="invalid-feedback">कृपया विषय भर्नुहोस्</div>
                                @enderror
                            </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 @error('previous_ward_no') is-invalid @enderror"
                                    name="previous_ward_no" value="{{ old('previous_ward_no') }}">
                                @error('previous_ward_no')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @else
                                    <div class="invalid-feedback">कृपया ठेगना भर्नुहोस्</div>
                                @enderror
                            </div>

                            <!-- Office Name -->
                            <div class="form-group col-md-6 col-6 mb-3">
                                <label>Office Name</label>
                                <input type="text" class="form-control nepali-input @error('office_name') is-invalid @enderror"
                                    name="office_name" value="{{ old('office_name', 'eQmk\'/ gu/kflnsf') }}" required>
                                @error('office_name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @else
                                    <div class="invalid-feedback">कृपया जिल्ला भर्नुहोस्</div>
                                @enderror
                            </div>

                            <!-- Office Address -->
                            <div class="form-group col-md-6 col-6 mb-3">
                                <label>Office Address</label>
                                <input type="text" class="form-control nepali-input @error('office_address') is-invalid @enderror"
                                    name="office_address" value="{{ old('office_address', 'eQmk\'/ .') }}" required>
                                @error('office_address')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @else
                                    <div class="invalid-feedback">कृपया प्रदेश भर्नुहोस्</div>
                                @enderror
                            </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 @error('applicant_municipality') is-invalid @enderror"
                                    name="applicant_municipality" value="{{ old('applicant_municipality') }}" required>
                                @error('applicant_municipality')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @else
                                    <div class="invalid-feedback">कृपया निवेदकको नाम भर्नुहोस्</div>
                                @enderror
                            </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 @error('applicant_ward_no') is-invalid @enderror"
                                    name="applicant_ward_no" value="{{ old('applicant_ward_no') }}" required>
                                @error('applicant_ward_no')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @else
                                    <div class="invalid-feedback">कृपया निवेदकको नाम भर्नुहोस्</div>
                                @enderror
                            </div>

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

        // Improved client-side validation before submit
        $('#birth-form').on('submit', function(e) {
            let isValid = true;
            let firstInvalid = null;

            // Check required fields
            $(this).find('[required]').each(function() {
                const $field = $(this);
                const value = $field.val();

                if (!value || value.trim() === '') {
                    $field.addClass('is-invalid');
                    isValid = false;

                    if (!firstInvalid) {
                        firstInvalid = $field;
                    }
                } else {
                    $field.removeClass('is-invalid');
                }
            });

            if (!isValid) {
                e.preventDefault();
                if (firstInvalid) {
                    $('html, body').animate({
                        scrollTop: firstInvalid.offset().top - 100
                    }, 500);
                    firstInvalid.focus();
                }
                return false;
            }
        });

        // Optional: Add real-time validation
        $('[required]').on('blur', function() {
            const $field = $(this);
            const value = $field.val();

            if (!value || value.trim() === '') {
                $field.addClass('is-invalid');
            } else {
                $field.removeClass('is-invalid');
            }
        });
    });
</script>
@endpush