@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 Kharid Form</h3>
                </div>
                <div class="card-body">
                    <form method="POST" action="{{ route('panel.kharid-forms.store') }}" id="kharidForm">
                        @csrf

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label>Maag Form <span class="text-danger">*</span></label>
                                <select name="maag_form_id" id="maag_form_id" class="form-control @error('maag_form_id') is-invalid @enderror" required>
                                    <option value="">Select Maag Form</option>
                                    @foreach($maagForms as $maagForm)
                                        <option value="{{ $maagForm->id }}" data-id-no="{{ $maagForm->id_no }}">
                                            {{ $maagForm->id_no }} - {{ $maagForm->date->format('Y-m-d') }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('maag_form_id')
                                    <span class="invalid-feedback">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label>Purchase 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') }}" required>
                                @error('date_in_nepali')
                                    <span class="invalid-feedback">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-4">
                                <label>Shop Name <span class="text-danger">*</span></label>
                                <input type="text" name="shop_name" class="form-control @error('shop_name') is-invalid @enderror" value="{{ old('shop_name') }}" required>
                                @error('shop_name')
                                    <span class="invalid-feedback">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-md-4">
                                <label>Shop Address <span class="text-danger">*</span></label>
                                <input type="text" name="shop_address" class="form-control @error('shop_address') is-invalid @enderror" value="{{ old('shop_address') }}" required>
                                @error('shop_address')
                                    <span class="invalid-feedback">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-md-2">
                                <label>Tax No</label>
                                <input type="text" name="tax_no" class="form-control @error('tax_no') is-invalid @enderror" value="{{ old('tax_no') }}">
                                @error('tax_no')
                                    <span class="invalid-feedback">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-md-2">
                                <label>Shop Phone <span class="text-danger">*</span></label>
                                <input type="text" name="shop_phone" class="form-control @error('shop_phone') is-invalid @enderror" value="{{ old('shop_phone') }}">
                                @error('shop_phone')
                                    <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" 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" value="{{ old('recommended_position') }}">
                                @error('recommended_position')
                                    <span class="invalid-feedback">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-12">
                                <label>Remarks</label>
                                <textarea name="remarks" class="form-control @error('remarks') is-invalid @enderror" rows="2">{{ old('remarks') }}</textarea>
                                @error('remarks')
                                    <span class="invalid-feedback">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

                        <div class="card mt-4" id="productsCard" style="display: none;">
                            <div class="card-header">
                                <h4>Products from Maag Form</h4>
                            </div>
                            <div class="card-body">
                                <div id="productsContainer"></div>
                            </div>
                        </div>

                        <div class="mt-4">
                            <button type="submit" class="btn btn-primary" id="submitBtn" style="display: none;">Create Kharid Form</button>
                            <a href="{{ route('panel.kharid-forms.index') }}" class="btn btn-secondary">Cancel</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
let productIndex = 0;

$('#maag_form_id').change(function() {
    const maagFormId = $(this).val();
    if (!maagFormId) {
        $('#productsCard').hide();
        $('#submitBtn').hide();
        return;
    }

    $.ajax({
        url: '{{ route("panel.kharid-forms.get-products") }}',
        method: 'POST',
        data: {
            maag_form_id: maagFormId,
            _token: '{{ csrf_token() }}'
        },
        success: function(response) {
            if (response.success && response.products.length === 0) {
                alert('No products available or all products have been purchased');
                $('#productsCard').hide();
                $('#submitBtn').hide();
                return;
            }

            if (response.success) {
                $('#productsCard').show();
                $('#submitBtn').show();
                $('#productsContainer').empty();

                response.products.forEach(function(product, index) {
                    const productHtml = `
                        <div class="product-row mb-3 row border-bottom pb-3" data-product-id="${product.id}">
                            <div class="col-md-3">
                                <strong>${product.product_name}</strong><br>
                                <small>${product.specification || 'No specification'}</small><br>
                                <small>Unit: ${product.unit}</small><br>
                                <small>Available: ${product.remaining_qty}</small>
                                <input type="hidden" name="products[${index}][maag_form_product_id]" value="${product.id}">
                            </div>
                            <div class="col-md-3">
                                <label>Amount per unit <span class="text-danger">*</span></label>
                                <input type="number" name="products[${index}][amount]" step="0.01" class="form-control amount" required>
                            </div>
                            <div class="col-md-3">
                                <label>Quantity to Purchase</label>
                                <input type="number" name="products[${index}][qty]" step="0.01" class="form-control qty" max="${product.max_qty}" value="${product.max_qty}">
                            </div>
                            <div class="col-md-3">
                                <label>Total Amount</label>
                                <input type="number" name="products[${index}][total]" step="0.01" class="form-control total" readonly>
                            </div>
                        </div>
                    `;
                    $('#productsContainer').append(productHtml);
                });

                productIndex = response.products.length;

                // Calculate total when amount or quantity changes
                $(document).on('input', '.amount, .qty', function() {
                    const row = $(this).closest('.product-row');
                    const amount = row.find('.amount').val();
                    const qty = row.find('.qty').val();
                    if (amount && qty) {
                        const total = parseFloat(amount) * parseFloat(qty);
                        row.find('.total').val(total.toFixed(2));
                    } else {
                        row.find('.total').val('');
                    }
                });

                // Trigger calculation on initial load
                $('.amount, .qty').trigger('input');
            }
        },
        error: function(xhr) {
            alert(xhr.responseJSON?.message || 'Error loading products');
        }
    });
});
</script>
@endpush
@endsection