@extends('layouts/contentLayoutMaster')

@section('title', 'Payment Details')

@section('vendor-style')
    {{-- vendor css files --}}
    <link rel="stylesheet" href="{{ asset('vendors/css/forms/select/select2.min.css') }}">
    <link rel="stylesheet" href="{{ asset('vendors/css/tables/datatable/dataTables.bootstrap5.min.css') }}">
    <link rel="stylesheet" href="{{ asset('vendors/css/tables/datatable/buttons.bootstrap5.min.css') }}">
    <link rel="stylesheet" href="{{ asset('vendors/css/extensions/sweetalert2.min.css') }}">
    <link rel="stylesheet" href="{{ asset('/css/custom.css') }}">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/toastr@2.1.4/dist/toastr.min.css">

    <style>
        /* Add custom style for editable cells */
        .editable {
            cursor: pointer;
            background-color: #f7f7f7;
            /* Add your desired background color */
        }

        .loader-container {
            display: flex;
            align-items: center;
            justify-content: center;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1000;
        }

        .loader {
            border: 8px solid #3498db;
            border-top: 8px solid transparent;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            animation: pulse 1s infinite;
        }

        @keyframes pulse {
            0% {
                transform: scale(0.8);
            }

            50% {
                transform: scale(1.2);
            }

            100% {
                transform: scale(0.8);
            }
        }
    </style>
@endsection
@section('content')

    <!-- Column Search -->
    <section id="column-search-datatable">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    @if ($message = Session::get('success'))
                        <div class="demo-spacing-0 my-2">
                            <div class="alert alert-success alert-dismissible fade show" role="alert">
                                <div class="alert-body">{{ $message }}</div>
                                <button type="button" class="btn-close" data-bs-dismiss="alert"
                                    aria-label="Close"></button>
                            </div>
                        </div>
                    @endif
                    <div class="card-header border-bottom">
                        {{-- <h4 class="card-title">
                            Payment Calculation: {{ $from }} to {{ $to }}
                        </h4> --}}
                        <h4 class="card-title">
                            @if ($price_type == 'fixed')
                                Fixed Price Payment Calculation: {{ $from }} to {{ $to }}
                            @elseif ($price_type == 'variable')
                                Variable Price Payment Calculation: {{ $from }} to {{ $to }}
                            @else
                                Vendors Payment Calculation: {{ $from }} to {{ $to }}
                            @endif
                         </h4>
                    </div>
                    <div class="card-datatable table-responsive">
                        <table class="table" id="payments">
                            <thead>
                                <tr>
                                    <th>Vendor Code</th>
                                    <th class="editable">Vendor</th>
                                    <th class="editable">Total Fixed Price</th>
                                    <th class="editable">Total Variable Price</th>
                                    <th class="editable">Total Expense Price</th>
                                    <th class="editable">Remaining Dues</th>
                                    <th class="editable">Deductions</th>
                                    <th class="editable">Additions</th>
                                    <th class="editable">Total Payable Amount</th>
                                    {{-- <th class="editable">Total Amount (Without Expenses)</th> --}}
                                    <th class="editable">Calculated Amount</th>
                                    <th class="editable">Amount to be Paid</th>
                                    <th class="editable">Amount Paid</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--/ Column Search -->
@endsection


@section('vendor-script')
    {{-- vendor files table data --}}
    <script src="{{ asset('vendors/js/tables/datatable/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('vendors/js/tables/datatable/dataTables.bootstrap5.min.js') }}"></script>
    <script src="{{ asset('vendors/js/forms/select/select2.full.min.js') }}"></script>
    <script src="{{ asset('vendors/js/tables/datatable/datatables.buttons.min.js') }}"></script>
    <script src="{{ asset('vendors/js/tables/datatable/buttons.bootstrap5.min.js') }}"></script>
    <script src="{{ asset('vendors/js/extensions/sweetalert2.all.min.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/toastr@2.1.4/dist/toastr.min.js"></script>

@endsection

