@extends('layouts.admin')

@section('title', 'Create Invoice')
@section('page-title', 'Create Invoice')

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('invoices.index') }}">Invoices</a></li>
    <li class="breadcrumb-item active" aria-current="page">Create</li>
@endsection

@section('content')
<div class="card card-primary card-outline mb-4">
    <div class="card-body">
        <form action="{{ route('invoices.store') }}" method="POST" id="invoiceForm">
            @csrf
            
            <!-- Client Selection -->
            <div class="mb-3">
                <label for="clientSelect" class="form-label"><i class="bi bi-person"></i> Select Client (Optional)</label>
                <select class="form-select @error('client_id') is-invalid @enderror" id="clientSelect" name="client_id">
                    <option value="">-- Manual Entry --</option>
                    @foreach($clients as $client)
                        <option value="{{ $client->id }}" 
                                data-name="{{ $client->name }}"
                                data-email="{{ $client->email }}"
                                data-phone="{{ $client->phone }}"
                                data-address="{{ $client->company ? $client->company->address : '' }}"
                                data-company="{{ $client->company ? $client->company->name : '' }}">
                            {{ $client->name }} 
                            @if($client->company)
                                ({{ $client->company->name }})
                            @endif
                        </option>
                    @endforeach
                </select>
                @error('client_id')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <div class="row">
                <div class="col-md-6 mb-3">
                    <label for="customer_name" class="form-label">Customer Name <span class="text-danger">*</span></label>
                    <input type="text" class="form-control @error('customer_name') is-invalid @enderror" 
                           id="customer_name" name="customer_name" value="{{ old('customer_name') }}" required>
                    @error('customer_name')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-md-6 mb-3">
                    <label for="customer_email" class="form-label">Customer Email</label>
                    <input type="email" class="form-control @error('customer_email') is-invalid @enderror" 
                           id="customer_email" name="customer_email" value="{{ old('customer_email') }}">
                    @error('customer_email')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>

            <div class="row">
                <div class="col-md-6 mb-3">
                    <label for="customer_phone" class="form-label">Customer Phone</label>
                    <input type="text" class="form-control @error('customer_phone') is-invalid @enderror" 
                           id="customer_phone" name="customer_phone" value="{{ old('customer_phone') }}">
                    @error('customer_phone')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-md-6 mb-3">
                    <label for="status" class="form-label">Status <span class="text-danger">*</span></label>
                    <select class="form-select @error('status') is-invalid @enderror" id="status" name="status" required>
                        <option value="quotation" {{ old('status') == 'quotation' ? 'selected' : '' }}>Quotation</option>
                        <option value="invoice" {{ old('status') == 'invoice' ? 'selected' : '' }}>Invoice</option>
                    </select>
                    @error('status')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>

            <div class="row">
                <div class="col-md-6 mb-3">
                    <label for="invoice_date" class="form-label">Invoice Date <span class="text-danger">*</span></label>
                    <input type="date" class="form-control @error('invoice_date') is-invalid @enderror" 
                           id="invoice_date" name="invoice_date" value="{{ old('invoice_date', date('Y-m-d')) }}" required>
                    @error('invoice_date')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-md-6 mb-3">
                    <label for="due_date" class="form-label">Due Date</label>
                    <input type="date" class="form-control @error('due_date') is-invalid @enderror" 
                           id="due_date" name="due_date" value="{{ old('due_date', date('Y-m-d', strtotime('+30 days'))) }}">
                    @error('due_date')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>

            <div class="mb-3">
                <label for="customer_address" class="form-label">Customer Address</label>
                <textarea class="form-control @error('customer_address') is-invalid @enderror" 
                          id="customer_address" name="customer_address" rows="2">{{ old('customer_address') }}</textarea>
                @error('customer_address')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <div class="row">
                <div class="col-md-6 mb-3">
                    <label for="tax" class="form-label">Tax (%)</label>
                    <input type="number" step="0.01" class="form-control @error('tax') is-invalid @enderror" 
                           name="tax" value="{{ old('tax', 0) }}" id="tax">
                    @error('tax')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-md-6 mb-3">
                    <label for="discount" class="form-label">Discount</label>
                    <input type="number" step="0.01" class="form-control @error('discount') is-invalid @enderror" 
                           name="discount" value="{{ old('discount', 0) }}" id="discount">
                    @error('discount')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>

            <div class="mb-3">
                <label for="notes" class="form-label">Notes</label>
                <textarea class="form-control @error('notes') is-invalid @enderror" 
                          id="notes" name="notes" rows="2">{{ old('notes') }}</textarea>
                @error('notes')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <hr class="my-4">
            
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h4 class="m-0"><i class="bi bi-list-task"></i> Invoice Items</h4>
                <div>
                    <button type="button" class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#libraryModal">
                        <i class="bi bi-book"></i> Add from Library
                    </button>
                </div>
            </div>
            
            <div id="itemsContainer">
                <div class="row mb-3 p-3 border rounded bg-body-tertiary align-items-end">
                    <div class="col-md-5">
                        <label class="form-label">Description <span class="text-danger">*</span></label>
                        <textarea class="trumbowyg form-control" name="items[0][description]" rows="3" required></textarea>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">Quantity <span class="text-danger">*</span></label>
                        <input type="number" class="form-control quantity" name="items[0][quantity]" 
                               value="1" min="1" required>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">Unit Price <span class="text-danger">*</span></label>
                        <input type="number" step="0.01" class="form-control unit-price" 
                               name="items[0][unit_price]" value="0" min="0" required>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">Amount</label>
                        <input type="text" class="form-control amount" readonly value="0.00">
                    </div>
                    <div class="col-md-1 text-center">
                        <button type="button" class="btn btn-danger btn-sm remove-item">
                            <i class="bi bi-x-lg"></i>
                        </button>
                    </div>
                </div>
            </div>

            <button type="button" class="btn btn-info text-white mb-3" id="addItem">
                <i class="bi bi-plus-lg"></i> Add Item
            </button>

            <div class="mt-4">
                <div class="row">
                    <div class="col-md-6 offset-md-6">
                        <table class="table table-bordered">
                            <tbody>
                                <tr>
                                    <td><strong>Subtotal</strong></td>
                                    <td class="text-end" id="subtotal">RM 0.00</td>
                                </tr>
                                <tr>
                                    <td><strong>Tax</strong></td>
                                    <td class="text-end" id="taxDisplay">RM 0.00</td>
                                </tr>
                                <tr>
                                    <td><strong>Discount</strong></td>
                                    <td class="text-end" id="discountDisplay">RM 0.00</td>
                                </tr>
                                <tr>
                                    <td><strong>Total</strong></td>
                                    <td class="text-end" id="totalDisplay"><strong>RM 0.00</strong></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="mt-3">
                <button type="submit" class="btn btn-primary">
                    <i class="bi bi-floppy"></i> Save
                </button>
                <a href="{{ route('invoices.index') }}" class="btn btn-secondary">
                    <i class="bi bi-x-circle"></i> Cancel
                </a>
            </div>
        </form>
    </div>
