@extends('backend.app')

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

@push('style')
    <link href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" />
    <style>
        .dropify-wrapper {
            width: 160px;
        }

        #data-table th,
        #data-table td {
            text-align: center !important;
            vertical-align: middle !important;
        }
    </style>
@endpush
@section('content')
    <main class="app-content content">
        <div class="row">
            <div class="col-lg-12 mb-1">
                <div class="card">
                    <div class="card-header">
                        <h4 class="m-0">Owner's Payouts</h4>
                    </div>
                    <div class="card-body">
                        <button id="bulkPayNow" class="btn btn-success mb-3 d-none">Bulk Pay Now</button>

                        <div class="table-responsive">
                            <button id="bulkPayNow" class="btn btn-success mb-3 d-none">Bulk Pay Now</button>

                            <table id="data-table" class="table table-bordered table-hover w-100">
                                <thead class="thead-light">
                                    <tr>
                                        <th><input type="checkbox" id="select_all"></th>
                                        <th>Sl</th>
                                        <th>Owner</th>
                                        <th>Service</th>
                                        <th>Service Status</th>
                                        <th>Amount</th>
                                        <th>Fee %</th>
                                        <th>Earn</th>
                                        <th>Owner Recieved</th>
                                        <th>Received Date</th>
                                        <th>Payout Date</th>
                                        <th>Transaction ID</th>
                                        <th>Status</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>


                    </div>
                </div>
            </div>
        </div>
    </main>
@endsection

@push('script')
    <script src="{{ asset('backend/assets/datatable/js/datatables.min.js') }}"></script>
    <script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    {{-- Datatable --}}
    <script>
        $(document).ready(function() {
            $.ajaxSetup({
                headers: {
                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                }
            });
            $(document).ready(function() {
                if (!$.fn.DataTable.isDataTable('#data-table')) {
                    $('#data-table').DataTable({
                        scrollX: true, // 🔥 force horizontal scrolling
                        responsive: false, // ❌ turn this off for scroll mode
                        autoWidth: false, // 🧠 prevent DataTables from forcing column widths
                        processing: true,
                        serverSide: true,
                        ajax: "{{ route('ownerduepayments.index') }}",
                        columns: [{
                                data: 'checkbox',
                                name: 'checkbox',
                                orderable: false,
                                searchable: false
                            },
                            {
                                data: 'DT_RowIndex',
                                name: 'DT_RowIndex',
                                orderable: false,
                                searchable: false
                            },
                            {
                                data: 'owner',
                                name: 'owner'
                            },
                            {
                                data: 'service',
                                name: 'service'
                            },
                            {
                                data: 'service_status',
                                name: 'service_status'
                            },
                            {
                                data: 'amount',
                                name: 'amount'
                            },
                            {
                                data: 'platform_fee_percent',
                                name: 'platform_fee_percent'
                            },
                            {
                                data: 'platform_earning',
                                name: 'platform_earning'
                            },
                            {
                                data: 'owner_earning',
                                name: 'owner_earning'
                            },
                            {
                                data: 'received_date',
                                name: 'received_date'
                            },
                            {
                                data: 'paid_date',
                                name: 'paid_date'
                            },
                            {
                                data: 'transaction_id',
                                name: 'transaction_id'
                            },
                            {
                                data: 'status',
                                name: 'status'
                            },
                            {
                                data: 'action',
                                name: 'action',
                                orderable: false,
                                searchable: false
                            }
                        ]
                    });
                }
            });

        });
    </script>
    {{-- Password --}}
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        $(document).on('click', '.btn-pay-now', function(e) {
            e.preventDefault();

            const bookingId = $(this).data('booking-id');
            const ownerId = $(this).data('owner-id');
            const payUrl = $(this).data('url');

            Swal.fire({
                title: "Enter your password",
                input: "password",
                inputLabel: "Password",
                inputPlaceholder: "Enter your password",
                inputAttributes: {
                    maxlength: "20",
                    autocapitalize: "off",
                    autocorrect: "off"
                },
                showCancelButton: true,
                confirmButtonText: "Confirm",
                preConfirm: (password) => {
                    if (!password) {
                        Swal.showValidationMessage('Password is required');
                    }
                    return password;
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    // Send password to backend via AJAX
                    $.ajax({
                        url: payUrl,
                        method: 'POST',
                        data: {
                            _token: '{{ csrf_token() }}',
                            password: result.value
                        },
                        success: function(res) {
                            Swal.fire("Success", res.message, "success").then(() => {
                                window.location.reload();
                            });
                        },
                        error: function(xhr) {
                            let errorMsg = xhr.responseJSON?.message || 'Something went wrong';
                            Swal.fire("Error", errorMsg, "error");
                        }
                    });
                }
            });
        });
    </script>

    <script>
        $('#bulkPayNow').click(async function() {
            const selectedIds = $(".row-checkbox:checked").map(function() {
                return $(this).val();
            }).get();

            if (selectedIds.length === 0) {
                Swal.fire("No rows selected", "Please select at least one row to pay", "warning");
                return;
            }

            const {
                value: password
            } = await Swal.fire({
                title: "Confirm Password",
                input: "password",
                inputLabel: "Enter your password to confirm",
                inputPlaceholder: "Your password",
                inputAttributes: {
                    maxlength: "50",
                    autocapitalize: "off",
                    autocorrect: "off"
                },
                showCancelButton: true,
            });

            if (password) {
                $.ajax({
                    url: "{{ route('ownerduepayments.bulkPay') }}",
                    type: "POST",
                    data: {
                        ids: selectedIds,
                        password: password
                    },
                    success: function(response) {
                        if (response.success) {
                            Swal.fire("Success", response.message, "success");
                            $('#data-table').DataTable().ajax.reload();
                        } else {
                            Swal.fire("Failed", response.message, "error");
                        }
                    },
                    error: function() {
                        Swal.fire("Error", "Something went wrong", "error");
                    }
                });
            }
        });
        $('#select_all').on('change', function() {
            let checked = $(this).is(':checked');
            $('.row-checkbox').prop('checked', checked).trigger('change');
        });

        // Show/hide bulk button
        $(document).on('change', '.row-checkbox', function() {
            let anyChecked = $('.row-checkbox:checked').length > 0;
            $('#bulkPayNow').toggleClass('d-none', !anyChecked);

            // Uncheck master if any one is unchecked
            if (!$(this).is(':checked')) {
                $('#select_all').prop('checked', false);
            } else {
                let allChecked = $('.row-checkbox').length === $('.row-checkbox:checked').length;
                $('#select_all').prop('checked', allChecked);
            }
        });

        // Recheck visibility after redraw (pagination, filter, etc.)
        $('#data-table').on('draw.dt', function() {
            $('#select_all').prop('checked', false);
            $('#bulkPayNow').addClass('d-none');
        });
    </script>
@endpush