@extends('admin.layouts.app')

@section('title', 'Verifikasi Akun Bank')

@section('content')
<div class="bg-white shadow-md rounded-lg overflow-hidden">
    <div class="p-6">
        <div class="flex justify-between items-center mb-6">
            <h2 class="text-xl font-semibold text-gray-800">Verifikasi Akun Bank #{{ $bankAccount['id'] }}</h2>
            <a href="{{ route('admin.bank-accounts.pending') }}" class="bg-gray-200 hover:bg-gray-300 text-gray-700 font-semibold py-2 px-4 rounded">
                Kembali
            </a>
        </div>
        
        @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
        
        @if ($errors->any())
            <div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 mb-4">
                <ul class="list-disc pl-5">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
        
        <div class="bg-gray-50 p-4 rounded-lg mb-6">
            <h3 class="font-semibold text-gray-700 mb-2">Detail Akun Bank</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <p class="text-sm text-gray-600">Nama Penjahit:</p>
                    <p class="font-medium">{{ $bankAccount['user']['name'] }}</p>
                </div>
                <div>
                    <p class="text-sm text-gray-600">Email:</p>
                    <p class="font-medium">{{ $bankAccount['user']['email'] }}</p>
                </div>
                <div>
                    <p class="text-sm text-gray-600">Bank:</p>
                    <p class="font-medium">{{ $bankAccount['bank_name'] }}</p>
                </div>
                <div>
                    <p class="text-sm text-gray-600">Nomor Rekening:</p>
                    <p class="font-medium">{{ $bankAccount['account_number'] }}</p>
                </div>
                <div>
                    <p class="text-sm text-gray-600">Atas Nama:</p>
                    <p class="font-medium">{{ $bankAccount['account_holder_name'] }}</p>
                </div>
                <div>
                    <p class="text-sm text-gray-600">Tanggal Pendaftaran:</p>
                    <p class="font-medium">{{ \Carbon\Carbon::parse($bankAccount['created_at'])->format('d M Y H:i') }}</p>
                </div>
            </div>
        </div>
        
        <form action="{{ route('admin.bank-accounts.verify', $bankAccount['id']) }}" method="POST">
            @csrf
            
            <div class="mb-4">
                <label for="status" class="block text-sm font-medium text-gray-700 mb-1">Status Verifikasi</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" required>
                    <option value="">Pilih Status</option>
                    <option value="active">Disetujui</option>
                    <option value="rejected">Ditolak</option>
                </select>
            </div>
            
            <div id="rejection_reason_container" class="mb-4 hidden">
                <label for="rejection_reason" class="block text-sm font-medium text-gray-700 mb-1">Alasan Penolakan</label>
                <textarea id="rejection_reason" name="rejection_reason" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500"></textarea>
                <p class="text-sm text-gray-500 mt-1">Jelaskan alasan penolakan akun bank ini.</p>
            </div>
            
            <div class="mt-6">
                <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
                    Simpan
                </button>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
    $(document).ready(function() {
        $('#status').change(function() {
            const status = $(this).val();
            
            if (status === 'rejected') {
                $('#rejection_reason_container').removeClass('hidden');
                $('#rejection_reason').attr('required', 'required');
            } else {
                $('#rejection_reason_container').addClass('hidden');
                $('#rejection_reason').removeAttr('required');
            }
        });
    });
</script>
@endpush
@endsection