@extends('Admin.layout')

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet">

<style>
    .dt-search,
    .dt-length,
    .dataTables_filter,
    .dataTables_length {
        display: none !important;
    }

    .table-responsive::-webkit-scrollbar {
        display: none;
    }

    .table-responsive {
        scrollbar-width: none;
    }

    .upload-box {
        border: 2px dashed #0d6efd;
        border-radius: 10px;
        cursor: pointer;
        background: #f8f9fa;
        transition: .3s;
    }

    .upload-box:hover {
        background: #e9f2ff;
    }

    .upload-box.dragover {
        background: #d0e7ff;
        border-color: #084298;
    }

    .select2-container {
        width: 100% !important;
    }

    .select2-container .select2-selection--single {
        height: 38px !important;
        border: 1px solid #d9dee3 !important;
        border-radius: 6px !important;
    }

    .select2-container .select2-selection--single .select2-selection__rendered {
        line-height: 36px !important;
        padding-left: 12px;
    }

    .select2-container .select2-selection--single .select2-selection__arrow {
        height: 36px !important;
    }

    #usersTable th,
    #usersTable td {
        vertical-align: middle;
        white-space: nowrap;
    }
</style>

@section('content')

    <div class="row align-items-center justify-content-between mt-3 mb-3 m-2">
        <div class="col-auto">
            <h5 class="page-title">
                <button type="button" class="btn btn-icon bg-white waves-effect me-2"
                    style="box-shadow: 0px 9px 12px -2px #66328E1F;">
                    <a href="{{ route('bill_table') }}">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                            stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                            <path d="M15 6l-6 6l6 6"></path>
                        </svg>
                    </a>
                </button>
                Completed Invoice
            </h5>
        </div>

        <div class="col-auto">
            <a href="{{ route('bill_form') }}" class="btn btn-primary">
                Create Invoice
            </a>
        </div>
    </div>

    <div class="card m-2">
        <div class="filter-section p-3">
            <div class="row g-3 align-items-end">

                <div class="col-12 col-md-2 col-lg-1">
                    <label class="form-label">Show</label>
                    <select id="pageLength" class="form-select">
                        <option value="10">10</option>
                        <option value="25">25</option>
                        <option value="50">50</option>
                        <option value="100">100</option>
                        <option value="All">All</option>
                    </select>
                </div>

                <div class="col-12 col-md-4 col-lg-3">
                    <label class="form-label">Project Name</label>
                    <select id="projectFilter" class="form-select">
                        <option value="">All Projects</option>

                        @foreach($projects as $project)
                            <option value="{{ $project->id }}">
                                {{ $project->project_name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="col-12 col-md-4 col-lg-3 ms-lg-auto">
                    <label class="form-label">Search</label>
                    <input type="text" id="customSearch" class="form-control" placeholder="Search invoice..."
                        autocomplete="off">
                </div>

                <div class="col-12 col-md-auto">
                    <button type="button" class="btn btn-label-secondary w-100" id="exportBtn">
                        <i class="ti tabler-download me-1"></i> Export
                    </button>
                </div>

            </div>
        </div>

        <div class="table-responsive">
            <table class="table" id="usersTable" style="width:100%">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Date</th>
                        <th>Invoice Number</th>
                        <th>Invoice Title</th>
                        <th>Project Details</th>
                        <th>Total Amount</th>
                        <th>Paid Amount</th>
                        <th>Status</th>
                        <th>View Bill</th>
                        <th>View Invoice</th>
                        <th>Update Payment</th>
                        <th>View Payment History</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>

    <div class="modal fade" id="paymentModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border-0 shadow-lg rounded-4">

                <div class="modal-header bg-primary text-white rounded-top-4">
                    <h5 class="modal-title fw-bold">Upload Receipt</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>

                <form action="{{ route('payment_store') }}" method="POST" enctype="multipart/form-data">

                    @csrf

                    <input type="hidden" name="invoice_id" id="invoice_id">
                    <input type="hidden" id="invoice_total">
                    <input type="hidden" id="paid_amount">

                    <div class="modal-body p-4">

                        <div class="mb-3">
                            <label class="form-label">Amount</label>
                            <input type="number" name="amount" id="amount" class="form-control" step="0.01" min="0"
                                required>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Balance</label>
                            <input type="text" id="balance" class="form-control" readonly>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Receipt</label>

                            <div id="uploadBox" class="upload-box text-center p-4">
                                <p class="mb-1">Drag & Drop / Paste / Click to Upload</p>
                                <small class="text-muted">PNG, JPG only</small>

                                <input type="file" name="receipt" id="fileInput" accept="image/png,image/jpeg" hidden
                                    required>

                                <img id="preview" class="img-fluid mt-2 d-none" style="max-height:150px;">
                            </div>
                        </div>

                        <div class="mb-2">
                            <label class="form-label">Status</label>

                            <select name="status" class="form-control" required>
                                <option value="Pending">Pending</option>
                                <option value="Completed">Completed</option>
                            </select>
                        </div>

                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">
                            Cancel
                        </button>

                        <button type="submit" class="btn btn-primary">
                            Submit
                        </button>
                    </div>

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

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

    <script>
        $(document).ready(function () {

            $('#projectFilter').select2({
                placeholder: 'Select Project',
                allowClear: true,
                width: '100%'
            });

            let table = $('#usersTable').DataTable({
                processing: true,
                serverSide: true,
                pageLength: 10,
                ordering: false,
                searching: true,
                lengthChange: false,
                info: true,
                autoWidth: false,

                ajax: {
                    url: "{{ route('completed_invoice_data') }}",
                    type: "GET",
                    data: function (d) {
                        d.project_id = $('#projectFilter').val();
                    }
                },

                columnDefs: [{
                    targets: '_all',
                    className: 'text-nowrap align-middle'
                }],

                columns: [
                    {
                        data: 'DT_RowIndex',
                        name: 'id',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'invoice_date',
                        name: 'invoice_date'
                    },
                    {
                        data: 'invoice_no',
                        name: 'invoice_no'
                    },
                    {
                        data: 'invoice_title',
                        name: 'invoice_title'
                    },
                    {
                        data: 'project',
                        name: 'project',
                        orderable: false,
                        searchable: true,
                        render: function (data, type, row) {
                            return `
                            <div>
                                <div class="mb-1">
                                    <strong>Project Name:</strong> ${row.project ?? '-'}
                                </div>
                                <div>
                                    <strong>Client Mobile:</strong> ${row.mobile ?? '-'}
                                </div>
                            </div>
                        `;
                        }
                    },
                    {
                        data: 'total',
                        name: 'total'
                    },
                    {
                        data: 'paid_amount',
                        name: 'paid_amount',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'status',
                        name: 'status'
                    },
                    {
                        data: 'view_bill',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'view_invoice',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'update_payment',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'payment_history',
                        orderable: false,
                        searchable: false
                    }
                ]
            });

            $('#projectFilter').on('change', function () {
                table.ajax.reload();
            });

            let searchTimer;

            $('#customSearch').on('keyup', function () {
                clearTimeout(searchTimer);

                let value = $(this).val();

                searchTimer = setTimeout(function () {
                    table.search(value).draw();
                }, 300);
            });

            $('#pageLength').on('change', function () {
                let value = $(this).val();
                let length = value === 'All' ? -1 : parseInt(value);

                table.page.len(length).draw();
            });
        });

        function openPaymentModal(id, total, paid) {
            $('#paymentModal').modal('show');

            $('#invoice_id').val(id);
            $('#invoice_total').val(total);
            $('#paid_amount').val(paid);
            $('#amount').val('');

            let balance = parseFloat(total || 0) - parseFloat(paid || 0);

            $('#balance').val(balance.toFixed(2));
            $('#fileInput').val('');
            $('#preview').attr('src', '').addClass('d-none');
        }

        document.getElementById('amount')?.addEventListener('input', function () {
            let total = parseFloat($('#invoice_total').val()) || 0;
            let paid = parseFloat($('#paid_amount').val()) || 0;
            let amount = parseFloat(this.value) || 0;
            let balance = total - paid - amount;

            $('#balance').val(Math.max(balance, 0).toFixed(2));
        });

        const uploadBox = document.getElementById('uploadBox');
        const fileInput = document.getElementById('fileInput');
        const preview = document.getElementById('preview');

        if (uploadBox && fileInput && preview) {

            uploadBox.addEventListener('click', function () {
                fileInput.click();
            });

            fileInput.addEventListener('change', function () {
                handleFile(this.files[0]);
            });

            uploadBox.addEventListener('dragover', function (e) {
                e.preventDefault();
                uploadBox.classList.add('dragover');
            });

            uploadBox.addEventListener('dragleave', function () {
                uploadBox.classList.remove('dragover');
            });

            uploadBox.addEventListener('drop', function (e) {
                e.preventDefault();
                uploadBox.classList.remove('dragover');

                const file = e.dataTransfer.files[0];

                if (!file) return;

                const dataTransfer = new DataTransfer();
                dataTransfer.items.add(file);
                fileInput.files = dataTransfer.files;

                handleFile(file);
            });
        }

        document.addEventListener('paste', function (e) {
            if (!fileInput || !e.clipboardData) return;

            const items = e.clipboardData.items;

            for (let i = 0; i < items.length; i++) {
                if (items[i].type.indexOf('image') !== -1) {
                    const file = items[i].getAsFile();

                    if (!file) continue;

                    const dataTransfer = new DataTransfer();
                    dataTransfer.items.add(file);
                    fileInput.files = dataTransfer.files;

                    handleFile(file);
                    break;
                }
            }
        });

        function handleFile(file) {
            if (!file) return;

            if (!file.type.startsWith('image/')) {
                alert('Only image files are allowed!');
                return;
            }

            const reader = new FileReader();

            reader.onload = function (e) {
                preview.src = e.target.result;
                preview.classList.remove('d-none');
            };

            reader.readAsDataURL(file);
        }

        function downloadInvoice(id) {
            let win = window.open('/admin/invoice/' + id + '?print=1', '_blank');

            if (!win) {
                alert('Please allow popups.');
                return;
            }

            win.onload = function () {
                win.print();
            };
        }
    </script>

@endsection