@extends('layouts.admin')

@section('title', __('admin.withdrawals.details_title'))

@section('content')
<div class="page-header d-flex justify-content-between align-items-center">
    <div>
        <h1>{{ __('admin.withdrawals.details_title') }}</h1>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                <li class="breadcrumb-item"><a href="{{ route('admin.withdrawals.index') }}">{{ __('admin.withdrawals.title') }}</a></li>
                <li class="breadcrumb-item active">#{{ str_pad($withdrawal->id, 6, '0', STR_PAD_LEFT) }}</li>
            </ol>
        </nav>
    </div>
    <a href="{{ route('admin.withdrawals.index') }}" class="btn btn-outline-secondary">
        <i class="bi bi-arrow-left me-2"></i>Retour
    </a>
</div>

@if(session('success'))
<div class="alert alert-success alert-dismissible fade show" role="alert">
    <i class="bi bi-check-circle me-2"></i>{{ session('success') }}
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
@endif

@if(session('error'))
<div class="alert alert-danger alert-dismissible fade show" role="alert">
    <i class="bi bi-exclamation-triangle me-2"></i>{{ session('error') }}
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
@endif

<div class="row">
    <div class="col-lg-8">
        <div class="card">
            <div class="card-body">
                <!-- Status Badge -->
                <div class="mb-4 d-flex justify-content-between align-items-center">
                    <h4 class="mb-0">Détails de la demande</h4>
                    @if($withdrawal->status === 'pending')
                    <span class="badge bg-warning text-dark px-3 py-2">
                        <i class="bi bi-clock-history me-1"></i>{{ __('admin.withdrawals.pending') }}
                    </span>
                    @elseif($withdrawal->status === 'completed')
                    <span class="badge bg-success px-3 py-2">
                        <i class="bi bi-check-circle me-1"></i>{{ __('admin.withdrawals.completed') }}
                    </span>
                    @elseif($withdrawal->status === 'rejected')
                    <span class="badge bg-danger px-3 py-2">
                        <i class="bi bi-x-circle me-1"></i>{{ __('admin.withdrawals.rejected') }}
                    </span>
                    @endif
                </div>

                <hr>

                <!-- Montant -->
                <div class="text-center py-4 mb-4" style="background: linear-gradient(135deg, var(--primary-orange), var(--secondary-orange-light)); border-radius: 12px;">
                    <small class="text-white opacity-75 d-block mb-2">{{ __('admin.withdrawals.amount') }}</small>
                    <h1 class="display-4 text-white fw-bold mb-0">{{ number_format($withdrawal->amount, 0, ',', ' ') }}</h1>
                    <small class="text-white opacity-75">{{ currency() }}</small>
                </div>

                <!-- Informations -->
                <div class="row g-4">
                    <div class="col-md-6">
                        <div class="border rounded p-3">
                            <h6 class="fw-bold mb-3"><i class="bi bi-person me-2 text-primary"></i>{{ __('admin.withdrawals.customer_name') }}</h6>
                            <p class="mb-2"><strong>{{ $withdrawal->user->full_name }}</strong></p>
                            <p class="mb-2 text-muted small">{{ $withdrawal->user->email }}</p>
                            <a href="{{ route('admin.customers.show', $withdrawal->user->id) }}" class="btn btn-sm btn-outline-primary">
                                <i class="bi bi-eye me-1"></i>Voir le profil
                            </a>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="border rounded p-3">
                            <h6 class="fw-bold mb-3"><i class="bi bi-credit-card me-2 text-success"></i>{{ __('admin.withdrawals.payment_info') }}</h6>
                            <div class="mb-2">
                                <small class="text-muted d-block">Méthode</small>
                                @php
                                    $method = \App\Enums\PaymentMethod::from($withdrawal->payment_method);
                                @endphp
                                <strong><i class="bi {{ $method->icon() }} me-1"></i>{{ $method->label }}</strong>
                            </div>
                            <div class="mb-2">
                                <small class="text-muted d-block">Numéro</small>
                                <strong>{{ $withdrawal->phone_number ?? 'N/A' }}</strong>
                            </div>
                        </div>
                    </div>

                    <div class="col-12">
                        <div class="border rounded p-3">
                            <h6 class="fw-bold mb-3"><i class="bi bi-info-circle me-2 text-info"></i>Informations</h6>
                            <div class="row">
                                <div class="col-md-6 mb-2">
                                    <small class="text-muted d-block">Date de demande</small>
                                    <strong><i class="bi bi-calendar3 me-1"></i>{{ $withdrawal->created_at->format('d M Y, H:i') }}</strong>
                                </div>
                                <div class="col-md-6 mb-2">
                                    <small class="text-muted d-block">Référence</small>
                                    <strong>#{{ str_pad($withdrawal->id, 6, '0', STR_PAD_LEFT) }}</strong>
                                </div>
                            </div>
                        </div>
                    </div>

                    @if($withdrawal->notes)
                    <div class="col-12">
                        <div class="alert alert-info">
                            <h6 class="alert-heading"><i class="bi bi-sticky me-2"></i>Notes du client</h6>
                            <p class="mb-0">{{ $withdrawal->notes }}</p>
                        </div>
                    </div>
                    @endif

                    @if($withdrawal->status === 'rejected' && $withdrawal->rejection_reason)
                    <div class="col-12">
                        <div class="alert alert-danger">
                            <h6 class="alert-heading"><i class="bi bi-exclamation-triangle me-2"></i>{{ __('admin.withdrawals.rejection_reason') }}</h6>
                            <p class="mb-0">{{ $withdrawal->rejection_reason }}</p>
                        </div>
                    </div>
                    @endif

                    @if($withdrawal->processed_at)
                    <div class="col-12">
                        <div class="card border-success">
                            <div class="card-body">
                                <h6 class="fw-bold mb-3 text-success"><i class="bi bi-check-circle me-2"></i>Traitement</h6>
                                <div class="row">
                                    <div class="col-md-6">
                                        <small class="text-muted d-block">Traité le</small>
                                        <strong>{{ $withdrawal->processed_at->format('d M Y, H:i') }}</strong>
                                    </div>
                                    @if($withdrawal->processor)
                                    <div class="col-md-6">
                                        <small class="text-muted d-block">Par</small>
                                        <strong>{{ $withdrawal->processor->full_name }}</strong>
                                    </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Actions Panel -->
    <div class="col-lg-4">
        @if($withdrawal->isPending())
        <div class="card border-warning">
            <div class="card-header" style="background: linear-gradient(135deg, var(--primary-orange), var(--secondary-orange-light));">
                <h5 class="mb-0 text-white"><i class="bi bi-gear me-2"></i>Actions</h5>
            </div>
            <div class="card-body">
                <p class="text-muted small mb-3">Vous pouvez approuver ou rejeter cette demande de retrait.</p>
                
                <!-- Boutons d'action directs -->
                <div class="d-grid gap-2">
                    <button class="btn btn-success btn-lg confirm-approve-withdrawal"
                            data-withdrawal-id="{{ $withdrawal->id }}"
                            type="button">
                        <i class="bi bi-check-circle me-2"></i>{{ __('admin.withdrawals.approve') }}
                    </button>
                    
                    <button class="btn btn-danger btn-lg confirm-reject-withdrawal"
                            data-withdrawal-id="{{ $withdrawal->id }}"
                            type="button">
                        <i class="bi bi-x-circle me-2"></i>{{ __('admin.withdrawals.reject') }}
                    </button>
                </div>
                
                <!-- Modal de rejet -->
                <livewire:admin.withdrawal.withdrawal-actions :withdrawalId="$withdrawal->id" />
            </div>
        </div>
        @endif

        <!-- Quick Stats -->
        <div class="card mt-3">
            <div class="card-header">
                <h6 class="mb-0"><i class="bi bi-bar-chart me-2"></i>Statistiques du client</h6>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <small class="text-muted d-block">Solde actuel</small>
                    <h4 class="mb-0 text-primary">{{ format_currency($withdrawal->user->customer->current_balance ?? 0) }}</h4>
                </div>
                <div class="mb-3">
                    <small class="text-muted d-block">Membre depuis</small>
                    <strong>{{ $withdrawal->user->created_at->diffForHumans() }}</strong>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
