@extends('layouts.app')

@section('page-pretitle', __('Management'))
@section('page-title', __('Project Quotation'))

@section('content')

{{-- Flash Messages --}}
@if ($errors->any())
    <div id="validation-alert" class="alert alert-danger alert-dismissible fade show position-fixed top-0 end-0 m-4 bg-red text-white d-flex align-items-center shadow" role="alert" style="z-index: 950; width: 450px;">
        <div class="flex-grow-1">
            <ul class="mb-0">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
        <button type="button" class="btn-close btn-close-white ms-2" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
@endif

@if (session('success'))
    <div id="success-alert" class="alert alert-success alert-dismissible fade show position-fixed top-0 end-0 m-4 bg-green text-white d-flex align-items-center shadow" role="alert" style="z-index: 950; width: 450px;">
        <div class="flex-grow-1">
            {{ session('success') }}
        </div>
        <button type="button" class="btn-close btn-close-white ms-2" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
@endif

<div class="page-wrapper">
    <div class="card shadow-sm p-4">
        <form action="{{ route('quotations.store') }}" method="POST" id="quotationForm" novalidate>
            @csrf

            {{-- Client Name & Quotation Date --}}
            <div class="card mb-4">
                <div class="card-body">
                    <div class="row gy-3">
                        <div class="col-md-6">
                            <label for="client_name" class="form-label fw-semibold">Client Name</label>
                            <input type="text" name="client_name" id="client_name" 
                                   class="form-control @error('client_name') is-invalid @enderror"
                                   value="{{ old('client_name') }}" required>
                            @error('client_name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-6">
                            <label for="date" class="form-label fw-semibold">Quotation Date</label>
                            <input type="date" name="date" id="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>
                </div>
            </div>

            {{-- Quotation Items (same as before) --}}
            <div class="card mb-4">
                <div class="card-header bg-light">
                    <h5 class="card-title mb-0">Quotation Items</h5>
                </div>
                <div class="card-body">
                    <table class="table table-bordered align-middle" id="itemsTable">
                        <thead class="table-light text-center">
                            <tr>
                                <th>Description</th>
                                <th style="width: 90px;">Qty</th>
                                <th style="width: 130px;">Unit Price (RM)</th>
                                <th style="width: 130px;">Total (RM)</th>
                                <th style="width: 50px;"></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><input type="text" name="items[0][description]" class="form-control" required></td>
                                <td><input type="number" name="items[0][quantity]" class="form-control quantity text-center" value="1" min="1" required></td>
                                <td><input type="number" name="items[0][unit_price]" class="form-control unit_price text-end" value="0.00" step="0.01" min="0" required></td>
                                <td class="item-total text-end fw-semibold">0.00</td>
                                <td class="text-center">
                                    <button type="button" class="btn btn-sm btn-outline-danger remove-row" title="Remove Item">&times;</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>

                    <button type="button" class="btn btn-outline-primary mt-3" id="addItem">+ Add Item</button>

                    <div class="mt-4 w-50 ms-auto">
                        <table class="table table-borderless">
                            <tr>
                                <th class="text-end fw-semibold">Subtotal:</th>
                                <td class="text-end">RM <span id="subtotal">0.00</span></td>
                            </tr>
                            <tr>
                                <th class="text-end fw-semibold">GST (6%):</th>
                                <td class="text-end">RM <span id="tax">0.00</span></td>
                            </tr>
                            <tr>
                                <th class="text-end h5 fw-bold">Total:</th>
                                <td class="text-end h5 fw-bold">RM <span id="total">0.00</span></td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>

            {{-- Submit --}}
            <div class="text-end">
                <a href="{{ route('quotations.index') }}" class="btn btn-outline-secondary mx-2">
                    {{ __('Back') }}
                </a>
                <button type="submit" class="btn btn-primary px-4">Save</button>
            </div>
        </form>
    </div>
</div>

@endsection

@push('scripts')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
document.addEventListener('DOMContentLoaded', () => {
    const itemsTable = document.getElementById('itemsTable');
    const subtotalEl = document.getElementById('subtotal');
    const taxEl = document.getElementById('tax');
    const totalEl = document.getElementById('total');
    const addItemBtn = document.getElementById('addItem');

    function calculateTotals() {
        let subtotal = 0;
        itemsTable.querySelectorAll('tbody tr').forEach(row => {
            const qty = parseFloat(row.querySelector('.quantity').value) || 0;
            const price = parseFloat(row.querySelector('.unit_price').value) || 0;
            const total = qty * price;
            row.querySelector('.item-total').textContent = total.toFixed(2);
            subtotal += total;
        });
        const tax = subtotal * 0.06;
        subtotalEl.textContent = subtotal.toFixed(2);
        taxEl.textContent = tax.toFixed(2);
        totalEl.textContent = (subtotal + tax).toFixed(2);
    }

    itemsTable.addEventListener('input', e => {
        if (e.target.classList.contains('quantity') || e.target.classList.contains('unit_price')) {
            calculateTotals();
        }
    });

    addItemBtn.addEventListener('click', () => {
        const tbody = itemsTable.querySelector('tbody');
        const rowCount = tbody.querySelectorAll('tr').length;
        const newRow = document.createElement('tr');
        newRow.innerHTML = `
            <td><input type="text" name="items[${rowCount}][description]" class="form-control" required></td>
            <td><input type="number" name="items[${rowCount}][quantity]" class="form-control quantity text-center" value="1" min="1" required></td>
            <td><input type="number" name="items[${rowCount}][unit_price]" class="form-control unit_price text-end" value="0.00" step="0.01" min="0" required></td>
            <td class="item-total text-end fw-semibold">0.00</td>
            <td class="text-center">
                <button type="button" class="btn btn-sm btn-outline-danger remove-row" title="Remove Item">&times;</button>
            </td>
        `;
        tbody.appendChild(newRow);
        calculateTotals();
    });

    itemsTable.addEventListener('click', e => {
        if (e.target.classList.contains('remove-row')) {
            const row = e.target.closest('tr');
            if (itemsTable.querySelectorAll('tbody tr').length > 1) {
                row.remove();
                calculateTotals();
            }
        }
    });

    calculateTotals();
});
</script>
@endpush