@extends('admin.layouts.app')
@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h3>Create New Maag Form</h3>
                </div>
                <div class="card-body">
                    <form method="POST" action="{{ route('panel.maag-forms.store') }}" id="maagForm">
                        @csrf

                        <div class="row mb-3">
                            <div class="col-md-4">
                                <label>Year <span class="text-danger">*</span></label>
                                <select name="year_id" class="form-control @error('year_id') is-invalid @enderror nepali-input" required>
                                    <option value="">Select Year</option>
                                    @foreach ($years as $year)
                                    <option value="{{ $year->id }}">{{ $year->name }}</option>

                                    @endforeach
                                </select>
                                @error('year_id')
                                    <span class="invalid-feedback">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-md-4">
                                <label>Date <span class="text-danger">*</span></label>
                                <input type="text" name="date_in_nepali" id="pickernepalidate" class="form-control @error('date_in_nepali') is-invalid @enderror" required>
                                @error('date_in_nepali')
                                    <span class="invalid-feedback">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-md-4">
                                <label>Purpose</label>
                                <input type="text" name="purpose" class="form-control @error('purpose') is-invalid @enderror" value="{{ old('purpose') }}">
                                @error('purpose')
                                    <span class="invalid-feedback">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-4">
                                <label>Ward <span class="text-danger">*</span></label>
                                <select name="ward_id" class="form-control @error('ward_id') is-invalid @enderror" required>
                                    <option value="">Select Ward</option>
                                    @foreach($wards as $ward)
                                        <option value="{{ $ward->id }}" {{ old('ward_id') == $ward->id ? 'selected' : '' }}>{{ $ward->name }}</option>
                                    @endforeach
                                </select>
                                @error('ward_id')
                                    <span class="invalid-feedback">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-md-4">
                                <label>Municipality <span class="text-danger">*</span></label>
                                <select name="municipality_id" class="form-control @error('municipality_id') is-invalid @enderror" required>
                                    <option value="">Select Municipality</option>
                                    @foreach($municipalities as $municipality)
                                        <option value="{{ $municipality->id }}" {{ old('municipality_id') == $municipality->id ? 'selected' : '' }}>{{ $municipality->name }}</option>
                                    @endforeach
                                </select>
                                @error('municipality_id')
                                    <span class="invalid-feedback">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-md-4">
                                <label>Ward Chairman <span class="text-danger">*</span></label>
                                <select name="wardchairman_id" class="form-control @error('wardchairman_id') is-invalid @enderror" required>
                                    <option value="">Select Ward Chairman</option>
                                    @foreach($chairmen as $chairman)
                                        <option value="{{ $chairman->id }}" {{ old('wardchairman_id') == $chairman->id ? 'selected' : '' }}>{{ $chairman->name }}</option>
                                    @endforeach
                                </select>
                                @error('wardchairman_id')
                                    <span class="invalid-feedback">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-4">
                                <label>Requested By <span class="text-danger">*</span></label>
                                <select name="requested_by" class="form-control @error('requested_by') is-invalid @enderror" required>
                                    <option value="">Select User</option>
                                    @foreach($users as $user)
                                        <option value="{{ $user->id }}" {{ old('requested_by') == $user->id ? 'selected' : '' }}>{{ $user->name }}</option>
                                    @endforeach
                                </select>
                                @error('requested_by')
                                    <span class="invalid-feedback">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-md-4">
                                <label>Checked By <span class="text-danger">*</span></label>
                                <select name="checked_by" class="form-control @error('checked_by') is-invalid @enderror" required>
                                     <option value="">Select User</option>
                                    @foreach($users as $user)
                                        <option value="{{ $user->id }}" {{ old('checked_by') == $user->id ? 'selected' : '' }}>{{ $user->name }}</option>
                                    @endforeach
                                </select>
                                @error('municipality_id')
                                    <span class="invalid-feedback">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-md-4">
                                <label>Recommended By <span class="text-danger">*</span></label>
                                 <input type="text" name="recommended_by" class="form-control @error('recommended_by') is-invalid @enderror nepali-input" value="{{ old('recommended_by') }}">
                                @error('recommended_by')
                                    <span class="invalid-feedback">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-12">
                                <label>Recommended Position <span class="text-danger">*</span></label>
                                <input type="text" name="recommended_position" class="form-control @error('recommended_position') is-invalid @enderror nepali-input" value="{{ old('recommended_position') }}" >
                                @error('recommended_position')
                                    <span class="invalid-feedback">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

                        <div class="card mt-4">
                            <div class="card-header">
                                <h4>Products</h4>
                                <button type="button" class="btn btn-primary btn-sm" id="addProductBtn">Add Product</button>
                            </div>
                            <div class="card-body">
                                <div id="productsContainer">
                                    @if(old('products'))
                                        @foreach(old('products') as $index => $product)
                                            <div class="product-row mb-3 row" data-index="{{ $index }}">
                                                <div class="col-md-3">
                                                    <label>Product Name <span class="text-danger">*</span></label>
                                                    <input type="text" name="products[{{ $index }}][product_name]" class="form-control" value="{{ $product['product_name'] }}" required>
                                                </div>
                                                <div class="col-md-3">
                                                    <label>Specification</label>
                                                    <textarea name="products[{{ $index }}][specification]" class="form-control" rows="1">{{ $product['specification'] ?? '' }}</textarea>
                                                </div>
                                                <div class="col-md-2">
                                                    <label>Unit <span class="text-danger">*</span></label>
                                                    <input type="text" name="products[{{ $index }}][unit]" class="form-control" value="{{ $product['unit'] }}" required>
                                                </div>
                                                <div class="col-md-2">
                                                    <label>Quantity <span class="text-danger">*</span></label>
                                                    <input type="number" name="products[{{ $index }}][qty]" step="0.01" class="form-control" value="{{ $product['qty'] }}" required>
                                                </div>
                                                <div class="col-md-2">
                                                    <label>Remarks</label>
                                                    <input type="text" name="products[{{ $index }}][remarks]" class="form-control" value="{{ $product['remarks'] ?? '' }}">
                                                    <button type="button" class="btn btn-danger btn-sm mt-2 remove-product">Remove</button>
                                                </div>
                                            </div>
                                        @endforeach
                                    @else
                                        <div class="product-row mb-3 row" data-index="0">
                                            <div class="col-md-3">
                                                <label>Product Name <span class="text-danger">*</span></label>
                                                <input type="text" name="products[0][product_name]" class="form-control" required>
                                            </div>
                                            <div class="col-md-3">
                                                <label>Specification</label>
                                                <textarea name="products[0][specification]" class="form-control" rows="1"></textarea>
                                            </div>
                                            <div class="col-md-2">
                                                <label>Unit <span class="text-danger">*</span></label>
                                                <input type="text" name="products[0][unit]" class="form-control" required>
                                            </div>
                                            <div class="col-md-2">
                                                <label>Quantity <span class="text-danger">*</span></label>
                                                <input type="number" name="products[0][qty]" step="0.01" class="form-control" required>
                                            </div>
                                            <div class="col-md-2">
                                                <label>Remarks</label>
                                                <input type="text" name="products[0][remarks]" class="form-control">
                                            </div>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>

                        <div class="mt-4">
                            <button type="submit" class="btn btn-primary">Create Maag Form</button>
                            <a href="{{ route('panel.maag-forms.index') }}" class="btn btn-secondary">Cancel</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