@section('page-script')
    <script src="{{ asset('/js/custom.js') }}"></script>
    <script>
        $(document).ready(function() {
            $(".select2").select2({});
            var payment_calculation_id = '';
            var baseUrl = '{{ URL::to('/') }}';
            var paymentStatus = false;

            var columns = [{
                    data: 'vendor_code'
                },
                {
                    data: 'vendor'
                },
                {
                    data: 'totalFixedPrice'
                },
                {
                    data: 'totalVariablePrice'
                },
                {
                    data: 'totalExpensePrice'
                },
                {
                    data: 'remaining_dues',
                    render: function(data, type, row) {
                        if (typeof data === 'number') {
                            return Math.floor(data);
                        }
                        return data;
                    }
                },
                {
                    data: 'deduction',
                    render: function(data, type, row) {
                        if (typeof data === 'number') {
                            return Math.floor(data);
                        }
                        return data;
                    },
                    className: 'editable'
                },
                {
                    data: 'addition',
                    render: function(data, type, row) {
                        if (typeof data === 'number') {
                            return Math.floor(data);
                        }
                        return data;
                    },
                    className: 'editable'
                },
                {
                    data: 'grand_total',
                    render: function(data, type, row) {
                        if (typeof data === 'number') {
                            return Math.floor(data);
                        }
                        return data;
                    },
                    className: 'editable'
                },
                // {
                //     data: 'total_payable_without_expenses',
                //     render: function(data, type, row) {
                //         if (typeof data === 'number') {
                //             return Math.floor(data);
                //         }
                //         return data;
                //     }
                // },
                {
                    data: 'calculated_amount',
                    render: function(data, type, row) {
                        if (typeof data === 'number') {
                            return Math.floor(data);
                        }
                        return data;
                    },
                    className: 'editable'
                },
                {
                    data: 'amount_to_be_paid',
                    render: function(data, type, row, meta) {
                        return Math.floor(data);
                    },
                    className: 'editable'
                },
                {
                    data: 'amount_paid',
                    render: function(data, type, row, meta) {
                        return data ? Math.floor(data) : 0;
                    },
                },
                {
                    targets: 12,
                    title: 'Actions',
                    orderable: false,
                    sortable: false,
                    visible: true,
                    render: function(data, type, row, meta) {
                        var showButton = '<a title="View" href="' + baseUrl + '/ibl-payment-calculation-show/' +
                            row[
                                '_id'] +
                            '" target="_blank" class="btn btn-icon btn-primary mr_5px"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-eye"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg></a>';

                        var editButton = '';

                        if (paymentStatus) {
                            var editButton =
                                '<button value="' + row['_id'] +
                                '" data-payment-calculation-id="' + payment_calculation_id +
                                '" class="btn btn-icon btn-primary mr_5px edit-btn">' +
                                '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit">' +
                                '<path d="M12 20h9"></path>' +
                                '<path d="M16 2l2.84 2.84L4 20H2v-2l12-12z"></path>' +
                                '</svg>' +
                                '</button>';
                        }

                        return showButton + editButton;
                    }
                }
            ];

            var table = $('#payments').DataTable({
                processing: true,
                serverSide: true,
                paging: true,
                ajax: {
                    url: baseUrl + '/ibl-payments-table',
                    type: 'GET',
                    data: function(d) {
                        d.payment_calculation_id = payment_calculation_id;
                        d.page = (d.start / d.length) + 1; // DataTables calculates the page number based on start
                        d.length = d.length; // Page length (number of rows per page)
                        d.search = d.search.value; // Search value (global search box)
                    }
                },
                columns: columns,
                columnDefs: [{
                        targets: [0, 1, 2, 3, 4, 5, 6, 7, 8,  9, 10, 11],
                        className: 'editable'
                    },
                    {
                        targets: 12,
                        title: 'Actions',
                        orderable: false,
                        sortable: false,
                        visible: true
                    }
                ],
                dom: '<"d-flex justify-content-between align-items-center header-actions text-nowrap mx-1 row mt-75"' +
                    '<"col-sm-12 col-lg-4 d-flex justify-content-center justify-content-lg-start" l>' +
                    '<"col-sm-12 col-lg-8"<"dt-action-buttons d-flex align-items-center justify-content-lg-end justify-content-center flex-md-nowrap flex-wrap"<"me-1"f>>>' +
                    '><"text-nowrap" t>' +
                    '<"d-flex justify-content-between mx-2 row mb-1"' +
                    '<"col-sm-12 col-md-6"i>' +
                    '<"col-sm-12 col-md-6"p>' +
                    '>',
                language: {
                    paginate: {
                        // remove previous & next text from pagination
                        previous: '&nbsp;',
                        next: '&nbsp;'
                    }
                }
            });


            $('#payments tbody').on('click', 'td.editable', function(event) {
                event.stopPropagation();
                var cell = table.cell(this);
                console.log(cell.index().column);
                var rowIndex = cell.index().row;
                if (cell.index().column == 10) { // Exclude the Actions column
                    var originalValue = cell.data();
                    var inputElement = $('<input type="text" class="form-control" value="' + originalValue +
                        '">');

                    // Set the value of the input element as the cell data
                    cell.data(originalValue);
                    cell.nodes().to$().html(inputElement);

                    inputElement.on('blur', function() {
                        var newValue = $(this).val();
                        cell.data(newValue).draw();
                    });

                    inputElement.focus();
                }
            });

            $('#payments tbody').on('click', 'button.edit-btn', function() {
                var row = $(this).closest('tr');
                var values = {};

                values['_id'] = $(this).val();

                row.find('td.editable').each(function(index) {
                    var fieldName = table.settings().init().columns[index].data;
                    var cell = table.cell(this);
                    var value = cell.data();
                    values[fieldName] = value;
                });

                var paymentId = $(this).val();
                var paymentCalculationId = $(this).data('payment-calculation-id');
                console.log(values);
                var loaderContainer = $('<div class="loader-container"><div class="loader"></div></div>')
                    .appendTo('body');
                var url = baseUrl + '/ibl-payments/' + paymentId + '/calculation/' + paymentCalculationId;  // Dynamic URL
                
                $.ajax({
                    url: url,
                    type: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        _method: 'PUT',
                        amount_to_be_paid: values['amount_to_be_paid'],
                        calculated_amount: values['calculated_amount'],
                    },
                    success: function(response) {
                        loaderContainer.remove();

                        if (response.status === 'success') {
                            toastr.success(response.message);
                            table.ajax.reload();
                        } else {
                            toastr.error(response.message);
                        }
                    },
                    error: function(error) {
                        loaderContainer.remove();

                        console.error('Ajax request error:', error);
                        var errorMessage = error.responseJSON.message;
                        toastr.error(errorMessage, 'Error');
                    }
                });
            });


            // Event listener for Supplier filter
            $('#supplier').on('change', function() {
                var supplierId = $(this).val();
                table.column(0).search(supplierId).draw(); // Assuming the column index is 1
            });

        });
    </script>
@endsection