@extends('admin.layouts.master')
@section('title', 'Order list')
@section('content')
    <div class="modal fade" id="viewPromisesModal" tabindex="-1" aria-labelledby="viewPromisesModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="viewPromisesModalLabel">Payment Promises</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="table-responsive">
                        <table class="table table-sm">
                            <thead>
                                <tr>
                                    <th>Promise Date</th>
                                    <th>Remarks</th>
                                </tr>
                            </thead>
                            <tbody id="promisesListBody"></tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Add Promise Modal -->
    <div class="modal fade" id="addPromiseModal" tabindex="-1" aria-labelledby="addPromiseModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <form id="promiseForm" method="POST">
                    @csrf
                    <input type="hidden" name="order_id" id="modalOrderId">
                    <input type="hidden" name="invoice_id" id="modalInvoiceId">
                    <input type="hidden" name="created_by" value="{{ auth()->id() }}">

                    <div class="modal-header">
                        <h5 class="modal-title" id="addPromiseModalLabel">Add Payment Promise</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="promiseDate" class="form-label">Promise Date *</label>
                            <input type="date" class="form-control" id="promiseDate" name="promise_date"
                                min="{{ now()->format('Y-m-d') }}" required>
                        </div>
                        <div class="mb-3">
                            <label for="remarks" class="form-label">Remarks</label>
                            <textarea class="form-control" id="remarks" name="remarks" rows="3"
                                placeholder="Enter any additional notes"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Save Promise</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <div class="card card-info mt-2" id="orderListFilter">
                        <div class="card-header">
                            Filter Orders
                            <div class="card-tools">
                                <button class="btn btn-sm bg-white">Search</button>
                            </div>
                        </div>
                        <div class="card-body border-bottom-dashed border-bottom">
                            <form id="searchForm">
                                @csrf
                                <div class="row">
                                    <div class="col-lg-3">
                                        <div class="form-group">
                                            <label for="user_id" class="form-label">Customer Name</label>
                                            <select class="form-control select2" name="user_id" id="user_id" multiple>
                                                <option value="">Select User</option>
                                                @foreach ($users as $user)
                                                    <option value="{{ $user->id }}">{{ $user->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-3">
                                        <div class="form-group">
                                            <label for="company_name" class="form-label">Company Name</label>
                                            <select class="form-control select2" name="company_name" id="company_name" multiple>
                                                <option value="">Select Company</option>
                                                @foreach ($companies as $company)
                                                    <option value="{{ $company->company }}">{{ $company->company }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-3">
                                        <div class="form-group">
                                            <label for="payment" class="form-label">Payment Status</label>
                                            <select class="form-control select2" name="payment" id="payment" multiple>
                                                <option value="">Select Status</option>
                                                <option value="pending">Pending</option>
                                                <option value="credit">Credit</option>
                                                <option value="paid">Paid</option>
                                            </select>
                                        </div>
                                    </div>



                                    <div class="col-lg-3">
                                        <div class="form-group">
                                            <label for="due_date">Search By Issue Date</label>
                                            <div class="input-group">
                                                <input type="text" class="form-control date-input" placeholder="From Date"
                                                    onfocus="(this.type='date')" onblur="(this.type='text')"
                                                    value="{{ old('issue_date_start') }}" id="issue_date_start"
                                                    name="issue_date_start">
                                                <div class="input-group-text">to</div>
                                                <input type="text" class="form-control date-input" placeholder="To Date"
                                                    onfocus="(this.type='date')" onblur="(this.type='text')"
                                                    value="{{ old('issue_date_end') }}" id="issue_date_end"
                                                    name="issue_date_end">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-lg-3">
                                        <div class="form-group">
                                            <label for="due_date">Search By Due Date</label>
                                            <div class="input-group">
                                                <input type="text" class="form-control date-input" placeholder="From Date"
                                                    onfocus="(this.type='date')" onblur="(this.type='text')"
                                                    value="{{ old('due_date_start') }}" id="due_date_start"
                                                    name="due_date_start">
                                                <div class="input-group-text">to</div>
                                                <input type="text" class="form-control date-input" placeholder="To Date"
                                                    onfocus="(this.type='date')" onblur="(this.type='text')"
                                                    value="{{ old('due_date_end') }}" id="due_date_end" name="due_date_end">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-12 text-right mt-3">
                                        <button type="button" class="btn btn-primary btn-sm" id="refreshBtn">
                                            <i class="bi bi-arrow-clockwise"></i> Refresh
                                        </button>
                                        <button type="submit" class="btn btn-success btn-sm" id="searchBtn">
                                            <i class="bi bi-search"></i> Search
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <!--end col-->
            </div>

            <div class="row">
                <div class="col-md-12">
                    <!-- /.card-header -->
                    <div class="card card-outline card-primary">
                        <div class="card-header">
                            List of Orders
                            <div class="card-tools">
                                <a href="{{ route('admin.order.add') }}" class="btn btn-primary btn-sm"><i
                                        class="bi bi-plus"></i> Add Order</a>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="tableContent">
                                <table class="table table-striped table-sm table-bordered " id="finance-table">
                                    <thead>
                                        <tr>
                                            <th style="width: 5%;">{{ __('#') }}</th>
                                            <th style="width: 20%;">{{ __('Company') }}</th>
                                            <th style="width: 20%;">{{ __('Invoice Number') }}</th>
                                            <th style="width: 10%;">{{ __('Issue Date') }}</th>
                                            <th style="width: 8%;">{{ __('Due Date') }}</th>
                                            <th style="width: 8%;">{{ __(' Amount') }}</th>
                                            <th style="width: 10%;">{{ __('Promise Date') }}</th>
                                            <th style="width: 7%;">{{ __('Status') }}</th>
                                            <th style="width: 5%;">{{ __('Actions') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <!-- Data will be loaded via AJAX -->
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="loader text-center" id="loader" style="display: none">
                            <div class="spinner-border" role="status">
                                <span class="visually-hidden"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </div>
    </section>




@endsection
@section('css')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.1/css/buttons.dataTables.min.css">
@endsection
@section('js')
    <script>
        $(document).ready(function () {
            // Initialize DataTable
            var table = $('#finance-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('admin.finance.index') }}",
                    data: function (d) {
                        d.user_id = $('#user_id').val();
                        d.company_name = $('#company_name').val();
                        d.payment = $('#payment').val();
                        d.due_date_start = $('#due_date_start').val();
                        d.due_date_end = $('#due_date_end').val();
                        d.issue_date_start = $('#issue_date_start').val();
                        d.issue_date_end = $('#issue_date_end').val();
                    }
                },
                columns: [
                    { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
                    { data: 'company', name: 'company' },
                    { data: 'invoice_no', name: 'invoice_no' },
                    { data: 'issue_date', name: 'issue_date' },
                    { data: 'due_date', name: 'due_date' },
                    { data: 'amount', name: 'amount' },
                    { data: 'promises', name: 'promises' },
                    { data: 'status', name: 'status' },
                    { data: 'actions', name: 'actions', orderable: false, searchable: false }
                ],
                dom: 'Bfrtip',
    buttons: [
        {
            extend: 'excelHtml5',
            text: 'Export to Excel',
            title: 'Finance Data Export',
            className: 'btn btn-success btn-sm',
            action: function (e, dt, node, config) {
                // Get current filter values
                var filters = {
                    user_id: $('#user_id').val(),
                    company_name: $('#company_name').val(),
                    payment: $('#payment').val(),
                    due_date_start: $('#due_date_start').val(),
                    due_date_end: $('#due_date_end').val(),
                    issue_date_start: $('#issue_date_start').val(),
                    issue_date_end: $('#issue_date_end').val(),
                    _token: '{{ csrf_token() }}'
                };

                // Submit form with filters
                $('<form>', {
                    method: 'post',
                    action: '{{ route("admin.finance.export") }}',
                    html: $.map(filters, function (value, key) {
                        if (Array.isArray(value)) {
                            return value.map(function (v) {
                                return $('<input>', {
                                    type: 'hidden',
                                    name: key + '[]',
                                    value: v
                                });
                            });
                        }
                        return $('<input>', {
                            type: 'hidden',
                            name: key,
                            value: value
                        });
                    })
                }).appendTo('body').submit().remove();
            },
            exportOptions: {
                columns: [0, 1, 2, 3, 4, 5, 6, 7] // Export all columns except actions
            }
        }
    ],
            });

            // Search button click handler
            $('#searchBtn').click(function (e) {
                e.preventDefault();
                table.draw();
            });

            // Refresh button click handler
            $('#refreshBtn').click(function () {
                $('#searchForm')[0].reset();
                $('.select2').val('').trigger('change');
                table.draw();
            });

            // View promises modal
            $(document).on('click', '.view-promises-btn', function () {
                const invoiceId = $(this).data('invoice-id');
                const modal = $('#viewPromisesModal');
                const promisesBody = $('#promisesListBody');

                if (!invoiceId || isNaN(invoiceId)) {
                    promisesBody.html(`
                    <tr>
                        <td colspan="2" class="text-center py-4 text-danger">
                            <i class="bi bi-exclamation-octagon me-2"></i>
                            Invalid invoice ID
                        </td>
                    </tr>
                `);
                    modal.modal('show');
                    return;
                }

                promisesBody.html(`
                <tr>
                    <td colspan="2" class="text-center py-4">
                        <div class="d-flex justify-content-center align-items-center">
                            <div class="spinner-border text-primary me-2" role="status"></div>
                            <span>Loading promises...</span>
                        </div>
                    </td>
                </tr>
            `);
                modal.modal('show');

                $.ajax({
                    url: `finance/invoices/${invoiceId}/promises`,
                    type: 'GET',
                    dataType: 'json',
                    success: function (response) {
                        if (!response.success || !response.data?.length) {
                            promisesBody.html(`
                            <tr>
                                <td colspan="2" class="text-center py-4 text-muted">
                                    <i class="bi bi-info-circle me-2"></i>
                                    No promises found for this invoice
                                </td>
                            </tr>
                        `);
                            return;
                        }

                        const html = response.data.map((promise, index) => `
                        <tr>
                            <td class="fw-medium">${promise.formatted_date}</td>
                            <td>${promise.remarks ? $('<div/>').text(promise.remarks).html() : '<span class="text-muted">No remarks</span>'}</td>
                        </tr>
                    `).join('');
                        promisesBody.html(html);
                    },
                    error: function (xhr) {
                        const errorMessage = xhr.responseJSON?.error || 'Failed to load promises';
                        promisesBody.html(`
                        <tr>
                            <td colspan="2" class="text-center py-4 text-danger">
                                <i class="bi bi-exclamation-octagon me-2"></i>
                                ${$('<div/>').text(errorMessage).html()}
                            </td>
                        </tr>
                    `);
                    }
                });
            });

            // Add promise modal
            $(document).on('click', '.add-promise-btn', function () {
                var orderId = $(this).data('order-id');
                var invoiceId = $(this).data('invoice-id');
                var latestPromise = $(this).data('latest-promise');

                $('#modalOrderId').val(orderId);
                $('#modalInvoiceId').val(invoiceId);
                $('#promiseDate').val(latestPromise || new Date().toISOString().split('T')[0]);
                $('#remarks').val('');

                $('#addPromiseModal').modal('show');
            });

            // Handle Add Promise form submission
            $('#promiseForm').submit(function (e) {
                e.preventDefault();
                var form = $(this);
                var submitBtn = form.find('button[type="submit"]');

                submitBtn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm" role="status"></span> Saving...');

                $.ajax({
                    url: "{{ route('admin.finance.store') }}",
                    type: "POST",
                    data: form.serialize(),
                    success: function (response) {
                        if (response.success) {
                            $('#addPromiseModal').modal('hide');
                            Swal.fire({
                                icon: 'success',
                                title: 'Success',
                                text: response.message,
                                timer: 1500,
                                showConfirmButton: false
                            }).then(function () {
                                table.draw();
                            });
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: response.message
                            });
                        }
                    },
                    error: function (xhr) {
                        var errorMessage = xhr.responseJSON?.message || 'An error occurred while saving the promise';
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: errorMessage
                        });
                    },
                    complete: function () {
                        submitBtn.prop('disabled', false).html('Save Promise');
                    }
                });
            });
        });
    </script>

@endsection