@extends('layouts.invoicetab')
@section('invoice_content')
    <div class="container">


        <!-- Button to trigger add -->
        <button class="btn btn-primary mb-3" data-bs-toggle="offcanvas" data-bs-target="#addInvoiceCanvas">+ Add
            Invoice</button>

        <!-- Invoice Table -->
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>#ID</th>
                    <th>Client</th>
                    <th>Total (₹)</th>
                    <th>Created</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach($invoices as $invoice)
                    <tr>
                        <td>{{ $invoice->custom_invoice_id }}</td>
                        <td>{{ $invoice->contactModel?->name ?? 'N/A' }}</td>

                        <td>{{ number_format($invoice->total, 2) }}</td>
                        <td>{{ $invoice->created_at->format('d M Y') }}</td>
                        <td>
                            <button class="btn btn-outline-info btn-sm" data-bs-toggle="modal"
                                data-bs-target="#viewModal{{ $invoice->id }}">View</button>
                            <button class="btn btn-outline-warning btn-sm" data-bs-toggle="modal"
                                data-bs-target="#editModal{{ $invoice->id }}">Edit</button>
                            <form method="POST" action="{{ route('quick-invoice.destroy', $invoice->id) }}"
                                style="display:inline-block;" onsubmit="return confirm('Delete this invoice?')">
                                @csrf @method('DELETE')
                                <button class="btn btn-outline-danger btn-sm">Delete</button>
                            </form>
                            <a href="{{ route('quick-invoice.download.pdf', $invoice->id) }}"
                                class="btn btn-outline-danger btn-sm" target="_blank">Download PDF</a>

                               <button class="btn btn-outline-success btn-sm"
    data-bs-toggle="modal"
    data-bs-target="#paymentModal{{ $invoice->id }}">
    Quick Invoice Payment Receipt
