@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 bg-warning text-white">
                    <h3 class="mb-0">Edit Maag Form #{{ $maagForm->id_no }}</h3>
                </div>
                <div class="card-body">
                    <form method="POST" action="{{ route('panel.maag-forms.update', $maagForm->id) }}" id="maagForm">
                        @csrf
                        @method('PUT')

                        <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 }}" {{ old('year_id', $maagForm->year_id) == $year->id ? 'selected' : '' }}>
                                            {{ $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" value="{{ old('date_in_nepali', $maagForm->date_in_nepali) }}" 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', $maagForm->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', $maagForm->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', $maagForm->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', $maagForm->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', $maagForm->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', $maagForm->checked_by) == $user->id ? 'selected' : '' }}>{{ $user->name }}</option>
                                    @endforeach
                                </select>
                                @error('checked_by')
                                    <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" value="{{ old('recommended_by', $maagForm->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" value="{{ old('recommended_position', $maagForm->recommended_position) }}">
                                @error('recommended_position')
                                    <span class="invalid-feedback">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

                        <div class="card mt-4">
                            <div class="card-header bg-primary text-white">
                                <div class="d-flex justify-content-between align-items-center">
                                    <h5 class="mb-0">Products</h5>
                                    <button type="button" class="btn btn-light btn-sm" id="addProductBtn">
                                        <i class="fas fa-plus"></i> Add Product
                                    </button>
                                </div>
                            </div>
                            <div class="card-body">
                                <div id="productsContainer">
                                    @if($maagForm->products->count() > 0)
                                        @foreach($maagForm->products as $index => $product)
                                            <div class="product-row mb-4 row border-bottom pb-3" data-index="{{ $index }}">
                                                <input type="hidden" name="products[{{ $index }}][id]" value="{{ $product->id }}">
                                                <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="{{ old("products.{$index}.product_name", $product->product_name) }}" required>
                                                </div>
                                                <div class="col-md-3">
                                                    <label>Specification</label>
                                                    <textarea name="products[{{ $index }}][specification]" class="form-control" rows="2">{{ old("products.{$index}.specification", $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="{{ old("products.{$index}.unit", $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="{{ old("products.{$index}.qty", $product->qty) }}" required>
                                                </div>
                                                <div class="col-md-2">
                                                    <label>Remarks</label>
                                                    <input type="text" name="products[{{ $index }}][remarks]" class="form-control" value="{{ old("products.{$index}.remarks", $product->remarks) }}">
                                                    @if($index > 0)
                                                        <button type="button" class="btn btn-danger btn-sm mt-2 remove-product">
                                                            <i class="fas fa-trash"></i> Remove
                                                        </button>
                                                    @endif
                                                </div>
                                            </div>
                                        @endforeach
                                    @else
                                        <div class="product-row mb-4 row border-bottom pb-3" 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="2"></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 class="card-footer bg-light">
                                <div class="row">
                                    <div class="col-md-6 offset-md-6">
                                        <table class="table table-bordered">
                                            <tr class="table-info">
                                                <td width="60%"><strong>Total Products:</strong></td>
                                                <td class="text-end"><strong id="totalProductsCount">{{ $maagForm->products->count() }}</strong></td>
                                            </tr>
                                            <tr class="table-success">
                                                <td><strong>Total Quantity:</strong></td>
                                                <td class="text-end"><strong id="totalQuantity">{{ $maagForm->products->sum('qty') }}</strong></td>
                                            </tr>
                                         </table>
                                    </div>
                                </div>
                            </div>
                        </div>

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

@push('scripts')
<script>
let productIndex = {{ $maagForm->products->count() }};

function updateTotals() {
    let totalProducts = $('.product-row').length;
    let totalQuantity = 0;

    $('.product-row').each(function() {
        let qty = parseFloat($(this).find('input[name*="[qty]"]').val()) || 0;
        totalQuantity += qty;
    });

    $('#totalProductsCount').text(totalProducts);
    $('#totalQuantity').text(totalQuantity.toFixed(2));
}

// Add new product
$('#addProductBtn').click(function() {
    const newRow = `
        <div class="product-row mb-4 row border-bottom pb-3" 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="2"></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>
                <div class="input-group">
                    <input type="text" name="products[${productIndex}][remarks]" class="form-control">
                    <button type="button" class="btn btn-danger remove-product">
                        <i class="fas fa-trash"></i>
                    </button>
                </div>
            </div>
        </div>
    `;
    $('#productsContainer').append(newRow);
    productIndex++;
    updateTotals();
});

// Remove product
$(document).on('click', '.remove-product', function() {
    const productRows = $('.product-row');
    if (productRows.length > 1) {
        $(this).closest('.product-row').remove();
        updateTotals();

        // Renumber remaining products
        $('.product-row').each(function(newIndex) {
            $(this).attr('data-index', newIndex);
            $(this).find('input, textarea').each(function() {
                const name = $(this).attr('name');
                if (name) {
                    const newName = name.replace(/products\[\d+\]/, `products[${newIndex}]`);
                    $(this).attr('name', newName);
                }
            });
        });
    } else {
        alert('At least one product is required');
    }
});

// Update quantity totals when quantity changes
$(document).on('input', 'input[name*="[qty]"]', function() {
    updateTotals();
});

// Form validation
$('#maagForm').on('submit', function(e) {
    let hasErrors = false;
    let errorMessages = [];

    // Validate at least one product exists
    if ($('.product-row').length === 0) {
        errorMessages.push('At least one product is required');
        hasErrors = true;
    }

    // Validate each product has required fields
    $('.product-row').each(function(index) {
        const productName = $(this).find('input[name*="[product_name]"]').val();
        const unit = $(this).find('input[name*="[unit]"]').val();
        const qty = $(this).find('input[name*="[qty]"]').val();

        if (!productName) {
            errorMessages.push(`Product ${index + 1}: Product Name is required`);
            hasErrors = true;
        }
        if (!unit) {
            errorMessages.push(`Product ${index + 1}: Unit is required`);
            hasErrors = true;
        }
        if (!qty || parseFloat(qty) <= 0) {
            errorMessages.push(`Product ${index + 1}: Valid Quantity is required`);
            hasErrors = true;
        }
    });

    if (hasErrors) {
        e.preventDefault();
        alert(errorMessages.join('\n'));
        return false;
    }
});

// Initialize totals on page load
$(document).ready(function() {
    updateTotals();

    // Add delete button styling for existing products (except first)
    $('.product-row').each(function(index) {
        if (index > 0 && $(this).find('.remove-product').length === 0) {
            $(this).find('.col-md-2').append(`
                <button type="button" class="btn btn-danger btn-sm mt-2 remove-product">
                    <i class="fas fa-trash"></i> Remove
                </button>
            `);
        }
    });
});
</script>
@endpush
@endsection