@extends('admin.layouts.app')

@section('title', 'Riwayat Penarikan Dana')

@section('content')
<div class="bg-white shadow-md rounded-lg overflow-hidden">
    <div class="p-6">
        <h2 class="text-xl font-semibold text-gray-800 mb-4">Riwayat Penarikan Dana</h2>
        
        @if (session('success'))
            <div class="bg-green-100 border-l-4 border-green-500 text-green-700 p-4 mb-4" role="alert">
                <p>{{ session('success') }}</p>
            </div>
        @endif
        
        @if (session('error'))
            <div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 mb-4" role="alert">
                <p>{{ session('error') }}</p>
            </div>
        @endif
        
        <div class="mb-6">
            <form action="{{ route('admin.withdrawals.history') }}" method="GET" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                <div>
                    <label for="status" class="block text-sm font-medium text-gray-700 mb-1">Status</label>
                    <select id="status" name="status" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500">
                        <option value="">Semua</option>
                        <option value="completed" {{ request('status') == 'completed' ? 'selected' : '' }}>Selesai</option>
                        <option value="rejected" {{ request('status') == 'rejected' ? 'selected' : '' }}>Ditolak</option>
                    </select>
                </div>
                
                <div>
                    <label for="search" class="block text-sm font-medium text-gray-700 mb-1">Cari</label>
                    <input type="text" id="search" name="search" value="{{ request('search') }}" placeholder="Nama, no rekening, bank..." class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500">
                </div>
                
                <div>
                    <label for="from_date" class="block text-sm font-medium text-gray-700 mb-1">Dari Tanggal</label>
                    <input type="date" id="from_date" name="from_date" value="{{ request('from_date') }}" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500">
                </div>
                
                <div>
                    <label for="to_date" class="block text-sm font-medium text-gray-700 mb-1">Sampai Tanggal</label>
                    <input type="date" id="to_date" name="to_date" value="{{ request('to_date') }}" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500">
                </div>
                
                <div>
                    <label for="sort_by" class="block text-sm font-medium text-gray-700 mb-1">Urutkan Berdasarkan</label>
                    <select id="sort_by" name="sort_by" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500">
                        <option value="processed_at" {{ request('sort_by') == 'processed_at' || !request('sort_by') ? 'selected' : '' }}>Tanggal Diproses</option>
                        <option value="created_at" {{ request('sort_by') == 'created_at' ? 'selected' : '' }}>Tanggal Dibuat</option>
                        <option value="amount" {{ request('sort_by') == 'amount' ? 'selected' : '' }}>Jumlah</option>
                    </select>
                </div>
                
                <div>
                    <label for="sort_order" class="block text-sm font-medium text-gray-700 mb-1">Arah Urutan</label>
                    <select id="sort_order" name="sort_order" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500">
                        <option value="desc" {{ request('sort_order') == 'desc' || !request('sort_order') ? 'selected' : '' }}>Turun (Z-A)</option>
                        <option value="asc" {{ request('sort_order') == 'asc' ? 'selected' : '' }}>Naik (A-Z)</option>
                    </select>
                </div>
                
                <div>
                    <label for="per_page" class="block text-sm font-medium text-gray-700 mb-1">Item per Halaman</label>
                    <select id="per_page" name="per_page" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500">
                        <option value="15" {{ request('per_page') == '15' || !request('per_page') ? 'selected' : '' }}>15</option>
                        <option value="25" {{ request('per_page') == '25' ? 'selected' : '' }}>25</option>
                        <option value="50" {{ request('per_page') == '50' ? 'selected' : '' }}>50</option>
                        <option value="100" {{ request('per_page') == '100' ? 'selected' : '' }}>100</option>
                    </select>
                </div>
                
                <div class="md:col-span-2 flex items-end">
                    <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">
                        Filter
                    </button>
                    <a href="{{ route('admin.withdrawals.history') }}" class="ml-2 px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300">
                        Reset
                    </a>
                </div>
            </form>
        </div>
        
        @if(empty($withdrawalHistory['data']))
            <div class="text-center py-8">
                <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                </svg>
                <h3 class="mt-2 text-sm font-medium text-gray-900">Tidak ada riwayat penarikan</h3>
                <p class="mt-1 text-sm text-gray-500">Tidak ada data penarikan yang selesai atau ditolak.</p>
            </div>
        @else
            <div class="overflow-x-auto">
                <table class="min-w-full bg-white">
                    <thead class="bg-gray-100">
                        <tr>
                            <th class="py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th>
                            <th class="py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nama Penjahit</th>
                            <th class="py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Bank</th>
                            <th class="py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">No. Rekening</th>
                            <th class="py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Jumlah</th>
                            <th class="py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                            <th class="py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tgl. Diproses</th>
                            <th class="py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tgl. Dibuat</th>
                            <th class="py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Detail</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200">
                        @foreach($withdrawalHistory['data'] as $withdrawal)
                            <tr>
                                <td class="py-4 px-4 text-sm text-gray-900">{{ $withdrawal['id'] }}</td>
                                <td class="py-4 px-4 text-sm text-gray-900">{{ $withdrawal['wallet']['user']['name'] }}</td>
                                <td class="py-4 px-4 text-sm text-gray-900">{{ $withdrawal['bank_account']['bank_name'] }}</td>
                                <td class="py-4 px-4 text-sm text-gray-900">{{ $withdrawal['bank_account']['account_number'] }}</td>
                                <td class="py-4 px-4 text-sm text-gray-900">Rp {{ number_format($withdrawal['amount'], 0, ',', '.') }}</td>
                                <td class="py-4 px-4 text-sm">
                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full 
                                        @if($withdrawal['status'] == 'completed') bg-green-100 text-green-800
                                        @elseif($withdrawal['status'] == 'rejected') bg-red-100 text-red-800
                                        @endif">
                                        @if($withdrawal['status'] == 'completed') Selesai
                                        @elseif($withdrawal['status'] == 'rejected') Ditolak
                                        @else {{ ucfirst($withdrawal['status']) }}
                                        @endif
                                    </span>
                                </td>
                                <td class="py-4 px-4 text-sm text-gray-900">{{ \Carbon\Carbon::parse($withdrawal['processed_at'])->format('d M Y H:i') }}</td>
                                <td class="py-4 px-4 text-sm text-gray-900">{{ \Carbon\Carbon::parse($withdrawal['created_at'])->format('d M Y H:i') }}</td>
                                <td class="py-4 px-4 text-sm text-gray-900">
                                    <button 
                                        type="button" 
                                        class="text-blue-600 hover:text-blue-900"
                                        onclick="showWithdrawalDetail({{ json_encode($withdrawal) }})"
                                    >
                                        Lihat
                                    </button>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            
            <!-- Pagination -->
            <div class="mt-4">
                <nav class="flex items-center justify-between">
                    <div class="flex-1 flex justify-between sm:hidden">
                        @if($withdrawalHistory['prev_page_url'])
                            <a href="{{ $withdrawalHistory['prev_page_url'] }}" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                                Sebelumnya
                            </a>
                        @else
                            <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-500 bg-gray-100 cursor-not-allowed">
                                Sebelumnya
                            </span>
                        @endif
                        
                        @if($withdrawalHistory['next_page_url'])
                            <a href="{{ $withdrawalHistory['next_page_url'] }}" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                                Selanjutnya
                            </a>
                        @else
                            <span class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-500 bg-gray-100 cursor-not-allowed">
                                Selanjutnya
                            </span>
                        @endif
                    </div>
                    <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
                        <div>
                            <p class="text-sm text-gray-700">
                                Menampilkan 
                                <span class="font-medium">{{ $withdrawalHistory['from'] ?? 0 }}</span>
                                sampai 
                                <span class="font-medium">{{ $withdrawalHistory['to'] ?? 0 }}</span>
                                dari 
                                <span class="font-medium">{{ $withdrawalHistory['total'] ?? 0 }}</span>
                                hasil
                            </p>
                        </div>
                        <div>
                            <span class="relative z-0 inline-flex shadow-sm rounded-md">
                                @foreach($withdrawalHistory['links'] as $link)
                                    @if($link['url'] === null)
                                        <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-gray-100 text-sm font-medium text-gray-500 cursor-not-allowed">
                                            {!! $link['label'] !!}
                                        </span>
                                    @else
                                        <a 
                                            href="{{ $link['url'] }}" 
                                            class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium {{ $link['active'] ? 'bg-blue-100 text-blue-700' : 'text-gray-700 hover:bg-gray-50' }}"
                                            aria-current="{{ $link['active'] ? 'page' : '' }}"
                                        >
                                            {!! $link['label'] !!}
                                        </a>
                                    @endif
                                @endforeach
                            </span>
                        </div>
                    </div>
                </nav>
            </div>
        @endif
    </div>