</button>



                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    <!-- Modals Section (outside table loop) -->
    @foreach($invoices as $invoice)
        <!-- View Modal -->
        <div class="modal fade" id="viewModal{{ $invoice->id }}" tabindex="-1">
            <div class="modal-dialog modal-lg">
                <div class="modal-content p-4">
                    <div class="modal-header">
                        <h5 class="modal-title">Invoice: {{ $invoice->custom_invoice_id }}</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <!-- Invoice Info -->
                        <div class="mb-3">
                            <strong>Client:</strong> {{ $invoice->contactModel->name ?? 'N/A' }}<br>
                            <strong>Date:</strong> {{ $invoice->created_at->format('d M Y, h:i A') }}
                        </div>

                        <!-- Items Table -->
                        <div class="table-responsive">
                            <table class="table table-bordered align-middle">
                                <thead class="table-light">
                                    <tr>
                                        <th>#</th>
                                        <th>Item Name</th>
                                        <th class="text-end">Price (₹)</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($invoice->items as $i => $item)
                                        <tr>
                                            <td>{{ $i + 1 }}</td>
                                            <td>{{ $item->name }}</td>
                                            <td class="text-end">₹{{ number_format($item->price, 2) }}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <th colspan="2" class="text-end">Total</th>
                                        <th class="text-end">₹{{ number_format($invoice->total, 2) }}</th>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <!-- Edit Modal -->
        <div class="modal fade" id="editModal{{ $invoice->id }}" tabindex="-1">
            <div class="modal-dialog modal-lg">
                <form method="POST" action="{{ route('quick-invoice.update', $invoice->id) }}">
                    @csrf @method('PUT')
                    <div class="modal-content p-3">
                        <h5>Edit Invoice #{{ $invoice->id }}</h5>
                        <div class="mb-3">
                            <label for="contact_id" class="form-label">Select Client</label>
                            <select name="contact_id" class="form-select" required>
                                <option value="">-- Choose Client --</option>
                                @foreach($contacts as $contact)
                                    <option value="{{ $contact->id }}" @if(isset($invoice) && $invoice->contact_id == $contact->id)
                                    selected @endif>
                                        {{ $contact->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <table class="table" id="editItems{{ $invoice->id }}">
                            <thead>
                                <tr>
                                    <th>Item</th>
                                    <th>Price</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($invoice->items as $i => $item)
                                    <tr>
                                        <td><input type="text" name="items[{{ $i }}][name]" value="{{ $item->name }}"
                                                class="form-control" required></td>
                                        <td><input type="number" name="items[{{ $i }}][price]" value="{{ $item->price }}"
                                                class="form-control" required></td>
                                        <td><button type="button" class="btn btn-danger remove-row">X</button></td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                        <button type="button" class="btn btn-secondary add-row" data-target="editItems{{ $invoice->id }}">+ Add
                            Item</button>
                        <div class="mt-3">
                            <button class="btn btn-success">Update</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    @endforeach

    <!-- Add Invoice Offcanvas -->
    <div class="offcanvas offcanvas-end" tabindex="-1" id="addInvoiceCanvas">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title">Add Quick Invoice</h5>
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
        </div>
        <div class="offcanvas-body">
            <form method="POST" action="{{ route('quick-invoice.store') }}">
                @csrf
            <!--     <div class="mb-3">
                    <label for="contact_id" class="form-label">Select Client</label>
                    <select name="contact_id" class="form-select" required>
                        <option value="">-- Choose Client --</option>
                        @foreach($contacts as $contact)
                            <option value="{{ $contact->id }}" @if(isset($invoice) && $invoice->contact_id == $contact->id)
                            selected @endif>
                                {{ $contact->name }}
                            </option>
                        @endforeach
                    </select>
                </div> -->
<div class="mb-3">
    <label for="contact_id">Client:</label>
    <select id="contact_id" name="contact_id" class="form-control selectpicker" data-live-search="true" required>
        <option value="">-- Choose Client --</option>
        @foreach($contacts as $contact)
            <option value="{{ $contact->id }}"
                {{ (isset($invoice) && $invoice->contact_id == $contact->id) ? 'selected' : '' }}>
                {{ $contact->name }}
            </option>
        @endforeach
    </select>
</div>







    <!-- Include bootstrap-select JS & CSS -->
    <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0-beta3/dist/css/bootstrap-select.min.css">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0-beta3/dist/js/bootstrap-select.min.js"></script>

  <!--   <script>
        $(document).ready(function () {
            $('#client_id').selectpicker(); 
        });
    </script> -->
<script>
$(document).ready(function () {
    // Destroy any previous initialization (if page reloads or ajax)
    $('#client_id').selectpicker('destroy');

    // Initialize as single-select
    $('#client_id').selectpicker({
        noneSelectedText: '-- Choose Client --',
        dropupAuto: false
    });
});
</script>


                <table class="table" id="createItems">
                    <thead>
                        <tr>
                            <th>Item</th>
                            <th>Price</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><input type="text" name="items[0][name]" class="form-control" required></td>
                            <td><input type="number" name="items[0][price]" class="form-control" required></td>
                            <td><button type="button" class="btn btn-danger remove-row">X</button></td>
                        </tr>
                    </tbody>
                </table>
                <button type="button" class="btn btn-secondary add-row" data-target="createItems">+ Add Item</button>
                <div class="mt-3">
                    <button class="btn btn-primary">Save Invoice</button>
                </div>
            </form>
        </div>
    </div>

    <!-- JS -->
    <script>
        document.querySelectorAll('.add-row').forEach(btn => {
            btn.addEventListener('click', () => {
                const tableId = btn.dataset.target;
                const tbody = document.querySelector(`#${tableId} tbody`);
                const index = tbody.querySelectorAll('tr').length;
                const row = `
                    <tr>
                        <td><input type="text" name="items[${index}][name]" class="form-control" required></td>
                        <td><input type="number" name="items[${index}][price]" class="form-control" required></td>
                        <td><button type="button" class="btn btn-danger remove-row">X</button></td>
                    </tr>`;
                tbody.insertAdjacentHTML('beforeend', row);
                bindRemove();
            });
        });

        function bindRemove() {
            document.querySelectorAll('.remove-row').forEach(btn => {
                btn.onclick = () => btn.closest('tr').remove();
            });
        }

        bindRemove();
    </script>



@foreach($invoices as $invoice)
<div class="modal fade" id="paymentModal{{ $invoice->id }}" tabindex="-1">
    <div class="modal-dialog">
        <form method="POST"
              action="{{ route('quick-invoice.payment.store', $invoice->id) }}">
            @csrf
            <div class="modal-content p-3">
                <div class="modal-header">
                    <h5 class="modal-title">
                        Quick Invoice Payment Receipt
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body">
                    <div class="mb-2">
                        <label>Amount Paid (₹)</label>
                        <input type="number" name="amount" class="form-control" required>
                    </div>

                    <div class="mb-2">
                        <label>Payment Mode</label>
                        <select name="payment_mode" class="form-control">
                            <option>Cash</option>
                            <option>UPI</option>
                            <option>Bank Transfer</option>
                            <option>Cheque</option>
                        </select>
                    </div>

                    <div class="mb-2">
                        <label>Payment Date</label>
                        <input type="date" name="payment_date" class="form-control" required>
                    </div>

                    <div class="mb-2">
                        <label>Remarks</label>
                        <textarea name="remarks" class="form-control"></textarea>
                    </div>
                </div>

                <div class="modal-footer">
                    <button class="btn btn-success">
                        Save & Download PDF
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>
@endforeach


   

@endsection