@extends('layouts.frontend')

@section('title', 'Faire un don')

@section('content')
    <!-- Hero Section -->
    <section class="donation-hero text-center">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-8">
                    <i class="fas fa-heart fa-3x mb-4 text-warning"></i>
                    <h1 class="display-4 fw-bold mb-4">Soutenez Notre Mission</h1>
                    <p class="lead mb-0">
                        Votre générosité nous aide à continuer notre travail et à avoir un impact positif dans la
                        communauté.
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- Donation Methods -->
    <section class="py-5">
        <div class="container">
            <div class="row justify-content-center mb-5">
                <div class="col-lg-8 text-center">
                    <h2 class="h3 mb-3" style="color: var(--primary-color);">Comment Faire un Don</h2>
                    <p class="text-muted">
                        Choisissez la méthode qui vous convient le mieux. Chaque contribution compte et fait la différence.
                    </p>
                </div>
            </div>

            <div class="row g-4">
                <!-- Bank Account -->
                <div class="col-md-6">
                    <div class="card donation-card h-100">
                        <div class="card-body text-center p-4">
                            <div class="account-icon">
                                <i class="fas fa-university"></i>
                            </div>
                            <h4 class="card-title mb-3" style="color: var(--primary-color);">Compte Bancaire</h4>
                            <p class="text-muted mb-4">Effectuez un virement bancaire direct</p>

                            @if (!empty($settings->account_name))
                                <div class="mb-3">
                                    <label class="form-label fw-semibold">Nom du Compte:</label>
                                    <div class="account-number d-flex justify-content-between align-items-center">
                                        <span>{{ $settings->account_name }}</span>
                                        <button class="btn copy-btn"
                                            onclick="copyToClipboard('{{ $settings->account_name }}')" title="Copier">
                                            <i class="fas fa-copy"></i>
                                        </button>
                                    </div>
                                </div>
                            @endif

                            @if (!empty($settings->account_number))
                                <div class="mb-3">
                                    <label class="form-label fw-semibold">Numéro de Compte:</label>
                                    <div class="account-number d-flex justify-content-between align-items-center">
                                        <span>{{ $settings->account_number }}</span>
                                        <button class="btn copy-btn"
                                            onclick="copyToClipboard('{{ $settings->account_number }}')" title="Copier">
                                            <i class="fas fa-copy"></i>
                                        </button>
                                    </div>
                                </div>
                            @endif

                            @if (!empty($settings->bank_name))
                                <div class="mb-3">
                                    <label class="form-label fw-semibold">Banque:</label>
                                    <div class="account-number d-flex justify-content-between align-items-center">
                                        <span>{{ $settings->bank_name }}</span>
                                        <button class="btn copy-btn" onclick="copyToClipboard('{{ $settings->bank_name }}')"
                                            title="Copier">
                                            <i class="fas fa-copy"></i>
                                        </button>
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>

                <!-- Mobile Wallet -->
                <div class="col-md-6">
                    <div class="card donation-card h-100">
                        <div class="card-body text-center p-4">
                            <div class="account-icon">
                                <i class="fas fa-mobile-alt"></i>
                            </div>
                            <h4 class="card-title mb-3" style="color: var(--primary-color);">Portefeuille Mobile</h4>
                            <p class="text-muted mb-4">Envoyez votre don via mobile money</p>

                            @if (!empty($settings->mpesa))
                                <div class="mb-3">
                                    <label class="form-label fw-semibold">MPESA:</label>
                                    <div class="account-number d-flex justify-content-between align-items-center">
                                        <span>{{ $settings->mpesa }}</span>
                                        <button class="btn copy-btn" onclick="copyToClipboard('{{ $settings->mpesa }}')"
                                            title="Copier">
                                            <i class="fas fa-copy"></i>
                                        </button>
                                    </div>
                                </div>
                            @endif

                            @if (!empty($settings->airtel_money))
                                <div class="mb-3">
                                    <label class="form-label fw-semibold">Airtel Money:</label>
                                    <div class="account-number d-flex justify-content-between align-items-center">
                                        <span>{{ $settings->airtel_money }}</span>
                                        <button class="btn copy-btn"
                                            onclick="copyToClipboard('{{ $settings->airtel_money }}')" title="Copier">
                                            <i class="fas fa-copy"></i>
                                        </button>
                                    </div>
                                </div>
                            @endif

                            @if (!empty($settings->orange_money))
                                <div class="mb-3">
                                    <label class="form-label fw-semibold">Orange Money:</label>
                                    <div class="account-number d-flex justify-content-between align-items-center">
                                        <span>{{ $settings->orange_money }}</span>
                                        <button class="btn copy-btn"
                                            onclick="copyToClipboard('{{ $settings->orange_money }}')" title="Copier">
                                            <i class="fas fa-copy"></i>
                                        </button>
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>


            <!-- Thank You Message -->
            <div class="row justify-content-center mt-5">
                <div class="col-lg-8">
                    <div class="card border-0" style="background: var(--primary-light);">
                        <div class="card-body text-center p-4">
                            <i class="fas fa-hands-helping fa-2x mb-3" style="color: var(--primary-color);"></i>
                            <h5 style="color: var(--primary-dark);">Merci pour votre Générosité</h5>
                            <p class="text-muted mb-0">
                                Votre soutien nous permet de continuer à servir notre communauté avec passion et dévouement.
                                Chaque don, petit ou grand, fait une réelle différence.
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Contact Info -->
            <div class="row justify-content-center mt-4">
                <div class="col-lg-6 text-center">
                    <div class="alert alert-info border-0"
                        style="background: rgba(42, 157, 56, 0.1); color: var(--primary-dark);">
                        <i class="fas fa-info-circle me-2"></i>
                        <strong>Pour toute question concernant les dons,</strong> <a href="{{ route('contact') }}"
                            class="text-decoration-none fw-semibold" style="color: var(--primary-color);">Contactez-nous</a>

                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Toast for copy feedback -->
    <div class="toast-container position-fixed bottom-0 end-0 p-3">
        <div id="copyToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="toast-body bg-success text-white">
                <i class="fas fa-check-circle me-2"></i>
                Copié dans le presse-papiers!
            </div>
        </div>
    </div>
