@if (globalPermission('restrict_bill_cycle_calendar_to_env_days'))
    <style>
        /* Highlight the allowed (selectable) billing-cycle days in the calendar. */
        #billCycleDatePicker + .bootstrap-datetimepicker-widget td.day:not(.disabled),
        .bootstrap-datetimepicker-widget td.day:not(.disabled):not(.old):not(.new) {
            background-color: #d1fae5;
            color: #065f46;
            font-weight: 700;
            border-radius: 4px;
        }

        .bootstrap-datetimepicker-widget td.day:not(.disabled):not(.old):not(.new):hover {
            background-color: #34d399;
            color: #fff;
        }
    </style>
@endif

<form
    action="@if (!empty($packages)) {{ route('batchUserPackageChange') }} @else {{ route('batchUserBillingCycleChange') }} @endif"
    method="POST" class="flex flex-wrap" id="batchUserPackageChange">
    @csrf

    <!-- Changed from client_ids[] to client_ids (single input) -->
    <input type="hidden" name="client_ids" id="client_ids">
    <input type="hidden" id="uuid" name="uuid" value="{{createUUID()}}">

    <div class="table-responsive">
        <table class="table table-bordered">
            <thead style="background: #78716C;color:white;">
                <tr>
                    <th class="text-center">
                        <input type="checkbox" id="allSelect">
                    </th>
                    <th scope="col" class="">
                        ID
                    </th>

                    <th scope="col" class="">
                        User name
                    </th>

                    <th scope="col" class="">
                        Expire Date
                    </th>

                    <th scope="col" class="">
                        Bill Cycle
                    </th>

                    @unlessrole('Sub Reseller')
                        <th scope="col" class="">
                            Package
                        </th>
                    @endunlessrole
                    <th scope="col" class="">
                        Sub Package
                    </th>

                    <th scope="col" class="">
                        Contact No
                    </th>
                </tr>
            </thead>
            <tbody class="">
                @forelse ($r as $row)
                    <tr>
                        <td class="text-center">
                            <!-- Removed name attribute - will be handled by JavaScript -->
                            <input type="checkbox" class="checkbox new_class_for_client_id_of_pending"
                                data-id="{{ $row->id }}" value="{{ $row->id }}">
                        </td>
                        <td>
                            {{ $row->id }}
                        </td>
                        <td>
                            {{ $row->userid }}
                        </td>

                        <td class="whitespace-nowrap">
                            {{ date('d-M-Y', strtotime($row->expire_date)) }}
                        </td>

                        <td>
                            {{ $row->billing_cycle }}
                        </td>

                        @unlessrole('Sub Reseller')
                            <td>
                                {{ $row->packages->package_name }}
                            </td>
                        @endunlessrole

                        <td>
                            @if ($row->subpack)
                                {{ $row->subpack->name }}
                            @endif
                        </td>

                        <td>
                            {{ $row->clientsinfo->contact_no ?? '' }}
                        </td>
                    </tr>

                @empty
                    <tr>
                        <td colspan="8" class="text-center">No records found</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    {{-- Action controls live OUTSIDE .table-responsive so the calendar dropdown
         isn't clipped by the table's overflow. --}}
    @if (!empty($packages))
        <div class="p-2">
            <div class="row">
                @can('batch-package-change-without-cost')
                    <div class="col-sm-2">
                        <label class="flex-1 block text-gray-700 text-sm font-bold mb-2"
                            for="change_pack_without_cost">
                            Change Package Without Cost
                        </label>
                    </div>
                    <div class="col-sm-2">
                        <select name="change_pack_without_cost" id="change_pack_without_cost"
                            class="form-control">
                            <option value="no">No</option>
                            <option value="yes">Yes</option>
                        </select>
                    </div>
                @endcan
                <div class="col-sm-4"></div>
                <div class="col-sm-2">

                    @if ($row->pop->subreseller == 'yes')

                        <select name="package_id" class="form-control" required>
                            <option value="">Select</option>
                            @foreach ($packages as $p)
                                <option value="{{ $p->id }}">
                                    ({{ $p->id }})
                                    - {{ $p->name }} @if (globalPermission('package-change-price-show'))
                                        ({{ $p->rate }} TK) (s)
                                    @endif
                                </option>
                            @endforeach

                        </select>
                    @else
                        <select name="package_id" class="form-control" required>
                            <option value="">Select</option>
                            @foreach ($packages as $p)
                                <option value="{{ $p->id }}">
                                    ({{ $p->id }})
                                    - {{ $p->package_name }}
                                    @if (globalPermission('package-change-price-show'))
                                        ({{ $p->package_rate }} TK)
                                    @endif
                                </option>
                            @endforeach

                        </select>

                    @endif

                </div>

                <div class="col-sm-2">
                    <button type="button" class="btn btn-primary" id="changePack">Change Package</button>
                </div>
            </div>
        </div>
    @else
        <div class="container-fluid " style="background: #d8b4fe;">
            <div class="row border  p-2">
                @can('change-billing-cycle-without-cost')
                    <div class="col-sm-2">
                        <label class="flex-1 block text-gray-700 text-sm font-bold mb-2"
                            for="change_without_cost">
                            Change Without Cost
                        </label>
                    </div>
                    <div class="col-sm-2">
                        <select name="change_without_cost" id="change_without_cost"
                            class="form-control">
                            <option value="no">No</option>
                            <option value="yes">Yes</option>
                        </select>
                    </div>
                @endcan
                <div class="col-sm-4"></div>
                <div class="col-sm-2 border " id="billCycle">
                    @if (globalPermission('restrict_bill_cycle_calendar_to_env_days'))
                        {{-- Restricted mode: use Tempus Dominus so non-configured
                             days are disabled (greyed) and the allowed BILLING_CYCLE
                             days are highlighted in the calendar. --}}
                        <div class="input-group date" id="billCycleDatePicker" data-target-input="nearest">
                            <input type="text" name="billCycle" class="form-control datetimepicker-input"
                                id="billCycleDate" data-target="#billCycleDatePicker" placeholder="Select Date"
                                autocomplete="off">
                            <div class="input-group-append" data-target="#billCycleDatePicker"
                                data-toggle="datetimepicker">
                                <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                            </div>
                        </div>
                        <small class="text-muted d-block mt-1">
                            Allowed days: {{ $confday ?? config('app.billing_cycle') }}
                        </small>
                    @else
                        <input type="date" name="billCycle" class="form-control" id="billCycleDate"
                            min="{{ now()->addDay()->toDateString() }}" placeholder="Select Date">
                    @endif
                </div>
                <div class="col-sm-2" id="expireDate" style="display: none">
                    <input type="date" class="form-control" name="expire_date">
                </div>

                <div class="col-sm-2">
                    <button type="button" class="btn btn-primary" id="changePack">Billing Cycle Change</button>
                </div>
            </div>
        </div>
    @endif

    <!-- Selected Count Display -->
    <div class="mt-3 d-flex flex-wrap align-items-center" style="gap: 6px;">
        <span id="selectedCount" class="badge badge-info">Selected: 0</span>
        <span id="costPreviewLoading" class="badge badge-secondary" style="display: none;">
            Calculating cost...
        </span>
        {{-- A sub reseller must not see the reseller cost, so the badge is not even
             rendered for them and the endpoint leaves the amount out of the response. --}}
        @if (!auth()->user()->hasRole(['Sub Reseller', 'Sub Reseller Technician']))
            <span id="resellerCostPreview" class="badge badge-danger" style="display: none;"></span>
        @endif
        <span id="subResellerCostPreview" class="badge badge-warning" style="display: none;"></span>
        <span id="costPreviewNote" class="badge badge-light border" style="display: none;"></span>
    </div>
