@extends('layouts.super_admin')

@section('title', 'Daftar Transaksi Token')

@section('content')
<!-- Stats Cards Row -->
<div class="row g-3 mb-4">
    <div class="col-lg-4 col-md-6">
        <div class="stat-card">
            <div class="stat-image">
                <div class="stat-icon primary">
                    <i class="bi bi-receipt"></i>
                </div>
            </div>
            <div class="stat-info">
                <div class="stat-value">{{ number_format($totalOrders) }}</div>
                <div class="stat-label">Total Pesanan</div>
            </div>
        </div>
    </div>
    <div class="col-lg-4 col-md-6">
        <div class="stat-card">
            <div class="stat-image">
                <div class="stat-icon warning">
                    <i class="bi bi-clock"></i>
                </div>
            </div>
            <div class="stat-info">
                <div class="stat-value">{{ number_format($pendingOrders) }}</div>
                <div class="stat-label">Pending</div>
            </div>
        </div>
    </div>
    <div class="col-lg-4 col-md-6">
        <div class="stat-card">
            <div class="stat-image">
                <div class="stat-icon success">
                    <i class="bi bi-check-circle"></i>
                </div>
            </div>
            <div class="stat-info">
                <div class="stat-value">{{ number_format($completedOrders) }}</div>
                <div class="stat-label">Completed</div>
            </div>
        </div>
    </div>
    <div class="col-lg-12 col-md-6">
        <div class="stat-card">
            <div class="stat-image">
                <div class="stat-icon info">
                    <i class="bi bi-cash"></i>
                </div>
            </div>
            <div class="stat-info">
                @php
                // Taruh di mana aja, misal AppServiceProvider atau Helper file
                function formatCurrency($number) {
                    if ($number >= 1_000_000_000) {
                        return 'Rp ' . number_format($number / 1_000_000_000, 1, ',', '.') . 'B';
                    } elseif ($number >= 1_000_000) {
                        return 'Rp ' . number_format($number / 1_000_000, 1, ',', '.') . 'M';
                    }
                    
                    return 'Rp ' . number_format($number, 0, ',', '.');
                }
                @endphp
                <div class="stat-value">{{ formatCurrency($totalRevenue)}}</div>
                <div class="stat-label">Total Revenue</div>
            </div>
        </div>
    </div>
</div>

<!-- Search & Filter Row -->
<div class="card mb-4 border shadow-none">
    <div class="card-body px-4 py-3">

        {{-- Header label --}}
        <div class="d-flex align-items-center gap-2 mb-3">
            <div style="width: 3px; height: 16px; background: #185FA5; border-radius: 2px;"></div>
            <span class="text-muted fw-medium" style="font-size: 13px; letter-spacing: 0.03em;">Filter Transaksi</span>
        </div>

        <form method="GET" action="{{ route('super-admin.token.transactions') }}"
              class="row g-3 align-items-end" autocomplete="off">
            @php
                $statuses = ['pending' => 'Pending', 'completed' => 'Completed', 'cancelled' => 'Cancelled'];
            @endphp

            {{-- Search --}}
            <div class="col-md-3">
                <label for="search" class="form-label small fw-medium text-muted mb-1">Cari LBB</label>
                <div class="input-group input-group-sm">
                    <span class="input-group-text bg-light border-end-0">
                        <i class="bi bi-search text-muted"></i>
                    </span>
                    <input type="text" id="search" name="search"
                           class="form-control form-control-sm bg-light border-start-0 ps-0"
                           placeholder="Nama LBB..."
                           value="{{ request('search') }}">
                </div>
            </div>

            {{-- Filter LBB --}}
            <div class="col-md-3">
                <label for="lbb_id" class="form-label small fw-medium text-muted mb-1">Filter LBB</label>
                <select id="lbb_id" name="lbb_id" class="form-select form-select-sm bg-light">
                    <option value="">Semua LBB</option>
                    @foreach($lbbs as $lbb)
                        <option value="{{ $lbb->id }}" {{ request('lbb_id') == $lbb->id ? 'selected' : '' }}>
                            {{ $lbb->name }}
                        </option>
                    @endforeach
                </select>
            </div>

            {{-- Status --}}
            <div class="col-md-3">
                <label for="status" class="form-label small fw-medium text-muted mb-1">Status</label>
                <select id="status" name="status" class="form-select form-select-sm bg-light">
                    <option value="">Semua Status</option>
                    @foreach($statuses as $value => $label)
                        <option value="{{ $value }}" {{ request('status') === $value ? 'selected' : '' }}>
                            {{ $label }}
                        </option>
                    @endforeach
                </select>
            </div>

            {{-- Actions --}}
            <div class="col-md-3">
                <div class="d-flex gap-2">
                    <button type="submit" class="btn btn-primary btn-sm flex-grow-1">
                        <i class="bi bi-funnel me-1"></i> Filter
                    </button>
                    <a href="{{ route('super-admin.token.transactions') }}"
                       class="btn btn-danger btn-sm"
                       title="Reset filter">
                        <i class="bi bi-arrow-counterclockwise"></i>
                    </a>
                </div>
            </div>

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

