@extends('admin.layouts.app')

@section('title', 'Create Voucher')
@section('page_title', 'Create Voucher')

@section('styles')
<style>
    .voucher-create-container { margin-top: 20px; padding-left: 15px; padding-right: 15px; }
</style>
@endsection

@section('content')
<div class="card voucher-create-container">
    <div class="card-header">
        <h5 class="mb-0">Create Voucher</h5>
    </div>
    <div class="card-body">
        <form action="{{ route('vouchers.store') }}" method="POST">
            @csrf
            <div class="row">
                <div class="col-md-4 mb-3">
                    <label class="form-label">Voucher No</label>
                    <input type="text" name="voucher_no" class="form-control @error('voucher_no') is-invalid @enderror" value="{{ old('voucher_no', $voucher_no) }}" required>
                    @error('voucher_no')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-md-4 mb-3">
                    <label class="form-label">Date <span class="text-danger">*</span></label>
                    <input type="date" name="date" class="form-control @error('date') is-invalid @enderror" value="{{ old('date', date('Y-m-d')) }}" required>
                    @error('date')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-md-4 mb-3">
                    <label class="form-label">Type <span class="text-danger">*</span></label>
                    <select name="type" id="voucherType" class="form-select @error('type') is-invalid @enderror" required>
                        <option value="">Select Type</option>
                        <option value="credit" {{ old('type') == 'credit' ? 'selected' : '' }}>Credit Voucher (Customer Payment)</option>
                        <option value="debit" {{ old('type') == 'debit' ? 'selected' : '' }}>Debit Voucher (Supplier Payment)</option>
                        <option value="expense" {{ old('type') == 'expense' ? 'selected' : '' }}>Expense Voucher (Debit Voucher)</option>
                    </select>
                    @error('type')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>

            {{-- Credit Voucher Fields (Customer) --}}
            <div id="creditVoucherFields" style="display: none;">
                <div class="row mb-3">
                    <div class="col-md-4">
                        <label class="form-label">Customer <span class="text-danger">*</span></label>
                        <select name="customer_id" id="customerSelect" class="form-select @error('customer_id') is-invalid @enderror">
                            <option value="">Select Customer</option>
                            @foreach($customers as $customer)
                                <option value="{{ $customer->id }}" data-branches="{{ $customer->branches->toJson() }}">{{ $customer->name }}</option>
                            @endforeach
                        </select>
                        @error('customer_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Branch</label>
                        <select name="branch_id" id="branchSelect" class="form-select">
                            <option value="">Select Branch (Optional)</option>
                        </select>
                    </div>
                </div>

                {{-- Credit Voucher Amount Fields --}}
                <div id="creditAmountFields" style="display: none;">
                    <div class="row">
                        <div class="col-md-3 mb-3">
                            <label class="form-label">Discount</label>
                            <input type="number" name="discount" class="form-control" step="0.01" min="0" value="{{ old('discount', 0) }}">
                        </div>
                        <div class="col-md-3 mb-3">
                            <label class="form-label">TDS</label>
                            <input type="number" name="tds" class="form-control" step="0.01" min="0" value="{{ old('tds', 0) }}">
                        </div>
                        <div class="col-md-3 mb-3">
                            <label class="form-label">VDS</label>
                            <input type="number" name="vds" class="form-control" step="0.01" min="0" value="{{ old('vds', 0) }}">
                        </div>
                        <div class="col-md-3 mb-3">
                            <label class="form-label">Received Amount <span class="text-danger">*</span></label>
                            <input type="number" name="received_amount" id="receivedAmount" class="form-control" step="0.01" min="0" value="{{ old('received_amount', 0) }}" required>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <label class="form-label">Invoice Number (Optional)</label>
                            <select name="sale_id" id="invoiceSelect" class="form-select">
                                <option value="">Select Invoice (Optional)</option>
                            </select>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label">Payment Method <span class="text-danger">*</span></label>
                            <select name="payment_method" class="form-select" required>
                                <option value="">Select Payment Method</option>
                                @php
                                    $methods = explode(',', $settings['payment_methods'] ?? 'Cash,Bank,Cheque,Mobile Banking');
                                @endphp
                                @foreach($methods as $method)
                                    <option value="{{ trim($method) }}" {{ old('payment_method') == trim($method) ? 'selected' : '' }}>{{ trim($method) }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label">Description</label>
                            <input type="text" name="description" class="form-control" value="{{ old('description') }}" placeholder="Enter description">
                        </div>
                    </div>
                </div>
            </div>

            {{-- Debit Voucher Fields (Supplier or Expenses) --}}
            <div id="debitVoucherFields" style="display: none;">
                <div class="row mb-3">
                    <div class="col-md-6">
                        <label class="form-label">Party Type <span class="text-danger">*</span></label>
                        <select name="party_type" id="partyTypeSelect" class="form-select">
                            <option value="">Select Party Type</option>
                            <option value="supplier">Supplier</option>
                            <option value="expenses">Expenses</option>
                        </select>
                    </div>
                </div>

                {{-- Supplier Selection --}}
                <div id="supplierSelection" style="display: none;">
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label class="form-label">Supplier <span class="text-danger">*</span></label>
                            <select name="supplier_id" id="supplierSelect" class="form-select">
                                <option value="">Select Supplier</option>
                                @foreach($suppliers as $supplier)
                                    <option value="{{ $supplier->id }}">{{ $supplier->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>

                {{-- Expenses Selection --}}
                <div id="expensesSelection" style="display: none;">
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label class="form-label">Expenses Category <span class="text-danger">*</span></label>
                            <select name="expense_category" id="expenseCategorySelect" class="form-select">
                                <option value="">Select Category</option>
                                @foreach($expenseCategories as $cat)
                                    <option value="{{ $cat->name }}">{{ $cat->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>

                {{-- Debit Voucher Amount Fields (Supplier) --}}
                <div id="supplierAmountFields" style="display: none;">
                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <label class="form-label">Discount</label>
                            <input type="number" name="discount" class="form-control" step="0.01" min="0" value="{{ old('discount', 0) }}">
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label">Payment Amount <span class="text-danger">*</span></label>
                            <input type="number" name="payment_amount" id="paymentAmount" class="form-control" step="0.01" min="0" value="{{ old('payment_amount', 0) }}" required>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label">Purchase Invoice (Optional)</label>
                            <select name="purchase_id" id="purchaseSelect" class="form-select">
                                <option value="">Select Purchase Invoice (Optional)</option>
                            </select>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Description</label>
                            <input type="text" name="description" class="form-control" value="{{ old('description') }}" placeholder="Enter description">
                        </div>
                    </div>
                </div>

                {{-- Debit Voucher Amount Fields (Expenses) --}}
                <div id="expensesAmountFields" style="display: none;">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Expenses Amount <span class="text-danger">*</span></label>
                            <input type="number" name="expense_amount" id="expenseAmount" class="form-control" step="0.01" min="0" value="{{ old('expense_amount', 0) }}" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Description</label>
                            <input type="text" name="description" class="form-control" value="{{ old('description') }}" placeholder="Enter description">
                        </div>
                    </div>
                </div>
            </div>

            <input type="hidden" name="party_id" id="partyIdHidden" value="">
            <input type="hidden" name="party_type" id="partyTypeHidden" value="">

            <div class="row mt-3">
                <div class="col-md-12">
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save"></i> Save Voucher
                    </button>
                    <a href="{{ route('vouchers.index') }}" class="btn btn-secondary">
                        <i class="fas fa-arrow-left"></i> Back
                    </a>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection

@section('scripts')
<script>
$(document).ready(function() {
    var baseUrl = '{{ url("/") }}';
    
    // Toggle conflicting duplicate fields so hidden ones don't get submitted
    function toggleDuplicateFields(type) {
        $('#creditAmountFields input[name="discount"]').prop('disabled', type !== 'credit');
        $('#supplierAmountFields input[name="discount"]').prop('disabled', type !== 'debit' || $('#partyTypeSelect').val() !== 'supplier');
        $('#creditAmountFields input[name="description"]').prop('disabled', type !== 'credit');
        $('#supplierAmountFields input[name="description"]').prop('disabled', type !== 'debit' || $('#partyTypeSelect').val() !== 'supplier');
        $('#expensesAmountFields input[name="description"]').prop('disabled', !(type === 'debit' && $('#partyTypeSelect').val() === 'expenses') && type !== 'expense');
    }

    // Handle voucher type change
    $('#voucherType').change(function() {
        var voucherType = $(this).val();
        
        // Hide all fields
        $('#creditVoucherFields').hide();
        $('#debitVoucherFields').hide();
        $('#creditAmountFields').hide();
        $('#supplierSelection').hide();
        $('#expensesSelection').hide();
        $('#supplierAmountFields').hide();
        $('#expensesAmountFields').hide();
        $('#partyIdHidden').val('');
        $('#partyTypeHidden').val('');
        
        if (voucherType === 'credit') {
            $('#creditVoucherFields').show();
            $('#partyTypeHidden').val('customer');
            // Reset fields
            $('#customerSelect').val('');
            $('#branchSelect').html('<option value="">Select Branch (Optional)</option>');
            $('#receivedAmount').val('0');
            $('#invoiceSelect').html('<option value="">Select Invoice (Optional)</option>');
        } else if (voucherType === 'debit') {
            $('#debitVoucherFields').show();
            $('#partyTypeSelect').val('');
            // Reset fields
            $('#supplierSelect').val('');
            $('#expenseCategorySelect').val('');
            $('#paymentAmount').val('0');
            $('#expenseAmount').val('0');
            $('#purchaseSelect').html('<option value="">Select Purchase Invoice (Optional)</option>');
        } else if (voucherType === 'expense') {
            $('#debitVoucherFields').show();
            $('#partyTypeSelect').val('expenses');
            $('#expensesSelection').show();
            $('#expensesAmountFields').show();
            $('#partyTypeHidden').val('expenses');
            // Reset fields
            $('#expenseCategorySelect').val('');
            $('#expenseAmount').val('0');
            $('#expensesAmountFields input[name="description"]').val('');
        }
        
        toggleDuplicateFields(voucherType);
    });
    
    function loadBranches(customerSelect) {
        var selectedOption = customerSelect.find('option:selected');
        var branches = selectedOption.data('branches');
        var branchSelect = $('#branchSelect');
        
        branchSelect.html('<option value="">Select Branch (Optional)</option>');
        
        if (branches && branches.length > 0) {
            $.each(branches, function(index, branch) {
                if (branch.status == 1) {
                    branchSelect.append('<option value="' + branch.id + '">' + branch.name + '</option>');
                }
            });
        }
    }
    
    // Handle customer selection
    $('#customerSelect').change(function() {
        var customerId = $(this).val();
        $('#partyIdHidden').val(customerId);
        loadBranches($(this));
        
        if (customerId) {
            $('#creditAmountFields').show();
            loadCustomerInvoices(customerId, $('#branchSelect').val());
        } else {
            $('#creditAmountFields').hide();
        }
    });
    
    // Handle branch selection for credit voucher
    $('#branchSelect').change(function() {
        var customerId = $('#customerSelect').val();
        if (customerId) {
            loadCustomerInvoices(customerId, $(this).val());
        }
    });
    
    // Handle party type selection for debit voucher
    $('#partyTypeSelect').change(function() {
        var partyType = $(this).val();
        
        $('#supplierSelection').hide();
        $('#expensesSelection').hide();
        $('#supplierAmountFields').hide();
        $('#expensesAmountFields').hide();
        $('#partyIdHidden').val('');
        
        if (partyType === 'supplier') {
            $('#supplierSelection').show();
            $('#partyTypeHidden').val('supplier');
            $('#expensesAmountFields').hide();
        } else if (partyType === 'expenses') {
            $('#expensesSelection').show();
            $('#partyTypeHidden').val('expenses');
            $('#expensesAmountFields').show();
        }
        
        toggleDuplicateFields($('#voucherType').val());
    });
    
    // Handle supplier selection
    $('#supplierSelect').change(function() {
        var supplierId = $(this).val();
        $('#partyIdHidden').val(supplierId);
        
        if (supplierId) {
            $('#supplierAmountFields').show();
            loadSupplierPurchases(supplierId);
        } else {
            $('#supplierAmountFields').hide();
        }
    });
    
    // Handle expense category selection
    $('#expenseCategorySelect').change(function() {
        var category = $(this).val();
        if (category) {
            $('#expensesAmountFields').show();
        }
    });
    
    // Load customer invoices
    function loadCustomerInvoices(customerId, branchId) {
        var invoiceSelect = $('#invoiceSelect');
        invoiceSelect.html('<option value="">Loading...</option>');
        
        var params = { customer_id: customerId };
        if (branchId) {
            params.branch_id = branchId;
        }
        
        $.get(baseUrl + '/get-customer-sales', params)
            .done(function(data) {
                invoiceSelect.html('<option value="">Select Invoice (Optional)</option>');
                if (data && data.length > 0) {
                    $.each(data, function(index, sale) {
                        invoiceSelect.append('<option value="' + sale.id + '">' + sale.invoice_no + ' (Total: ' + parseFloat(sale.total).toFixed(2) + ', Due: ' + parseFloat(sale.due).toFixed(2) + ')</option>');
                    });
                } else {
                    invoiceSelect.html('<option value="">No invoices found</option>');
                }
            })
            .fail(function() {
                invoiceSelect.html('<option value="">Failed to load</option>');
            });
    }
    
    // Load supplier purchases
    function loadSupplierPurchases(supplierId) {
        var purchaseSelect = $('#purchaseSelect');
        purchaseSelect.html('<option value="">Loading...</option>');
        
        $.get(baseUrl + '/get-supplier-purchases', { supplier_id: supplierId })
            .done(function(data) {
                purchaseSelect.html('<option value="">Select Purchase Invoice (Optional)</option>');
                if (data && data.length > 0) {
                    $.each(data, function(index, purchase) {
                        purchaseSelect.append('<option value="' + purchase.id + '">' + purchase.invoice_no + ' (Total: ' + parseFloat(purchase.total).toFixed(2) + ', Due: ' + parseFloat(purchase.due).toFixed(2) + ')</option>');
                    });
                } else {
                    purchaseSelect.html('<option value="">No purchases found</option>');
                }
            })
            .fail(function() {
                purchaseSelect.html('<option value="">Failed to load</option>');
            });
    }
    
    // Initialize on page load based on URL parameter
    var urlParams = new URLSearchParams(window.location.search);
    var urlType = urlParams.get('type');
    
    if (urlType === 'credit') {
        $('#voucherType').val(urlType).trigger('change');
        $('#branchSelect').html('<option value="">Select Branch (Optional)</option>');
    } else if (urlType === 'debit') {
        $('#voucherType').val(urlType).trigger('change');
        setTimeout(function() {
            $('#partyTypeSelect').val('supplier').trigger('change');
        }, 100);
    } else if (urlType === 'expense') {
        $('#voucherType').val(urlType).trigger('change');
    }
});
</script>
@endsection