@extends('layouts.admin.app')

@section('title', 'League Rules')

@push('style')
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
@endpush

@section('content')
    <div class="users_list league_rules">
        <div class="topbar">
            <div class="tabs">
                <div class="tab active" data-tab="auction">Auction Rules</div>
                <div class="tab" data-tab="team">Team Composition</div>
                <div class="tab" data-tab="player">Player Rules</div>
                <div class="tab" data-tab="financial">Financial Rules</div>
                <div class="tab" data-tab="fair">Fair Play</div>
                <div class="tab" data-tab="advanced">Advanced</div>
            </div>
        </div>
        <div id="auction" class="tab-content" style="display:block">
            <div class="user_management">
                <div class="card">

                    <div class="header">
                        <span>Auction Rules</span>
                        <a href="mailto:support@iclevents.com" class="support_btn">Contact Support</a>
                    </div>

                    <div class="row">
                        <div class="left">
                            <div class="title">Base Bid Range</div>
                            <div class="subtitle">Min base bid for players</div>
                        </div>

                        <div class="value">55,000</div>
                    </div>

                    <div class="row">
                        <div class="left">
                            <div class="title">Bid Increment</div>
                            <div class="subtitle">Per-round bid step amount</div>
                        </div>

                        <div class="value">10,000</div>
                    </div>

                    <div class="row">
                        <div class="left">
                            <div class="title">Timer Per Player</div>
                            <div class="subtitle">Seconds per bidding round</div>
                        </div>

                        <div class="value">30 Sec</div>
                    </div>

                    <div class="row">
                        <div class="left">
                            <div class="title">Auto Timer Reset on Bid</div>
                            <div class="subtitle">Resets countdown when bid placed</div>
                        </div>

                        <div class="toggle-container">

                            <label class="switch">
                                <input type="checkbox" id="autoBid" checked>
                                <span class="slider"></span>
                            </label>

                            <span class="enable" id="toggleText">
                                Enable
                            </span>

                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div id="team" class="tab-content" style="display:none">
            <div class="user_management">
                    <div class="card">

                        <div class="header">
                            <span>Team Composition</span>
                            <a href="mailto:support@iclevents.com" class="support_btn">Contact Support</a>
                        </div>

                        <div class="row">
                            <div class="left">
                                <div class="title">Max Squad Size</div>
                                <div class="subtitle">Upper limit per team roster</div>
                            </div>

                            <div class="value">15</div>
                        </div>

                        <div class="row">
                            <div class="left">
                                <div class="title">Min Squad Size</div>
                                <div class="subtitle">Minimum playable squad</div>
                            </div>

                            <div class="value">11</div>
                        </div>

                        <div class="row">
                            <div class="left">
                                <div class="title">Max Players per Category</div>
                                <div class="subtitle">Limits by player grade</div>
                            </div>

                            <div class="value"></div>
                        </div>
                        <div class="row">
                            <div class="left">
                                <div class="category_title">
                                    <div class="avatar">
                                        A
                                    </div>

                                    <div class="content">
                                        <div class="title">
                                            Category A
                                        </div>

                                        <div class="subtitle">
                                            Premium players
                                        </div>
                                    </div>
                                </div>

                            </div>

                            <div class="value">11</div>
                        </div>

                        <div class="row">
                            <div class="left">
                                <div class="category_title">
                                    <div class="avatar">
                                        A
                                    </div>

                                    <div class="content">
                                        <div class="title">
                                            Category A
                                        </div>

                                        <div class="subtitle">
                                            Premium players
                                        </div>
                                    </div>
                                </div>

                            </div>

                            <div class="value">11</div>
                        </div>

                        <div class="row">
                            <div class="left">
                                <div class="category_title">
                                    <div class="avatar">
                                        A
                                    </div>

                                    <div class="content">
                                        <div class="title">
                                            Category A
                                        </div>

                                        <div class="subtitle">
                                            Premium players
                                        </div>
                                    </div>
                                </div>

                            </div>

                            <div class="value">11</div>
                        </div>
                    </div>
            </div>
        </div>
        <div id="player" class="tab-content" style="display:none">
            <div class="user_management">
                <div class="card">

                    <div class="header">
                        <span>Player Rules</span>
                        <a href="mailto:support@iclevents.com" class="support_btn">Contact Support</a>
                    </div>

                    <div class="row">
                        <div class="left">
                            <div class="title">Max Players per Team Owner</div>
                            <div class="subtitle">Owner roster cap</div>
                        </div>

                        <div class="value">15</div>
                    </div>

                    <div class="row">
                        <div class="left">
                            <div class="title">Allow Replacement Players</div>
                            <div class="subtitle">Permits mid-season subs</div>
                        </div>

                        <div class="toggle-container">

                            <label class="switch">
                                <input type="checkbox" id="autoBid" checked>
                                <span class="slider"></span>
                            </label>

                            <span class="enable" id="toggleText">
                                Enable
                            </span>

                        </div>
                    </div>
                    <div class="row">
                        <div class="left">
                            <div class="title">Injury Replacement Limit</div>
                            <div class="subtitle">Max replacements per injury</div>
                        </div>

                        <div class="value">2</div>
                    </div>
                </div>
            </div>
        </div>
        <div id="financial" class="tab-content" style="display:none">
            <div class="user_management">
                <div class="card">
                    <div class="header">
                        <span>Financial Rules</span>
                        <a href="mailto:support@iclevents.com" class="support_btn">Contact Support</a>
                    </div>
                    <div class="row">
                        <div class="left">
                            <div class="title">Initial Team Budget</div>
                            <div class="subtitle">Starting purse per team (₹)</div>
                        </div>

                        <div class="value">1000000</div>
                    </div>
                    <div class="row">
                        <div class="left">
                            <div class="title">Max Bid Limit per Player</div>
                            <div class="subtitle">Ceiling price for any player (₹)</div>
                        </div>

                        <div class="value">200000</div>
                    </div>

                    <div class="row">
                        <div class="left">
                            <div class="title">Minimum Remaining Balance</div>
                            <div class="subtitle">Teams must keep reserve funds</div>
                        </div>

                        <div class="toggle-container">

                            <label class="switch">
                                <input type="checkbox" id="autoBid" checked>
                                <span class="slider"></span>
                            </label>

                            <span class="enable" id="toggleText">
                                Enable
                            </span>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="fair" class="tab-content" style="display:none">
            <div class="user_management">
                <div class="card">
                    <div class="header">
                        <span>Fair Play</span>
                        <a href="mailto:support@iclevents.com" class="support_btn">Contact Support</a>
                    </div>
                    <div class="row">
                        <div class="left">
                            <div class="title">Minimum Remaining Balance</div>
                            <div class="subtitle">Prevents same player on 2 teams</div>
                        </div>

                        <div class="toggle-container">

                            <label class="switch">
                                <input type="checkbox" id="autoBid" checked>
                                <span class="slider"></span>
                            </label>

                            <span class="enable" id="toggleText">
                                Enable
                            </span>

                        </div>
                    </div>
                    <div class="row">
                        <div class="left">
                            <div class="title">Anti-Collusion Monitoring</div>
                            <div class="subtitle">Flags suspicious bid patterns</div>
                        </div>

                        <div class="toggle-container">

                            <label class="switch">
                                <input type="checkbox" id="autoBid" checked>
                                <span class="slider"></span>
                            </label>

                            <span class="enable" id="toggleText">
                                Enable
                            </span>

                        </div>
                    </div>

                    <div class="row">
                        <div class="left">
                            <div class="title">Auto Disqualification Rule</div>
                            <div class="subtitle">Auto-ban on rule violation</div>
                        </div>

                        <div class="toggle-container">

                            <label class="switch">
                                <input type="checkbox" id="autoBid" checked>
                                <span class="slider"></span>
                            </label>

                            <span class="enable" id="toggleText">
                                Enable
                            </span>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="advanced" class="tab-content" style="display:none">
            <div class="user_management">
                <div class="card">
                    <div class="header">
                        <span>Advanced</span>
                        <a href="mailto:support@iclevents.com" class="support_btn">Contact Support</a>
                    </div>
                    <div class="row">
                        <div class="left">
                            <div class="title">Allow Manual Override</div>
                            <div class="subtitle">Admin can override bids/results</div>
                        </div>

                        <div class="toggle-container">

                            <label class="switch">
                                <input type="checkbox" id="autoBid" checked>
                                <span class="slider"></span>
                            </label>

                            <span class="enable" id="toggleText">
                                Enable
                            </span>

                        </div>
                    </div>
                    <div class="row">
                        <div class="left">
                            <div class="title">Real-time Notifications</div>
                            <div class="subtitle">Push events to all clients</div>
                        </div>

                        <div class="toggle-container">

                            <label class="switch">
                                <input type="checkbox" id="autoBid" checked>
                                <span class="slider"></span>
                            </label>

                            <span class="enable" id="toggleText">
                                Enable
                            </span>

                        </div>
                    </div>

                    <div class="row">
                        <div class="left">
                            <div class="title">Audit Logs Enabled</div>
                            <div class="subtitle">Records all admin actions</div>
                        </div>

                        <div class="toggle-container">

                            <label class="switch">
                                <input type="checkbox" id="autoBid" checked>
                                <span class="slider"></span>
                            </label>

                            <span class="enable" id="toggleText">
                                Enable
                            </span>

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