<!-- List Transaksi Token -->
<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <div>
            <i class="bi bi-list-ul me-2 text-info"></i>
            Daftar Transaksi Token
            <span class="badge badge-info ms-2">{{ $orders->total() }}</span>
        </div>
    </div>
    <div class="card-body p-0">
        @if($orders->count() > 0)
        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead>
                    <tr>
                        <th style="width: 80px;">No</th>
                        <th>LBB</th>
                        <th>Tanggal</th>
                        <th>Token</th>
                        <th>Total (Rp)</th>
                        <th>Status</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($orders as $order)
                    <tr>
                        <td>
                            {{ $loop->iteration + ($orders->currentPage() - 1) * $orders->perPage() }}
                        </td>
                        <td>
                            <div class="d-flex align-items-center gap-2">
                                <div class="fw-bold">{{ $order->lbb->name }}</div>
                            </div>
                        </td>
                        <td>
                            <div>{{ $order->date ? $order->date->format('d M Y') : '-' }}</div>
                        </td>
                        <td>
                            <div class="text-primary">{{ number_format($order->token_amount) }}</div>
                        </td>
                        <td>
                            <div class="money-display">Rp {{ number_format($order->total_price, 0, ',', '.') }}</div>
                        </td>
                        <td>
                            @if($order->status === 'completed')
                                <span class="badge badge-success">Completed</span>
                            @elseif($order->status === 'pending')
                                <span class="badge badge-info">Pending</span>
                            @elseif($order->status === 'verification')
                                <span class="badge badge-warning">Verification</span>
                            @else
                                <span class="badge badge-danger">Cancelled</span>
                            @endif
                        </td>
                        <td>
                            <button class="btn btn-sm btn-info" 
                                onclick='showOrderDetailModal(
                                {{ $order->id }}, 
                                 "{{ $order->lbb->name }}", 
                                 "{{ $order->date ? $order->date->format('d M Y') : '-' }}", 
                                 {{ $order->token_amount }}, 
                                 {{ $order->token_price }}, 
                                 {{ $order->total_price }}, 
                                 "{{ $order->status }}", 
                                 "{{ $order->notes ?? '' }}", 
                                 "{{ $order->user ? $order->user->name : '-' }}", 
                                 "{{ $order->proof_url ?? '' }}", 
                                 "{{ $order->admin_notes ?? '' }}"
                                )'>
                                <i class="bi bi-eye"></i>
                            </button>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        @else
            <div class="text-center py-5">
                <i class="bi bi-inbox fs-1 text-muted"></i>
                <p class="text-muted mt-3">Tidak ada data transaksi</p>
            </div>
        @endif
    </div>
    <!-- Pagination -->
    <div class="card-footer d-flex justify-content-between align-items-center">
        <div class="d-flex align-items-center">
            <span class="me-2">Tampilkan:</span>
            <select class="form-select form-select-sm" style="width: auto;" onchange="changePerPage(this.value)">
                <option value="5" {{ request('per_page') == 5 ? 'selected' : '' }}>5</option>
                <option value="10" {{ request('per_page') == 10 || !request('per_page') ? 'selected' : '' }}>10</option>
                <option value="20" {{ request('per_page') == 20 ? 'selected' : '' }}>20</option>
                <option value="50" {{ request('per_page') == 50 ? 'selected' : '' }}>50</option>
                <option value="100" {{ request('per_page') == 100 ? 'selected' : '' }}>100</option>
            </select>
            <span class="ms-2">per halaman</span>
        </div>
        <nav>
            <ul class="pagination pagination-sm mb-0">
                @if($orders->onFirstPage())
                    <li class="page-item disabled">
                        <span class="page-link"><i class="bi bi-chevron-left"></i></span>
                    </li>
                @else
                    <li class="page-item">
                        <a class="page-link" href="{{ $orders->appends(request()->query())->previousPageUrl() }}"><i class="bi bi-chevron-left"></i></a>
                    </li>
                @endif
                
                @foreach($orders->getUrlRange(1, $orders->lastPage()) as $page => $url)
                    @if($page == $orders->currentPage())
                        <li class="page-item active">
                            <span class="page-link">{{ $page }}</span>
                        </li>
                    @elseif($page == 1 || $page == $orders->lastPage() || ($page >= $orders->currentPage() - 1 && $page <= $orders->currentPage() + 1))
                        <li class="page-item">
                            <a class="page-link" href="{{ $orders->appends(request()->query())->url($page) }}">{{ $page }}</a>
                        </li>
                    @elseif($page == $orders->currentPage() - 2 || $page == $orders->currentPage() + 2)
                        <li class="page-item disabled">
                            <span class="page-link">...</span>
                        </li>
                    @endif
                @endforeach

                @if($orders->hasMorePages())
                    <li class="page-item">
                        <a class="page-link" href="{{ $orders->appends(request()->query())->nextPageUrl() }}"><i class="bi bi-chevron-right"></i></a>
                    </li>
                @else
                    <li class="page-item disabled">
                        <span class="page-link"><i class="bi bi-chevron-right"></i></span>
                    </li>
                @endif
            </ul>
        </nav>
    </div>
