@extends('admin.layouts.app')

@section('title','Create 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>Create Invoice</h2>
        <p>Add invoice details, 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.store') }}" method="POST">
        @csrf

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

        <div class="form-grid">
            <div class="form-group">
                <label>Service Booking *</label>
                <select name="service_booking_id" required>
                    <option value="">Select Booking</option>
                    @foreach($bookings as $booking)
                        <option value="{{ $booking->id }}">
                            {{ $booking->booking_no ?? 'SB-'.$booking->id }} - {{ $booking->customer->name ?? 'Customer' }}
                        </option>
                    @endforeach
                </select>
            </div>

            <div class="form-group">
                <label>Invoice Date *</label>
                <input type="date" name="invoice_date" value="{{ old('invoice_date', date('Y-m-d')) }}" 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>
                    <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>
                </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" name="subtotal_display" id="subtotal" value="0.00" readonly>
            </div>

            <div class="form-group">
                <label>Discount</label>
                <input type="number" name="discount" id="discount" value="0" 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="18" min="0" step="0.01" oninput="calculateTotals()">
            </div>

            <div class="form-group">
                <label>GST Amount</label>
                <input type="text" id="gst_amount" value="0.00" readonly>
            </div>

            <div class="form-group">
                <label>Grand Total</label>
                <input type="text" id="grand_total" class="invoice-total-input" value="0.00" readonly>
            </div>

            <div class="form-group">
                <label>Payment Status *</label>
                <select name="payment_status" required>
                    <option value="Pending">Pending</option>
                    <option value="Partial">Partial</option>
                    <option value="Paid">Paid</option>
                </select>
            </div>

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

        <div class="form-actions">
            <button type="submit" class="btn-primary">
                Save 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