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

                    <div class="card-header">
                        <h4>व्यवसाय दर्ता विवरण थप्नुहोस्</h4>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <!-- Chalani No / Registration Number -->
                            <div class="form-group col-md-6 col-6 mb-3">
                                <label>दर्ता नं <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="chalani_no" name="chalani_no"
                                    value="{{ old('chalani_no') }}" required>
                                <div class="invalid-feedback">
                                    कृपया दर्ता नं भर्नुहोस्
                                </div>
                            </div>

                            <!-- Sanket Number -->
                            <div class="form-group col-md-6 col-6 mb-3">
                                <label>संकेत नं <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="sanket_no" value="{{ old('sanket_no') }}" required>
                                <div class="invalid-feedback">
                                    कृपया संकेत नं भर्नुहोस्
                                </div>
                            </div>

                            <div class="col-12">
                                <hr>
                                <h5>व्यक्तिगत विवरण</h5>
                                <hr>
                            </div>

                            <!-- Applicant Name -->
                            <div class="form-group col-md-6 col-6 mb-3">
                                <label>नाम <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="applicant_name"
                                    value="{{ old('applicant_name') }}" required>
                                <div class="invalid-feedback">
                                    कृपया नाम भर्नुहोस्
                                </div>
                            </div>

                            <!-- Applicant Address -->
                            <div class="form-group col-md-6 col-6 mb-3">
                                <label>ठेगाना <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="applicant_address" value="{{ old('applicant_address') }}" required>
                                <div class="invalid-feedback">
                                    कृपया ठेगाना भर्नुहोस्
                                </div>
                            </div>

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

                            <!-- Contact Number -->
                            <div class="form-group col-md-6 col-6 mb-3">
                                <label>सम्पर्क नं <span class="text-danger">*</span></label>
                                <input type="tel" class="form-control" name="applicant_phone"
                                    value="{{ old('applicant_phone') }}" required>
                                <div class="invalid-feedback">
                                    कृपया सम्पर्क नं भर्नुहोस्
                                </div>
                            </div>

                            <div class="col-12">
                                <hr>
                                <h5>व्यवसाय विवरण</h5>
                                <hr>
                            </div>

                            <!-- Business Name -->
                            <div class="form-group col-md-6 col-6 mb-3">
                                <label>व्यवसायको नाम <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="business_name"
                                    value="{{ old('business_name') }}" required>
                                <div class="invalid-feedback">
                                    कृपया व्यवसायको नाम भर्नुहोस्
                                </div>
                            </div>

                            <!-- Business Address -->
                            <div class="form-group col-md-6 col-6 mb-3">
                                <label>व्यवसायको ठेगाना <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="business_address"
                                    value="{{ old('business_address') }}" required>
                                <div class="invalid-feedback">
                                    कृपया व्यवसायको ठेगाना भर्नुहोस्
                                </div>
                            </div>

                            <!-- Business Category -->
                            <div class="form-group col-md-6 col-6 mb-3">
                                <label>व्यवसायको प्रकार <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="business_title"
                                    value="{{ old('business_title') }}" required>
                                <div class="invalid-feedback">
                                    कृपया व्यवसायको प्रकार भर्नुहोस्
                                </div>
                            </div>

                            <!-- Business Grade -->
                            <div class="form-group col-md-6 col-6 mb-3">
                                <label>व्यवसायको ग्रेड <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="business_grade"
                                    value="{{ old('business_grade') }}" required>
                                <div class="invalid-feedback">
                                    कृपया व्यवसायको ग्रेड भर्नुहोस्
                                </div>
                            </div>

                            <!-- Business Investment -->
                            <div class="form-group col-md-6 col-6 mb-3">
                                <label>लगानी रकम <span class="text-danger">*</span></label>
                                <input type="text" step="0.01" class="form-control" name="business_investment"
                                    value="{{ old('business_investment') }}" required>
                                <div class="invalid-feedback">
                                    कृपया लगानी रकम भर्नुहोस्
                                </div>
                            </div>

                            <!-- Relations Section - Renewal History -->
                            <div class="col-12 mt-4">
                                <div class="card-header bg-light">
                                    <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-btn">
                                            <i class="fas fa-plus"></i> नयाँ थप्नुहोस्
                                        </button>
                                    </div>
                                </div>
                                <div id="relations-container">
                                    <!-- First relation row -->
                                    <div class="row relation-row mt-3" data-index="0">
                                        <div class="form-group col-md-2 col-6 mb-3">
                                            <label>वर्ष <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control nepali-input" name="relations[0][current_year]"
                                                value="{{ old('relations.0.current_year') }}" placeholder="२०८०" required>
                                            <div class="invalid-feedback">
                                                कृपया वर्ष भर्नुहोस्
                                            </div>
                                        </div>

                                        <div class="form-group col-md-2 col-6 mb-3">
                                            <label>नवीकरण मिति</label>
                                            <input type="text" class="form-control " id="nepali-datepicker" name="relations[0][renewed_date]"
                                                value="{{ old('relations.0.renewed_date') }}" placeholder="YYYY-MM-DD" autocomplete="off">
                                            <div class="invalid-feedback">
                                                कृपया मिति चयन गर्नुहोस्
                                            </div>
                                        </div>

                                        <div class="form-group col-md-2 col-6 mb-3">
                                            <label>इनभ्वाइस नं <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" name="relations[0][invoice_no]"
                                                value="{{ old('relations.0.invoice_no') }}" required>
                                            <div class="invalid-feedback">
                                                कृपया इनभ्वाइस नं भर्नुहोस्
                                            </div>
                                        </div>

                                        <div class="form-group col-md-2 col-6 mb-3">
                                            <label>क्यासियर <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" name="relations[0][cashier]"
                                                value="{{ old('relations.0.cashier') }}" required>
                                            <div class="invalid-feedback">
                                                कृपया क्यासियरको नाम भर्नुहोस्
                                            </div>
                                        </div>

                                        <div class="form-group col-md-3 col-6 mb-3">
                                            <label>विवरण</label>
                                            <textarea rows="2" class="form-control" name="relations[0][description]"
                                                placeholder="कुनै विवरण भए यहाँ लेख्नुहोस्">{{ old('relations.0.description') }}</textarea>
                                            <div class="invalid-feedback">
                                                कृपया विवरण भर्नुहोस्
                                            </div>
                                        </div>

                                        <div class="form-group col-md-1 col-6 d-flex align-items-end">
                                            <button type="button" class="btn btn-danger remove-relation-btn mb-3 w-100"
                                                style="display: none;">
                                                <i class="fas fa-trash"></i> -
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End Relations Section -->
                        </div>
                    </div>
                    <div class="card-footer text-right">
                        <button type="submit" class="btn btn-primary">सुरक्षित गर्नुहोस्</button>
                        <a href="{{ url()->previous() }}" class="btn btn-secondary">रद्द गर्नुहोस्</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Initialize relations index - ensure it's at least 1
            let relationIndex = {{ max(1, count(old('relations', [1]))) }};
            const container = document.getElementById('relations-container');
            const addButton = document.querySelector('.add-relation-btn');



            // Function to add a new relation row
            function addRelationRow() {
                const newIndex = relationIndex;
                const newRow = document.createElement('div');
                newRow.className = 'row relation-row mt-3';
                newRow.setAttribute('data-index', newIndex);

                newRow.innerHTML = `
                    <div class="form-group col-md-2 col-6 mb-3">
                        <label>वर्ष <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" name="relations[${newIndex}][current_year]"
                            value="" placeholder="२०८०" required>
                        <div class="invalid-feedback">
                            कृपया वर्ष भर्नुहोस्
                        </div>
                    </div>

                    <div class="form-group col-md-2 col-6 mb-3">
                        <label>नवीकरण मिति</label>
                        <input type="text" class="form-control" id="nepali-datepicker" name="relations[${newIndex}][renewed_date]"
                            value="" placeholder="YYYY-MM-DD" autocomplete="off">
                        <div class="invalid-feedback">
                            कृपया मिति चयन गर्नुहोस्
                        </div>
                    </div>

                    <div class="form-group col-md-2 col-6 mb-3">
                        <label>इनभ्वाइस नं <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" name="relations[${newIndex}][invoice_no]"
                            value="" required>
                        <div class="invalid-feedback">
                            कृपया इनभ्वाइस नं भर्नुहोस्
                        </div>
                    </div>

                    <div class="form-group col-md-2 col-6 mb-3">
                        <label>क्यासियर <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" name="relations[${newIndex}][cashier]"
                            value="" required>
                        <div class="invalid-feedback">
                            कृपया क्यासियरको नाम भर्नुहोस्
                        </div>
                    </div>

                    <div class="form-group col-md-3 col-6 mb-3">
                        <label>विवरण</label>
                        <textarea rows="2" class="form-control" name="relations[${newIndex}][description]"
                            placeholder="कुनै विवरण भए यहाँ लेख्नुहोस्"></textarea>
                        <div class="invalid-feedback">
                            कृपया विवरण भर्नुहोस्
                        </div>
                    </div>

                    <div class="form-group col-md-1 col-6 d-flex align-items-end">
                        <button type="button" class="btn btn-danger remove-relation-btn mb-3 w-100">
                            <i class="fas fa-trash"></i> -
                        </button>
                    </div>
                `;

                container.appendChild(newRow);
                relationIndex++;



                // Update remove button visibility
                updateRemoveButtons();
            }

            // Function to update remove button visibility
            function updateRemoveButtons() {
                const rows = document.querySelectorAll('.relation-row');
                const removeButtons = document.querySelectorAll('.remove-relation-btn');

                if (rows.length <= 1) {
                    removeButtons.forEach(btn => {
                        btn.style.display = 'none';
                    });
                } else {
                    removeButtons.forEach(btn => {
                        btn.style.display = 'flex';
                    });
                }
            }

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

            // Remove row when clicking remove button
            if (container) {
                container.addEventListener('click', function(e) {
                    const removeBtn = e.target.closest('.remove-relation-btn');
                    if (removeBtn) {
                        const row = removeBtn.closest('.relation-row');
                        if (container.children.length > 1) {
                            row.remove();
                            updateRemoveButtons();
                        } else {
                            alert('कम्तीमा एउटा नवीकरण विवरण राख्नुहोस्');
                        }
                    }
                });
            }

            // Bootstrap form validation
            const form = document.getElementById('business-register-form');
            if (form) {
                form.addEventListener('submit', function(event) {
                    if (!form.checkValidity()) {
                        event.preventDefault();
                        event.stopPropagation();
                    }
                    form.classList.add('was-validated');
                }, false);
            }

            // Initialize remove button visibility
            updateRemoveButtons();

            // Nepali numeric input handling (allow Nepali digits)
            const nepaliInputs = document.querySelectorAll('.nepali-input');
            if (nepaliInputs.length > 0) {
                nepaliInputs.forEach(input => {
                    input.addEventListener('input', function(e) {
                        // Convert Nepali digits to English digits if needed
                        let value = this.value;
                        const nepaliDigits = ['०', '१', '२', '३', '४', '५', '६', '७', '८', '९'];
                        const englishDigits = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];

                        for (let i = 0; i < nepaliDigits.length; i++) {
                            const regex = new RegExp(nepaliDigits[i], 'g');
                            value = value.replace(regex, englishDigits[i]);
                        }

                        if (value !== this.value) {
                            this.value = value;
                        }
                    });
                });
            }

            // Handle form reset
            const resetButton = document.querySelector('button[type="reset"]');
            if (resetButton) {
                resetButton.addEventListener('click', function(e) {
                    e.preventDefault();
                    if (confirm('के तपाईं फारम रद्द गर्न चाहनुहुन्छ? सबै विवरण मेटिनेछ।')) {
                        form.reset();
                        form.classList.remove('was-validated');
                        // Reset relations to single row
                        while (container.children.length > 1) {
                            container.removeChild(container.lastChild);
                        }
                        const firstRow = container.querySelector('.relation-row');
                        if (firstRow) {
                            firstRow.querySelectorAll('input, textarea').forEach(input => {
                                input.value = '';
                            });
                        }
                        relationIndex = 1;
                        updateRemoveButtons();
                    }
                });
            }
        });
    </script>


@endpush