@extends('app')

@section('title', $site . ' - Dataland 對帳報表')

@section('content')

<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2">{{ $site }} - Dataland 對帳報表</h1>
</div>

<!-- Search Form -->
<div class="card shadow-sm mb-4">
    <div class="card-header">
        <h5 class="mb-0"><i class="bi bi-search me-2"></i>搜尋條件</h5>
    </div>
    <div class="card-body">

        <form class="row g-3 align-items-end" method="GET" action="{{ route('dataland.show', ['site' => $site]) }}">

            <div class="col-md-8 col-lg-6">
                <label for="start_time" class="form-label">下注時間區間</label>
                <div class="input-group">
                    <span class="input-group-text"><i class="bi bi-calendar-event"></i></span>
                    <input type="text" class="form-control datetimepicker" name="start_time" id="start_time"
                        value="{{ $start_time }}">
                    <span class="input-group-text">至</span>
                    <input type="text" class="form-control datetimepicker" name="end_time"
                        value="{{ $end_time }}">
                </div>
            </div>

            <div class="col-auto">
                <button type="submit" class="btn btn-primary d-flex align-items-center" id="search-btn">
                    <span class="spinner-border spinner-border-sm me-2 d-none" role="status" aria-hidden="true" id="search-spinner"></span>
                    <i class="bi bi-search me-1"></i>
                    搜尋
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Results Table -->
<div class="card shadow-sm">
    <div class="card-header">
        <h5 class="mb-0"><i class="bi bi-table me-2"></i>對帳列表</h5>
    </div>
    <div class="card-body table-responsive">
        <table class="table table-bordered table-hover table-striped align-middle text-center">
            <thead class="table-light">
                <tr>
                    <th rowspan="2" class="align-middle">平台</th>
                    <th colspan="3">輸贏</th>
                    <th colspan="3">有效投注</th>
                    <th colspan="1">打賞</th>
                    <th rowspan="2" class="align-middle">注單比對</th>
                </tr>
                <tr>
                    <th>站台</th>
                    <th>原廠</th>
                    <th class="text-danger">差額</th>
                    <th>站台</th>
                    <th>原廠</th>
                    <th class="text-danger">差額</th>
                    <th class="text-danger">站臺</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($site_data as $platform => $data)
                @php
                $origin_win = $origin_map[$platform]['sum_win'] ?? 0;
                $win_diff = bcsub($data['winorlose'], $origin_win, 4);

                $origin_bet = $origin_map[$platform]['sum_bet2'] ?? 0;
                $bet_diff = bcsub($data['total_bet'], $origin_bet, 4);

                $win_diff_class = abs($win_diff) > 0.1 ? 'text-danger fw-bold' : '';
                $bet_diff_class = abs($bet_diff) > 0.1 ? 'text-danger fw-bold' : '';
                @endphp
                <tr>
                    <td>{{ $platform }}</td>
                    <td>{{ rtrim(rtrim(number_format($data['winorlose'], 4), '0'), '.') }}</td>
                    <td>{{ rtrim(rtrim(number_format($origin_win, 4), '0'), '.') }}</td>
                    <td class="{{ $win_diff_class }}">{{ rtrim(rtrim(number_format($win_diff, 4), '0'), '.') }}</td>

                    <td>{{ rtrim(rtrim(number_format($data['total_bet'], 4), '0'), '.') }}</td>
                    <td>{{ rtrim(rtrim(number_format($origin_bet, 4), '0'), '.') }}</td>
                    <td class="{{ $bet_diff_class }}">{{ rtrim(rtrim(number_format($bet_diff, 4), '0'), '.') }}</td>
                    <td>{{ $data['donate'] }}</td>

                    <td>
                        <!-- <button type="button" class="btn btn-outline-primary btn-sm detail-btn"
                            onclick="showCompos(this)"
                            data-site="{{ $site }}"
                            data-platform="{{ $platform }}"
                            data-start-time="{{ $start_time }}"
                            data-end-time="{{ $end_time }}">
                            <i class="bi bi-card-list me-1"></i>詳細
                        </button> -->

                        <!-- 會員詳細 -->
                        <a href="{{ route('dataland.member', ['site' => $site, 'platform' => $platform, 'start_time' => $start_time, 'end_time' => $end_time]) }}"
                            class="btn btn-outline-secondary btn-sm"
                            onclick="this.classList.add('disabled'); this.setAttribute('aria-disabled', 'true');">
                            <i class="bi bi-box-arrow-up-right me-1"></i>會員詳細
                        </a>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="8" class="text-center text-muted py-5">
                        <h4><i class="bi bi-exclamation-circle me-2"></i>沒有找到任何資料</h4>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="detailModal" tabindex="-1" aria-labelledby="detailModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="detailModalLabel">注單比對詳細資料</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body bg-light">
                <pre id="modal-content-pre" class="p-3 rounded" style="white-space: pre-wrap; word-wrap: break-word;"></pre>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">關閉</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="loginModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="loginModalLabel">{{ $site }}-登入</h5>
            </div>
            <div class="modal-body">
                @if(!empty($loginError))
                <div class="alert alert-danger">{{ $loginError }}</div>
                @endif

                <form method="POST" action="{{ route('login') }}">
                    @csrf
                    <div class="mb-3">
                        <label for="user" class="form-label">帳號</label>
                        <input type="text" name="user" id="user" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label for="password" class="form-label">密碼</label>
                        <input type="password" name="password" id="password" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">驗證碼</label>
                        <input type="text" class="form-control" id="captchaInput" name="captchaInput" placeholder="" required>
                    </div>
                    <input type="hidden" class="form-control" id="web_site" name="web_site" value="{{ $site }}">
                    <button type="submit" class="btn btn-primary w-100">登入</button>
                </form>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