let productIndex = {{ old('products') ? count(old('products')) : 1 }};

$('#addProductBtn').click(function() {
    const newRow = `
        <div class="product-row mb-3 row" data-index="${productIndex}">
            <div class="col-md-3">
                <label>Product Name <span class="text-danger">*</span></label>
                <input type="text" name="products[${productIndex}][product_name]" class="form-control" required>
            </div>
            <div class="col-md-3">
                <label>Specification</label>
                <textarea name="products[${productIndex}][specification]" class="form-control" rows="1"></textarea>
            </div>
            <div class="col-md-2">
                <label>Unit <span class="text-danger">*</span></label>
                <input type="text" name="products[${productIndex}][unit]" class="form-control" required>
            </div>
            <div class="col-md-2">
                <label>Quantity <span class="text-danger">*</span></label>
                <input type="number" name="products[${productIndex}][qty]" step="0.01" class="form-control" required>
            </div>
            <div class="col-md-2">
                <label>Remarks</label>
                <input type="text" name="products[${productIndex}][remarks]" class="form-control">
                <button type="button" class="btn btn-danger btn-sm mt-2 remove-product">Remove</button>
            </div>
        </div>
    `;
    $('#productsContainer').append(newRow);
    productIndex++;
});

$(document).on('click', '.remove-product', function() {
    if ($('.product-row').length > 1) {
        $(this).closest('.product-row').remove();
    } else {
        alert('At least one product is required');
    }
});
</script>
@endpush
@endsection