@extends('layouts.admin')

@section('title', 'Edit Invoice')
@section('page-title', 'Edit Invoice')
@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('invoices.index') }}">Invoices</a></li>
    <li class="breadcrumb-item active">Edit</li>
@endsection

@section('content')
<div class="card card-outline card-primary">
    <div class="card-header">
        <h3 class="card-title">
            <i class="bi bi-pencil-square"></i> Editing Invoice: <strong>{{ $invoice->invoice_number }}</strong>
            <span class="badge bg-{{ $invoice->status_color }} ms-2">
                {{ $invoice->status_label }}
            </span>
        </h3>
        <div class="card-tools">
            <a href="{{ route('invoices.show', $invoice) }}" class="btn btn-info btn-sm text-white">
                <i class="bi bi-eye"></i> View
            </a>
            <a href="{{ route('invoices.print', $invoice) }}" target="_blank" class="btn btn-secondary btn-sm">
                <i class="bi bi-printer"></i> Print
            </a>
            <a href="{{ route('invoices.download-pdf', $invoice) }}" class="btn btn-danger btn-sm">
                <i class="bi bi-file-earmark-pdf"></i> PDF
            </a>
        </div>
    </div>
    <div class="card-body">
        @if(!$invoice->isQuotation() && !$invoice->isCancelled())
            <div class="alert alert-warning">
                <i class="bi bi-exclamation-triangle"></i> 
                This invoice cannot be edited because it's already in <strong>{{ $invoice->status_label }}</strong> status.
                <a href="{{ route('invoices.show', $invoice) }}" class="alert-link">View details</a>
            </div>
        @else
        <form action="{{ route('invoices.update', $invoice) }}" method="POST" id="invoiceForm">
            @csrf
            @method('PUT')
            
            <!-- Client Selection -->
            <div class="mb-3">
                <label 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 }}" 
                                {{ $invoice->client_id == $client->id ? 'selected' : '' }}
                                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>

            <!-- Client Info Display -->
            @if($invoice->client_id)
                <div class="alert alert-info">
                    <i class="bi bi-info-circle"></i> 
                    <strong>Client Information:</strong><br>
                    <div class="row mt-2">
                        <div class="col-md-6">
                            <strong>Name:</strong> {{ $invoice->client->name ?? '' }}
                        </div>
                        <div class="col-md-6">
                            <strong>Email:</strong> {{ $invoice->client->email ?? '' }}
                        </div>
                        <div class="col-md-6">
                            <strong>Phone:</strong> {{ $invoice->client->phone ?? '' }}
                        </div>
                        <div class="col-md-6">
                            <strong>Company:</strong> {{ $invoice->client->company->name ?? '' }}
                        </div>
                        <div class="col-md-12">
                            <strong>Address:</strong> {{ $invoice->client->company->address ?? '' }}
                        </div>
                    </div>
                </div>
            @endif

            <hr>

            <div class="row">
                <div class="col-md-6">
                    <div class="mb-3">
                        <label 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', $invoice->customer_name) }}" required>
                        @error('customer_name')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="mb-3">
                        <label 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', $invoice->customer_email) }}">
                        @error('customer_email')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <div class="mb-3">
                        <label 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', $invoice->customer_phone) }}">
                        @error('customer_phone')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="mb-3">
                        <label class="form-label">Status</label>
                        <select class="form-select" name="status" disabled>
                            <option value="quotation" {{ $invoice->status == 'quotation' ? 'selected' : '' }}>Quotation</option>
                            <option value="invoice" {{ $invoice->status == 'invoice' ? 'selected' : '' }}>Invoice</option>
                            <option value="paid" {{ $invoice->status == 'paid' ? 'selected' : '' }}>Paid</option>
                            <option value="cancelled" {{ $invoice->status == 'cancelled' ? 'selected' : '' }}>Cancelled</option>
                        </select>
                        <small class="text-muted">Status cannot be changed here. Use action buttons on view page.</small>
                    </div>
                </div>
            </div>

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

            <div class="mb-3">
                <label 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', $invoice->customer_address) }}</textarea>
                @error('customer_address')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

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

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

            <hr>
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h4 class="mb-0"><i class="bi bi-list-ul"></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">
                @foreach($invoice->items as $index => $item)
                <div class="row mb-3 p-3 border rounded bg-light align-items-end item-row">
                    <div class="col-md-5">
                        <div class="mb-3 mb-md-0">
                            <label class="form-label">Description <span class="text-danger">*</span></label>
                            <textarea class="trumbowyg form-control" name="items[{{ $index }}][description]" rows="3" required>{{ $item->description }}</textarea>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="mb-3 mb-md-0">
                            <label class="form-label">Quantity <span class="text-danger">*</span></label>
                            <input type="number" class="form-control quantity" name="items[{{ $index }}][quantity]" 
                                   value="{{ $item->quantity }}" min="1" required>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="mb-3 mb-md-0">
                            <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[{{ $index }}][unit_price]" value="{{ $item->unit_price }}" min="0" required>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="mb-3 mb-md-0">
                            <label class="form-label">Amount</label>
                            <input type="text" class="form-control amount" readonly value="{{ number_format($item->amount, 2, '.', '') }}">
                        </div>
                    </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>
                @endforeach
            </div>

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

            <div class="mt-4">
                <div class="row">
                    <div class="col-md-6 offset-md-6">
                        <table class="table table-bordered">
                            <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>
                        </table>
                    </div>
                </div>
            </div>

            <div class="mt-3">
                <button type="submit" class="btn btn-primary">
                    <i class="bi bi-floppy"></i> Update
                </button>
                <a href="{{ route('invoices.index') }}" class="btn btn-secondary">
                    <i class="bi bi-x-circle"></i> Cancel
                </a>
            </div>
        </form>
        @endif
    </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 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(strip_tags($item->description), 50) }}</td>
                                    <td><span class="badge bg-info text-dark">{{ $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($invoice->items) }};



    // Client selection - auto fill customer fields
    $('#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);
        }
    });

    // 2. Add item row dynamically
    $('#addItem').click(function() {
        const row = `
            <div class="row mb-3 p-3 border rounded bg-light align-items-end item-row">
                <div class="col-md-5">
                    <div class="mb-3 mb-md-0">
                        <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>
                <div class="col-md-2">
                    <div class="mb-3 mb-md-0">
                        <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>
                <div class="col-md-2">
                    <div class="mb-3 mb-md-0">
                        <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>
                <div class="col-md-2">
                    <div class="mb-3 mb-md-0">
                        <label class="form-label">Amount</label>
                        <input type="text" class="form-control amount" readonly value="0.00">
                    </div>
                </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 = $(row);
        $('#itemsContainer').append($newRow);
        
        // Init editor on new element
        $newRow.find('.trumbowyg').trumbowyg();

        itemIndex++;
        calculateTotals();
    });

    // 3. Remove item row with Trumbowyg destroy
    $(document).on('click', '.remove-item', function() {
        if ($('#itemsContainer .item-row').length > 1) {
            const $row = $(this).closest('.item-row');
            
            // Clean up instance first
            $row.find('.trumbowyg').trumbowyg('destroy');
            $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('.item-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 run
    calculateTotals();

    // 4. Add from library with Trumbowyg Support
    $(document).on('click', '.add-from-library', function() {
        const description = $(this).data('description');
        const price = $(this).data('price');
        
        const lastRow = $('#itemsContainer .item-row').last();
        const descTextarea = lastRow.find('textarea[name*="[description]"]');
        const priceInput = lastRow.find('input[name*="[unit_price]"]');
        const qtyInput = lastRow.find('input[name*="[quantity]"]');
        
        const currentContent = descTextarea.trumbowyg('html') || descTextarea.val();

        if (!currentContent || currentContent.trim() === '') {
            // Update last empty row
            if (descTextarea.data('trumbowyg')) {
                descTextarea.trumbowyg('html', description);
            } else {
                descTextarea.val(description);
            }
            priceInput.val(price);
            qtyInput.val(1);
        } else {
            // Create brand new row
            const row = `
                <div class="row mb-3 p-3 border rounded bg-light align-items-end item-row">
                    <div class="col-md-5">
                        <div class="mb-3 mb-md-0">
                            <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>
                    <div class="col-md-2">
                        <div class="mb-3 mb-md-0">
                            <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>
                    <div class="col-md-2">
                        <div class="mb-3 mb-md-0">
                            <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>
                    <div class="col-md-2">
                        <div class="mb-3 mb-md-0">
                            <label class="form-label">Amount</label>
                            <input type="text" class="form-control amount" readonly value="${price}">
                        </div>
                    </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 = $(row);
            $('#itemsContainer').append($newRow);
            
            // Init editor on appended element
            $newRow.find('.trumbowyg').trumbowyg();
            itemIndex++;
        }
        
        // Trigger calculation
        $('.quantity, .unit-price').trigger('input');
        
        // Close modal via Bootstrap 5 API
        const modalElement = document.getElementById('libraryModal');
        const modalInstance = bootstrap.Modal.getInstance(modalElement);
        if (modalInstance) {
            modalInstance.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