@extends('layouts.app')
@push('styles')
    @include('_distributor.desktop.balance.partials.css')
    <style>
        /* Gaya kustom untuk ikon */
        .icon {
            display: inline-block;
            width: 1em;
            height: 1em;
            vertical-align: middle;
            fill: currentColor;
        }

        /* Gaya kustom untuk input pencarian */
        .search-input-container {
            position: relative;
            flex-grow: 1;
            /* Memungkinkan input untuk tumbuh */
        }

        .search-input-container input {
            padding-left: 2.5rem;
            /* Ruang untuk ikon */
        }

        .search-input-container .icon {
            position: absolute;
            left: 0.75rem;
            top: 50%;
            transform: translateY(-50%);
            color: #6c757d;
            /* Warna ikon abu-abu */
        }

        /* Gaya kustom untuk dropdown */
        .custom-select-wrapper .form-select {
            padding-right: 2.5rem;
            /* Ruang untuk ikon panah default */
        }

        .custom-select-wrapper .pointer-events-none {
            position: absolute;
            right: 0.75rem;
            top: 50%;
            transform: translateY(-50%);
            pointer-events: none;
            color: #6c757d;
        }

        /* Gaya untuk badge status */
        .badge-success-custom {
            background-color: #d1fae5;
            /* bg-green-100 */
            color: #065f46;
            /* text-green-800 */
            padding: 0.25em 0.5em;
            border-radius: 0.5rem;
            /* rounded-full */
            font-weight: 600;
            /* font-semibold */
            font-size: 0.75rem;
            /* text-xs */
            line-height: 1.25;
            /* leading-5 */
        }
    </style>
@endpush
@section('content')
    <div class="header">
        <h1>Saldo Saya</h1>
        <div class="date-picker" id="dateRangePicker">
            <img src="https://cdn-icons-png.flaticon.com/128/3652/3652191.png" alt="Calendar Icon" class="icon-small">
            <span id="dateRangeDisplay">01 Jul 2025 - 17 Jul 2025</span>
        </div>
    </div>

    @include('_distributor.desktop.balance.partials.balance-section')

    <div class="card">
        <div class="card-body">
            @include('_distributor.desktop.balance.partials.tabs')
            <div id="saldoBerhasilContent" class="tab-content active">
                <div class="bottom-section">
                    <div class="search-filter-section">
                        <input type="text" placeholder="Cari ID Top Up, No Referensi">
                        <select>
                            <option>Semua Status</option>
                            <option>Status 1</option>
                            <option>Status 2</option>
                        </select>
                    </div>
                    <button class="download-report-button">
                        Download My Balance Report
                    </button>
                </div>
                {{-- <div class="data-not-found">
                    Data tidak ditemukan untuk Saldo Berhasil.
                </div> --}}
                <div class="table-responsive">
                    <table class="table table-hover table-borderless align-middle">
                        <thead class="bg-white">
                            <tr>
                                <th scope="col" class="text-secondary text-uppercase small">
                                    ID TOP UP
                                </th>
                                <th scope="col" class="text-secondary text-uppercase small">
                                    STATUS
                                </th>
                                <th scope="col" class="text-secondary text-uppercase small">
                                    <div class="d-flex align-items-center">
                                        TANGGAL
                                        <svg class="ms-1 icon text-secondary" xmlns="http://www.w3.org/2000/svg"
                                            viewBox="0 0 24 24" fill="currentColor">
                                            <path d="M12 4l-8 8h6v8h4v-8h6L12 4z" />
                                        </svg>
                                    </div>
                                </th>
                                <th scope="col" class="text-secondary text-uppercase small">
                                    NOMINAL TOP UP
                                </th>
                                <th scope="col" class="text-secondary text-uppercase small">
                                    METT
                                </th>
                                <th scope="col" class="text-secondary text-uppercase small">
                                    METODE PEMBAYARAN
                                </th>
                                <th scope="col" class="text-secondary text-uppercase small">
                                    TANGGAL EXPIRE
                                </th>
                                <th scope="col" class="text-secondary text-uppercase small">
                                    NO REFERENSI
                                </th>
                            </tr>
                        </thead>
                        <tbody class="bg-white">
                            <!-- Baris Data Contoh -->
                            <tr>
                                <td class="text-dark fw-medium">
                                    <div class="d-flex align-items-center">
                                        TU-259508181211668816201
                                        <button class="btn btn-link text-secondary p-0 ms-2 copy-button"
                                            data-clipboard-text="TU-259508181211668816201">
                                            <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                                                fill="currentColor">
                                                <path
                                                    d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z" />
                                            </svg>
                                        </button>
                                    </div>
                                </td>
                                <td>
                                    <span class="badge badge-success-custom">
                                        SUCCESS
                                    </span>
                                </td>
                                <td class="text-secondary">
                                    08 Mei 2025 10:14
                                </td>
                                <td class="text-dark">
                                    Rp 25.000
                                </td>
                                <td class="text-secondary">
                                    Rp 24.000
                                </td>
                                <td class="text-secondary">
                                    BCA
                                </td>
                                <td class="text-secondary">
                                    09 Mei 2025 18:12
                                </td>
                                <td class="text-secondary">
                                    <div class="d-flex align-items-center">
                                        EVM202505089695
                                        <button class="btn btn-link text-secondary p-0 ms-2 copy-button"
                                            data-clipboard-text="EVM202505089695">
                                            <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                                                fill="currentColor">
                                                <path
                                                    d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z" />
                                            </svg>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    @include('_distributor.desktop.balance.partials.modal-withdraw')
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    @include('_distributor.desktop.balance.partials.script-withdraw')

    <script>
        function copyToClipboard(text) {
            const textarea = document.createElement('textarea');
            textarea.value = text;
            document.body.appendChild(textarea);
            textarea.select();
            document.execCommand('copy');
            document.body.removeChild(textarea);
            console.log('Teks disalin: ' + text);
        }

        document.addEventListener('DOMContentLoaded', () => {
            const copyButtons = document.querySelectorAll('.copy-button');
            copyButtons.forEach(button => {
                button.addEventListener('click', () => {
                    const textToCopy = button.getAttribute('data-clipboard-text');
                    copyToClipboard(textToCopy);
                });
            });
        });
    </script>
@endpush