@endsection

@section('styles')
    <style>
       .donation-hero {
            background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
            color: white;
            padding: 4rem 0;
        }

        .donation-card {
            box-shadow: var(--shadow-lg);
            border: none;
            border-radius: var(--border-radius);
            transition: transform var(--transition-normal);
        }

        .donation-card:hover {
            transform: translateY(-5px);
        }

        .account-icon {
            width: 60px;
            height: 60px;
            background: var(--primary-color);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            margin: 0 auto 1rem;
        }

        .copy-btn {
            background: var(--primary-light);
            border: 1px solid var(--primary-color);
            color: var(--primary-dark);
            border-radius: var(--border-radius);
            padding: 0.25rem 0.5rem;
            font-size: 0.8rem;
            transition: all var(--transition-normal);
        }

        .copy-btn:hover {
            background: var(--primary-color);
            color: white;
        }

        .account-number {
            font-family: 'Courier New', monospace;
            font-weight: bold;
            font-size: 1.1rem;
            background: var(--gray-100);
            padding: 0.75rem;
            border-radius: var(--border-radius);
            border: 2px dashed var(--primary-color);
        }
    </style>
@endsection

@section('scripts')
    <script>
        function copyToClipboard(text) {
            navigator.clipboard.writeText(text).then(function() {
                // Show toast notification
                const toast = new bootstrap.Toast(document.getElementById('copyToast'));
                toast.show();
            }).catch(function(err) {
                console.error('Could not copy text: ', err);
                // Fallback for older browsers
                const textArea = document.createElement('textarea');
                textArea.value = text;
                document.body.appendChild(textArea);
                textArea.select();
                document.execCommand('copy');
                document.body.removeChild(textArea);

                const toast = new bootstrap.Toast(document.getElementById('copyToast'));
                toast.show();
            });
        }

        // Add some interactive feedback
        document.querySelectorAll('.copy-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                const icon = this.querySelector('i');
                icon.className = 'fas fa-check';
                setTimeout(() => {
                    icon.className = 'fas fa-copy';
                }, 1000);
            });
        });
    </script>
@endsection