</div>

<!-- Library Modal -->
<div class="modal fade" id="libraryModal" tabindex="-1" aria-labelledby="libraryModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="libraryModalLabel"><i class="bi bi-book"></i> Item Library</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label for="libraryCategoryFilter" class="form-label">Filter by Category</label>
                    <select class="form-select" id="libraryCategoryFilter">
                        <option value="">All Categories</option>
                        @foreach($categories as $category)
                            <option value="{{ $category }}">{{ $category }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="table-responsive">
                    <table class="table table-hover table-striped">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Description</th>
                                <th>Category</th>
                                <th>Price</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody id="libraryItemsBody">
                            @foreach($libraryItems as $item)
                                <tr data-item-id="{{ $item->id }}">
                                    <td><strong>{{ $item->name }}</strong></td>
                                    <td>{{ Str::limit($item->description, 50) }}</td>
                                    <td><span class="badge text-bg-info">{{ $item->category ?? 'Uncategorized' }}</span></td>
                                    <td>RM {{ number_format($item->default_price, 2) }}</td>
                                    <td>
                                        <button type="button" class="btn btn-primary btn-sm add-from-library" 
                                                data-id="{{ $item->id }}"
                                                data-name="{{ $item->name }}"
                                                data-description="{{ $item->description }}"
                                                data-price="{{ $item->default_price }}">
                                            <i class="bi bi-plus-lg"></i> Add
                                        </button>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <a href="{{ route('item-library.index') }}" class="btn btn-info text-white" target="_blank">
                    <i class="bi bi-pencil-square"></i> Manage Library
                </a>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
$(document).ready(function() {
    let itemIndex = {{ count($libraryItems) > 0 ? 1 : 1 }};

    // Client selection
    $('#clientSelect').change(function() {
        const selected = $(this).find('option:selected');
        const clientId = $(this).val();
        
        if (clientId) {
            const name = selected.data('name') || '';
            const email = selected.data('email') || '';
            const phone = selected.data('phone') || '';
            const address = selected.data('address') || '';

            $('#customer_name').val(name).prop('readonly', true);
            $('#customer_email').val(email).prop('readonly', true);
            $('#customer_phone').val(phone).prop('readonly', true);
            $('#customer_address').val(address).prop('readonly', true);
        } else {
            $('#customer_name').val('').prop('readonly', false);
            $('#customer_email').val('').prop('readonly', false);
            $('#customer_phone').val('').prop('readonly', false);
            $('#customer_address').val('').prop('readonly', false);
        }
    });

    // Add item row
    $('#addItem').click(function() {
        const row = `
            <div class="row mb-3 p-3 border rounded bg-body-tertiary align-items-end">
                <div class="col-md-5">
                    <label class="form-label">Description <span class="text-danger">*</span></label>
                    <textarea class="trumbowyg form-control" name="items[${itemIndex}][description]" rows="3" required></textarea>
                </div>
                <div class="col-md-2">
                    <label class="form-label">Quantity <span class="text-danger">*</span></label>
                    <input type="number" class="form-control quantity" name="items[${itemIndex}][quantity]" 
                           value="1" min="1" required>
                </div>
                <div class="col-md-2">
                    <label class="form-label">Unit Price <span class="text-danger">*</span></label>
                    <input type="number" step="0.01" class="form-control unit-price" 
                           name="items[${itemIndex}][unit_price]" value="0" min="0" required>
                </div>
                <div class="col-md-2">
                    <label class="form-label">Amount</label>
                    <input type="text" class="form-control amount" readonly value="0.00">
                </div>
                <div class="col-md-1 text-center">
                    <button type="button" class="btn btn-danger btn-sm remove-item">
                        <i class="bi bi-x-lg"></i>
                    </button>
                </div>
            </div>
        `;
        $('#itemsContainer').append(row);
        $(row).find('.trumbowyg').trumbowyg();
        itemIndex++;
        calculateTotals();
    });

    // Remove item row
    $(document).on('click', '.remove-item', function() {
        if ($('#itemsContainer .row').length > 1) {
            $(this).closest('.row').remove();
            calculateTotals();
        } else {
            alert('At least one item is required.');
        }
    });

    // Calculate item amount
    $(document).on('input', '.quantity, .unit-price', function() {
        const row = $(this).closest('.row');
        const quantity = parseFloat(row.find('.quantity').val()) || 0;
        const unitPrice = parseFloat(row.find('.unit-price').val()) || 0;
        const amount = quantity * unitPrice;
        row.find('.amount').val(amount.toFixed(2));
        calculateTotals();
    });

    // Calculate totals
    function calculateTotals() {
        let subtotal = 0;
        $('.amount').each(function() {
            subtotal += parseFloat($(this).val()) || 0;
        });

        const taxRate = parseFloat($('#tax').val()) || 0;
        const discount = parseFloat($('#discount').val()) || 0;
        const tax = subtotal * (taxRate / 100);
        const total = subtotal + tax - discount;

        $('#subtotal').text('RM ' + subtotal.toFixed(2));
        $('#taxDisplay').text('RM ' + tax.toFixed(2));
        $('#discountDisplay').text('RM ' + discount.toFixed(2));
        $('#totalDisplay').html('<strong>RM ' + total.toFixed(2) + '</strong>');
    }

    $('#tax, #discount').on('input', calculateTotals);

    // Initial calculation
    calculateTotals();

    // Add from library
    $(document).on('click', '.add-from-library', function() {
        const description = $(this).data('description');
        const price = $(this).data('price');
        
        // Find the last item row and check if it's empty
        const lastRow = $('#itemsContainer .row').last();
        const descTextarea = lastRow.find('textarea[name*="[description]"]');
        const priceInput = lastRow.find('input[name*="[unit_price]"]');
        const qtyInput = lastRow.find('input[name*="[quantity]"]');
        
        // Grab the current HTML inside Trumbowyg (or fallback to textarea val)
        const currentContent = descTextarea.trumbowyg('html') || descTextarea.val();

        // Check if the last row is empty
        if (!currentContent || currentContent.trim() === '') {
            // Update Trumbowyg's internal editor DOM via its API
            if (descTextarea.data('trumbowyg')) {
                descTextarea.trumbowyg('html', description);
            } else {
                descTextarea.val(description);
            }

            priceInput.val(price);
            qtyInput.val(1);
        } else {
            // Build new row HTML string
            const rowHtml = `
                <div class="row mb-3 p-3 border rounded bg-body-tertiary align-items-end item-row">
                    <div class="col-md-5">
                        <label class="form-label">Description <span class="text-danger">*</span></label>
                        <textarea class="trumbowyg form-control" name="items[${itemIndex}][description]" rows="3" required>${description}</textarea>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">Quantity <span class="text-danger">*</span></label>
                        <input type="number" class="form-control quantity" name="items[${itemIndex}][quantity]" 
                            value="1" min="1" required>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">Unit Price <span class="text-danger">*</span></label>
                        <input type="number" step="0.01" class="form-control unit-price" 
                            name="items[${itemIndex}][unit_price]" value="${price}" min="0" required>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">Amount</label>
                        <input type="text" class="form-control amount" readonly value="${price}">
                    </div>
                    <div class="col-md-1 text-center">
                        <button type="button" class="btn btn-danger btn-sm remove-item">
                            <i class="bi bi-x-lg"></i>
                        </button>
                    </div>
                </div>
            `;

            const $newRow = $(rowHtml);
            $('#itemsContainer').append($newRow);

            // Initialize Trumbowyg on the newly created row's textarea
            $newRow.find('.trumbowyg').trumbowyg();

            itemIndex++;
        }
        
        // Trigger calculation updates
        $('.quantity, .unit-price').trigger('input');
        
        // Close Bootstrap 5 Modal
        const modalEl = document.getElementById('libraryModal');
        const modal = bootstrap.Modal.getInstance(modalEl);
        if (modal) {
            modal.hide();
        }
    });

    // Library category filter
    $('#libraryCategoryFilter').change(function() {
        const category = $(this).val();
        if (category) {
            $('#libraryItemsBody tr').hide();
            $('#libraryItemsBody tr').filter(function() {
                return $(this).find('td:eq(2) .badge').text().trim() === category;
            }).show();
        } else {
            $('#libraryItemsBody tr').show();
        }
    });
});
</script>
@endsection