</div>

<!-- Modal Detail Penarikan -->
<div id="withdrawalDetailModal" class="fixed inset-0 z-50 hidden overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
    <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div>
        <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
        <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
            <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                <div class="sm:flex sm:items-start">
                    <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
                        <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">
                            Detail Penarikan Dana
                        </h3>
                        <div class="mt-4 border-t border-gray-200 pt-4">
                            <div class="grid grid-cols-1 gap-y-4">
                                <div class="grid grid-cols-2 gap-4">
                                    <div>
                                        <p class="text-sm text-gray-500">ID Penarikan</p>
                                        <p class="font-medium" id="withdrawal-id"></p>
                                    </div>
                                    <div>
                                        <p class="text-sm text-gray-500">Status</p>
                                        <p class="font-medium" id="withdrawal-status"></p>
                                    </div>
                                </div>
                                
                                <div>
                                    <p class="text-sm text-gray-500">Nama Penjahit</p>
                                    <p class="font-medium" id="tailor-name"></p>
                                </div>
                                
                                <div class="grid grid-cols-2 gap-4">
                                    <div>
                                        <p class="text-sm text-gray-500">Bank</p>
                                        <p class="font-medium" id="bank-name"></p>
                                    </div>
                                    <div>
                                        <p class="text-sm text-gray-500">Nomor Rekening</p>
                                        <p class="font-medium" id="account-number"></p>
                                    </div>
                                </div>
                                
                                <div>
                                    <p class="text-sm text-gray-500">Atas Nama</p>
                                    <p class="font-medium" id="account-holder"></p>
                                </div>
                                
                                <div>
                                    <p class="text-sm text-gray-500">Jumlah Penarikan</p>
                                    <p class="font-medium" id="amount"></p>
                                </div>
                                
                                <div class="grid grid-cols-2 gap-4">
                                    <div>
                                        <p class="text-sm text-gray-500">Tanggal Dibuat</p>
                                        <p class="font-medium" id="created-at"></p>
                                    </div>
                                    <div>
                                        <p class="text-sm text-gray-500">Tanggal Diproses</p>
                                        <p class="font-medium" id="processed-at"></p>
                                    </div>
                                </div>
                                
                                <div id="rejection-container" class="hidden">
                                    <p class="text-sm text-gray-500">Alasan Penolakan</p>
                                    <p class="font-medium text-red-600" id="rejection-reason"></p>
                                </div>
                                
                                <div id="proof-container" class="hidden">
                                    <p class="text-sm text-gray-500">Bukti Pembayaran</p>
                                    <div class="mt-2">
                                        <img id="proof-img" src="" alt="Bukti Pembayaran" class="w-full h-auto object-cover rounded-md">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                <button type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm" onclick="closeWithdrawalDetail()">
                    Tutup
                </button>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
    function showWithdrawalDetail(withdrawal) {
        // Set data pada modal
        document.getElementById('withdrawal-id').textContent = withdrawal.id;
        
        // Set status
        const statusEl = document.getElementById('withdrawal-status');
        statusEl.textContent = withdrawal.status === 'completed' ? 'Selesai' : 'Ditolak';
        statusEl.className = 'font-medium ' + (withdrawal.status === 'completed' ? 'text-green-600' : 'text-red-600');
        
        // Set informasi penjahit dan bank
        document.getElementById('tailor-name').textContent = withdrawal.wallet.user.name;
        document.getElementById('bank-name').textContent = withdrawal.bank_account.bank_name;
        document.getElementById('account-number').textContent = withdrawal.bank_account.account_number;
        document.getElementById('account-holder').textContent = withdrawal.bank_account.account_holder_name;
        
        // Set jumlah penarikan
        document.getElementById('amount').textContent = 'Rp ' + new Intl.NumberFormat('id-ID').format(withdrawal.amount);
        
        // Set tanggal
        document.getElementById('created-at').textContent = new Date(withdrawal.created_at).toLocaleString('id-ID', {
            day: '2-digit',
            month: 'short',
            year: 'numeric',
            hour: '2-digit',
            minute: '2-digit'
        });
        
        document.getElementById('processed-at').textContent = new Date(withdrawal.processed_at).toLocaleString('id-ID', {
            day: '2-digit',
            month: 'short',
            year: 'numeric',
            hour: '2-digit',
            minute: '2-digit'
        });
        
        // Tampilkan alasan penolakan jika ada
        const rejectionContainer = document.getElementById('rejection-container');
        if (withdrawal.status === 'rejected' && withdrawal.rejection_reason) {
            document.getElementById('rejection-reason').textContent = withdrawal.rejection_reason;
            rejectionContainer.classList.remove('hidden');
        } else {
            rejectionContainer.classList.add('hidden');
        }
        
        // Tampilkan bukti pembayaran jika ada
        const proofContainer = document.getElementById('proof-container');
        if (withdrawal.status === 'completed' && withdrawal.proof_of_payment) {
            // Gunakan URL API langsung
            const proofUrl = `https://api.tailors.stuffly.my.id/storage/${withdrawal.proof_of_payment}`;
            
            document.getElementById('proof-img').src = proofUrl;
            proofContainer.classList.remove('hidden');
        } else {
            proofContainer.classList.add('hidden');
        }
        
        // Tampilkan modal
        document.getElementById('withdrawalDetailModal').classList.remove('hidden');
    }
    
    function closeWithdrawalDetail() {
        document.getElementById('withdrawalDetailModal').classList.add('hidden');
    }
</script>
@endpush