</div>

<!-- Order Detail Modal -->
<div class="modal fade" id="orderDetailModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="bi bi-receipt text-primary me-2"></i>
                    Detail Transaksi Token
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="row g-4">
                    <!-- Order Information -->
                    <div class="col-lg-7">
                        <div class="card h-100 border-0" style="background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);">
                            <div class="card-body">
                                <h6 class="card-title mb-3">
                                    <i class="bi bi-info-circle text-primary me-2"></i>
                                    Informasi Order
                                </h6>
                                <div class="row g-3">
                                    <div class="col-md-6">
                                        <label class="form-label text-muted small">Order ID</label>
                                        <div class="fw-bold fs-6" id="detailOrderId">-</div>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label text-muted small">Tanggal Order</label>
                                        <div class="fw-bold" id="detailDate">-</div>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label text-muted small">LBB</label>
                                        <div class="fw-bold" id="detailLbb">-</div>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label text-muted small">Dibuat Oleh</label>
                                        <div class="fw-bold" id="detailUser">-</div>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label text-muted small">Jumlah Token</label>
                                        <div class="fw-bold text-primary fs-5" id="detailTokenAmount">-</div>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label text-muted small">Harga per Token</label>
                                        <div class="fw-bold" id="detailTokenPrice">-</div>
                                    </div>
                                    <div class="col-12">
                                        <label class="form-label text-muted small">Catatan</label>
                                        <div class="p-2 bg-white rounded" style="min-height: 40px;" id="detailNotes">-</div>
                                    </div>
                                    <!-- No Proof Warning -->
                                    <div class="col-12" id="noProofContainer" style="display: none;">
                                        <label class="form-label text-muted small">Bukti Transfer Tenant</label>
                                        <div class="alert alert-warning d-flex align-items-center gap-3">
                                            <i class="bi bi-exclamation-triangle-fill fs-4"></i>
                                            <div>
                                                <div class="fw-bold mb-1">Belum Ada Bukti</div>
                                                <span>Tenant belum mengupload bukti transfer</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Payment Summary -->
                    <div class="col-lg-5">
                        <div class="card border-0" style="background: linear-gradient(135deg, #e8f4f8 0%, #d1e7dd 100%);">
                            <div class="card-body p-4">
                                <h6 class="card-title mb-3">
                                    <i class="bi bi-image text-info me-2"></i>
                                    Bukti Transfer Tenant
                                </h6>
                                <div class="d-flex align-items-center gap-4">
                                    <div class="flex-grow-1">
                                        <div class="position-relative">
                                            <img id="proofImage" src="" alt="Bukti Transfer" class="rounded shadow-lg" style="width: 250px; height: 250px; object-fit: cover; border: 4px solid #0d6efd; cursor: pointer; transition: transform 0.3s;" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'">
                                            <a id="proofImageLink" href="" target="_blank" class="position-absolute top-0 start-0 w-100 h-100" style="opacity: 0;"></a>
                                        </div>
                                        <div class="mb-3">
                                            <a id="proofFullLink" href="" target="_blank" class="btn btn-primary btn-lg">
                                                <i class="bi bi-eye me-1"></i>
                                                Lihat Full Size
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Proof Display -->
                    <div class="col-12" id="proofContainer" style="display: none;">
                        <div class="card h-100 border-0" style="background: linear-gradient(90deg,#302ea1 1%, #4b81a2 90%); color: white;">
                            <div class="card-body">
                                <h6 class="card-title mb-3">
                                    <i class="bi bi-cash-stack me-2"></i>
                                    Ringkasan Pembayaran
                                </h6>
                                <div class="d-flex justify-content-between mb-3">
                                    <span style="opacity: 0.8;">Jumlah Token</span>
                                    <span class="fw-bold fs-5" id="detailTokenDisplay">-</span>
                                </div>
                                <div class="d-flex justify-content-between mb-3">
                                    <span style="opacity: 0.8;">Harga per Token</span>
                                    <span class="fw-bold" id="detailPriceDisplay">-</span>
                                </div>
                                <hr style="border-color: rgba(255,255,255,0.3);">
                                <div class="d-flex justify-content-between mb-3">
                                    <span class="fw-bold fs-5">Total Pembayaran</span>
                                    <span class="fw-bold fs-4" style="color: #00ff88;" id="detailTotalPrice">-</span>
                                </div>
                                <div class="d-flex justify-content-between align-items-center">
                                    <span style="opacity: 0.8;">Status</span>
                                    <span id="detailStatusBadge">-</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer" id="detailModalFooter">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
            </div>
        </div>
    </div>
