@extends('layouts.app')

@section('content')

<meta name="csrf-token" content="{{ csrf_token() }}">

<div class="page-header">
    <div>
        <h1>Invoice <small>List & Management</small></h1>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">Home</a></li>
            <li class="breadcrumb-item active">Dashboard</li>
        </ol>
    </div>
</div>

<div class="content mt-3">
    <div class="card shadow mb-4">
        <div class="card-header"><strong>Generate Invoice</strong></div>
        <div class="container py-3">

            <div>
                <h5><strong>Project Total Price:</strong> ₹{{ number_format($projectTotalPrice, 2) }}</h5>
                <h6><strong>Already Invoiced:</strong> ₹{{ number_format($alreadyInvoicedAmount ?? 0, 2) }}</h6>
                <h6><strong>Remaining to Invoice:</strong> ₹<span id="remaining-amount" class="text-danger fw-bold">0.00</span></h6>
                <h6><strong>Total Entered:</strong> ₹<span id="entered-total" class="text-success fw-bold">0.00</span></h6>
            </div>

            <form id="invoiceForm" action="{{ route('tco.invoicestore') }}" method="POST">
                @csrf
                <input type="hidden" name="lead_id" value="{{ $lead_id }}">
                <input type="hidden" name="site_id" value="{{ $site_id }}">
                <input type="hidden" name="bom_id" value="{{ $bom_id }}">

                <div id="installment-container" class="mt-3">
                    <!-- Initial Row -->
                    <div class="row mb-3 installment-row">
                        <div class="col-md-3">
                            <input type="date" name="dates[]" class="form-control" required>
                        </div>
                        <div class="col-md-3">

                            <input type="number" name="amounts[]" class="form-control amount-input" placeholder="Enter Amount" step="0.01" min="0" required>
                        </div>
                        
                        <div class="col-md-3">
                            <button type="button" class="btn btn-danger remove-installment">Remove</button>
                        </div>
                    </div>
                </div>

                <button type="button" class="btn btn-secondary" id="add-installment">+ Add Installment</button>
                <button type="submit" class="btn btn-primary">Submit Invoice</button>

               
            </form>

        </div>
    </div>
</div>

@endsection

@section('scripting')
<script>
    $(document).ready(function () {
        const totalPrice = parseFloat(@json($projectTotalPrice));
        const alreadyInvoiced = parseFloat(@json($alreadyInvoicedAmount ?? 0));
        let remaining = totalPrice - alreadyInvoiced;

        const remainingDisplay = $('#remaining-amount');
        const enteredDisplay = $('#entered-total');

        function updateAmounts() {
            let totalInput = 0;
            $('.amount-input').each(function () {
                const val = parseFloat($(this).val()) || 0;
                totalInput += val;
            });

            const remainingNow = remaining - totalInput;
            remainingDisplay.text(remainingNow.toFixed(2));
            enteredDisplay.text(totalInput.toFixed(2));

            if (remainingNow < 0) {
                swal("Amount Exceeded", `Entered total exceeds remaining allowed: ₹${remaining.toFixed(2)}`, "error");
            }
        }

        $(document).on('input', '.amount-input', updateAmounts);

        $('#add-installment').on('click', function () {
            $('#installment-container').append(`
                <div class="row mb-3 installment-row">
                    <div class="col-md-3">
                        <input type="date" name="dates[]" class="form-control" required>
                    </div>
                    <div class="col-md-3">
                        <input type="number" name="amounts[]" class="form-control amount-input" placeholder="Enter AMount" step="0.01" min="0" required>
                    </div>
                    
                    <div class="col-md-3">
                        <button type="button" class="btn btn-danger remove-installment">Remove</button>
                    </div>
                </div>
            `);
        });

        $(document).on('click', '.remove-installment', function () {
            $(this).closest('.installment-row').remove();
            updateAmounts();
        });

        // Save as draft handler
        $('#save-draft').on('click', function () {
            const form = $('#invoiceForm');
            form.append('<input type="hidden" name="is_draft" value="1">');
            form.submit();
        });

        // Ajax submission
        $('#invoiceForm').on('submit', function (e) {
            e.preventDefault();

            let totalInput = 0;
            $('.amount-input').each(function () {
                const val = parseFloat($(this).val()) || 0;
                totalInput += val;
            });

            if (totalInput > remaining) {
                return swal("Error", "Invoice amount exceeds the remaining budget.", "error");
            }

            const form = this;
            const formData = new FormData(form);

            $.ajaxSetup({
                headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }
            });

            $.ajax({
                url: form.action,
                method: 'POST',
                data: formData,
                contentType: false,
                processData: false,
                success: function (data) {
                    swal("Success", data.message || "Invoice saved successfully!", "success")
                        .then(() => location.href = "{{ route('tco.showInvoices', $lead['id']) }}");
                },
                error: function (xhr) {
                    const errorMsg = xhr.responseJSON?.message || "An unexpected error occurred.";
                    swal("Error", errorMsg, "error");
                }
            });
        });

        updateAmounts();
    });
</script>
@endsection