@push('script')
    <script>
        const tabs = document.querySelectorAll('.tab');
        const contents = document.querySelectorAll('.tab-content');

        function isMobile() {
            return window.innerWidth <= 767;
        }

        function hideAll() {
            contents.forEach(c => c.style.display = 'none');
            tabs.forEach(t => t.classList.remove('active'));
        }
        tabs.forEach(tab => {
            tab.addEventListener('click', () => {
                const content = document.getElementById(tab.dataset.tab);
                if (isMobile()) {
                    const isOpen = tab.classList.contains('active');
                    hideAll();
                    if (!isOpen) {
                        tab.classList.add('active');
                        content.style.display = 'block';
                    }
                } else {
                    tabs.forEach(t => t.classList.remove('active'));
                    tab.classList.add('active');
                    contents.forEach(c => c.style.display = 'none');
                    content.style.display = 'block';
                }
            })
        })
        window.addEventListener('resize', () => {
            hideAll();
            document.querySelector('.tab').click();
        })
    </script>
    <script>
        document.querySelectorAll(".dropdown_table").forEach(dropdown => {
            const btn = dropdown.querySelector(".drop-btn");
            const options = dropdown.querySelectorAll(".option");
            // Toggle dropdown
            btn.addEventListener("click", (e) => {
                e.stopPropagation();
                document.querySelectorAll(".dropdown_table").forEach(d => {
                    if (d !== dropdown) d.classList.remove("active");
                });
                dropdown.classList.toggle("active");
            });
            // Select option
            options.forEach(option => {
                option.addEventListener("click", (e) => {
                    const selectedText = dropdown.querySelector(".selectedText");
                    // ✅ FIX TEXT UPDATE
                    selectedText.innerText = option.innerText;
                    // Remove old color classes
                    btn.classList.remove("red", "green", "blue", "yellow", "paid", "unpaid", "approved", "sold", "pending", "rejected");
                    // Get selected color
                    const colorClass = [...option.classList].find(c =>
                        ["red", "green", "blue", "yellow", "paid", "unpaid", "approved", "sold", "pending", "rejected"].includes(c)
                    );
                    if (colorClass) btn.classList.add(colorClass);
                    dropdown.classList.remove("active");
                    e.stopPropagation();
                });
            });
        });
        // Close all dropdowns
        document.addEventListener("click", () => {
            document.querySelectorAll(".dropdown_table").forEach(d => {
                d.classList.remove("active");
            });
        });
    </script>
    <script>
        document.querySelectorAll(".item").forEach(item => {
            const btn = item.querySelector(".more-btn");
            const menu = item.querySelector(".dropdown-menu");
            btn.addEventListener("click", (e) => {
                e.preventDefault();
                e.stopPropagation();
                // Close others
                document.querySelectorAll(".item").forEach(i => {
                    if (i !== item) i.classList.remove("active", "drop-up");
                });
                // Open dropdown
                item.classList.toggle("active");
                // 👉 Check space
                const rect = menu.getBoundingClientRect();
                const spaceBelow = window.innerHeight - btn.getBoundingClientRect().bottom;
                // If not enough space → open upward
                if (spaceBelow < rect.height + 20) {
                    item.classList.add("drop-up");
                } else {
                    item.classList.remove("drop-up");
                }
            });
        });

        // Close outside
        document.addEventListener("click", () => {
            document.querySelectorAll(".item").forEach(i => {
                i.classList.remove("active", "drop-up");
            });
        });
    </script>

    <script>
        const toggle = document.getElementById('autoBid');
        const text = document.getElementById('toggleText');
        toggle.addEventListener('change', function () {
            if (this.checked) {
                text.textContent = 'Enable';
                text.style.color = '#95E15D';
            } else {
                text.textContent = 'Disable';
                text.style.color = '#FF6B6B';
            }
        });
    </script>
@endpush