</div>

<!-- ============================================================ -->
<!-- REJECT REASON OVERLAY (BUKAN BOOTSTRAP MODAL)               -->
<!-- Dibuat sebagai fixed overlay di luar semua modal Bootstrap  -->
<!-- ============================================================ -->
<div id="rejectOverlay" style="
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.6);
    z-index: 999999;
    align-items: center;
    justify-content: center;
">
    <div id="rejectBox" style="
        background: #fff;
        border-radius: 14px;
        padding: 28px 28px 22px 28px;
        width: 100%;
        max-width: 460px;
        margin: 16px;
        box-shadow: 0 20px 60px rgba(0,0,0,0.3);
        position: relative;
    ">
        <!-- Header -->
        <div style="display:flex; align-items:center; gap:12px; margin-bottom:20px;">
            <div style="
                width: 42px; height: 42px;
                border-radius: 50%;
                background: #FEE2E2;
                display: flex; align-items: center; justify-content: center;
                flex-shrink: 0;
            ">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
                    <circle cx="12" cy="12" r="10" stroke="#EF4444" stroke-width="2"/>
                    <path d="M12 7v6M12 16v1" stroke="#EF4444" stroke-width="2" stroke-linecap="round"/>
                </svg>
            </div>
            <div>
                <div style="font-size:16px; font-weight:700; color:#111;">Tolak Order?</div>
                <div style="font-size:13px; color:#888;">Order akan ditandai sebagai cancelled</div>
            </div>
            <button onclick="cancelReject()" style="
                margin-left: auto;
                background: none;
                border: none;
                font-size: 20px;
                color: #aaa;
                cursor: pointer;
                line-height: 1;
                padding: 0 4px;
            ">&times;</button>
        </div>

        <!-- Label -->
        <label style="font-size:13px; font-weight:600; color:#444; display:block; margin-bottom:8px;">
            Alasan Penolakan <span style="color:#EF4444;">*</span>
        </label>

        <!-- Textarea — STANDALONE, tidak di dalam form atau modal Bootstrap -->
        <textarea
            id="rejectReasonTextarea"
            rows="5"
            placeholder="Masukkan alasan penolakan..."
            style="
                display: block;
                width: 100%;
                box-sizing: border-box;
                border: 1.5px solid #d1d5db;
                border-radius: 8px;
                padding: 10px 14px;
                font-size: 14px;
                font-family: inherit;
                color: #111;
                background: #fff;
                resize: vertical;
                outline: none;
                transition: border-color 0.2s;
                pointer-events: auto;
                -webkit-user-select: text;
                user-select: text;
            "
            onfocus="this.style.borderColor='#3B82F6'"
            onblur="this.style.borderColor='#d1d5db'"
        ></textarea>

        <!-- Error message -->
        <div id="rejectReasonErrMsg" style="
            display: none;
            color: #EF4444;
            font-size: 12px;
            margin-top: 6px;
        ">Silakan isi alasan penolakan terlebih dahulu.</div>

        <!-- Footer buttons -->
        <div style="display:flex; justify-content:flex-end; gap:10px; margin-top:20px;">
            <button onclick="cancelReject()" style="
                border:1.5px solid #d1d5db;
                background: #fff;
                color: #555;
                border-radius: 8px;
                padding: 9px 22px;
                font-size: 14px;
                cursor: pointer;
                font-family: inherit;
            ">Batal</button>
            <button onclick="submitRejectFromOverlay()" style="
                background: #EF4444;
                color: #fff;
                border: none;
                border-radius: 8px;
                padding: 9px 22px;
                font-size: 14px;
                font-weight: 600;
                cursor: pointer;
                font-family: inherit;
            ">Ya, Tolak</button>
        </div>
    </div>
