@extends('layouts.main')

@section('content')
<div class="pagetitle">
    <h1>Manajemen Withdraw</h1>
    <nav>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ url('/admin/dashboard') }}">Home</a></li>
            <li class="breadcrumb-item active">Withdraw</li>
        </ol>
    </nav>
</div>

<section class="section">

    <!-- Status Cards -->
    <div class="row mb-4">
        <div class="col-xl-3 col-md-6">
            <div class="card bg-primary text-white mb-4">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="me-3">
                            <i class="fas fa-clock fa-2x"></i>
                        </div>
                        <div>
                            <div class="text-white-75 small">Pending</div>
                            <div class="text-lg font-weight-bold">{{ $statusCounts['pending'] }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card bg-warning text-white mb-4">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="me-3">
                            <i class="fas fa-spinner fa-2x"></i>
                        </div>
                        <div>
                            <div class="text-white-75 small">Processing</div>
                            <div class="text-lg font-weight-bold">{{ $statusCounts['processing'] }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card bg-success text-white mb-4">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="me-3">
                            <i class="fas fa-check-circle fa-2x"></i>
                        </div>
                        <div>
                            <div class="text-white-75 small">Completed</div>
                            <div class="text-lg font-weight-bold">{{ $statusCounts['completed'] }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card bg-danger text-white mb-4">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="me-3">
                            <i class="fas fa-times-circle fa-2x"></i>
                        </div>
                        <div>
                            <div class="text-white-75 small">Rejected</div>
                            <div class="text-lg font-weight-bold">{{ $statusCounts['rejected'] }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Filters -->
    <!-- <div class="card mb-4">
        <div class="card-header">
            <i class="fas fa-filter me-1"></i>
            Filter & Pencarian
        </div>
        <div class="card-body">
            <form method="GET" action="{{ route('admin.withdraw.index') }}">
                <div class="row">
                    <div class="col-md-4">
                        <div class="mb-3">
                            <label for="status" class="form-label">Status</label>
                            <select class="form-select" id="status" name="status">
                                <option value="">Semua Status</option>
                                <option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>Pending</option>
                                <option value="processing" {{ request('status') == 'processing' ? 'selected' : '' }}>Processing</option>
                                <option value="completed" {{ request('status') == 'completed' ? 'selected' : '' }}>Completed</option>
                                <option value="rejected" {{ request('status') == 'rejected' ? 'selected' : '' }}>Rejected</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="search" class="form-label">Pencarian</label>
                            <input type="text" class="form-control" id="search" name="search" 
                                   value="{{ request('search') }}" 
                                   placeholder="Cari nama user, email, atau jumlah...">
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="mb-3">
                            <label class="form-label">&nbsp;</label>
                            <button type="submit" class="form-control btn btn-primary">
                                <i class="fas fa-search"></i> Cari
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div> -->

    <!-- Withdraw Requests Table -->
    <div class="card mb-4">
        <div class="card-header">
            <i class="fas fa-table me-1"></i>
            Daftar Permintaan Withdraw
            <!-- <div class="float-end">
                <button class="btn btn-sm btn-success" onclick="exportData()">
                    <i class="fas fa-download"></i> Export Excel
                </button>
            </div> -->
        </div>
        <div class="card-body">
            @if($withdrawRequests->count() > 0)
                <!-- Bulk Actions -->
                <div class="mb-3">
                    <!-- <form id="bulkActionForm" method="POST" action="{{ route('admin.withdraw.bulk-update') }}">
                        @csrf
                        <div class="row align-items-end">
                            <div class="col-md-3">
                                <label for="bulk_status" class="form-label">Action untuk item terpilih:</label>
                                <select class="form-select" id="bulk_status" name="status" required>
                                    <option value="">Pilih Status</option>
                                    <option value="processing">Set ke Processing</option>
                                    <option value="completed">Set ke Completed</option>
                                    <option value="rejected">Set ke Rejected</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label for="bulk_notes" class="form-label">Catatan Admin:</label>
                                <input type="text" class="form-control" id="bulk_notes" name="admin_notes" 
                                       placeholder="Catatan untuk semua item terpilih...">
                            </div>
                            <div class="col-md-3">
                                <button type="submit" class="btn btn-warning" id="bulkActionBtn" disabled>
                                    <i class="fas fa-edit"></i> Update Terpilih
                                </button>
                            </div>
                        </div>
                    </form> -->
                </div>

                <div class="table-responsive">
                    <table class="table table-striped table-hover">
                        <thead class="table-dark">
                            <tr>
                                <th>
                                    <input type="checkbox" id="selectAll" onchange="toggleSelectAll()">
                                </th>
                                <th>ID</th>
                                <th>User</th>
                                <th>Bank</th>
                                <th>Jumlah</th>
                                <th>Status</th>
                                <th>Tanggal</th>
                                <th>Bukti</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($withdrawRequests as $request)
                            <tr>
                                <td>
                                    <input type="checkbox" class="withdraw-checkbox" name="withdraw_ids[]" 
                                           value="{{ $request->id }}" onchange="updateBulkButton()">
                                </td>
                                <td>{{ $request->id }}</td>
                                <td>
                                    <div>
                                        <strong>{{ $request->user->name }}</strong><br>
                                        <small class="text-muted">{{ $request->user->email }}</small>
                                    </div>
                                </td>
                                <td>
                                    <div>
                                        <strong>{{ $request->bankAccount->bank_name }}</strong><br>
                                        <small class="text-muted">{{ $request->bankAccount->maskedAccountNumber }}</small><br>
                                        <small class="text-muted">{{ $request->bankAccount->account_name }}</small>
                                    </div>
                                </td>
                                <td>
                                    <strong class="text-success">{{ $request->formatted_amount }}</strong>
                                </td>
                                <td>
                                    @if($request->status == 'pending')
                                        <span class="badge bg-secondary">{{ $request->status_label }}</span>
                                    @elseif($request->status == 'processing')
                                        <span class="badge bg-warning">{{ $request->status_label }}</span>
                                    @elseif($request->status == 'completed')
                                        <span class="badge bg-success">{{ $request->status_label }}</span>
                                    @else
                                        <span class="badge bg-danger">{{ $request->status_label }}</span>
                                    @endif
                                </td>
                                <td>
                                    <div>
                                        {{ $request->created_at->format('d/m/Y H:i') }}<br>
                                        @if($request->processed_at)
                                            <small class="text-muted">
                                                Diproses: {{ $request->processed_at->format('d/m/Y H:i') }}
                                            </small>
                                        @endif
                                    </div>
                                </td>
                                <td>
                                    @if($request->proof_image_url)
                                        <span class="badge bg-success">
                                            <i class="fas fa-check"></i> Ada
                                        </span>
                                    @else
                                        <span class="badge bg-secondary">
                                            <i class="fas fa-times"></i> Belum
                                        </span>
                                    @endif
                                </td>
                                <td>
                                    <div class="btn-group" role="group">
                                        <a href="{{ route('admin.withdraw.show', $request->id) }}" 
                                           class="btn btn-sm btn-info" title="Detail">
                                            <i class="fas fa-eye">Lihat Detail</i>
                                        </a>
                                        <!-- @if($request->status == 'pending')
                                            <button class="btn btn-sm btn-warning" 
                                                    onclick="quickUpdate({{ $request->id }}, 'processing')" 
                                                    title="Set Processing">
                                                <i class="fas fa-play"></i>
                                            </button>
                                        @endif
                                        @if($request->status == 'processing')
                                            <button class="btn btn-sm btn-success" 
                                                    onclick="quickUpdate({{ $request->id }}, 'completed')" 
                                                    title="Set Completed">
                                                <i class="fas fa-check"></i>
                                            </button>
                                        @endif -->
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <!-- Pagination -->
                <div class="d-flex justify-content-center">
                    {{ $withdrawRequests->appends(request()->query())->links() }}
                </div>
            @else
                <div class="alert alert-info text-center">
                    <i class="fas fa-info-circle me-2"></i>
                    Belum ada permintaan withdraw.
                </div>
            @endif
        </div>
    </div>
</div>

<!-- Quick Update Modal -->
<div class="modal fade" id="quickUpdateModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Update Status Withdraw</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="quickUpdateForm" method="POST">
                @csrf
                @method('PUT')
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="quick_status" class="form-label">Status Baru:</label>
                        <select class="form-select" id="quick_status" name="status" required>
                            <option value="processing">Processing</option>
                            <option value="completed">Completed</option>
                            <option value="rejected">Rejected</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="quick_notes" class="form-label">Catatan Admin:</label>
                        <textarea class="form-control" id="quick_notes" name="admin_notes" rows="3" 
                                  placeholder="Masukkan catatan untuk user..."></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary">Update Status</button>
                </div>
            </form>
        </div>
</section>

@endsection

@section('scripts')
<script>
function toggleSelectAll() {
    const selectAll = document.getElementById('selectAll');
    const checkboxes = document.querySelectorAll('.withdraw-checkbox');
    
    checkboxes.forEach(checkbox => {
        checkbox.checked = selectAll.checked;
    });
    
    updateBulkButton();
}

function updateBulkButton() {
    const checkboxes = document.querySelectorAll('.withdraw-checkbox:checked');
    const bulkBtn = document.getElementById('bulkActionBtn');
    
    bulkBtn.disabled = checkboxes.length === 0;
    
    // Update form with selected IDs
    const form = document.getElementById('bulkActionForm');
    const existingInputs = form.querySelectorAll('input[name="withdraw_ids[]"]');
    existingInputs.forEach(input => input.remove());
    
    checkboxes.forEach(checkbox => {
        const input = document.createElement('input');
        input.type = 'hidden';
        input.name = 'withdraw_ids[]';
        input.value = checkbox.value;
        form.appendChild(input);
    });
}

function quickUpdate(id, status) {
    const modal = new bootstrap.Modal(document.getElementById('quickUpdateModal'));
    const form = document.getElementById('quickUpdateForm');
    
    form.action = `/admin/withdraw/${id}/update-status`;
    document.getElementById('quick_status').value = status;
    
    modal.show();
}

function exportData() {
    window.location.href = '{{ route("admin.withdraw.export") }}?' + new URLSearchParams(window.location.search);
}

// Handle bulk form submission
document.getElementById('bulkActionForm').addEventListener('submit', function(e) {
    const selectedCount = document.querySelectorAll('.withdraw-checkbox:checked').length;
    if (selectedCount === 0) {
        e.preventDefault();
        alert('Pilih minimal 1 item untuk diupdate.');
        return;
    }
    
    if (!confirm(`Apakah Anda yakin ingin mengupdate ${selectedCount} item yang dipilih?`)) {
        e.preventDefault();
    }
});
</script>
@endsection