/*
Theme Name: Xports
Theme URI: https://ex-coders.com/wp/xports
Author: Gramentheme
Author URI: https://themeforest.net/user/gramentheme
Description: Xports – Its unique features and functionalities make it the ideal solution for websites dedicated to Gaming and other eSports related to Service. The theme is well suited for all types of Gaming and eSports services: gaming, sports, long range Gaming service.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: xports
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
Tested up to: 6.0
Requires PHP: 7.1

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

Xports is based on Underscores https://underscores.me/, (C) 2012-2017 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

.sticky {
    position: fixed !important;
    top: 0 !important;
    left: 0;
    width: 100%;
    z-index: 9999;
    transition: all 0.9s;
    background-color: #0B0E13;
    -webkit-animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
    animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
    box-shadow: rgba(0, 0, 0, 0.9) 0px 8px 24px;
	padding: 12px 0;
}

.woocommerce-checkout .wc-block-components-text-input input[type=tel],
.woocommerce-checkout .wc-blocks-components-select .wc-blocks-components-select__container,
.woocommerce-checkout .wc-blocks-components-select .wc-blocks-components-select__select,
.woocommerce-checkout .wc-block-components-form .wc-block-components-text-input input[type=text],
.woocommerce-checkout .wc-block-components-text-input input[type=email],
.woocommerce-checkout .main-checkout-page-area input {
  background-color: transparent !important;
  border-color: var(--border-color1) !important;
  border-radius: 0 !important;
  color: var(--paragraph-color) !important;
}
.woocommerce-checkout .wc-block-components-form .wc-block-components-text-input label, .wc-block-components-text-input label {
    display: none !important;
}
.woocommerce-checkout .main-checkout-page-area input {
    padding: 5px 20px !important;
}
.woocommerce-checkout .wc-blocks-components-select .wc-blocks-components-select__container {
    height: 3.7em;
}
.woocommerce-checkout .wc-blocks-components-select .wc-blocks-components-select__select {
    font-size: 13px;
}
.woocommerce-checkout .wp-block-woocommerce-checkout-actions-block .wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button .wc-block-components-checkout-place-order-button__text,
.woocommerce-checkout .main-checkout-page-area .wc-block-components-checkout-place-order-button {
    display: inline !important;
}
.woocommerce-checkout .wc-block-checkout__sidebar {
    border: 1px solid var(--border-color1);
    padding: 30px;
}
.woocommerce-checkout .wc-block-components-checkout-order-summary__title-text {
    font-size: 24px;
    color: #fff;
    border-bottom: 1px solid var(--border-color1);
    padding-bottom: 10px;
}
.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-coupon-form-block {
    border-top: 1px solid var(--border-color1);  
}
.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-totals-block {
    border-top: 1px solid var(--border-color1);
    border-bottom: 1px solid var(--border-color1);
}



if (!defined('ABSPATH')) exit;

add_shortcode('xports_match_booking', function () {
    return '<h2 style="color:white;background:black;padding:20px;">Shortcode works</h2>';
});

/**
 * Xports Match Booking + Registration
 * Add in child theme functions.php or Code Snippets plugin
 */

if (!defined('ABSPATH')) exit;

/**
 * =========================================================
 * 1) CREATE DATABASE TABLE
 * =========================================================
 */
function xports_match_booking_create_table() {
    global $wpdb;

    $table_name = $wpdb->prefix . 'xports_match_bookings';
    $charset_collate = $wpdb->get_charset_collate();

    require_once ABSPATH . 'wp-admin/includes/upgrade.php';

    $sql = "CREATE TABLE {$table_name} (
        id BIGINT UNSIGNED NOT NULL AUTO_INCREMENT,
        user_id BIGINT UNSIGNED DEFAULT 0,
        slot_id VARCHAR(100) NOT NULL,
        slot_label VARCHAR(255) NOT NULL,
        team_slot VARCHAR(50) NOT NULL,
        match_date VARCHAR(50) NOT NULL,
        team_name VARCHAR(255) NOT NULL,
        leader_name VARCHAR(255) NOT NULL,
        player_2 VARCHAR(255) DEFAULT '',
        player_3 VARCHAR(255) DEFAULT '',
        player_4 VARCHAR(255) DEFAULT '',
        email VARCHAR(190) NOT NULL,
        whatsapp VARCHAR(50) NOT NULL,
        referral_code VARCHAR(100) DEFAULT '',
        screenshot_url TEXT DEFAULT '',
        status VARCHAR(20) DEFAULT 'confirmed',
        created_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
        PRIMARY KEY (id),
        KEY slot_id (slot_id),
        KEY team_slot (team_slot),
        KEY email (email)
    ) {$charset_collate};";

    dbDelta($sql);
}

function xports_match_booking_maybe_install() {
    $installed = get_option('xports_match_booking_table_installed');
    if (!$installed) {
        xports_match_booking_create_table();
        update_option('xports_match_booking_table_installed', 1);
    }
}
add_action('init', 'xports_match_booking_maybe_install');


/**
 * =========================================================
 * 2) CONFIG
 * =========================================================
 */
function xports_match_booking_get_config() {
    return array(
        'capacity'      => 13,
        'match_date'    => '29 Mar 2026',
        'entry_fee'     => '₹20 Entry',
        'prize'         => '200',
        'image'         => 'https://whitesmoke-eagle-356065.hostingersite.com/wp-content/uploads/2026/03/Untitled-design-13.png',
        'payment_qr'    => 'https://via.placeholder.com/300x300.png?text=UPLOAD+YOUR+QR',
        'slots'         => array(
            array('id' => '2026-03-29_10am', 'time' => '10:00 AM'),
            array('id' => '2026-03-29_11am', 'time' => '11:00 AM'),
            array('id' => '2026-03-29_12pm', 'time' => '12:00 PM'),
            array('id' => '2026-03-29_1pm',  'time' => '01:00 PM'),
            array('id' => '2026-03-29_2pm',  'time' => '02:00 PM'),
            array('id' => '2026-03-29_3pm',  'time' => '03:00 PM'),
            array('id' => '2026-03-29_4pm',  'time' => '04:00 PM'),
            array('id' => '2026-03-29_5pm',  'time' => '05:00 PM'),
            array('id' => '2026-03-29_6pm',  'time' => '06:00 PM'),
        ),
    );
}