</div>

<script>
// -------------------------------------------------------
// GLOBAL STATE
// -------------------------------------------------------
var _currentRejectOrderId = null;
var _orderDetailModalInstance = null;

// -------------------------------------------------------
// CHANGE PER PAGE
// -------------------------------------------------------
function changePerPage(perPage) {
    const urlParams = new URLSearchParams(window.location.search);
    urlParams.set('per_page', perPage);
    urlParams.delete('page');
    window.location.href = window.location.pathname + '?' + urlParams.toString();
}

// -------------------------------------------------------
// SHOW ORDER DETAIL MODAL
// -------------------------------------------------------
function showOrderDetailModal(orderId, lbbName, date, tokenAmount, tokenPrice, totalPrice, status, notes, userName, proofUrl, adminNotes) {
    document.getElementById('detailOrderId').textContent = '#' + orderId;
    document.getElementById('detailDate').textContent = date;
    document.getElementById('detailLbb').textContent = lbbName;
    document.getElementById('detailUser').textContent = userName;
    document.getElementById('detailTokenAmount').textContent = tokenAmount.toLocaleString('id-ID') + ' Token';
    document.getElementById('detailTokenPrice').textContent = 'Rp ' + tokenPrice.toLocaleString('id-ID');
    document.getElementById('detailNotes').textContent = notes || '-';
    document.getElementById('detailTokenDisplay').textContent = tokenAmount.toLocaleString('id-ID');
    document.getElementById('detailPriceDisplay').textContent = 'Rp ' + tokenPrice.toLocaleString('id-ID');
    document.getElementById('detailTotalPrice').textContent = 'Rp ' + totalPrice.toLocaleString('id-ID');

    // Status badge
    const statusBadge = document.getElementById('detailStatusBadge');
    if (status === 'completed') {
        statusBadge.innerHTML = '<span class="badge badge-success">Completed</span>';
    } else if (status === 'pending') {
        statusBadge.innerHTML = '<span class="badge badge-info">Pending</span>';
    } else if (status === 'verification') {
        statusBadge.innerHTML = '<span class="badge badge-warning">Verification</span>';
    } else {
        statusBadge.innerHTML = '<span class="badge badge-danger">Cancelled</span>';
    }

    // Proof image
    const proofContainer = document.getElementById('proofContainer');
    const noProofContainer = document.getElementById('noProofContainer');
    if (proofUrl) {
        proofContainer.style.display = 'block';
        noProofContainer.style.display = 'none';
        document.getElementById('proofImage').src = proofUrl;
        document.getElementById('proofImageLink').href = proofUrl;
        document.getElementById('proofFullLink').href = proofUrl;
    } else {
        proofContainer.style.display = 'none';
        noProofContainer.style.display = 'block';
    }

    // Footer buttons
    const footer = document.getElementById('detailModalFooter');
    let footerHtml = '<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>';

    if (status === 'verification' || status === 'pending') {
        if (proofUrl) {
            footerHtml += `
                <button type="button" class="btn btn-success" onclick="confirmApprove(${orderId})">
                    <i class="bi bi-check-circle me-1"></i> Setujui
                </button>
                <button type="button" class="btn btn-danger" onclick="confirmReject(${orderId})">
                    <i class="bi bi-x-circle me-1"></i> Tolak
                </button>
            `;
        } else {
            footerHtml += `
                <div class="alert alert-warning d-flex align-items-center gap-2 mb-0">
                    <i class="bi bi-exclamation-triangle-fill"></i>
                    <span>Tenant belum mengupload bukti transfer</span>
                </div>
            `;
        }
    } else if (status === 'completed' && proofUrl) {
        footerHtml += `
            <button type="button" class="btn btn-primary" onclick="viewProof('${proofUrl}')">
                <i class="bi bi-image me-1"></i> Lihat Bukti
            </button>
        `;
    }

    footer.innerHTML = footerHtml;

    // Create and store modal instance
    _orderDetailModalInstance = new bootstrap.Modal(document.getElementById('orderDetailModal'));
    _orderDetailModalInstance.show();
}

