@extends('frontend.vendor_dashboard.dashboard.layouts.app')

@section('content')
    <div class="page-content">


        <!-- Breadcrumb-->
        <div class="row pt-2 pb-2">
            <div class="col-sm-10">
                <h4 class="page-title">Nagarik Patra </h4>

            </div>
            <div class="col-sm-2">
                <div class="btn-group float-sm-right">
                    <a href="{{ route('vendor.vendor-nagarik.create') }}"
                        class="btn btn-outline-primary waves-effect waves-light">
                        <i class="fa fa-plus mr-1"></i> Add New
                    </a>


                </div>
            </div>
        </div>
        <!-- End Breadcrumb-->
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-body">
                        <form method="post" action="{{ route('vendor.vendor-nagarik.store') }}" class="needs-validation"
                            novalidate="" id="birth-form">
                            @csrf

                            <div class="card-header">
                                <h4>Add Nagarik Wada Patra</h4>
                            </div>
                            <div class="card-body">
                                <div class="row ">

                                    <!-- Relations Section -->
                                    <div class="col-12">
                                        <div class="card-header">
                                            <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-top-btn">
                                                    <i class="fas fa-plus"></i> थप नाता
                                                </button>
                                            </div>
                                        </div>
                                        <div id="relations-container">
                                            <!-- First relation row -->
                                            <div class="row relation-row" data-index="0">
                                                <div class="form-group col-md-2 col-2 mb-3">
                                                    <label>विषय</label>
                                                    <input type="text" class="form-control nepali-input"
                                                        name="relations[0][title]" value="{{ old('relations.0.title') }}"
                                                        required="">
                                                    <div class="invalid-feedback">
                                                        कृपया नाता भर्नुहोस्
                                                    </div>
                                                </div>

                                                <div class="form-group col-md-8 col-8 mb-3">
                                                    <label>कागजात पत्र</label>
                                                    <textarea class="form-control nepali-input" name="relations[0][document]" value="{{ old('relations.0.document') }}"
                                                        required=""></textarea>
                                                    <div class="invalid-feedback">
                                                        कृपया नाताको नाम भर्नुहोस्
                                                    </div>
                                                </div>


                                                <div class="form-group col-md-2 col-2 d-flex align-items-end">
                                                    <button type="button" class="btn btn-danger remove-relation-btn mb-3"
                                                        style="width: 100%;">
                                                        <i class="fas fa-minus"></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>
                                <button type="reset" class="btn btn-secondary">रद्द गर्नुहोस्</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div><!-- End Row-->
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Initialize relationIndex based on existing rows
            let relationIndex = document.querySelectorAll('.relation-row').length;
            const container = document.getElementById('relations-container');
            const addButton = document.querySelector('.add-relation-top-btn');

            function addRelationRow() {
                const newRow = document.createElement('div');
                newRow.className = 'row relation-row';
                newRow.setAttribute('data-index', relationIndex);

                newRow.innerHTML = `
                <div class="form-group col-md-2 col-2 mb-3">
                    <label>विषय</label>
                    <input type="text" class="form-control nepali-input" name="relations[${relationIndex}][title]" required="">
                    <div class="invalid-feedback">
                        कृपया विषय भर्नुहोस्
                    </div>
                </div>

                <div class="form-group col-md-8 col-8 mb-3">
                    <label>कागजात पत्र</label>
                    <textarea class="form-control nepali-input" name="relations[${relationIndex}][document]" required=""></textarea>
                    <div class="invalid-feedback">
                        कृपया कागजात पत्र भर्नुहोस्
                    </div>
                </div>



                <div class="form-group col-md-2 col-2 d-flex align-items-end">
                    <button type="button" class="btn btn-danger remove-relation-btn mb-3" style="width: 100%;">
                        <i class="fas fa-minus"></i>
                    </button>
                </div>
            `;

                container.appendChild(newRow);
                relationIndex++;
            }

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

            // Remove row when clicking remove button
            container.addEventListener('click', function(e) {
                const removeBtn = e.target.closest('.remove-relation-btn');
                if (removeBtn) {
                    const row = removeBtn.closest('.relation-row');
                    // Don't remove if it's the last row
                    if (container.children.length > 1) {
                        row.remove();
                    } else {
                        alert('कम्तिमा एउटा नाता राख्नुहोस्');
                    }
                }
            });
        });
    </script>
@endpush