/**
 * =========================================================
 * 3) FRONTEND SHORTCODE
 * Use shortcode: [xports_match_booking]
 * =========================================================
 */
function xports_match_booking_shortcode($atts) {
    $config = xports_match_booking_get_config();

    $atts = shortcode_atts(array(
        'title'       => 'Choose Slot & Register',
        'subtitle'    => 'Player Join Registration',
        'desc'        => 'Select a time slot, choose a free team slot, and complete your registration.',
        'image'       => $config['image'],
        'match_date'  => $config['match_date'],
        'prize'       => $config['prize'],
        'entry_fee'   => $config['entry_fee'],
        'payment_qr'  => $config['payment_qr'],
    ), $atts, 'xports_match_booking');

    $ajax_nonce   = wp_create_nonce('xports_match_booking_nonce');
    $login_url    = wp_login_url(get_permalink());
    $register_url = wp_registration_url();

    ob_start();
    ?>
    <div class="xports-booking-wrap" id="xportsBookingApp">
        <div class="xports-booking-card">
            <div class="xports-booking-hero">
                <div class="xports-booking-media">
                    <div class="xports-booking-imagebox">
                        <img src="<?php echo esc_url($atts['image']); ?>" alt="Tournament Image">
                    </div>
                </div>

                <div class="xports-booking-content">
                    <span class="xports-booking-subtitle"><?php echo esc_html($atts['subtitle']); ?></span>
                    <h2 class="xports-booking-title"><?php echo esc_html($atts['title']); ?></h2>
                    <p class="xports-booking-desc"><?php echo esc_html($atts['desc']); ?></p>
                </div>

                <div class="xports-booking-prize">
                    <span class="xports-booking-prize-label">Winning Prize</span>
                    <div class="xports-booking-prize-value">₹<span><?php echo esc_html($atts['prize']); ?></span></div>
                </div>
            </div>

            <div class="xports-booking-box">
                <div class="xports-booking-box-head">
                    <div>
                        <h3 class="xports-booking-box-title">Match Slots</h3>
                        <div class="xports-booking-date">
                            Match Date: <span id="xportsMatchDateLabel"><?php echo esc_html($atts['match_date']); ?></span>
                        </div>
                    </div>

                    <div class="xports-booking-legend">
                        <span class="lg open">Open</span>
                        <span class="lg limited">Limited</span>
                        <span class="lg full">Full</span>
                    </div>
                </div>

                <div id="xportsSlotGrid" class="xports-booking-grid xports-slot-grid"></div>
            </div>

            <div id="xportsSelectedInfo" class="xports-selected-info" style="display:none;">
                <div class="xports-selected-pill">Selected Slot</div>
                <div class="xports-selected-text" id="xportsSelectedPreview">None</div>
            </div>

            <div id="xportsStatusMsg" class="xports-status"></div>
        </div>

        <!-- Team Modal -->
        <div id="xportsTeamModal" class="xports-modal" style="display:none;">
            <div class="xports-modal-inner">
                <button type="button" class="xports-close" id="xportsCloseTeamModal">&times;</button>
                <div class="xports-modal-head">
                    <h3 class="xports-booking-box-title">Choose Team Slot</h3>
                    <div id="xportsSelectedSlotText" class="xports-selected-time"></div>
                </div>
                <div id="xportsTeamGrid" class="xports-booking-grid xports-team-grid"></div>
            </div>
        </div>

        <!-- Login Modal -->
        <div id="xportsLoginModal" class="xports-modal" style="display:none;">
            <div class="xports-modal-inner xports-auth-modal">
                <button type="button" class="xports-close" id="xportsCloseLoginModal">&times;</button>
                <div class="xports-auth-icon">🔐</div>
                <h3 class="xports-booking-box-title" style="text-align:center;margin-bottom:10px;">Login Required</h3>
                <p class="xports-auth-text">You must login or create an account before registration.</p>
                <div class="xports-auth-actions">
                    <a class="xports-auth-btn primary" href="<?php echo esc_url($login_url); ?>">Login</a>
                    <a class="xports-auth-btn secondary" href="<?php echo esc_url($register_url); ?>">Create Account</a>
                </div>
            </div>
        </div>

        <!-- Form Modal -->
        <div id="xportsFormModal" class="xports-modal" style="display:none;">
            <div class="xports-modal-inner xports-form-modal">
                <button type="button" class="xports-close" id="xportsCloseFormModal">&times;</button>

                <div class="xports-form-topbar">
                    <div>
                        <h3 class="xports-form-title">Complete Registration</h3>
                        <div class="xports-form-subtitle">Fill in team details and upload payment proof.</div>
                    </div>
                    <span class="xports-form-badge">Registration Form</span>
                </div>

                <div class="xports-form-summary">
                    <div class="xports-summary-box">
                        <span class="xports-summary-label">Date & Time</span>
                        <span id="xportsPopupSlotDisplay">-</span>
                    </div>
                    <div class="xports-summary-box">
                        <span class="xports-summary-label">Team Slot</span>
                        <span id="xportsPopupTeamDisplay">-</span>
                    </div>
                </div>

                <form id="xportsBookingForm" class="xports-booking-form" enctype="multipart/form-data">
                    <input type="hidden" name="action" value="xports_submit_booking">
                    <input type="hidden" name="nonce" value="<?php echo esc_attr($ajax_nonce); ?>">
                    <input type="hidden" name="slot_id" id="xportsSlotId">
                    <input type="hidden" name="slot_label" id="xportsSlotLabel">
                    <input type="hidden" name="team_slot" id="xportsTeamSlot">
                    <input type="hidden" name="match_date" value="<?php echo esc_attr($atts['match_date']); ?>">

                    <div class="xports-form-grid">
                        <div class="xports-field">
                            <label>Team Name</label>
                            <input type="text" name="team_name" required placeholder="Enter team name">
                        </div>

                        <div class="xports-field">
                            <label>Team Leader</label>
                            <input type="text" name="leader_name" required placeholder="Player 1 / leader">
                        </div>

                        <div class="xports-field">
                            <label>Player 2</label>
                            <input type="text" name="player_2" required placeholder="Enter player 2 name">
                        </div>

                        <div class="xports-field">
                            <label>Player 3</label>
                            <input type="text" name="player_3" required placeholder="Enter player 3 name">
                        </div>

                        <div class="xports-field">
                            <label>Player 4</label>
                            <input type="text" name="player_4" required placeholder="Enter player 4 name">
                        </div>

                        <div class="xports-field">
                            <label>Email Address</label>
                            <input type="email" name="email" required placeholder="Enter email address">
                        </div>

                        <div class="xports-field xports-full">
                            <label>WhatsApp Number</label>
                            <input type="tel" name="whatsapp" required placeholder="Enter WhatsApp number">
                        </div>

                        <div class="xports-paywrap xports-full">
                            <div class="xports-paycard xports-qr">
                                <div class="xports-paytitle">Payment QR Code</div>
                                <div class="xports-qrframe">
                                    <img src="<?php echo esc_url($atts['payment_qr']); ?>" alt="Payment QR Code">
                                </div>
                                <div class="xports-paynote">Scan this QR and complete payment before uploading screenshot.</div>
                            </div>

                            <div class="xports-paycard">
                                <div class="xports-paytitle">Upload Payment Screenshot *</div>
                                <input type="file" name="payment_screenshot" required accept=".jpg,.jpeg,.png,.webp,.pdf">
                                <div class="xports-paynote">Required. JPG, PNG, WEBP or PDF. Max 10MB.</div>
                            </div>
                        </div>

                        <div class="xports-field xports-full">
                            <label>Referral Code (optional)</label>
                            <input type="text" name="referral_code" placeholder="Referral code (optional)">
                        </div>

                        <div class="xports-field xports-full xports-check-field">
                            <label class="xports-check-label">
                                <input type="checkbox" name="agree" value="1" required>
                                <span>I agree to Rules & Safety Policy</span>
                            </label>
                        </div>

                        <div class="xports-submit xports-full">
                            <button type="submit">Submit Registration</button>
                        </div>
                    </div>
                </form>

                <div id="xportsFormMessage" class="xports-form-message"></div>
            </div>
        </div>
    </div>

    <style>
        .xports-booking-wrap{
            --xports-primary: var(--main-color-one, #FF0808);
            --xports-primary-dark: #a00c0c;
            --xports-bg: #0B0E13;
            --xports-card: #12161d;
            --xports-box: #171b22;
            --xports-border: var(--border-color1, rgba(255,255,255,.10));
            --xports-text: #fff;
            --xports-muted: #a7adb7;
            --xports-heading: #fff;
            color: var(--xports-text);
            margin: 0 0 32px;
        }
        .xports-booking-wrap *{box-sizing:border-box}

        .xports-booking-card{
            background:
                radial-gradient(circle at top right, rgba(255,8,8,.12), transparent 30%),
                linear-gradient(180deg, #151922 0%, #0B0E13 100%);
            border:1px solid var(--xports-border);
            border-radius:20px;
            padding:28px;
            box-shadow:0 24px 60px rgba(0,0,0,.35);
        }

        .xports-booking-hero{
            display:grid;
            grid-template-columns:160px minmax(0,1fr) 220px;
            gap:22px;
            align-items:center;
            margin-bottom:24px;
        }

        .xports-booking-imagebox{
            width:100%;
            max-width:150px;
            aspect-ratio:1/1;
            border-radius:18px;
            overflow:hidden;
            background:#11151c;
            border:1px solid rgba(255,8,8,.30);
            box-shadow:0 0 20px rgba(255,8,8,.14);
        }
        .xports-booking-imagebox img{
            width:100%;
            height:100%;
            object-fit:cover;
            display:block;
        }

        .xports-booking-subtitle{
            display:inline-block;
            font-size:12px;
            font-weight:800;
            letter-spacing:1.6px;
            text-transform:uppercase;
            color:var(--xports-primary);
            margin-bottom:10px;
        }
        .xports-booking-title{
            margin:0 0 10px;
            font-size:42px;
            line-height:1.05;
            font-weight:800;
            color:var(--xports-heading);
        }
        .xports-booking-desc{
            margin:0;
            color:var(--xports-muted);
            font-size:15px;
            max-width:620px;
        }

        .xports-booking-prize{
            justify-self:end;
            width:100%;
            max-width:220px;
            min-height:120px;
            padding:18px;
            text-align:center;
            border-radius:18px;
            border:1px solid rgba(255,8,8,.25);
            background:
                radial-gradient(circle at top left, rgba(255,8,8,.16), transparent 45%),
                linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
            display:flex;
            flex-direction:column;
            justify-content:center;
        }
        .xports-booking-prize-label{
            margin-bottom:8px;
            font-size:13px;
            font-weight:800;
            text-transform:uppercase;
            letter-spacing:.7px;
            color:#fff;
        }
        .xports-booking-prize-value{
            font-size:34px;
            line-height:1;
            font-weight:900;
            color:#fff;
        }
        .xports-booking-prize-value span{
            color:var(--xports-primary);
        }

        .xports-booking-box{
            background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
            border:1px solid var(--xports-border);
            border-radius:18px;
            padding:24px;
        }

        .xports-booking-box-head{
            display:flex;
            align-items:flex-start;
            justify-content:space-between;
            gap:16px;
            flex-wrap:wrap;
            margin-bottom:18px;
        }

        .xports-booking-box-title{
            margin:0;
            font-size:24px;
            font-weight:800;
            color:#fff;
        }

        .xports-booking-date{
            margin-top:8px;
            font-size:13px;
            font-weight:700;
            color:var(--xports-muted);
        }
        .xports-booking-date span{color:#fff}

        .xports-booking-legend{
            display:flex;
            gap:8px;
            flex-wrap:wrap;
        }
        .xports-booking-legend .lg,
        .xports-badge{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            min-height:32px;
            padding:0 12px;
            border-radius:999px;
            font-size:11px;
            font-weight:800;
            text-transform:uppercase;
            letter-spacing:.5px;
            border:1px solid transparent;
        }
        .xports-booking-legend .open{color:#4dff88;background:rgba(77,255,136,.10);border-color:rgba(77,255,136,.18)}
        .xports-booking-legend .limited{color:#ffbb33;background:rgba(255,187,51,.10);border-color:rgba(255,187,51,.18)}
        .xports-booking-legend .full{color:#ff8d8d;background:rgba(255,89,89,.10);border-color:rgba(255,89,89,.18)}

        .xports-booking-grid{display:grid;gap:16px}
        .xports-slot-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
        .xports-team-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}

        .xports-btn{
            width:100%;
            min-height:102px;
            padding:18px;
            border-radius:16px;
            border:1px solid var(--xports-border);
            background:linear-gradient(180deg, #191d26 0%, #12161d 100%);
            color:#fff;
            text-align:left;
            cursor:pointer;
            transition:.25s ease;
            position:relative;
            overflow:hidden;
        }
        .xports-btn:hover{
            transform:translateY(-3px);
            border-color:rgba(255,8,8,.42);
            box-shadow:0 14px 28px rgba(0,0,0,.25);
        }
        .xports-btn:disabled{
            opacity:.65;
            cursor:not-allowed;
            transform:none;
            box-shadow:none;
        }
        .xports-entry-tag{
            position:absolute;
            top:12px;
            right:12px;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            min-height:28px;
            padding:0 10px;
            border-radius:999px;
            font-size:11px;
            font-weight:800;
            color:#fff;
            background:linear-gradient(90deg, var(--xports-primary), var(--xports-primary-dark));
            box-shadow:0 8px 18px rgba(255,8,8,.16);
        }
        .xports-btn-label{
            display:block;
            margin-bottom:12px;
            padding-right:86px;
            font-size:20px;
            line-height:1.1;
            font-weight:800;
            color:#fff;
        }
        .xports-btn-meta{
            display:flex;
            justify-content:space-between;
            align-items:center;
            gap:10px;
            font-size:13px;
            color:var(--xports-muted);
        }

        .slot-open{border-color:rgba(77,255,136,.18)}
        .slot-open .xports-badge{background:rgba(77,255,136,.12);color:#4dff88}
        .slot-limited{border-color:rgba(255,187,51,.18)}
        .slot-limited .xports-badge{background:rgba(255,187,51,.12);color:#ffbb33}
        .slot-full{
            border-color:rgba(255,89,89,.20);
            background:linear-gradient(180deg, rgba(90,24,24,.18), rgba(20,16,18,.9));
        }
        .slot-full .xports-badge{background:rgba(255,89,89,.12);color:#ff8d8d}

        .team-btn{
            min-height:110px;
            text-align:center;
            display:flex;
            flex-direction:column;
            justify-content:center;
            align-items:center;
        }
        .team-btn .xports-btn-label{
            margin:0 0 10px;
            padding-right:0;
            font-size:18px;
            text-align:center;
        }
        .team-btn .xports-btn-meta{
            justify-content:center;
            width:100%;
        }
        .team-booked{
            border-color:rgba(255,89,89,.2);
            background:linear-gradient(180deg, rgba(90,24,24,.18), rgba(28,18,20,.85));
        }

        .xports-selected-info{
            margin-top:16px;
            padding:16px 18px;
            border-radius:16px;
            border:1px solid var(--xports-border);
            background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:12px;
            flex-wrap:wrap;
        }
        .xports-selected-pill{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            min-height:32px;
            padding:0 12px;
            border-radius:999px;
            background:rgba(255,8,8,.12);
            color:var(--xports-primary);
            font-size:11px;
            font-weight:800;
            letter-spacing:.6px;
            text-transform:uppercase;
        }
        .xports-selected-text{
            font-size:14px;
            font-weight:800;
            color:#fff;
        }

        .xports-status,
        .xports-form-message{
            margin-top:14px;
            min-height:20px;
            font-size:13px;
            font-weight:800;
            color:var(--xports-primary);
        }

        .xports-selected-time{
            color:var(--xports-primary);
            font-size:13px;
            font-weight:800;
            text-transform:uppercase;
            letter-spacing:.5px;
        }

        .xports-modal{
            position:fixed;
            inset:0;
            background:rgba(0,0,0,.82);
            z-index:99999;
            display:flex;
            align-items:center;
            justify-content:center;
            padding:16px;
            backdrop-filter:blur(5px);
        }
        .xports-modal-inner{
            width:100%;
            max-width:900px;
            max-height:92vh;
            overflow:auto;
            border-radius:20px;
            border:1px solid var(--xports-border);
            background:
                radial-gradient(circle at top right, rgba(255,8,8,.10), transparent 24%),
                linear-gradient(180deg, #151922 0%, #0B0E13 100%);
            padding:24px;
            position:relative;
            box-shadow:0 32px 80px rgba(0,0,0,.45);
        }
        .xports-close{
            position:absolute;
            top:14px;
            right:14px;
            width:42px;
            height:42px;
            border:none;
            border-radius:50%;
            background:#1c212b;
            color:#fff;
            font-size:24px;
            cursor:pointer;
        }
        .xports-modal-head{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:16px;
            flex-wrap:wrap;
            margin-bottom:18px;
            padding-right:52px;
        }

        .xports-auth-modal{max-width:460px;text-align:center}
        .xports-auth-icon{
            width:74px;
            height:74px;
            border-radius:50%;
            margin:0 auto 14px;
            display:flex;
            align-items:center;
            justify-content:center;
            font-size:30px;
            background:rgba(255,8,8,.12);
            border:1px solid rgba(255,8,8,.24);
        }
        .xports-auth-text{
            margin:0 0 18px;
            color:var(--xports-muted);
            font-size:14px;
            line-height:1.55;
        }
        .xports-auth-actions{
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:12px;
        }
        .xports-auth-btn{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            min-height:46px;
            padding:0 16px;
            border-radius:14px;
            font-size:14px;
            font-weight:800;
            text-decoration:none;
            transition:.25s ease;
        }
        .xports-auth-btn.primary{
            background:linear-gradient(90deg, var(--xports-primary), var(--xports-primary-dark));
            color:#fff;
        }
        .xports-auth-btn.secondary{
            border:1px solid var(--xports-border);
            color:#fff;
            background:rgba(255,255,255,.03);
        }

        .xports-form-topbar{
            display:flex;
            align-items:flex-start;
            justify-content:space-between;
            gap:16px;
            flex-wrap:wrap;
            margin-bottom:18px;
            padding-right:50px;
        }
        .xports-form-title{
            margin:0;
            color:#fff;
            font-size:24px;
            font-weight:800;
        }
        .xports-form-subtitle{
            margin-top:6px;
            color:var(--xports-muted);
            font-size:13px;
        }
        .xports-form-badge{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            min-height:34px;
            padding:0 14px;
            border-radius:999px;
            background:rgba(255,8,8,.12);
            color:var(--xports-primary);
            border:1px solid rgba(255,8,8,.22);
            font-size:11px;
            font-weight:800;
            letter-spacing:.5px;
            text-transform:uppercase;
        }
        .xports-form-summary{
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:14px;
            margin-bottom:18px;
        }
        .xports-summary-box{
            padding:16px 18px;
            border-radius:16px;
            border:1px solid var(--xports-border);
            background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
            color:#fff;
            font-size:15px;
            font-weight:700;
        }
        .xports-summary-label{
            display:block;
            margin-bottom:6px;
            color:var(--xports-muted);
            font-size:11px;
            font-weight:800;
            text-transform:uppercase;
            letter-spacing:.6px;
        }

        .xports-form-grid{
            display:grid;
            grid-template-columns:repeat(2,minmax(0,1fr));
            gap:16px;
            align-items:start;
        }
        .xports-full{grid-column:1/-1}

        .xports-field{
            padding:14px;
            border-radius:16px;
            border:1px solid var(--xports-border);
            background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
            width:100%;
        }
        .xports-field label{
            display:block;
            margin:0 0 8px;
            color:#fff;
            font-size:12px;
            font-weight:800;
        }
        .xports-field input[type="text"],
        .xports-field input[type="email"],
        .xports-field input[type="tel"],
        .xports-field input[type="file"]{
            width:100%;
            min-height:52px;
            padding:12px 16px;
            border-radius:12px;
            border:1px solid rgba(255,255,255,.12);
            background:#10141b;
            color:#fff;
        }
        .xports-field input:focus{
            outline:none;
            border-color:var(--xports-primary);
            box-shadow:0 0 0 3px rgba(255,8,8,.10);
        }

        .xports-check-field input{width:auto;min-height:auto}
        .xports-check-label{
            display:flex !important;
            align-items:center;
            gap:10px;
            margin:0 !important;
        }

        .xports-paywrap{
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:16px;
        }
        .xports-paycard{
            padding:18px;
            border-radius:16px;
            border:1px solid var(--xports-border);
            background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
        }
        .xports-paytitle{
            color:#fff;
            font-size:13px;
            font-weight:800;
            margin-bottom:12px;
        }
        .xports-paynote{
            margin-top:10px;
            color:var(--xports-muted);
            font-size:12px;
            line-height:1.5;
        }
        .xports-qr{text-align:center}
        .xports-qrframe{
            display:flex;
            align-items:center;
            justify-content:center;
            min-height:190px;
            border-radius:14px;
            background:#10141b;
            border:1px solid rgba(255,255,255,.10);
        }
        .xports-qrframe img{
            max-width:170px;
            width:100%;
            height:auto;
            display:block;
            background:#fff;
            padding:10px;
            border-radius:12px;
        }

        .xports-submit button{
            width:100%;
            min-height:56px;
            border:none;
            border-radius:14px;
            padding:0 20px;
            background:linear-gradient(90deg, var(--xports-primary), var(--xports-primary-dark));
            color:#fff;
            font-size:15px;
            font-weight:800;
            cursor:pointer;
            box-shadow:0 12px 30px rgba(255,8,8,.20);
            transition:.25s ease;
        }
        .xports-submit button:hover{
            transform:translateY(-1px);
            box-shadow:0 16px 36px rgba(255,8,8,.24);
        }

        @media (max-width: 991px){
            .xports-booking-hero{
                grid-template-columns:150px minmax(0,1fr);
            }
            .xports-booking-prize{
                grid-column:2 / 3;
                justify-self:start;
            }
        }
        @media (max-width: 767px){
            .xports-booking-card{padding:20px}
            .xports-booking-title{font-size:30px}
            .xports-booking-hero,
            .xports-slot-grid,
            .xports-team-grid,
            .xports-auth-actions,
            .xports-form-summary,
            .xports-form-grid,
            .xports-paywrap{
                grid-template-columns:1fr !important;
            }
            .xports-booking-prize{
                grid-column:auto;
                justify-self:stretch;
                max-width:none;
            }
            .xports-modal-inner{padding:18px}
        }
    </style>

    <script>
    (function(){
        const config = <?php echo wp_json_encode(array(
            'ajaxUrl'    => admin_url('admin-ajax.php'),
            'nonce'      => $ajax_nonce,
            'capacity'   => (int) $config['capacity'],
            'isLoggedIn' => is_user_logged_in(),
            'entryFee'   => $atts['entry_fee'],
            'matchDate'  => $atts['match_date'],
            'slots'      => $config['slots'],
        )); ?>;

        let summary = {};
        let selectedSlotId = '';
        let selectedSlotLabel = '';
        let selectedTeamKey = '';

        const slotGrid = document.getElementById('xportsSlotGrid');
        const teamGrid = document.getElementById('xportsTeamGrid');
        const teamModal = document.getElementById('xportsTeamModal');
        const loginModal = document.getElementById('xportsLoginModal');
        const formModal = document.getElementById('xportsFormModal');

        const closeTeamModal = document.getElementById('xportsCloseTeamModal');
        const closeLoginModal = document.getElementById('xportsCloseLoginModal');
        const closeFormModal = document.getElementById('xportsCloseFormModal');

        const selectedSlotText = document.getElementById('xportsSelectedSlotText');
        const statusMsg = document.getElementById('xportsStatusMsg');
        const selectedInfo = document.getElementById('xportsSelectedInfo');
        const selectedPreview = document.getElementById('xportsSelectedPreview');
        const formMessage = document.getElementById('xportsFormMessage');

        const popupSlotDisplay = document.getElementById('xportsPopupSlotDisplay');
        const popupTeamDisplay = document.getElementById('xportsPopupTeamDisplay');

        const slotIdField = document.getElementById('xportsSlotId');
        const slotLabelField = document.getElementById('xportsSlotLabel');
        const teamSlotField = document.getElementById('xportsTeamSlot');

        function setStatus(msg, error = false){
            statusMsg.textContent = msg || '';
            statusMsg.style.color = error ? '#ff8d8d' : 'var(--main-color-one, #FF0808)';
        }

        function setFormMessage(msg, error = false){
            formMessage.textContent = msg || '';
            formMessage.style.color = error ? '#ff8d8d' : '#fff';
        }

        function lockBody(){ document.body.style.overflow = 'hidden'; }
        function unlockBody(){ document.body.style.overflow = ''; }

        function openModal(modal){
            if (!modal) return;
            modal.style.display = 'flex';
            lockBody();
        }
        function closeModal(modal){
            if (!modal) return;
            modal.style.display = 'none';
            unlockBody();
        }

        function getState(count){
            if(count === 0) return 'slot-open';
            if(count < config.capacity) return 'slot-limited';
            return 'slot-full';
        }

        function getStateText(count){
            if(count === 0) return 'Open';
            if(count < config.capacity) return 'Limited';
            return 'Full';
        }

        async function fetchSlotSummary(){
            const body = new URLSearchParams();
            body.append('action', 'xports_get_slot_summary');
            body.append('nonce', config.nonce);

            const res = await fetch(config.ajaxUrl, {
                method: 'POST',
                headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'},
                body: body.toString()
            });

            const json = await res.json();
            if (!json.success) throw new Error(json.data?.message || 'Could not load slots.');
            summary = json.data.summary || {};
        }

        async function fetchBookedTeams(slotId){
            const body = new URLSearchParams();
            body.append('action', 'xports_get_booked_teams');
            body.append('nonce', config.nonce);
            body.append('slot_id', slotId);

            const res = await fetch(config.ajaxUrl, {
                method: 'POST',
                headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'},
                body: body.toString()
            });

            const json = await res.json();
            if (!json.success) throw new Error(json.data?.message || 'Could not load team slots.');
            return Array.isArray(json.data.booked) ? json.data.booked : [];
        }

        function loadSlotButtons(){
            slotGrid.innerHTML = '';

            config.slots.forEach(function(slot){
                const count = parseInt(summary[slot.id] || 0, 10);
                const state = getState(count);
                const stateText = getStateText(count);
                const isFull = count >= config.capacity;

                const btn = document.createElement('button');
                btn.type = 'button';
                btn.className = 'xports-btn ' + state;
                btn.disabled = isFull;
                btn.innerHTML = `
                    <span class="xports-entry-tag">${config.entryFee}</span>
                    <span class="xports-btn-label">${slot.time}</span>
                    <span class="xports-btn-meta">
                        <span>${count}/${config.capacity} booked</span>
                        <span class="xports-badge">${stateText}</span>
                    </span>
                `;

                btn.addEventListener('click', async function(){
                    selectedSlotId = slot.id;
                    selectedSlotLabel = config.matchDate + ' - ' + slot.time;
                    selectedTeamKey = '';
                    selectedSlotText.textContent = 'Selected: ' + slot.time;
                    setStatus('Loading team slots...');

                    try {
                        const bookedTeams = await fetchBookedTeams(slot.id);
                        loadTeamButtons(bookedTeams);
                        openModal(teamModal);
                        setStatus('');
                    } catch (err) {
                        setStatus(err.message || 'Could not load team slots.', true);
                    }
                });

                slotGrid.appendChild(btn);
            });
        }

        function loadTeamButtons(bookedTeams){
            teamGrid.innerHTML = '';

            for(let i = 1; i <= config.capacity; i++){
                const key = 'team' + i;
                const isBooked = bookedTeams.includes(key);

                const btn = document.createElement('button');
                btn.type = 'button';
                btn.className = 'xports-btn team-btn';

                if (isBooked) {
                    btn.classList.add('team-booked');
                    btn.disabled = true;
                    btn.innerHTML = `
                        <span class="xports-btn-label">Team ${i}</span>
                        <span class="xports-btn-meta">Booked</span>
                    `;
                } else {
                    btn.innerHTML = `
                        <span class="xports-btn-label">Team ${i}</span>
                        <span class="xports-btn-meta">Available</span>
                    `;

                    btn.addEventListener('click', function(){
                        selectedTeamKey = key;

                        slotIdField.value = selectedSlotId;
                        slotLabelField.value = selectedSlotLabel;
                        teamSlotField.value = selectedTeamKey;

                        popupSlotDisplay.textContent = selectedSlotLabel;
                        popupTeamDisplay.textContent = selectedTeamKey.replace('team', 'Team ');

                        selectedPreview.textContent = selectedSlotLabel + ' / ' + selectedTeamKey.replace('team', 'Team ');
                        selectedInfo.style.display = 'flex';

                        closeModal(teamModal);

                        if (!config.isLoggedIn) {
                            openModal(loginModal);
                            setStatus('Login required before registration.', true);
                            return;
                        }

                        setFormMessage('');
                        document.getElementById('xportsBookingForm').reset();
                        slotIdField.value = selectedSlotId;
                        slotLabelField.value = selectedSlotLabel;
                        teamSlotField.value = selectedTeamKey;
                        openModal(formModal);
                        setStatus('Selected ' + selectedSlotLabel + ' / ' + selectedTeamKey.replace('team', 'Team '));
                    });
                }

                teamGrid.appendChild(btn);
            }
        }

        closeTeamModal && closeTeamModal.addEventListener('click', () => closeModal(teamModal));
        closeLoginModal && closeLoginModal.addEventListener('click', () => closeModal(loginModal));
        closeFormModal && closeFormModal.addEventListener('click', () => closeModal(formModal));

        teamModal && teamModal.addEventListener('click', e => { if (e.target === teamModal) closeModal(teamModal); });
        loginModal && loginModal.addEventListener('click', e => { if (e.target === loginModal) closeModal(loginModal); });
        formModal && formModal.addEventListener('click', e => { if (e.target === formModal) closeModal(formModal); });

        const bookingForm = document.getElementById('xportsBookingForm');
        bookingForm && bookingForm.addEventListener('submit', async function(e){
            e.preventDefault();

            const submitBtn = bookingForm.querySelector('button[type="submit"]');
            const formData = new FormData(bookingForm);

            submitBtn.disabled = true;
            submitBtn.textContent = 'Submitting...';
            setFormMessage('Submitting registration...');

            try {
                const res = await fetch(config.ajaxUrl, {
                    method: 'POST',
                    body: formData
                });

                const json = await res.json();

                if (!json.success) {
                    throw new Error(json.data?.message || 'Submission failed.');
                }

                setFormMessage(json.data.message || 'Registration submitted successfully.');
                setStatus(json.data.message || 'Registration submitted successfully.');
                bookingForm.reset();
                closeModal(formModal);

                selectedSlotId = '';
                selectedSlotLabel = '';
                selectedTeamKey = '';
                selectedPreview.textContent = 'None';
                selectedInfo.style.display = 'none';

                await fetchSlotSummary();
                loadSlotButtons();

            } catch (err) {
                setFormMessage(err.message || 'Submission failed.', true);
                setStatus(err.message || 'Submission failed.', true);
            } finally {
                submitBtn.disabled = false;
                submitBtn.textContent = 'Submit Registration';
            }
        });

        window.addEventListener('load', async function(){
            try {
                await fetchSlotSummary();
                loadSlotButtons();
            } catch (err) {
                setStatus(err.message || 'Could not load slot status.', true);
            }
        });
    })();
    </script>
    <?php
    return ob_get_clean();
}
add_shortcode('xports_match_booking', 'xports_match_booking_shortcode');


/**
 * =========================================================
 * 4) AJAX - SLOT SUMMARY
 * =========================================================
 */
function xports_get_slot_summary() {
    check_ajax_referer('xports_match_booking_nonce', 'nonce');

    global $wpdb;
    $table_name = $wpdb->prefix . 'xports_match_bookings';
    $config = xports_match_booking_get_config();

    $summary = array();
    foreach ($config['slots'] as $slot) {
        $summary[$slot['id']] = 0;
    }

    $rows = $wpdb->get_results("
        SELECT slot_id, COUNT(*) as total
        FROM {$table_name}
        WHERE status = 'confirmed'
        GROUP BY slot_id
    ", ARRAY_A);

    if ($rows) {
        foreach ($rows as $row) {
            $summary[$row['slot_id']] = (int) $row['total'];
        }
    }

    wp_send_json_success(array(
        'summary' => $summary
    ));
}
add_action('wp_ajax_xports_get_slot_summary', 'xports_get_slot_summary');
add_action('wp_ajax_nopriv_xports_get_slot_summary', 'xports_get_slot_summary');


/**
 * =========================================================
 * 5) AJAX - BOOKED TEAMS
 * =========================================================
 */
function xports_get_booked_teams() {
    check_ajax_referer('xports_match_booking_nonce', 'nonce');

    global $wpdb;
    $table_name = $wpdb->prefix . 'xports_match_bookings';
    $slot_id = sanitize_text_field($_POST['slot_id'] ?? '');

    if (!$slot_id) {
        wp_send_json_error(array('message' => 'Missing slot ID.'));
    }

    $booked = $wpdb->get_col($wpdb->prepare(
        "SELECT team_slot FROM {$table_name} WHERE slot_id = %s AND status = 'confirmed'",
        $slot_id
    ));

    wp_send_json_success(array(
        'booked' => array_values($booked ?: array())
    ));
}
add_action('wp_ajax_xports_get_booked_teams', 'xports_get_booked_teams');
add_action('wp_ajax_nopriv_xports_get_booked_teams', 'xports_get_booked_teams');


/**
 * =========================================================
 * 6) AJAX - SUBMIT BOOKING
 * =========================================================
 */
function xports_submit_booking() {
    check_ajax_referer('xports_match_booking_nonce', 'nonce');

    if (!is_user_logged_in()) {
        wp_send_json_error(array('message' => 'Please login first.'));
    }

    global $wpdb;
    $table_name = $wpdb->prefix . 'xports_match_bookings';
    $config = xports_match_booking_get_config();
    $capacity = (int) $config['capacity'];

    $slot_id      = sanitize_text_field($_POST['slot_id'] ?? '');
    $slot_label   = sanitize_text_field($_POST['slot_label'] ?? '');
    $team_slot    = sanitize_text_field($_POST['team_slot'] ?? '');
    $match_date   = sanitize_text_field($_POST['match_date'] ?? '');
    $team_name    = sanitize_text_field($_POST['team_name'] ?? '');
    $leader_name  = sanitize_text_field($_POST['leader_name'] ?? '');
    $player_2     = sanitize_text_field($_POST['player_2'] ?? '');
    $player_3     = sanitize_text_field($_POST['player_3'] ?? '');
    $player_4     = sanitize_text_field($_POST['player_4'] ?? '');
    $email        = sanitize_email($_POST['email'] ?? '');
    $whatsapp     = sanitize_text_field($_POST['whatsapp'] ?? '');
    $referral     = sanitize_text_field($_POST['referral_code'] ?? '');
    $agree        = isset($_POST['agree']) ? 1 : 0;
    $user_id      = get_current_user_id();

    if (
        !$slot_id || !$slot_label || !$team_slot || !$team_name || !$leader_name ||
        !$player_2 || !$player_3 || !$player_4 || !$email || !$whatsapp || !$agree
    ) {
        wp_send_json_error(array('message' => 'Please fill all required fields.'));
    }

    if (!is_email($email)) {
        wp_send_json_error(array('message' => 'Please enter a valid email.'));
    }

    $allowed_slots = wp_list_pluck($config['slots'], 'id');
    if (!in_array($slot_id, $allowed_slots, true)) {
        wp_send_json_error(array('message' => 'Invalid slot selected.'));
    }

    if (!preg_match('/^team([1-9]|1[0-3])$/', $team_slot)) {
        wp_send_json_error(array('message' => 'Invalid team slot selected.'));
    }

    $slot_count = (int) $wpdb->get_var($wpdb->prepare(
        "SELECT COUNT(*) FROM {$table_name} WHERE slot_id = %s AND status = 'confirmed'",
        $slot_id
    ));

    if ($slot_count >= $capacity) {
        wp_send_json_error(array('message' => 'This slot is already full.'));
    }

    $team_taken = (int) $wpdb->get_var($wpdb->prepare(
        "SELECT COUNT(*) FROM {$table_name} WHERE slot_id = %s AND team_slot = %s AND status = 'confirmed'",
        $slot_id,
        $team_slot
    ));

    if ($team_taken > 0) {
        wp_send_json_error(array('message' => 'This team slot is already booked.'));
    }

    $duplicate_user = (int) $wpdb->get_var($wpdb->prepare(
        "SELECT COUNT(*) FROM {$table_name} WHERE user_id = %d AND slot_id = %s AND status = 'confirmed'",
        $user_id,
        $slot_id
    ));

    if ($duplicate_user > 0) {
        wp_send_json_error(array('message' => 'You have already booked this match slot.'));
    }

    if (empty($_FILES['payment_screenshot']['name'])) {
        wp_send_json_error(array('message' => 'Payment screenshot is required.'));
    }

    require_once ABSPATH . 'wp-admin/includes/file.php';
    require_once ABSPATH . 'wp-admin/includes/image.php';
    require_once ABSPATH . 'wp-admin/includes/media.php';

    $uploaded = wp_handle_upload($_FILES['payment_screenshot'], array(
        'test_form' => false,
        'mimes' => array(
            'jpg|jpeg' => 'image/jpeg',
            'png'      => 'image/png',
            'webp'     => 'image/webp',
            'pdf'      => 'application/pdf',
        ),
    ));

    if (isset($uploaded['error'])) {
        wp_send_json_error(array('message' => $uploaded['error']));
    }

    $screenshot_url = esc_url_raw($uploaded['url']);

    $inserted = $wpdb->insert(
        $table_name,
        array(
            'user_id'        => $user_id,
            'slot_id'        => $slot_id,
            'slot_label'     => $slot_label,
            'team_slot'      => $team_slot,
            'match_date'     => $match_date,
            'team_name'      => $team_name,
            'leader_name'    => $leader_name,
            'player_2'       => $player_2,
            'player_3'       => $player_3,
            'player_4'       => $player_4,
            'email'          => $email,
            'whatsapp'       => $whatsapp,
            'referral_code'  => $referral,
            'screenshot_url' => $screenshot_url,
            'status'         => 'confirmed',
        ),
        array(
            '%d', '%s', '%s', '%s', '%s', '%s', '%s', '%s', '%s', '%s', '%s', '%s', '%s', '%s', '%s'
        )
    );

    if (!$inserted) {
        wp_send_json_error(array('message' => 'Could not save registration.'));
    }

    $admin_email = get_option('admin_email');
    $subject = 'New Match Registration - ' . $slot_label . ' - ' . strtoupper($team_slot);

    $message  = "New booking received.\n\n";
    $message .= "Slot: {$slot_label}\n";
    $message .= "Team Slot: {$team_slot}\n";
    $message .= "Team Name: {$team_name}\n";
    $message .= "Leader: {$leader_name}\n";
    $message .= "Player 2: {$player_2}\n";
    $message .= "Player 3: {$player_3}\n";
    $message .= "Player 4: {$player_4}\n";
    $message .= "Email: {$email}\n";
    $message .= "WhatsApp: {$whatsapp}\n";
    $message .= "Referral: {$referral}\n";
    $message .= "Screenshot: {$screenshot_url}\n";

    wp_mail($admin_email, $subject, $message);

    wp_send_json_success(array(
        'message' => 'Registration submitted successfully.'
    ));
}
add_action('wp_ajax_xports_submit_booking', 'xports_submit_booking');