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

                    <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 @error('chalani_no') is-invalid @enderror"
                                    id="chalani_no" name="chalani_no"
                                    value="{{ old('chalani_no', $businessRegister->chalani_no) }}" required>
                                @error('chalani_no')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @else
                                    <div class="invalid-feedback">कृपया दर्ता नं भर्नुहोस्</div>
                                @enderror
                            </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  @error('sanket_no') is-invalid @enderror"
                                    name="sanket_no" value="{{ old('sanket_no', $businessRegister->sanket_no) }}" required>
                                @error('sanket_no')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @else
                                    <div class="invalid-feedback">कृपया संकेत नं भर्नुहोस्</div>
                                @enderror
                            </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 @error('applicant_name') is-invalid @enderror"
                                    name="applicant_name" value="{{ old('applicant_name', $businessRegister->applicant_name) }}" required>
                                @error('applicant_name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @else
                                    <div class="invalid-feedback">कृपया नाम भर्नुहोस्</div>
                                @enderror
                            </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 @error('applicant_address') is-invalid @enderror"
                                    name="applicant_address" value="{{ old('applicant_address', $businessRegister->applicant_address) }}" required>
                                @error('applicant_address')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @else
                                    <div class="invalid-feedback">कृपया ठेगाना भर्नुहोस्</div>
                                @enderror
                            </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 @error('applicant_citizen') is-invalid @enderror"
                                    name="applicant_citizen" value="{{ old('applicant_citizen', $businessRegister->applicant_citizen) }}" required>
                                @error('applicant_citizen')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @else
                                    <div class="invalid-feedback">कृपया नागरिकता नं भर्नुहोस्</div>
                                @enderror
                            </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 @error('applicant_phone') is-invalid @enderror"
                                    name="applicant_phone" value="{{ old('applicant_phone', $businessRegister->applicant_phone) }}" required>
                                @error('applicant_phone')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @else
                                    <div class="invalid-feedback">कृपया सम्पर्क नं भर्नुहोस्</div>
                                @enderror
                            </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 @error('business_name') is-invalid @enderror"
                                    name="business_name" value="{{ old('business_name', $businessRegister->business_name) }}" required>
                                @error('business_name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @else
                                    <div class="invalid-feedback">कृपया व्यवसायको नाम भर्नुहोस्</div>
                                @enderror
                            </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 @error('business_address') is-invalid @enderror"
                                    name="business_address" value="{{ old('business_address', $businessRegister->business_address) }}" required>
                                @error('business_address')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @else
                                    <div class="invalid-feedback">कृपया व्यवसायको ठेगाना भर्नुहोस्</div>
                                @enderror
                            </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 @error('business_title') is-invalid @enderror"
                                    name="business_title" value="{{ old('business_title', $businessRegister->business_title) }}" required>
                                @error('business_title')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @else
                                    <div class="invalid-feedback">कृपया व्यवसायको प्रकार भर्नुहोस्</div>
                                @enderror
                            </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 @error('business_grade') is-invalid @enderror"
                                    name="business_grade" value="{{ old('business_grade', $businessRegister->business_grade) }}" required>
                                @error('business_grade')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @else
                                    <div class="invalid-feedback">कृपया व्यवसायको ग्रेड भर्नुहोस्</div>
                                @enderror
                            </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 @error('business_investment') is-invalid @enderror"
                                    name="business_investment" value="{{ old('business_investment', $businessRegister->business_investment) }}" required>
                                @error('business_investment')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @else
                                    <div class="invalid-feedback">कृपया लगानी रकम भर्नुहोस्</div>
                                @enderror
                            </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">
                                    @php
                                        $relations = is_string($businessRegister->relations)
                                            ? json_decode($businessRegister->relations, true)
                                            : $businessRegister->relations;
                                        $relations = $relations ?? [];
                                    @endphp

                                    @forelse($relations as $index => $relation)
                                        <div class="row relation-row mt-3" data-index="{{ $index }}">
                                            <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[{{ $index }}][current_year]"
                                                    value="{{ old("relations.{$index}.current_year", $relation['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[{{ $index }}][renewed_date]"
                                                    value="{{ old("relations.{$index}.renewed_date", $relation['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[{{ $index }}][invoice_no]"
                                                    value="{{ old("relations.{$index}.invoice_no", $relation['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[{{ $index }}][cashier]"
                                                    value="{{ old("relations.{$index}.cashier", $relation['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[{{ $index }}][description]"
                                                    placeholder="कुनै विवरण भए यहाँ लेख्नुहोस्">{{ old("relations.{$index}.description", $relation['description'] ?? '') }}</textarea>
                                            </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"
                                                    {{ count($relations) <= 1 ? 'style="display: none;"' : '' }}>
                                                    <i class="fas fa-trash"></i> हटाउनुहोस्
                                                </button>
                                            </div>
                                        </div>
                                    @empty
                                        <!-- Default empty row if no relations exist -->
                                        <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" name="relations[0][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[0][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[0][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[0][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[0][description]"
                                                    placeholder="कुनै विवरण भए यहाँ लेख्नुहोस्"></textarea>
                                            </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>
                                    @endforelse
                                </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.business-register.index') }}" class="btn btn-secondary">रद्द गर्नुहोस्</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Get existing relations count
        let relationIndex = {{ count($relations ?? []) }};
        if (relationIndex === 0) relationIndex = 1;

        const container = document.getElementById('relations-container');
        const addButton = document.querySelector('.add-relation-btn');

        // Function to initialize Nepali date picker on an element
        function initializeDatePicker(element) {
            if (element && typeof element.NepaliDatePicker === 'function') {
                element.NepaliDatePicker({
                    unicodeDate: true
                });
            }
        }

        // Initialize date pickers for existing rows
        function initializeAllDatePickers() {
            document.querySelectorAll('.nepali-datepicker-input').forEach(function(element) {
                if (!element.hasAttribute('data-datepicker-initialized')) {
                    initializeDatePicker(element);
                    element.setAttribute('data-datepicker-initialized', 'true');
                }
            });
        }

        // 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 nepali-datepicker-input"
                        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>

                <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);

            // Initialize date picker for the new row
            const newDatePicker = newRow.querySelector('.nepali-datepicker-input');
            initializeDatePicker(newDatePicker);

            relationIndex++;
            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('कम्तीमा एउटा नवीकरण विवरण राख्नुहोस्');
                    }
                }
            });
        }

        // Initialize all existing date pickers
        initializeAllDatePickers();

        // 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();
    });
</script>
@endpush