// Livewire event listener
window.addEventListener('withdrawal-updated', (event) => {
    // Create alert message if provided
    if (event.detail && event.detail.message) {
        const alertType = event.detail.type === 'error' ? 'danger' : 'success';
        const iconClass = event.detail.type === 'error' ? 'bi-exclamation-triangle' : 'bi-check-circle';

        // Store message in sessionStorage for display after reload
        sessionStorage.setItem('flashMessage', JSON.stringify({
            type: alertType,
            message: event.detail.message,
            icon: iconClass
        }));
    }

    window.location.reload();
});

// Display flash message from sessionStorage after reload
document.addEventListener('DOMContentLoaded', function() {
    const flashMessage = sessionStorage.getItem('flashMessage');
    if (flashMessage) {
        const data = JSON.parse(flashMessage);
        sessionStorage.removeItem('flashMessage');

        const alertDiv = document.createElement('div');
        alertDiv.className = `alert alert-${data.type} alert-dismissible fade show`;
        alertDiv.setAttribute('role', 'alert');
        alertDiv.innerHTML = `
            <i class="bi ${data.icon} me-2"></i>${data.message}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        `;

        // Insert after page-header
        const pageHeader = document.querySelector('.page-header');
        if (pageHeader) {
            pageHeader.insertAdjacentElement('afterend', alertDiv);
        }
    }

    // Gestionnaires pour les boutons d'action
    const approveBtn = document.querySelector('.confirm-approve-withdrawal');
    if (approveBtn) {
        approveBtn.addEventListener('click', function() {
            const withdrawalId = this.getAttribute('data-withdrawal-id');

            Swal.fire({
                title: 'Confirmer l\'approbation',
                text: 'Êtes-vous sûr de vouloir approuver ce retrait ?',
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#28a745',
                cancelButtonColor: '#6c757d',
                confirmButtonText: 'Oui, approuver',
                cancelButtonText: 'Annuler'
            }).then((result) => {
                if (result.isConfirmed) {
                    const component = Livewire.first();
                    if (component) {
                        component.call('approve');
                    }
                }
            });
        });
    }

    const rejectBtn = document.querySelector('.confirm-reject-withdrawal');
    if (rejectBtn) {
        rejectBtn.addEventListener('click', function() {
            const component = Livewire.first();
            if (component) {
                component.call('openRejectModal');
            }
        });
    }
});
</script>
@endpush