@extends('admin.layouts.app')

@section('title','Edit Invoice')

@section('content')

<style>
    .invoice-section-title {
        color: #0f172a;
        font-size: 18px;
        margin-bottom: 18px;
    }

    .invoice-table-actions {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
        margin: 26px 0 14px;
    }

    .invoice-table-actions h3 {
        color: #0f172a;
        font-size: 18px;
    }

    .invoice-form-table input,
    .invoice-form-table textarea {
        width: 100%;
        border: 1px solid #cbd5e1;
        background: #f8fafc;
        border-radius: 10px;
        padding: 10px 12px;
        font-size: 14px;
        color: #0f172a;
    }

    .invoice-form-table textarea {
        min-height: 42px;
        resize: vertical;
    }

    .invoice-form-table input:focus,
    .invoice-form-table textarea:focus {
        outline: none;
        border-color: #16a34a;
        background: #fff;
        box-shadow: 0 0 0 4px rgba(22, 163, 74, .12);
    }

    .invoice-table-frame {
        overflow-x: auto;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
    }

    .invoice-total-input {
        font-weight: 700;
    }
</style>

<div class="page-header">
    <div>
        <h2>Edit Invoice</h2>
        <p>{{ $invoice->invoice_no }} - update services, tax, and payment status</p>
    </div>

</div>

@if($errors->any())
    <div class="alert alert-danger">
        <ul style="margin:0; padding-left:18px;">
            @foreach($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

<div class="table-card">
    <form action="{{ route('admin.invoices.update', $invoice->id) }}" method="POST">
        @csrf
        @method('PUT')

        <h3 class="invoice-section-title">Invoice Details</h3>

        <div class="form-grid">
            <div class="form-group">
                <label>Invoice No</label>
                <input type="text" value="{{ $invoice->invoice_no }}" readonly>
            </div>

            <div class="form-group">
                <label>Booking</label>
                <input type="text" value="{{ $invoice->booking->booking_no ?? '-' }}" readonly>
            </div>

            <div class="form-group">
                <label>Invoice Date *</label>
                <input type="date" name="invoice_date" value="{{ old('invoice_date', $invoice->invoice_date) }}" required>
            </div>
        </div>

        <div class="invoice-table-actions">
            <h3>Service Items</h3>
            <button type="button" class="btn-primary" onclick="addRow()">
                <i class="fas fa-plus"></i> Add Service
            </button>
        </div>

        <div class="invoice-table-frame">
            <table class="admin-table invoice-form-table" id="itemsTable">
                <thead>
                    <tr>
                        <th>Service Name *</th>
                        <th>Description</th>
                        <th width="100">Qty *</th>
                        <th width="150">Rate *</th>
                        <th width="150">Total</th>
                        <th width="80">Action</th>
                    </tr>
                </thead>

                <tbody>
                    @foreach($invoice->items as $item)
                        <tr>
                            <td><input type="text" name="service_name[]" value="{{ $item->service_name }}" required></td>
                            <td><textarea name="description[]" rows="1">{{ $item->description }}</textarea></td>
                            <td><input type="number" name="quantity[]" class="qty" value="{{ $item->quantity }}" min="1" oninput="calculateTotals()" required></td>
                            <td><input type="number" name="unit_price[]" class="rate" value="{{ $item->unit_price }}" min="0" step="0.01" oninput="calculateTotals()" required></td>
                            <td><input type="text" class="row-total" value="{{ number_format($item->total, 2, '.', '') }}" readonly></td>
                            <td>
                                <button type="button" class="btn-sm btn-delete" onclick="removeRow(this)" title="Remove">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        <h3 class="invoice-section-title" style="margin-top:26px;">Amount Details</h3>

        <div class="form-grid">
            <div class="form-group">
                <label>Subtotal</label>
                <input type="text" id="subtotal" value="{{ number_format($invoice->subtotal, 2, '.', '') }}" readonly>
            </div>

            <div class="form-group">
                <label>Discount</label>
                <input type="number" name="discount" id="discount" value="{{ old('discount', $invoice->discount) }}" min="0" step="0.01" oninput="calculateTotals()">
            </div>

            <div class="form-group">
                <label>GST %</label>
                <input type="number" name="gst_percentage" id="gst_percentage" value="{{ old('gst_percentage', $invoice->gst_percentage) }}" min="0" step="0.01" oninput="calculateTotals()">
            </div>

            <div class="form-group">
                <label>GST Amount</label>
                <input type="text" id="gst_amount" value="{{ number_format($invoice->gst_amount, 2, '.', '') }}" readonly>
            </div>

            <div class="form-group">
                <label>Grand Total</label>
                <input type="text" id="grand_total" class="invoice-total-input" value="{{ number_format($invoice->grand_total, 2, '.', '') }}" readonly>
            </div>

            <div class="form-group">
                <label>Payment Status *</label>
                <select name="payment_status" required>
                    @foreach(['Pending','Partial','Paid'] as $status)
                        <option value="{{ $status }}" {{ old('payment_status', $invoice->payment_status) == $status ? 'selected' : '' }}>
                            {{ $status }}
                        </option>
                    @endforeach
                </select>
            </div>

            <div class="form-group full">
                <label>Notes</label>
                <textarea name="notes" rows="3">{{ old('notes', $invoice->notes) }}</textarea>
            </div>
        </div>

        <div class="form-actions">
            <button type="submit" class="btn-primary">
                Update Invoice
            </button>

            <a href="{{ route('admin.invoices.index') }}" class="btn-secondary">
                Cancel
            </a>
        </div>
    </form>
</div>

<script>
    function addRow() {
        let tableBody = document.querySelector('#itemsTable tbody');

        let row = `
            <tr>
                <td><input type="text" name="service_name[]" required></td>
                <td><textarea name="description[]" rows="1"></textarea></td>
                <td><input type="number" name="quantity[]" class="qty" value="1" min="1" oninput="calculateTotals()" required></td>
                <td><input type="number" name="unit_price[]" class="rate" value="0" min="0" step="0.01" oninput="calculateTotals()" required></td>
                <td><input type="text" class="row-total" value="0.00" readonly></td>
                <td>
                    <button type="button" class="btn-sm btn-delete" onclick="removeRow(this)" title="Remove">
                        <i class="fas fa-trash"></i>
                    </button>
                </td>
            </tr>
        `;

        tableBody.insertAdjacentHTML('beforeend', row);
    }

    function removeRow(button) {
        let rows = document.querySelectorAll('#itemsTable tbody tr');

        if (rows.length > 1) {
            button.closest('tr').remove();
            calculateTotals();
        }
    }

    function calculateTotals() {
        let subtotal = 0;

        document.querySelectorAll('#itemsTable tbody tr').forEach(function(row) {
            let qty = parseFloat(row.querySelector('.qty').value) || 0;
            let rate = parseFloat(row.querySelector('.rate').value) || 0;
            let total = qty * rate;

            row.querySelector('.row-total').value = total.toFixed(2);
            subtotal += total;
        });

        let discount = parseFloat(document.getElementById('discount').value) || 0;
        let gstPercentage = parseFloat(document.getElementById('gst_percentage').value) || 0;
        let taxableAmount = Math.max(subtotal - discount, 0);
        let gstAmount = taxableAmount * gstPercentage / 100;
        let grandTotal = taxableAmount + gstAmount;

        document.getElementById('subtotal').value = subtotal.toFixed(2);
        document.getElementById('gst_amount').value = gstAmount.toFixed(2);
        document.getElementById('grand_total').value = grandTotal.toFixed(2);
    }

    document.addEventListener('DOMContentLoaded', calculateTotals);
</script>

@endsection