@extends('layouts.admin')

@section('title', 'Plans d\'épargne')

@push('styles')
<style>
    body { background: #f5f7fb; color: #1f2937; }
    .glass-card { background: #ffffff; border-radius: 20px; border: 1px solid #e5e7eb; box-shadow: 0 10px 30px rgba(15,23,42,0.08); }
    .btn-glass { background: #0f172a; border: 1px solid #0f172a; color: #ffffff; transition: all 0.2s; }
    .btn-glass:hover { background: #111827; color: #ffffff; }
    .table-glass { background: #ffffff; border-radius: 16px; overflow: hidden; border: 1px solid #e5e7eb; }
    .table-glass th { background: #f1f5f9; color: #0f172a; font-weight: 700; border: none; padding: 14px; }
    .table-glass td { color: #1f2937; border-color: #e5e7eb; padding: 14px; }
    .text-white { color: #0f172a !important; }
    .text-white-70 { color: #475569 !important; }
</style>
@endpush

@section('content')
@php $pendingUnlocks = \App\Models\UnlockRequest::where('status', 'pending')->count(); @endphp
<div class="container-fluid py-5">
    @if(session('success'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        ✅ {{ 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">
        ❌ {{ session('error') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
    @endif

    <div class="glass-card p-4 mb-4">
        <h1 class="text-white fw-bold mb-2">📊 Plans d'Épargne</h1>
        <p class="text-white-70 mb-0">Configurer les durées, taux et montants minimums</p>
    </div>

    <div class="glass-card p-4 mb-4">
        <ul class="nav nav-pills nav-fill">
            <li class="nav-item">
                <a class="nav-link btn-glass mx-1" href="{{ route('admin.savings.index') }}">🏠 Dashboard</a>
            </li>
            <li class="nav-item">
                <a class="nav-link btn-glass mx-1 active" href="{{ route('admin.savings.plans') }}">📊 Plans</a>
            </li>
            <li class="nav-item">
                <a class="nav-link btn-glass mx-1" href="{{ route('admin.savings.unlock-requests') }}">
                    🔓 Demandes @if($pendingUnlocks > 0)<span class="badge bg-danger ms-1">{{ $pendingUnlocks }}</span>@endif
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link btn-glass mx-1" href="{{ route('admin.savings.settings') }}">⚙️ Paramètres</a>
            </li>
        </ul>
    </div>

    <div class="glass-card p-5">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h4 class="text-white fw-bold mb-0">Plans disponibles</h4>
            <button class="btn btn-glass" data-bs-toggle="modal" data-bs-target="#planModal">
                <i class="fas fa-plus me-2"></i> Ajouter / Modifier
            </button>
        </div>

        <div class="table-responsive">
            <table class="table table-glass">
                <thead>
                    <tr>
                        <th>Icône</th>
                        <th>Nom</th>
                        <th>Durée</th>
                        <th>Taux</th>
                        <th>Montant min.</th>
                        <th>Statut</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($plans as $plan)
                    <tr>
                        <td style="font-size: 28px;">{{ $plan->icon }}</td>
                        <td class="fw-bold">{{ $plan->name }}</td>
                        <td>{{ $plan->duration_months }} mois</td>
                        <td><span class="badge bg-info">{{ $plan->interest_rate }}%</span></td>
                        <td>{{ number_format($plan->min_amount, 0, ',', ' ') }} XOF</td>
                        <td>
                            @if($plan->is_active)
                                <span class="badge bg-success">Actif</span>
                            @else
                                <span class="badge bg-secondary">Inactif</span>
                            @endif
                        </td>
                        <td class="d-flex gap-2 align-items-center">
                            <form action="{{ route('admin.savings.toggle-plan', $plan) }}" method="POST" class="d-inline">
                                @csrf
                                <button type="submit" class="btn btn-sm btn-warning">
                                    @if($plan->is_active)
                                        <i class="fas fa-pause me-1"></i> Pause
                                    @else
                                        <i class="fas fa-play me-1"></i> Activer
                                    @endif
                                </button>
                            </form>
                            <button class="btn btn-sm btn-primary" onclick="editPlan({{ $plan }})">
                                <i class="fas fa-edit me-1"></i> Éditer
                            </button>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="7" class="text-center text-white-70 py-4">Aucun plan configuré</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Modal Plan -->
<div class="modal fade" id="planModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content" style="background: rgba(255, 255, 255, 0.95); border-radius: 24px;">
            <div class="modal-header border-0">
                <h5 class="modal-title fw-bold">Plan d'Épargne</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form action="{{ route('admin.savings.store-plan') }}" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Nom</label>
                        <input type="text" class="form-control" name="name" id="planName" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Durée (mois)</label>
                        <select class="form-select" name="duration_months" id="planDuration" required>
                            <option value="1">1 mois</option>
                            <option value="3">3 mois</option>
                            <option value="6">6 mois</option>
                            <option value="12">12 mois</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Taux d'intérêt (%)</label>
                        <input type="number" class="form-control" name="interest_rate" id="planRate" step="0.1" min="0" max="50" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Montant minimum (XOF)</label>
                        <input type="number" class="form-control" name="min_amount" id="planMinAmount" step="1000" min="0" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Description</label>
                        <textarea class="form-control" name="description" id="planDescription" rows="3"></textarea>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" name="is_active" id="planActive" checked>
                        <label class="form-check-label" for="planActive">Plan actif</label>
                    </div>
                </div>
                <div class="modal-footer border-0">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                    <button type="submit" class="btn btn-primary"><i class="fas fa-save me-2"></i>Enregistrer</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
function editPlan(plan) {
    document.getElementById('planName').value = plan.name;
    document.getElementById('planDuration').value = plan.duration_months;
    document.getElementById('planRate').value = plan.interest_rate;
    document.getElementById('planMinAmount').value = plan.min_amount;
    document.getElementById('planDescription').value = plan.description || '';
    document.getElementById('planActive').checked = plan.is_active;
    new bootstrap.Modal(document.getElementById('planModal')).show();
}
</script>
@endpush