@if(!empty($showLoginModal) && $showLoginModal)
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var myModal = new bootstrap.Modal(document.getElementById('loginModal'));
        myModal.show();
    });
</script>
@endif
<script>
    function showCompos(button) {
        const modalPre = document.getElementById('modal-content-pre');
        if (!modalPre) return;

        modalPre.textContent = ''; // Clear previous content

        const site = button.dataset.site;
        const platform = button.dataset.platform;
        const startTime = button.dataset.startTime;
        const endTime = button.dataset.endTime;

        const detailModalLabel = document.getElementById('detailModalLabel');
        if (detailModalLabel) {
            detailModalLabel.textContent = `${platform} 注單比對 (${startTime} ~ ${endTime})`;
        }

        let timerInterval;
        Swal.fire({
            title: '正在載入中...',
            html: '正在從原廠取得資料，請稍候。',
            timer: 30000, // 30 seconds
            timerProgressBar: true,
            allowOutsideClick: false,
            didOpen: () => {
                Swal.showLoading();
            },
            willClose: () => {
                clearInterval(timerInterval);
            }
        });

        // composUrl
        const composUrl = `{{ url('/dataland') }}/${site}/${platform}?std=${startTime}&etd=${endTime}`;

        $.ajax({
            url: composUrl,
            type: 'GET',
            timeout: 30000, // 30 seconds
            success: function(response) {
                Swal.close();
                try {
                    // Try to parse and format if it's a JSON string
                    const formattedJson = JSON.stringify(JSON.parse(response), null, 2);
                    modalPre.textContent = formattedJson;
                } catch (e) {
                    // If it's not a valid JSON, just show the raw text
                    modalPre.textContent = response;
                }
                var detailModal = new bootstrap.Modal(document.getElementById('detailModal'));
                detailModal.show();
            },
            error: function(xhr, status, error) {
                Swal.close();
                console.error("AJAX Error:", status, error, xhr.responseText);
                Swal.fire({
                    icon: 'error',
                    title: '載入失敗',
                    text: `無法取得資料，請檢查主機日誌或網路連線。(${status})`,
                });
            }
        });
    }
</script>
@endpush