// -------------------------------------------------------
// CONFIRM APPROVE
// -------------------------------------------------------
function confirmApprove(orderId) {
    AppAlert.update(
        'Setujui Order?',
        'Order ini akan ditandai sebagai completed dan token akan diinject ke LBB.',
        function() {
            submitOrderStatus(orderId, 'completed');
        }
    );
}

// -------------------------------------------------------
// CONFIRM REJECT — buka overlay custom
// -------------------------------------------------------
function confirmReject(orderId) {
    _currentRejectOrderId = orderId;

    // Reset form
    document.getElementById('rejectReasonTextarea').value = '';
    document.getElementById('rejectReasonErrMsg').style.display = 'none';

    // Sembunyikan modal Bootstrap agar tidak mengganggu input
    if (_orderDetailModalInstance) {
        _orderDetailModalInstance.hide();
        // Hapus backdrop Bootstrap
        var backdrops = document.querySelectorAll('.modal-backdrop');
        backdrops.forEach(function(backdrop) {
            backdrop.remove();
        });
    }

    // Tampilkan overlay
    var overlay = document.getElementById('rejectOverlay');
    overlay.style.display = 'flex';

    // Focus textarea setelah overlay muncul
    setTimeout(function() {
        var ta = document.getElementById('rejectReasonTextarea');
        if (ta) {
            ta.focus();
            // Paksa enable interaksi
            ta.removeAttribute('disabled');
            ta.removeAttribute('readonly');
        }
    }, 100);
}