</form>

<script>
    $(function() {
        // When the "restrict_bill_cycle_calendar_to_env_days" global setting is enabled, the
        // billing-cycle calendar may only pick dates whose day-of-month is one of the configured
        // BILLING_CYCLE env days. In that mode the input is a Tempus Dominus picker that greys out
        // the non-configured days; isBillCycleDayAllowed() is a final safety check on submit.
        @php
            $restrictBillCycleDays = globalPermission('restrict_bill_cycle_calendar_to_env_days');
            // When separate_billing_cycle_to_resellers is enabled, $confday holds the selected
            // manager/reseller's billing cycles; otherwise it holds the env BILLING_CYCLE days.
            // Highlight/enable whichever set applies (see resolveResellerBillingCycles()).
            $billCycleDaySource = $confday ?? config('app.billing_cycle');
            $allowedBillCycleDays = $restrictBillCycleDays
                ? array_values(array_filter(array_map('intval', explode(',', $billCycleDaySource))))
                : [];
        @endphp
        var restrictBillCycleDays = @json($restrictBillCycleDays);
        var allowedBillCycleDays = @json($allowedBillCycleDays);

        // Returns true if the given YYYY-MM-DD value is allowed under the current restriction.
        function isBillCycleDayAllowed(dateValue) {
            if (!restrictBillCycleDays) {
                return true;
            }
            if (!dateValue) {
                return false;
            }
            // Parse the day directly from the string to avoid timezone shifts.
            var day = parseInt(dateValue.split('-')[2], 10);
            return allowedBillCycleDays.indexOf(day) !== -1;
        }

        if (restrictBillCycleDays && allowedBillCycleDays.length && typeof moment !== 'undefined') {
            // Build the whitelist of selectable dates (allowed day-of-month only), starting
            // tomorrow, for the next 18 months. Tempus Dominus greys out everything else.
            var enabledBillCycleDates = [];
            var cursor = moment().add(1, 'day').startOf('day');
            var enabledEnd = moment().add(18, 'months');
            while (cursor.isSameOrBefore(enabledEnd, 'day')) {
                if (allowedBillCycleDays.indexOf(cursor.date()) !== -1) {
                    enabledBillCycleDates.push(cursor.clone());
                }
                cursor.add(1, 'day');
            }

            $('#billCycleDatePicker').datetimepicker({
                format: 'YYYY-MM-DD',
                useCurrent: false,
                allowInputToggle: true,
                enabledDates: enabledBillCycleDates,
            });
        }

        // ---- Cost preview ---------------------------------------------------------------
        // Shows what the selected customers will cost before the change is submitted. The
        // amounts are worked out server side by the same calculation the real change uses,
        // so the badge cannot show a different number than what is charged. Which amounts
        // come back depends on the role: a sub reseller never receives the reseller cost.
        //
        // This partial serves both flows, so point it at the right one.
        @if (!empty($packages))
            var costPreviewUrl = '{{ route('packageChangeCost') }}';
            var costPreviewTargetSelector = 'select[name="package_id"]';
            var costPreviewTargetKey = 'package_id';
            var costPreviewWithoutCostSelector = '#change_pack_without_cost';
        @else
            var costPreviewUrl = '{{ route('billingCycleChangeCost') }}';
            var costPreviewTargetSelector = '#billCycleDate';
            var costPreviewTargetKey = 'billCycle';
            var costPreviewWithoutCostSelector = '#change_without_cost';
        @endif

        var costPreviewRequest = null;
        var costPreviewTimer = null;

        function hideCostPreview() {
            $('#costPreviewLoading, #resellerCostPreview, #subResellerCostPreview, #costPreviewNote')
                .hide();
        }

        function loadCostPreview() {
            if (costPreviewRequest) {
                costPreviewRequest.abort();
                costPreviewRequest = null;
            }

            var ids = [];
            $('.new_class_for_client_id_of_pending:checked').each(function() {
                ids.push($(this).val());
            });

            var target = $(costPreviewTargetSelector).val();

            // "Without cost" only moves the expire date / package - nothing is charged.
            if ($(costPreviewWithoutCostSelector).val() === 'yes' || !ids.length || !target) {
                hideCostPreview();
                return;
            }

            hideCostPreview();
            $('#costPreviewLoading').show();

            var payload = {
                client_ids: ids.join(',')
            };
            payload[costPreviewTargetKey] = target;

            costPreviewRequest = $.ajax({
                type: 'get',
                url: costPreviewUrl,
                data: payload,
                success: function(result) {
                    costPreviewRequest = null;
                    $('#costPreviewLoading').hide();

                    if (!result || result.status !== 'success') {
                        return;
                    }

                    if (typeof result.reseller_cost !== 'undefined') {
                        $('#resellerCostPreview')
                            .text('Reseller Cost: ' + result.reseller_cost + ' TK')
                            .show();
                    }

                    if (result.has_sub_reseller_cost) {
                        $('#subResellerCostPreview')
                            .text('Sub Reseller Cost: ' + result.sub_reseller_cost + ' TK')
                            .show();
                    }

                    var note = result.counted + ' customer(s) will be charged';
                    if (result.skipped > 0) {
                        note += ', ' + result.skipped + ' skipped';
                    }
                    $('#costPreviewNote').text(note).show();
                },
                error: function(xhr, status) {
                    if (status !== 'abort') {
                        costPreviewRequest = null;
                        $('#costPreviewLoading').hide();
                    }
                }
            });
        }

        // Hundreds of rows get ticked one by one, so wait until the operator stops
        // clicking instead of pricing the whole list on every checkbox.
        function queueCostPreview() {
            clearTimeout(costPreviewTimer);
            costPreviewTimer = setTimeout(loadCostPreview, 400);
        }

        $(costPreviewTargetSelector).on('change keyup', queueCostPreview);
        $(costPreviewWithoutCostSelector).on('change', queueCostPreview);
        @if (empty($packages))
            // The restricted-calendar mode is a Tempus Dominus picker with its own event.
            $('#billCycleDatePicker').on('change.datetimepicker', queueCostPreview);
        @endif

        // Update selected count
        function updateSelectedCount() {
            var count = $('.new_class_for_client_id_of_pending:checked').length;
            $('#selectedCount').text('Selected: ' + count);
            queueCostPreview();
        }

        // Select/Deselect All
        $('#allSelect').on('click', function() {
            var isChecked = this.checked;
            $('.new_class_for_client_id_of_pending').prop('checked', isChecked);
            updateSelectedCount();
        });

        // Update count when individual checkbox is clicked
        $('.new_class_for_client_id_of_pending').on('change', function() {
            updateSelectedCount();

            // Update "select all" checkbox state
            var totalCheckboxes = $('.new_class_for_client_id_of_pending').length;
            var checkedCheckboxes = $('.new_class_for_client_id_of_pending:checked').length;
            $('#allSelect').prop('checked', totalCheckboxes === checkedCheckboxes);
        });

        // Handle form submission
        $('#changePack').on('click', function(e) {
            e.preventDefault();

            // Collect all checked IDs
            var ids = [];
            $('.new_class_for_client_id_of_pending:checked').each(function() {
                ids.push($(this).val());
            });

            // Validate that at least one checkbox is selected
            if (ids.length === 0) {
                alert('Please select at least one user to proceed.');
                return false;
            }

            // Additional validation for package/billing cycle
            @if (!empty($packages))
                var packageId = $('select[name="package_id"]').val();
                if (!packageId) {
                    alert('Please select a package.');
                    return false;
                }
            @else
                // Check if expire date field is visible
                if ($('#expireDate').is(':visible')) {
                    var expireDate = $('#expireDate input[name="expire_date"]').val();
                    console.log('Expire Date Value:', expireDate); // Debug
                    if (!expireDate || expireDate.trim() === '') {
                        alert('Please select an expire date.');
                        return false;
                    }
                } else {
                    var billCycle = $('#billCycleDate').val();
                    if (!billCycle || billCycle.trim() === '') {
                        alert('Please select a billing cycle date.');
                        return false;
                    }
                    var today = new Date();
                    today.setHours(0, 0, 0, 0);
                    var selected = new Date(billCycle);
                    if (selected <= today) {
                        alert('Billing cycle date cannot be in the past or today.');
                        return false;
                    }
                    if (!isBillCycleDayAllowed(billCycle)) {
                        alert('Please select a date on one of the allowed billing cycle days: ' +
                            allowedBillCycleDays.join(', '));
                        return false;
                    }
                }
            @endif

            // Confirm action
            var confirmMessage = 'Are you sure you want to change ' + ids.length + ' user(s)?';
            if (!confirm(confirmMessage)) {
                return false;
            }

            // Disable button to prevent double submission
            $('#changePack').prop('disabled', true).text('Processing...');

            // Store IDs as comma-separated string in hidden input
            $('#client_ids').val(ids.join(','));

            // Submit the form
            $('#batchUserPackageChange').submit();
        });

        // Toggle between billing cycle dropdown and date picker
        $('#change_without_cost').on('change', function() {
            let type_val = $(this).val();

            if (type_val == 'yes') {
                $('#billCycle').hide();
                $('#billCycleDate').prop('required', false);
                $('#expireDate').show();
                $('#expireDate input').prop('required', true);
            } else {
                $('#billCycle').show();
                $('#billCycleDate').prop('required', true);
                $('#expireDate').hide();
                $('#expireDate input').prop('required', false);
            }
        });

        // Initialize selected count on page load
        updateSelectedCount();
    });
</script>