@extends('layouts.master')

@section('title', __('user_portal.payouts'))
@section('content_title', __('user_portal.payouts'))

@section('main_content')

    <div class="main-card" id="main-content">
        <div class="card mb-3">
            <div class="card-body">
                <form action="{{ route('user_portal.payouts.index') }}" id="searchUserPayouts" method="post">
                    <input type="hidden" name="user_id" value="{{ auth()->user()->id }}">
                    <div class="row">
                        <div class="col-12 col-md-4 mb-3">
                            <label for="month-year" class="form-label mr-2">{{ __('core.month') }} -
                                {{ __('core.year') }}:</label>
                            <input type="month" class="form-control" required id="month-year" name="month_year"
                                value="">
                        </div>

                    </div>
                </form>

            </div>
        </div>
        <div class="card mb-3">
            <div class="card-body">
                <table class="table table-hover table-striped table-bordered" id="payoutTable">
                    <thead class="thead-dark">
                        <tr>
                            <th>{{ __('accounting.invoice_no') }}</th>
                            <th>{{ __('accounting.invoice_date') }}</th>
                            <th>{{ __('accounting.total_amount') }}</th>
                            @php
                                $userType = getUserType(auth()->user()->id);
                            @endphp
                            @if ($userType == 'Student')
                                <th>{{ __('accounting.total_discount') }}</th>
                            @elseif ($userType == 'Teacher' || $userType == 'Employee')
                                <th>{{ __('accounting.total_bonus') }}</th>
                            @endif
                            <th>{{ __('accounting.total_paid') }}</th>
                            <th>{{ __('core.status') }}</th>
                            <th>{{ __('core.action') }}</th>
                        </tr>
                    </thead>

                    <tbody id="payoutTableData">
                        <!-- Table rows will be populated here dynamically -->
                    </tbody>
                </table>
            </div>
        </div>

    </div>
@endsection


@push('script')
    <script>
        $(document).ready(function() {

            $("#home").DataTable({
                responsive: true,
            });

            $(document).on("submit", "#searchUserPayouts", function(e) {

                e.preventDefault();

                let method = $(this).attr("method");
                let url = $(this).attr("action");
                let data = $(this).serialize();
                formdata = data;
                loadData(method, url, data);
            })


            let data = {
                "user_id": "{{ auth()->user()->id }}"
            };


            $("#month-year").on("change", function() {
                $("#searchUserPayouts").submit()
            })
            // Ensure data is not null before making the request
            if (data) {
                loadData("post", "{{ route('user_portal.payouts.index') }}", data);
            }


            function loadData(method, url, data) {
                $.ajax({
                    method: method,
                    url: url,
                    data: data,
                    success: function(data) {
                        if ($.fn.DataTable.isDataTable('#payoutTable')) {
                            $('#payoutTable').DataTable().destroy();
                        }
                        $("#payoutTableData").empty();
                        $("#payoutTableData").html(data.invoices);

                        // Reinitialize the DataTable
                        $('#payoutTable').DataTable({
                            processing: true,
                            responsive: false,
                            dom: '<"row align-items-center mb-3"<"col-md-6 d-flex gap-2"lB><"col-md-6"f>>rtip',
                            buttons: [{
                                extend: 'excelHtml5',
                                text: 'Export to Excel',
                                title: 'DataExport'
                            }],
                            lengthMenu: [10, 25, 50, 100],
                            pageLength: 10
                        });

                    },
                    error: function(error) {}
                })
            }
        })
    </script>
@endpush