<?php
// phpcs:disable WordPress.Security.NonceVerification.Missing, WordPress.Security.NonceVerification.Recommended, WordPress.Security.ValidatedSanitizedInput.MissingUnslash, WordPress.Security.ValidatedSanitizedInput.InputNotSanitized, WordPress.Security.ValidatedSanitizedInput.InputNotValidated
// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
if ( ! defined( 'ABSPATH' ) ) { exit; }
// Booking rows store business-location wall-clock time. Do not infer UTC from
// square_synced: both Square create and reconciliation paths normalize to the
// business timezone before writing.
$_sbs_tz_string = yatoon_timezone_string();
// phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
$_sbs_local_tz = new DateTimeZone($_sbs_tz_string);
// phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
$_sbs_utc_tz   = new DateTimeZone('UTC');
if ( ! function_exists('yatoon_booking_display_dt') ) {
    function yatoon_booking_display_dt( $booking, $field, $local_tz, $utc_tz ) {
        $db_time = isset($booking->{$field}) ? $booking->{$field} : '';
        if (empty($db_time) || $db_time === '0000-00-00 00:00:00') { return null;
        }
        $source_tz = $local_tz;
if ( ! empty( $booking->booking_timezone ) ) {
            try { $source_tz = new DateTimeZone( $booking->booking_timezone );
} catch ( Exception $e ) {}
        }
        $dt = new DateTime($db_time, $source_tz);
return $dt;
    }
}
?>
<div class="wrap sbs-admin-page sbs-bookings-page">
    <h1><?php echo esc_html(get_admin_page_title()); ?></h1>
    <style>
        .sbs-admin-table-wrap {
            width: 100%;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }
        .sbs-admin-table-wrap .wp-list-table {
            min-width: 1280px;
            table-layout: auto;
        }
        #sbs-bookings-table tr.is-selected td {
            background: #f0fdf4 !important;
        }
        #sbs-bookings-table th:nth-child(5),
        #sbs-bookings-table td:nth-child(5) {
            min-width: 90px;
            white-space: nowrap;
            word-break: normal;
        }
        #sbs-bookings-table th:nth-child(6),
        #sbs-bookings-table td:nth-child(6) {
            min-width: 130px;
            white-space: nowrap;
        }
        /* Highlight rows for bookings that include a customer design/photo upload */
        #sbs-bookings-table tr[data-design-upload="1"] {
            background: #fef3c7 !important;
            box-shadow: inset 5px 0 0 #f59e0b;
        }
        #sbs-bookings-table tr[data-design-upload="1"]:hover {
            background: #fde68a !important;
        }
    </style>
    
    <?php if (empty($bookings)) : ?>
        <div class="notice notice-info">
            <p><?php esc_html_e('No bookings found yet.', 'yatoon-booking-system'); ?></p>
        </div>
    <?php else : ?>
        <div class="sbs-table-toolbar">
            <div class="sbs-table-search">
                <input type="search" id="sbs-booking-search" class="regular-text" value="<?php echo esc_attr(isset($_GET['s']) ? sanitize_text_field(wp_unslash($_GET['s'])) : ''); ?>" autocomplete="off" placeholder="<?php echo esc_attr__( 'Search customer, phone, service, staff, or ID', 'yatoon-booking-system' ); ?>">
                <select id="sbs-booking-status-filter">
                    <option value=""><?php esc_html_e( 'All statuses', 'yatoon-booking-system' ); ?></option>
                    <option value="pending"><?php esc_html_e( 'Pending', 'yatoon-booking-system' ); ?></option>
                    <option value="confirmed"><?php esc_html_e( 'Confirmed', 'yatoon-booking-system' ); ?></option>
                    <option value="completed"><?php esc_html_e( 'Completed', 'yatoon-booking-system' ); ?></option>
                    <option value="no_show"><?php esc_html_e( 'No-show', 'yatoon-booking-system' ); ?></option>
                    <option value="cancelled"><?php esc_html_e( 'Cancelled', 'yatoon-booking-system' ); ?></option>
                </select>
                <select id="sbs-booking-design-filter">
                    <option value=""><?php esc_html_e( 'All image statuses', 'yatoon-booking-system' ); ?></option>
                    <option value="1"><?php esc_html_e( 'Has design image', 'yatoon-booking-system' ); ?></option>
                    <option value="0"><?php esc_html_e( 'No design image', 'yatoon-booking-system' ); ?></option>
                </select>
                <button type="button" id="sbs-booking-clear-filters" class="button"><?php esc_html_e( 'Clear', 'yatoon-booking-system' ); ?></button>
            </div>
            <div class="sbs-table-actions">
                <button type="button" id="sbs-view-design-gallery" class="button action">
                    <?php esc_html_e('View Design Images', 'yatoon-booking-system'); ?>
                </button>
                <button type="button" id="sbs-delete-selected-bookings" class="button action" disabled>
                    <?php esc_html_e('Delete Selected', 'yatoon-booking-system'); ?>
                </button>
                <button type="button" id="sbs-export-bookings" class="button action">
                    <?php esc_html_e('Export CSV', 'yatoon-booking-system'); ?>
                </button>
                <button type="button" id="sbs-sync-from-square" class="button action" style="background:#0073aa;color:#fff;border-color:#006799;margin-left:6px;">
                    <?php esc_html_e('Sync from Square', 'yatoon-booking-system'); ?>
                </button>
                <span id="sbs-sync-status" style="margin-left:10px;font-size:13px;color:#555;line-height:28px;"></span>
            </div>
        </div>

        <?php
        // -- Group bookings by group_booking_id --------------------------------
        // Bookings without a group_booking_id are shown individually.
        // Bookings sharing a group_booking_id are rendered as a single expandable group row.
        // phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
        $groups      = array();   // group_id => [bookings...]
        // phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
        $solo        = array();   // bookings without a group

        // phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
        foreach ($bookings as $bk) {
            if (!empty($yatoon_booking_row->group_booking_id)) {
                // phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
                $groups[ $yatoon_booking_row->group_booking_id ][] = $bk;
            } else {
                // phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
                $solo[] = $bk;
            }
        }
        // Sort within each group by service_order
        // phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
        foreach ($groups as $gid => &$gbks) {
            usort($gbks, fn( $a, $b ) => intval($a->service_order) - intval($b->service_order));
        }
        unset($gbks);

        // -- Flatten into render items -----------------------------------------
        // Each render item is either:
        //   type=solo  -> single booking row
        //   type=group -> array of bookings shown as one unit with sub-rows
        // phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
        $render_items = array();
        // phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
        foreach ($solo  as $bk) { $render_items[] = array('type'=>'solo',  'data'=>$bk); }
        // phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
        foreach ($groups as $gid=>$gbks) { $render_items[] = array('type'=>'group', 'gid'=>$gid, 'data'=>$gbks); }

        // Sort render items by the first booking's start_time desc
        usort($render_items, function ( $x, $y ) {
            $tx = $x['type']==='solo' ? $x['data']->start_time : $x['data'][0]->start_time;
            $ty = $y['type']==='solo' ? $y['data']->start_time : $y['data'][0]->start_time;
            return strcmp($ty, $tx); // desc
        });
        ?>

        <div class="sbs-admin-table-wrap">
        <table class="wp-list-table widefat fixed striped" id="sbs-bookings-table">
            <thead>
                <tr>
                    <td class="manage-column check-column">
                        <input type="checkbox" id="sbs-select-all-bookings">
                    </td>
                    <th class="manage-column" style="width:50px;"><?php esc_html_e('ID', 'yatoon-booking-system'); ?></th>
                    <th class="manage-column"><?php esc_html_e('Customer', 'yatoon-booking-system'); ?></th>
                    <th class="manage-column"><?php esc_html_e('Service', 'yatoon-booking-system'); ?></th>
                    <th class="manage-column"><?php esc_html_e('Staff', 'yatoon-booking-system'); ?></th>
                    <th class="manage-column"><?php esc_html_e('Date & Time', 'yatoon-booking-system'); ?></th>
                    <th class="manage-column"><?php esc_html_e('Price', 'yatoon-booking-system'); ?></th>
                    <th class="manage-column"><?php esc_html_e('Status', 'yatoon-booking-system'); ?></th>
                    <th class="manage-column"><?php esc_html_e('Payment', 'yatoon-booking-system'); ?></th>
                    <th class="manage-column"><?php esc_html_e('Square Sync', 'yatoon-booking-system'); ?></th>
                    <th class="manage-column"><?php esc_html_e('Actions', 'yatoon-booking-system'); ?></th>
                </tr>
            </thead>
            <tbody>
            <?php // phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound ?>
            <?php foreach ($render_items as $item) :

                // -- Helper to render status badge -----------------------------
                // phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
                $status_badge = function ( $status ) {
                    switch ($status) {
                        case 'confirmed':
                            return '<span class="sbs-status-confirmed">Confirmed</span>';
                        case 'pending':
                            return '<span class="sbs-status-pending">Pending</span>';
                        case 'completed':
                            return '<span class="sbs-status-completed">Completed</span>';
                        case 'no_show':
                            return '<span class="sbs-status-noshow">No-show</span>';
                        case 'cancelled':
                            return '<span class="sbs-status-cancelled">Cancelled</span>';
                        default:
                            return '<span>' . esc_html(ucfirst($status)) . '</span>';
                    }
                };
                // phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
                $payment_labels = array(
                    'unpaid'          => 'Unpaid',
                    'paid_square_pos' => 'Paid in Square POS',
                    'deposit_paid'    => 'Deposit paid',
                    'no_show_fee_charged' => 'No-show fee charged',
                    'no_show_fee_waived'  => 'No-show fee waived',
                    'partially_refunded' => 'Partially refunded',
                    'refunded'        => 'Refunded',
                    'waived'          => 'Waived',
                );
                // phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
                $payment_badge = function ( $status ) use ( $payment_labels ) {
                    $status = $status ?: 'unpaid';
                    $label = $payment_labels[ $status ] ?? ucfirst(str_replace('_', ' ', $status));
                    return '<span class="sbs-payment-badge sbs-payment-' . esc_attr($status) . '">' . esc_html($label) . '</span>';
                };

                if ($item['type'] === 'solo') :
                    // phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
                    $b = $item['data'];
                    // phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
                    $st = yatoon_booking_display_dt($b, 'start_time', $_sbs_local_tz, $_sbs_utc_tz);
                    // phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
                    $et = yatoon_booking_display_dt($b, 'end_time', $_sbs_local_tz, $_sbs_utc_tz);
                    // phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
                    $created_dt = null;
                    if (!empty($b->created_at) && $b->created_at !== '0000-00-00 00:00:00') {
                        $created_dt = new DateTime($b->created_at, new DateTimeZone('UTC'));
                        $created_dt->setTimezone($_sbs_local_tz);
                    }
                    // phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
                    $client_url = !empty($b->client_id) ? add_query_arg(array(
                        'page'      => 'yatoon-clients',
                        'client_id' => intval($b->client_id),
                        's'         => $b->customer_phone ?: $b->customer_email,
                    ), admin_url('admin.php')) : '';
            ?>
                <tr data-booking-id="<?php echo esc_html( $b->id ); ?>"
                    data-status="<?php echo esc_attr($b->status); ?>"
                    data-design-upload="<?php echo esc_attr(!empty($b->design_image_url) ? '1' : '0'); ?>"
                    data-design-url="<?php echo esc_url($b->design_image_url ?? ''); ?>"
                    data-design-label="<?php echo esc_attr('#' . $b->id . ' - ' . $b->customer_name . ' - ' . ( $b->service_name ?: 'Appointment' )); ?>"
                    data-search="<?php echo esc_attr(strtolower($b->id . ' ' . $b->customer_name . ' ' . $b->customer_email . ' ' . $b->customer_phone . ' ' . $b->service_name . ' ' . $b->staff_name . ' ' . $b->status)); ?>">
                    <th class="check-column">
                        <input type="checkbox" class="sbs-booking-checkbox" value="<?php echo esc_html( $b->id ); ?>" data-design-url="<?php echo esc_url($b->design_image_url ?? ''); ?>" data-design-label="<?php echo esc_attr('#' . $b->id . ' - ' . $b->customer_name . ' - ' . ( $b->service_name ?: 'Appointment' )); ?>">
                    </th>
                    <td><?php echo esc_html($b->id); ?></td>
                    <td>
                        <?php if ($client_url) : ?>
                            <a href="<?php echo esc_url($client_url); ?>" style="font-weight:700;text-decoration:none;"><?php echo esc_html($b->customer_name); ?></a><br>
                        <?php else : ?>
                            <strong><?php echo esc_html($b->customer_name); ?></strong><br>
                        <?php endif; ?>
                        <small><?php echo esc_html($b->customer_email); ?></small><br>
                        <?php if ($b->customer_phone) { echo '<small>' . esc_html($b->customer_phone) . '</small>';} ?>
                        <?php if (!empty($b->consent_accepted)) : ?>
                            <br><small title="<?php echo esc_attr($b->consent_signature ?: 'Signed'); ?>" class="yatoon-meta-confirmed"><span aria-hidden="true">&#10003;</span> <?php esc_html_e( 'Consent signed', 'yatoon-booking-system' ); ?></small>
                        <?php endif; ?>
                        <?php if (!empty($b->policy_acknowledged)) : ?>
                            <br><small class="yatoon-meta-confirmed"><span aria-hidden="true">&#10003;</span> <?php esc_html_e( 'Policy acknowledged', 'yatoon-booking-system' ); ?></small>
                        <?php endif; ?>
                        <?php if (!empty($b->design_image_url)) : ?>
                            <br><a href="<?php echo esc_url($b->design_image_url); ?>" target="_blank" rel="noopener" class="yatoon-booking-design-thumb">
                                <img src="<?php echo esc_url($b->design_image_url); ?>" alt="">
                                <span><?php esc_html_e( 'Design image', 'yatoon-booking-system' ); ?></span>
                            </a>
                        <?php endif; ?>
                    </td>
                    <td><?php echo esc_html($b->service_name ?: 'N/A'); ?></td>
                    <td>
                        <?php
                        echo esc_html($b->staff_name ?: 'N/A');
                        if (!empty($b->is_any_staff)) {
                            echo '<br><span style="font-size:10px;color:#718096;font-style:italic;">(Booked with any available)</span>';
                        }
                        ?></td>
                    <td>
                        <strong><?php echo esc_html( $st->format('M j, Y') ); ?></strong><br>
                        <small><?php echo esc_html( $st->format('g:i A') ); ?> - <?php echo esc_html( $et->format('g:i A') ); ?></small>
                    </td>
                    <td>$<?php echo number_format($b->total_price, 2); ?></td>
                    <td>
                        <select class="sbs-booking-status-select" data-id="<?php echo esc_attr($b->id); ?>" style="max-width:120px;">
                            <?php // phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound ?>
                            <?php foreach (array('pending'=>'Pending','confirmed'=>'Confirmed','completed'=>'Completed','no_show'=>'No-show','cancelled'=>'Cancelled') as $yatoon_status_value => $yatoon_status_label) : ?>
                                <option value="<?php echo esc_attr($yatoon_status_value); ?>" <?php selected($b->status, $yatoon_status_value); ?>><?php echo esc_html($yatoon_status_label); ?></option>
                            <?php endforeach; ?>
                        </select>
                    </td>
                    <td>
                        <?php echo wp_kses_post( $payment_badge($b->payment_status ?? 'unpaid') ); ?><br>
                        <select class="sbs-payment-status-select" data-id="<?php echo esc_attr($b->id); ?>" data-note="<?php echo esc_attr($b->payment_note ?? ''); ?>" style="max-width:150px;margin-top:4px;">
                            <?php // phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound ?>
                            <?php foreach ($payment_labels as $yatoon_status_value => $yatoon_status_label) : ?>
                                <option value="<?php echo esc_attr($yatoon_status_value); ?>" <?php selected(( $b->payment_status ?? 'unpaid' ), $yatoon_status_value); ?>><?php echo esc_html($yatoon_status_label); ?></option>
                            <?php endforeach; ?>
                        </select>
                    </td>
                    <td>
                        <?php if ($b->square_synced && $b->square_booking_id) : ?>
                            <span style="color:#10B981;font-size:12px;"><?php esc_html_e( 'Sent to Square', 'yatoon-booking-system' ); ?></span><br>
                            <small style="color:#666;"><?php echo esc_html(substr($b->square_booking_id,0,8)); ?>...</small>
                        <?php else : ?>
                            <span style="color:#6b7280;font-size:12px;"><?php esc_html_e( 'Local', 'yatoon-booking-system' ); ?></span>
                        <?php endif; ?>
                    </td>
                    <td>
                        <button type="button"
                                class="button button-small sbs-view-booking"
                                data-id="<?php echo esc_attr($b->id); ?>"
                                data-customer="<?php echo esc_attr($b->customer_name); ?>"
                                data-email="<?php echo esc_attr($b->customer_email); ?>"
                                data-phone="<?php echo esc_attr($b->customer_phone ?: ''); ?>"
                                data-service="<?php echo esc_attr($b->service_name ?: 'N/A'); ?>"
                                data-staff="<?php echo esc_attr($b->staff_name ?: 'N/A'); ?>"
                                data-date="<?php echo esc_attr($st->format('M j, Y')); ?>"
                                data-time="<?php echo esc_attr($st->format('g:i A') . ' - ' . $et->format('g:i A')); ?>"
                                data-status="<?php echo esc_attr(ucfirst(str_replace('_', ' ', $b->status))); ?>"
                                data-payment="<?php echo esc_attr($payment_labels[ $b->payment_status ?? 'unpaid' ] ?? ucfirst(str_replace('_', ' ', $b->payment_status ?? 'unpaid'))); ?>"
                                data-total="<?php echo esc_attr(number_format((float) $b->total_price, 2)); ?>"
                                data-booked-at="<?php echo esc_attr($created_dt ? $created_dt->format('M j, Y g:i A') : ''); ?>"
                                data-client-url="<?php echo esc_url($client_url); ?>"
                                data-design-url="<?php echo esc_url($b->design_image_url ?? ''); ?>"
                                data-note="<?php echo esc_attr($b->payment_note ?? ''); ?>"><?php esc_html_e( 'View', 'yatoon-booking-system' ); ?></button>
                        <?php if ($b->status !== 'cancelled') : ?>
                            <button type="button" class="button button-small button-link-delete sbs-cancel-booking" data-id="<?php echo esc_html( $b->id ); ?>"><?php esc_html_e( 'Cancel', 'yatoon-booking-system' ); ?></button>
                        <?php endif; ?>
                        <?php if (( $b->payment_status ?? 'unpaid' ) === 'unpaid') : ?>
                            <button type="button" class="button button-small yatoon-send-payment-request" data-id="<?php echo esc_attr($b->id); ?>" style="margin-top:4px;"><?php esc_html_e( 'Payment Request', 'yatoon-booking-system' ); ?></button>
                        <?php endif; ?>
                        <button type="button" class="button button-small sbs-delete-booking" data-id="<?php echo esc_attr($b->id); ?>" style="color:#999;margin-left:2px;" title="<?php echo esc_attr__( 'Permanently delete from local DB', 'yatoon-booking-system' ); ?>"><?php esc_html_e( 'Delete', 'yatoon-booking-system' ); ?></button>
                    </td>
                </tr>

                <?php elseif ($item['type'] === 'group') :
                    // phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
                    $gbks     = $item['data'];
                    $gid      = $item['gid'];
                    $first    = $gbks[0];
                    $gst      = yatoon_booking_display_dt($first, 'start_time', $_sbs_local_tz, $_sbs_utc_tz);
                    $gcreated = null;
                    if (!empty($first->created_at) && $first->created_at !== '0000-00-00 00:00:00') {
                        $gcreated = new DateTime($first->created_at, new DateTimeZone('UTC'));
                        $gcreated->setTimezone($_sbs_local_tz);
                    }
                    $group_client_url = !empty($first->client_id) ? add_query_arg(array(
                        'page'      => 'yatoon-clients',
                        'client_id' => intval($first->client_id),
                        's'         => $first->customer_phone ?: $first->customer_email,
                    ), admin_url('admin.php')) : '';
                    $last     = end($gbks);
                    $get      = yatoon_booking_display_dt($last, 'end_time', $_sbs_local_tz, $_sbs_utc_tz);
                    $total_price = array_sum(array_column($gbks, 'total_price'));
                    $all_confirmed = array_reduce($gbks, fn( $c, $b ) => $c && $b->status==='confirmed', true);
                    $any_synced    = array_reduce($gbks, fn( $c, $b ) => $c || ( $b->square_synced && $b->square_booking_id ), false);
                    $group_design_url = '';
                    foreach ($gbks as $gb_design) {
                        if (!empty($gb_design->design_image_url)) {
                            $group_design_url = $gb_design->design_image_url;
                            break;
                        }
                    }
                    $svc_names = implode(' -> ', array_map(fn( $b ) => esc_html($b->service_name ?: 'N/A'), $gbks));
                    $staff_names = implode(', ', array_unique(array_map(fn( $b ) => esc_html($b->staff_name ?: 'Any') . ( !empty($b->is_any_staff) ? ' <span style="font-size:10px;color:#718096;font-style:italic;">(any)</span>' : '' ), $gbks)));
                    // phpcs:enable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
                ?>

                <!-- GROUP ROW: summary line with toggle -->
                <tr class="sbs-group-header" data-gid="<?php echo esc_attr($gid); ?>"
                    data-status="<?php echo esc_attr($first->status); ?>"
                    data-design-upload="<?php echo esc_attr($group_design_url ? '1' : '0'); ?>"
                    data-design-url="<?php echo esc_url($group_design_url); ?>"
                    data-design-label="<?php echo esc_attr('#' . $first->id . ' group - ' . $first->customer_name); ?>"
                    data-search="<?php echo esc_attr(strtolower($gid . ' ' . $first->id . ' ' . $first->customer_name . ' ' . $first->customer_email . ' ' . $first->customer_phone . ' ' . wp_strip_all_tags($svc_names) . ' ' . wp_strip_all_tags($staff_names) . ' ' . $first->status)); ?>"
                    style="background:#f0f9ff;border-left:4px solid #0ea5e9;cursor:pointer;"
                    title="<?php echo esc_attr__( 'Click to expand/collapse this multi-service appointment', 'yatoon-booking-system' ); ?>">
                    <th class="check-column">
                        <?php // phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound ?>
                        <?php foreach ($gbks as $yatoon_group_booking) : ?>
                            <input type="checkbox" class="sbs-booking-checkbox" value="<?php echo esc_html( $yatoon_group_booking->id ); ?>" data-design-url="<?php echo esc_url($yatoon_group_booking->design_image_url ?? ''); ?>" data-design-label="<?php echo esc_attr('#' . $yatoon_group_booking->id . ' - ' . $first->customer_name . ' - ' . ( $yatoon_group_booking->service_name ?: 'Appointment' )); ?>" style="display:none;">
                        <?php endforeach; ?>
                        <input type="checkbox" class="sbs-group-checkbox" data-gid="<?php echo esc_attr($gid); ?>" title="<?php echo esc_attr__( 'Select all services in this group', 'yatoon-booking-system' ); ?>">
                    </th>
                    <td>
                        <strong style="color:#0369a1;">#<?php echo esc_html( $first->id ); ?>...</strong><br>
                        <span style="font-size:10px;color:#64748b;white-space:nowrap;">
                            <?php echo esc_html( count($gbks) ); ?> services
                        </span>
                    </td>
                    <td>
                        <?php if ($group_client_url) : ?>
                            <a href="<?php echo esc_url($group_client_url); ?>" style="font-weight:700;text-decoration:none;"><?php echo esc_html($first->customer_name); ?></a><br>
                        <?php else : ?>
                            <strong><?php echo esc_html($first->customer_name); ?></strong><br>
                        <?php endif; ?>
                        <small><?php echo esc_html($first->customer_email); ?></small>
                        <?php if (!empty($first->consent_accepted)) : ?>
                            <br><small title="<?php echo esc_attr($first->consent_signature ?: 'Signed'); ?>" class="yatoon-meta-confirmed"><span aria-hidden="true">&#10003;</span> <?php esc_html_e( 'Consent signed', 'yatoon-booking-system' ); ?></small>
                        <?php endif; ?>
                        <?php if (!empty($first->policy_acknowledged)) : ?>
                            <br><small class="yatoon-meta-confirmed"><span aria-hidden="true">&#10003;</span> <?php esc_html_e( 'Policy acknowledged', 'yatoon-booking-system' ); ?></small>
                        <?php endif; ?>
                        <?php if (!empty($group_design_url)) : ?>
                            <br><a href="<?php echo esc_url($group_design_url); ?>" target="_blank" rel="noopener" class="yatoon-booking-design-thumb">
                                <img src="<?php echo esc_url($group_design_url); ?>" alt="">
                                <span><?php esc_html_e( 'Design image', 'yatoon-booking-system' ); ?></span>
                            </a>
                        <?php endif; ?>
                    </td>
                    <td>
                        <span style="font-size:12px;line-height:1.4;"><?php echo esc_html( $svc_names ); ?></span>
                    </td>
                    <td><span style="font-size:12px;"><?php echo esc_html( $staff_names ); ?></span></td>
                    <td>
                        <strong><?php echo esc_html( $gst->format('M j, Y') ); ?></strong><br>
                        <small><?php echo esc_html( $gst->format('g:i A') ); ?> - <?php echo esc_html( $get->format('g:i A') ); ?></small>
                    </td>
                    <td>$<?php echo number_format($total_price, 2); ?></td>
                    <td><?php echo wp_kses_post( $status_badge($all_confirmed ? 'confirmed' : $first->status) ); ?></td>
                    <td><?php echo wp_kses_post( $payment_badge($first->payment_status ?? 'unpaid') ); ?></td>
                    <td>
                        <?php if ($any_synced) : ?>
                            <span style="color:#10B981;font-size:12px;"><?php esc_html_e( 'Sent to Square', 'yatoon-booking-system' ); ?></span>
                        <?php else : ?>
                            <span style="color:#6b7280;font-size:12px;"><?php esc_html_e( 'Local', 'yatoon-booking-system' ); ?></span>
                        <?php endif; ?>
                    </td>
                    <td>
                        <button type="button" class="button button-small sbs-toggle-group"
                            data-gid="<?php echo esc_attr($gid); ?>"
                            style="background:#0ea5e9;color:#fff;border-color:#0284c7;">
                            <?php esc_html_e( 'Expand', 'yatoon-booking-system' ); ?>
                        </button>
                    </td>
                </tr>

                <!-- GROUP SUB-ROWS: individual services (hidden by default) -->
                <?php // phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound ?>
                <?php foreach ($gbks as $yatoon_booking_index => $yatoon_booking_row) :
                    // phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
                    $yatoon_booking_start_time = yatoon_booking_display_dt($yatoon_booking_row, 'start_time', $_sbs_local_tz, $_sbs_utc_tz);
                    // phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
                    $yatoon_booking_end_time = yatoon_booking_display_dt($yatoon_booking_row, 'end_time', $_sbs_local_tz, $_sbs_utc_tz);
                    // phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
                    $yatoon_is_first = ( $yatoon_booking_index === 0 );
                    // phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
                    $yatoon_is_last  = ( $yatoon_booking_index === count($gbks) - 1 );
                ?>
                <tr class="sbs-group-row sbs-group-<?php echo esc_attr($gid); ?>"
                    data-booking-id="<?php echo esc_html( $yatoon_booking_row->id ); ?>"
                    data-gid="<?php echo esc_attr($gid); ?>"
                    data-status="<?php echo esc_attr($yatoon_booking_row->status); ?>"
                    data-design-upload="<?php echo esc_attr(!empty($yatoon_booking_row->design_image_url) ? '1' : '0'); ?>"
                    data-design-url="<?php echo esc_url($yatoon_booking_row->design_image_url ?? ''); ?>"
                    data-design-label="<?php echo esc_attr('#' . $yatoon_booking_row->id . ' - ' . $first->customer_name . ' - ' . ( $yatoon_booking_row->service_name ?: 'Appointment' )); ?>"
                    data-search="<?php echo esc_attr(strtolower($yatoon_booking_row->id . ' ' . $first->customer_name . ' ' . $first->customer_email . ' ' . $first->customer_phone . ' ' . $yatoon_booking_row->service_name . ' ' . $yatoon_booking_row->staff_name . ' ' . $yatoon_booking_row->status)); ?>"
                    data-service-order="<?php echo intval($yatoon_booking_row->service_order); ?>"
                    style="display:none;background:#f8fbff;border-left:4px solid #7dd3fc;">
                    <th class="check-column">
                        <span style="color:#94a3b8;padding-left:8px;"><?php echo esc_html( $yatoon_booking_index+1 ); ?>.</span>
                    </th>
                    <td style="padding-left:20px;">
                        <small style="color:#64748b;">#<?php echo esc_html( $yatoon_booking_row->id ); ?></small>
                    </td>
                    <td style="color:#64748b;font-size:12px;"><?php esc_html_e( 'same customer', 'yatoon-booking-system' ); ?></td>
                    <td>
                        <?php echo esc_html($yatoon_booking_row->service_name ?: 'N/A'); ?>
                    </td>
                    <td><?php echo esc_html($yatoon_booking_row->staff_name ?: 'N/A'); ?></td>
                    <td>
                        <small style="color:#0369a1;font-weight:600;"><?php echo esc_html( $yatoon_booking_start_time->format('g:i A') ); ?></small>
                        <small> - <?php echo esc_html( $yatoon_booking_end_time->format('g:i A') ); ?></small>
                    </td>
                    <td>$<?php echo number_format($yatoon_booking_row->total_price, 2); ?></td>
                    <td>
                        <select class="sbs-booking-status-select" data-id="<?php echo esc_attr($yatoon_booking_row->id); ?>" style="max-width:110px;">
                            <?php // phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound ?>
                            <?php foreach (array('pending'=>'Pending','confirmed'=>'Confirmed','completed'=>'Completed','no_show'=>'No-show','cancelled'=>'Cancelled') as $yatoon_status_value => $yatoon_status_label) : ?>
                                <option value="<?php echo esc_attr($yatoon_status_value); ?>" <?php selected($yatoon_booking_row->status, $yatoon_status_value); ?>><?php echo esc_html($yatoon_status_label); ?></option>
                            <?php endforeach; ?>
                        </select>
                    </td>
                    <td>
                        <select class="sbs-payment-status-select" data-id="<?php echo esc_attr($yatoon_booking_row->id); ?>" data-note="<?php echo esc_attr($yatoon_booking_row->payment_note ?? ''); ?>" style="max-width:135px;">
                            <?php // phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound ?>
                            <?php foreach ($payment_labels as $yatoon_status_value => $yatoon_status_label) : ?>
                                <option value="<?php echo esc_attr($yatoon_status_value); ?>" <?php selected(( $yatoon_booking_row->payment_status ?? 'unpaid' ), $yatoon_status_value); ?>><?php echo esc_html($yatoon_status_label); ?></option>
                            <?php endforeach; ?>
                        </select>
                    </td>
                    <td>
                        <?php if ($yatoon_booking_row->square_synced && $yatoon_booking_row->square_booking_id) : ?>
                            <span class="yatoon-meta-confirmed"><span aria-hidden="true">&#10003;</span> <?php echo esc_html(substr($yatoon_booking_row->square_booking_id,0,8)); ?>...</span>
                        <?php else : ?>
                            <span style="color:#6b7280;font-size:11px;"><?php esc_html_e( 'Local', 'yatoon-booking-system' ); ?></span>
                        <?php endif; ?>
                    </td>
                    <td>
                        <!-- Move Up / Move Down buttons for reordering within group -->
                        <?php if (!$yatoon_is_first) : ?>
                            <button type="button" class="button button-small sbs-move-service-up"
                                data-id="<?php echo esc_html( $yatoon_booking_row->id ); ?>"
                                data-gid="<?php echo esc_attr($gid); ?>"
                                title="<?php echo esc_attr__( 'Move this service earlier (swap with previous)', 'yatoon-booking-system' ); ?>"
                                style="padding:2px 6px;">Up</button>
                        <?php endif; ?>
                        <?php if (!$yatoon_is_last) : ?>
                            <button type="button" class="button button-small sbs-move-service-down"
                                data-id="<?php echo esc_html( $yatoon_booking_row->id ); ?>"
                                data-gid="<?php echo esc_attr($gid); ?>"
                                title="<?php echo esc_attr__( 'Move this service later (swap with next)', 'yatoon-booking-system' ); ?>"
                                style="padding:2px 6px;"><?php esc_html_e( 'Down', 'yatoon-booking-system' ); ?></button>
                        <?php endif; ?>
                        <?php if ($yatoon_booking_row->status !== 'cancelled') : ?>
                            <button type="button" class="button button-small button-link-delete sbs-cancel-booking"
                                data-id="<?php echo esc_html( $yatoon_booking_row->id ); ?>" style="margin-left:4px;"><?php esc_html_e( 'Cancel', 'yatoon-booking-system' ); ?></button>
                        <?php endif; ?>
                        <button type="button" class="button button-small sbs-delete-booking" data-id="<?php echo esc_attr($yatoon_booking_row->id); ?>" style="color:#999;margin-left:2px;" title="<?php echo esc_attr__( 'Permanently delete from local DB', 'yatoon-booking-system' ); ?>"><?php esc_html_e( 'Delete', 'yatoon-booking-system' ); ?></button>
                    </td>
                </tr>
                <?php endforeach; ?>
                <!-- end group -->

                <?php endif; // end if solo/group ?>
            <?php endforeach; ?>
            </tbody>
        </table>
        </div>
    <?php endif; ?>