// -------------------------------------------------------
// CLOSE REJECT OVERLAY
// -------------------------------------------------------
function closeRejectOverlay() {
    document.getElementById('rejectOverlay').style.display = 'none';
    // JANGAN reset _currentRejectOrderId di sini
    // Hanya reset saat user benar-benar batal lewat cancelReject()
}

// -------------------------------------------------------
// CANCEL REJECT — batal dan reset orderId
// -------------------------------------------------------
function cancelReject() {
    closeRejectOverlay();
    _currentRejectOrderId = null; // Reset saat user klik tombol Batal
}

// Klik di luar box = tutup overlay DAN reset orderId
document.getElementById('rejectOverlay').addEventListener('click', function(e) {
    if (e.target === this) {
        closeRejectOverlay();
        _currentRejectOrderId = null; // Reset saat user benar-benar batal
    }
});

// Cegah klik di dalam box menutup overlay
document.getElementById('rejectBox').addEventListener('click', function(e) {
    e.stopPropagation();
});

// -------------------------------------------------------
// SUBMIT REJECT DARI OVERLAY
// -------------------------------------------------------
function submitRejectFromOverlay() {
    var ta = document.getElementById('rejectReasonTextarea');
    var errMsg = document.getElementById('rejectReasonErrMsg');

    if (!ta.value.trim()) {
        errMsg.style.display = 'block';
        ta.focus();
        return;
    }

    errMsg.style.display = 'none';
    closeRejectOverlay();
    submitOrderStatus(_currentRejectOrderId, 'cancelled', ta.value.trim());
    _currentRejectOrderId = null; // Reset setelah submit
}

// Sembunyikan error saat mulai mengetik
document.getElementById('rejectReasonTextarea').addEventListener('input', function() {
    document.getElementById('rejectReasonErrMsg').style.display = 'none';
});

// Submit dengan Enter+Ctrl (opsional convenience)
document.getElementById('rejectReasonTextarea').addEventListener('keydown', function(e) {
    if (e.key === 'Enter' && e.ctrlKey) {
        submitRejectFromOverlay();
    }
});

// -------------------------------------------------------
// SUBMIT ORDER STATUS
// -------------------------------------------------------
function submitOrderStatus(orderId, status, reason) {
    var form = document.createElement('form');
    form.method = 'POST';
    form.action = window.location.origin + '/super-admin/token/order/' + orderId + '/status';

    var csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

    var csrfInput = document.createElement('input');
    csrfInput.type = 'hidden';
    csrfInput.name = '_token';
    csrfInput.value = csrfToken;
    form.appendChild(csrfInput);

    var statusInput = document.createElement('input');
    statusInput.type = 'hidden';
    statusInput.name = 'status';
    statusInput.value = status;
    form.appendChild(statusInput);

    if (reason && reason.trim() != '') {
        var notesInput = document.createElement('input');
        notesInput.type = 'hidden';
        notesInput.name = 'admin_notes';
        notesInput.value = reason.trim();
        form.appendChild(notesInput);
    }

    document.body.appendChild(form);
    form.submit();
}

// -------------------------------------------------------
// VIEW PROOF IMAGE
// -------------------------------------------------------
function viewProof(url) {
    Swal.fire({
        title: 'Bukti Pembayaran',
        imageUrl: url,
        imageWidth: 400,
        imageAlt: 'Bukti Pembayaran',
        confirmButtonColor: '#3B82F6',
    });
}

// -------------------------------------------------------
// SHOW ADMIN NOTES
// -------------------------------------------------------
function showAdminNotes(notes) {
    Swal.fire({
        title: 'Catatan Admin',
        text: notes,
        icon: 'info',
        confirmButtonColor: '#3B82F6',
    });
}
</script>
@endsection