@extends('backendTools.layouts.backend')

@section('title', '站臺對帳報表')

@section('header')
    <i class="bi bi-file-text me-2"></i>站臺對帳報表
    
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入 flatpickr -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
@endsection

@section('content')
    <div class="container-fluid p-3">
        <div class="w-100 bg-white shadow-lg p-4 rounded" style="width: 95%;">
            <h2 class="text-center mb-4">📋 表單</h2>
            <form method="GET" id="mainForm">
                <!-- token 放這邊一起送出 POST-->
                <input type="hidden" name="token" value="{{ request('token') ?? '' }}">
                <input type="hidden" id="country" name="country" value="{{ $country }}" class="form-control">
                    <div class="row mb-3">
                        <div class="col-md-3">
                            <label for="date_begin" class="form-label">開始日期</label>
                            <input type="text" id="date_begin" name="date_begin" value="{{ $startTime }}" class="form-control" placeholder="開始日期時間">
                        </div>
                        <div class="col-md-3">
                            <label for="date_end" class="form-label">結束日期</label>
                            <input type="text" id="date_end" name="date_end" value="{{ $endTime }}" class="form-control" placeholder="結束日期時間">
                        </div>
                        <div class="col-md-3 d-flex align-items-end">
                            <button type="submit" class="btn btn-primary" id="submitBtnTw">臺灣</button>
                            &nbsp;
                            <button type="submit" class="btn btn-success" id="submitBtnVn">越南</button>
                        </div>
                    </div>
            </form>
            <div class="table-responsive">
                <table class="table table-bordered table-striped">
                    <thead class="table-dark">
                        <tr>
                            <th>{{ ($country == 'vn') ? '越南' : '臺灣' }}平台</th>
                            <th>內部對帳</th>
                            <th>原廠對帳</th>
                            <th>備註</th>
                            <th>搜尋時間</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($report as $key => $item)
                            <tr>
                                <td>{{ $item['platform'] }}</td>
                                <td class="text-right">{{ $item['internalResult'] ?? 0 }}</td>
                                <td class="text-right">{{ $item['providerResult'] ?? 0 }}</td>
                                <td>
                                    @php
                                        $id = 'collapseComment' . $loop->index;
                                        $short = \Illuminate\Support\Str::limit($item['comment'], 20);
                                    @endphp

                                    <span data-bs-toggle="collapse" href="#{{ $id }}" role="button" aria-expanded="false" aria-controls="{{ $id }}">
                                        {{ $short }}...
                                    </span>
                                    <div class="collapse mt-1" id="{{ $id }}">
                                        <div class="card card-body">
                                            {{ $item['comment'] }}
                                        </div>
                                    </div>
                                </td>
                                <td>{{ $item['searchTime'] }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
    </div>
@endsection

@push('scripts')
    <script>
    flatpickr("#date_begin", {
        enableTime: true,
        time_24hr: true,
        enableSeconds: true,
        dateFormat: "Y-m-d H:i:S"
    });

    flatpickr("#date_end", {
        enableTime: true,
        time_24hr: true,
        enableSeconds: true,
        dateFormat: "Y-m-d H:i:S"
    });

    function disableButton(form) {
        const btn = form.querySelector('button[type="submit"]');
        btn.disabled = true;
        btn.innerText = "查詢中..."; // 可選，顯示狀態文字
    }

    $('#submitBtnTw').click(function(){
        $('#country').val('tw');
    });
    
    $('#submitBtnVn').click(function(){
        $('#country').val('vn');
    });
</script>
@endpush