</div>

<style>
.sbs-status-confirmed { color:#10B981; font-weight:600; }
.sbs-status-pending   { color:#F59E0B; font-weight:600; }
.sbs-status-completed { color:#2563eb; font-weight:600; }
.sbs-status-noshow    { color:#7c2d12; font-weight:600; }
.sbs-status-cancelled { color:#EF4444; font-weight:600; }
.sbs-payment-badge{display:inline-block;border-radius:999px;padding:2px 8px;font-size:11px;font-weight:700;background:#f3f4f6;color:#374151;}
.sbs-payment-paid_square_pos{background:#dcfce7;color:#166534;}
.sbs-payment-deposit_paid{background:#dbeafe;color:#1d4ed8;}
.sbs-payment-no_show_fee_charged{background:#fee2e2;color:#991b1b;}
.sbs-payment-no_show_fee_waived{background:#f3f4f6;color:#4b5563;}
.sbs-payment-refunded{background:#fef3c7;color:#92400e;}
.sbs-payment-waived{background:#ede9fe;color:#5b21b6;}
.sbs-payment-unpaid{background:#fee2e2;color:#991b1b;}
.yatoon-booking-design-thumb{display:inline-flex;align-items:center;gap:6px;margin-top:5px;text-decoration:none;font-size:11px;color:#2563eb;}
.yatoon-booking-design-thumb img{width:34px;height:34px;border-radius:6px;object-fit:cover;border:1px solid #cbd5e1;background:#fff;}
.yatoon-booking-design-thumb:hover span{text-decoration:underline;}
.yatoon-design-gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;}
.yatoon-design-gallery-card{border:1px solid #e5e7eb;border-radius:8px;background:#fff;overflow:hidden;}
.yatoon-design-gallery-card a{display:block;text-decoration:none;color:#111827;}
.yatoon-design-gallery-card img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;background:#f8fafc;}
.yatoon-design-gallery-card span{display:block;padding:9px 10px;font-size:12px;line-height:1.35;font-weight:700;}
.sbs-group-header:hover { background:#e0f2fe !important; }
.sbs-group-row td, .sbs-group-row th { font-size:12px; }
</style>


<?php
$yatoon_admin_diagnostics_enabled = ( defined( 'WP_DEBUG' ) && true === WP_DEBUG )
    || ( defined( 'YATOON_ENABLE_ADMIN_DIAGNOSTICS' ) && true === YATOON_ENABLE_ADMIN_DIAGNOSTICS );
if ( $yatoon_admin_diagnostics_enabled ) :
?>
<!-- Diagnostic section -->
    <h2 style="margin:0 0 6px; color:#e53e3e; font-size:16px;"><?php esc_html_e( 'Availability Diagnostic Tool', 'yatoon-booking-system' ); ?></h2>
     Helps identify yatoon_bookings records causing "No available times"
<!-- End diagnostic section -->
<div style="margin-top:40px; background:#fff; border:2px solid #e53e3e; border-radius:8px; padding:24px; max-width:900px;">
    <h2 style="margin:0 0 6px; color:#e53e3e; font-size:16px;"><?php esc_html_e( 'Availability Diagnostic Tool', 'yatoon-booking-system' ); ?></h2>
    <p style="margin:0 0 16px; color:#555; font-size:13px;">
        <?php esc_html_e( 'If a specific date shows "No available times" when there should be free slots,', 'yatoon-booking-system' ); ?><br>
        <?php esc_html_e( 'use this tool to inspect the raw booking records for that date.', 'yatoon-booking-system' ); ?>
        <strong><?php esc_html_e( 'Records with confirmed/pending status', 'yatoon-booking-system' ); ?></strong> <?php esc_html_e( 'are used by the local conflict filter - even if cancelled in Square.', 'yatoon-booking-system' ); ?><br>
        <?php esc_html_e( 'If you see confirmed records that should be cancelled, use the', 'yatoon-booking-system' ); ?> <strong><?php esc_html_e( 'Cancel', 'yatoon-booking-system' ); ?></strong> <?php esc_html_e( 'button in the Bookings list above.', 'yatoon-booking-system' ); ?>
    </p>
    <div style="display:flex; gap:10px; align-items:center; margin-bottom:16px;">
        <input type="date" id="sbs-diag-date" value="<?php echo esc_attr(gmdate('Y-m-d')); ?>"
               style="padding:6px 10px; border:1px solid #ddd; border-radius:4px; font-size:14px;">
        <button type="button" id="sbs-diag-run"
                style="background:#e53e3e; color:#fff; border:none; border-radius:4px; padding:7px 18px; font-size:14px; cursor:pointer;">
            <?php esc_html_e( 'Inspect Date', 'yatoon-booking-system' ); ?>
        </button>
        <span id="sbs-diag-status" style="font-size:13px; color:#666;"></span>
    </div>
    <div id="sbs-diag-result"></div>
</div>

<script>
(function($){
    const esc = function(value) { return $('<div>').text(value == null ? '' : String(value)).html(); };
    const errorMessage = function(data) { return data && data.message ? data.message : (typeof data === 'string' ? data : 'unknown'); };
    $('#sbs-diag-run').on('click', function(){
        const date = $('#sbs-diag-date').val();
        if (!date) { alert('Please select a date'); return; }
	        $('#sbs-diag-status').text('Loading...');
	        $('#sbs-diag-result').html('');
	        $.post(ajaxurl, {
	            action: 'yatoon_debug_date_bookings',
	            nonce:  '<?php echo esc_js(wp_create_nonce('yatoon_admin_nonce')); ?>',
	            date:   date
	        }, function(resp) {
            $('#sbs-diag-status').text('');
            if (!resp.success) { $('#sbs-diag-result').html('<p style="color:red">Error: ' + esc(errorMessage(resp.data)) + '</p>'); return; }
            const d = resp.data;
            if (d.booking_count === 0) {
                $('#sbs-diag-result').html('<p style="background:#f0fff4;border:1px solid #9ae6b4;padding:12px;border-radius:4px;color:#276749;">OK No bookings in yatoon_bookings for ' + esc(date) + '. The "No available times" on this date must come directly from Square API (not a local DB conflict).</p>');
                return;
            }
            let html = '<p style="font-size:13px;color:#555;margin-bottom:10px;">Found <strong>' + Number(d.booking_count || 0) + '</strong> booking(s) for ' + esc(date) + ' (timezone: ' + esc(d.timezone) + ')</p>';
            html += '<p style="font-size:12px;color:#888;margin-bottom:12px;">' + esc(d.note) + '</p>';
            html += '<table style="width:100%;border-collapse:collapse;font-size:12px;">';
            html += '<thead><tr style="background:#f5f5f5;">';
            ['ID','Customer','Service','Staff','Status','start_time (DB raw)','end_time (DB raw)','Duration','Local Start','Local End','UTC Start','UTC End','Warning:'].forEach(function(h){
                html += '<th style="padding:6px 8px;border:1px solid #ddd;text-align:left;white-space:nowrap;">' + h + '</th>';
            });
            html += '</tr></thead><tbody>';
            d.bookings.forEach(function(b){
                const bad = b.flag !== '';
                const bg  = bad ? '#fff5f5' : (b.status==='cancelled'||b.status==='no_show' ? '#f9f9f9' : '#fff');
                html += '<tr style="background:' + bg + ';">';
                html += '<td style="padding:5px 8px;border:1px solid #ddd;">' + esc(b.id) + '</td>';
                html += '<td style="padding:5px 8px;border:1px solid #ddd;">' + esc(b.customer||'-') + '</td>';
                html += '<td style="padding:5px 8px;border:1px solid #ddd;">' + esc(b.service||'-') + '</td>';
                html += '<td style="padding:5px 8px;border:1px solid #ddd;">' + esc(b.staff||'-') + '</td>';
                html += '<td style="padding:5px 8px;border:1px solid #ddd;">' + esc(b.status) + '</td>';
                html += '<td style="padding:5px 8px;border:1px solid #ddd;font-family:monospace;">' + esc(b.start_time_raw) + '</td>';
                html += '<td style="padding:5px 8px;border:1px solid #ddd;font-family:monospace;' + (bad?'color:#e53e3e;font-weight:bold;':'') + '">' + esc(b.end_time_raw) + '</td>';
                html += '<td style="padding:5px 8px;border:1px solid #ddd;' + (bad?'color:#e53e3e;font-weight:bold;':'') + '">' + esc(b.duration_min) + ' min</td>';
                html += '<td style="padding:5px 8px;border:1px solid #ddd;font-family:monospace;font-size:11px;">' + esc(b.start_local) + '</td>';
                html += '<td style="padding:5px 8px;border:1px solid #ddd;font-family:monospace;font-size:11px;">' + esc(b.end_local) + '</td>';
                html += '<td style="padding:5px 8px;border:1px solid #ddd;font-family:monospace;font-size:11px;">' + esc(b.start_utc) + '</td>';
                html += '<td style="padding:5px 8px;border:1px solid #ddd;font-family:monospace;font-size:11px;">' + esc(b.end_utc) + '</td>';
                html += '<td style="padding:5px 8px;border:1px solid #ddd;">' + esc(b.flag) + '</td>';
                html += '</tr>';
            });
            html += '</tbody></table>';
            if (d.bookings.some(b => b.flag !== '')) {
                html += '<div style="margin-top:14px;padding:12px;background:#fff5f5;border:1px solid #feb2b2;border-radius:4px;color:#c53030;font-size:13px;">';
                html += '<strong>Warning: Suspicious records found above (highlighted red).</strong><br>These have abnormal durations and are causing the "No available times" false positive. ';
                html += 'Fix: go to WP Admin -> Square Booking -> Bookings, find these records and delete/cancel them, then re-sync from Square.</div>';
            } else {
                html += '<div style="margin-top:14px;padding:12px;background:#fffbeb;border:1px solid #f6e05e;border-radius:4px;color:#744210;font-size:13px;">';
                html += '<strong>All local records look OK (durations are normal).</strong><br>The no-availability response is coming from Square. Check staff schedules and blocks in Square.</div>';
            }
            $('#sbs-diag-result').html(html);
        }).fail(function(){ $('#sbs-diag-status').text(''); $('#sbs-diag-result').html('<p style="color:red">AJAX request failed.</p>'); });
    });
})(jQuery);
</script>
<?php endif; ?>


<?php if ( $yatoon_admin_diagnostics_enabled ) : ?>
<!-- Diagnostic section -->
    <h2 style="margin:0 0 6px; color:#3182ce; font-size:16px;"><?php esc_html_e( 'Square API Direct Query', 'yatoon-booking-system' ); ?></h2>
     Queries Square availability API directly for a date+service
<!-- End diagnostic section -->
<div style="margin-top:20px; background:#fff; border:2px solid #3182ce; border-radius:8px; padding:24px; max-width:900px;">
    <h2 style="margin:0 0 6px; color:#3182ce; font-size:16px;"><?php esc_html_e( 'Square API Direct Query', 'yatoon-booking-system' ); ?></h2>
    <p style="margin:0 0 16px; color:#555; font-size:13px;">
        <?php esc_html_e( 'Queries Square\'s availability API directly for each staff+variation combination.', 'yatoon-booking-system' ); ?><br>
        <?php esc_html_e( 'Shows exactly what Square returns - bypasses all local filtering.', 'yatoon-booking-system' ); ?>
        <strong><?php esc_html_e( 'This tells you if Square itself is saying no times, or if our code is filtering them.', 'yatoon-booking-system' ); ?></strong>
    </p>
    <div style="display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:16px;">
        <input type="date" id="sbs-sq-date" value="<?php echo esc_attr(gmdate('Y-m-d')); ?>"
               style="padding:6px 10px; border:1px solid #ddd; border-radius:4px; font-size:14px;">
        <select id="sbs-sq-service" style="padding:6px 10px; border:1px solid #ddd; border-radius:4px; font-size:14px;">
            <option value=""><?php esc_html_e( '- Select Service -', 'yatoon-booking-system' ); ?></option>
            <?php
            // phpcs:disable WordPress.DB.DirectDatabaseQuery.DirectQuery, WordPress.DB.DirectDatabaseQuery.NoCaching
            // phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
            $yatoon_sq_services = $wpdb->get_results("SELECT id, name FROM {$wpdb->prefix}yatoon_services ORDER BY name ASC");
            // phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
            foreach ($yatoon_sq_services as $yatoon_sq_svc) {
                echo '<option value="' . esc_attr($yatoon_sq_svc->id) . '">' . esc_html($yatoon_sq_svc->name) . '</option>';
            }
            ?>
        </select>
        <button type="button" id="sbs-sq-run"
                style="background:#3182ce; color:#fff; border:none; border-radius:4px; padding:7px 18px; font-size:14px; cursor:pointer;">
            <?php esc_html_e( 'Query Square', 'yatoon-booking-system' ); ?>
        </button>
        <span id="sbs-sq-status" style="font-size:13px; color:#666;"></span>
    </div>
    <div id="sbs-sq-result"></div>
</div>

<script>
(function($){
    $('#sbs-sq-run').on('click', function(){
        const esc = function(value) { return $('<div>').text(value == null ? '' : String(value)).html(); };
        const errorMessage = function(data) { return data && data.message ? data.message : (typeof data === 'string' ? data : 'unknown'); };
        const date = $('#sbs-sq-date').val();
        const svcId = $('#sbs-sq-service').val();
        if (!date || !svcId) { alert('Please select both a date and a service'); return; }
        $('#sbs-sq-status').text('Querying Square API... (may take a few seconds)');
	        $('#sbs-sq-result').html('');
	        $.post(ajaxurl, {
	            action:     'yatoon_debug_square_availability',
	            nonce:      '<?php echo esc_js(wp_create_nonce('yatoon_admin_nonce')); ?>',
	            date:       date,
	            service_id: svcId
	        }, function(resp) {
            $('#sbs-sq-status').text('');
            if (!resp.success) { $('#sbs-sq-result').html('<p style="color:red">Error: ' + esc(errorMessage(resp.data)) + '</p>'); return; }
            const d = resp.data;
            let html = '<p style="font-size:13px;color:#555;margin-bottom:10px;">';
            html += '<strong>' + esc(d.service_name) + '</strong> on <strong>' + esc(d.date) + '</strong> ';
            html += ' - ' + Number(d.staff_count || 0) + ' eligible staff - ' + Number(d.variation_count || 0) + ' variation(s) - timezone: ' + esc(d.timezone) + '</p>';
            if (d.staff_count === 0) {
                html += '<p style="background:#fff5f5;border:1px solid #feb2b2;padding:12px;border-radius:4px;color:#c53030;">Warning: No eligible staff found for this service. Check yatoon_staff_services assignments.</p>';
            }

            d.results_per_staff.forEach(function(st) {
                html += '<div style="margin-bottom:16px;border:1px solid #e2e8f0;border-radius:6px;overflow:hidden;">';
html += '<div style="background:#ebf8ff;padding:8px 14px;font-weight:600;font-size:13px;">' + esc(st.staff_name) + ' <span style="font-weight:normal;color:#718096;font-size:11px;">(sq_id: ' + esc(st.staff_sq_id) + ')</span></div>';
                st.variations.forEach(function(v) {
                    const hasSlots = v.slots_count > 0;
                    const bg = hasSlots ? '#f0fff4' : '#fffaf0';
                    const icon = hasSlots ? 'OK' : 'X';
                    html += '<div style="padding:10px 14px;background:' + bg + ';border-top:1px solid #e2e8f0;">';
                    html += '<div style="font-size:12px;margin-bottom:4px;">';
                    html += icon + ' <strong>' + esc(v.var_name) + '</strong>';
                    html += ' <span style="color:#718096;">(' + Number(v.duration_min || 0) + 'min, group: "' + esc(v.group_name||'[none]') + '")</span>';
                    html += ' -> <strong>' + Number(v.slots_count || 0) + ' slot(s)</strong> from Square';
                    if (v.error) html += ' <span style="color:#c53030;">Error: ' + esc(v.error) + '</span>';
                    html += '</div>';
                    if (hasSlots) {
                        html += '<div style="font-size:11px;color:#276749;">' + (Array.isArray(v.slots) ? v.slots.map(esc).join(' - ') : '') + '</div>';
                    } else if (!v.error) {
                        html += '<div style="font-size:11px;color:#c05621;">Square returned 0 slots for this staff+variation on this date.</div>';
                    }
                    html += '</div>';
                });
                html += '</div>';
            });

            // Summary diagnosis
            const totalSlots = d.results_per_staff.reduce(function(sum, st) {
                return sum + st.variations.reduce(function(s2, v) { return s2 + v.slots_count; }, 0);
            }, 0);
            if (totalSlots === 0) {
                html += '<div style="margin-top:12px;padding:12px;background:#fff5f5;border:1px solid #feb2b2;border-radius:4px;color:#c53030;font-size:13px;">';
                html += '<strong>Warning: Square returned 0 slots for ALL staff+variations on this date.</strong><br>';
                html += 'This means Square itself says no one is available - likely a staff shift/schedule issue in Square, not a plugin bug. ';
                html += <?php echo wp_json_encode( __( 'Check Team -> Schedule in your Square dashboard for this date.', 'yatoon-booking-system' ) ); ?>;
                html += '</div>';
            } else {
                html += '<div style="margin-top:12px;padding:12px;background:#f0fff4;border:1px solid #9ae6b4;border-radius:4px;color:#276749;font-size:13px;">';
                html += '<strong>OK Square returned ' + totalSlots + ' total slot(s).</strong> ';
                html += 'If the booking form still shows "No available times", the plugin\'s local filtering is the cause. Share these results with support.';
                html += '</div>';
            }
            $('#sbs-sq-result').html(html);
        }).fail(function(){ $('#sbs-sq-status').text(''); $('#sbs-sq-result').html('<p style="color:red">AJAX request failed.</p>'); });
    });
})(jQuery);
</script>
<?php endif; ?>
