@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.update') }}" class="needs-validation" novalidate
                    id="mathilo-form">
                    @csrf
                    <input type="hidden" name="id" value="{{ $mathilo->id }}">

                    <div class="card-header">
                        <h4>Edit Mathilo Record</h4>
                        <div class="btn-group float-sm-right">
                            <a href="{{ route('vendor.mathilo.index') }}" class="btn btn-secondary">
                                <i class="fa fa-arrow-left"></i> Back to List
                            </a>
                        </div>
                    </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

                        <!-- Display success/error session messages -->
                        @if (session('success'))
                            <div class="alert alert-success alert-dismissible fade show" role="alert">
                                {{ session('success') }}
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                        @endif

                        @if (session('error'))
                            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                {{ session('error') }}
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </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', $mathilo->chalani_no) }}" 
                                    inputmode="numeric">
                                @error('chalani_no')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @else
                                    <div class="invalid-feedback">कृपया चलानी नं भर्नुहोस्</div>
                                @enderror
                            </div>

                            <!-- Date Display (Read-only) -->
                            <div class="form-group col-md-6 col-6 mb-3">
                                <label>मिति (Date)</label>
                                <input type="text" 
                                    class="form-control"
                                    value="{{ $mathilo->date_in_nepali ?? $mathilo->date }}" 
                                    readonly 
                                    disabled>
                                <small class="text-muted">Created on: {{ $mathilo->created_at->format('Y-m-d H:i') }}</small>
                            </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="{{ old('subject', $mathilo->subject) }}" 
                                    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', $mathilo->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', $mathilo->office_name) }}" 
                                    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', $mathilo->office_address) }}" 
                                    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', $mathilo->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', $mathilo->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', $mathilo->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">
                            <i class="fa fa-save"></i> अपडेट गर्नुहोस्
                        </button>
                        <a href="{{ route('vendor.mathilo.index') }}" class="btn btn-secondary">
                            <i class="fa fa-times"></i> रद्द गर्नुहोस्
                        </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();
        });

        // Confirmation before submit
        $('#mathilo-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: Show confirmation dialog
            if (!confirm('Are you sure you want to update this record?')) {
                e.preventDefault();
                return false;
            }
        });

        // Real-time validation on blur
        $('[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