@extends('layout.app')

@section('title', 'Mon Abonnement')

@section('content')
    <style>
        .card-dashboard {
            border-radius: 3rem;
            color: #000;
            background: rgb(239, 242, 255) radial-gradient(circle, rgba(239, 242, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(238, 241, 255, 1) 100%) !important;
        }

        .card-dashboard .row {
            height: 130px;
        }

        .card-dashboard i {
            font-size: 3.5rem
        }

        .card-dashboard .col {
            width: auto
        }
    </style>
    <div class="page-content">
        <div class="page-bar">
            <div class="page-title-breadcrumb">
                <div class="pull-left">
                    <div class="page-title">Mon Abonnement</div>
                </div>
            </div>
        </div>

        <div class="row">
            <!-- Carte Abonnement Actuel -->
            <div class="col-md-4">
                <div class="card card-box">
                    <div class="card-body">
                            @if(!$company->trial)
                            <div class="clearfix">
                                <div class="dropdown pull-right">
                                    <button class="btn btn-sm btn-light dropdown-toggle" type="button" data-toggle="dropdown">
                                        <i class="fa fa-cog"></i>
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-right">
                                        <li>
                                            <a href="{{ route('subscribe.showRenew', [$company->custom_id, 'change']) }}" class="dropdown-item" style="padding-left: 21px">
                                                <i class="fa fa-sync "></i> Changer d'abonnement
                                            </a>
                                        </li>
                                        <li>
                                            @if($company->subscription_active)
                                            <button type="button" class="dropdown-item text-danger" style="cursor: pointer" data-toggle="modal" data-target="#suspendSubscriptionModal">
                                                <i class="fa fa-pause "></i> Suspendre l'abonnement
                                            </button>
                                            @endif
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            @endif
                        @if($subscription)
                            <div class="text-center mb-4">
                                <span class="badge"
                                    style="background-color: {{ $subscription->bgcolor }}; color: {{ $subscription->color }}; font-size: 1rem;">
                                    {{ ucfirst($subscription->name) }}
                                </span>
                            </div>

                            <div class="subscription-details">
                                <div class="row mb-3">
                                    <div class="col-6">
                                        <small class="text-muted">Prix mensuel</small>
                                        <div class="font-weight-bold">
                                            @if($subscription->name == 'enterprise')
                                                -
                                            @else
                                                {{ number_format($subscription->value, 2, ',', ' ') }}
                                                {{ $company->currency_symbol ?? '€' }}
                                            @endif
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <small class="text-muted">Prix annuel</small>
                                        <div class="font-weight-bold">
                                            @if($subscription->name == 'enterprise')
                                                -
                                            @else
                                                {{ number_format($subscription->annual_monthly_value ?? 0, 2, ',', ' ') }}
                                                {{ $company->currency_symbol ?? '€' }}
                                            @endif
                                        </div>
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <div class="col-6">
                                        <small class="text-muted">Statut</small>
                                        <div>
                                            <span
                                                class="badge badge-{{ $company->is_subscription_active ? 'success' : 'danger' }}">
                                                {{ $statusFrench }}
                                            </span>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <small class="text-muted">Jours restants</small>
                                        <div
                                            class="font-weight-bold {{ $company->days_left == 'Illimité' ? 'text-primary' : ($company->days_left <= 7 ? 'text-danger' : ($company->days_left <= 15 ? 'text-warning' : 'text-success')) }}">
                                            {{ $company->days_left == 'Illimité' ? 'Illimité' : $company->days_left . ' jours' }}
                                        </div>
                                    </div>
                                </div>

                                @if($company->subscription_expires_at)
                                    <div class="alert alert-info mb-3" style="border-radius: 20px;">
                                        <small><i class="fa fa-info-circle"></i> Expiration le :</small>
                                        <div class="font-weight-bold">
                                            {{ \Carbon\Carbon::parse($company->subscription_expires_at)->format('d/m/Y') }}
                                        </div>
                                    </div>
                                @endif

                                @if($company->ai_credits !== null)
                                    <div class="alert alert-primary mb-3" style="border-radius: 20px;">
                                        <small><i class="fa fa-user-nurse"></i> Crédits Docteur IA </small>
                                        <div class="font-weight-bold">{{ $company->ai_credits }} crédits restants</div>
                                    </div>
                                @endif
                            </div>
                        @else
                            <div class="text-center">
                                <i class="fa fa-exclamation-circle text-warning" style="font-size: 48px;"></i>
                                <h4 class="mt-3">Aucun abonnement</h4>
                                <p class="text-muted">Vous n'avez pas encore d'abonnement actif.</p>
                                <a href="/#pricing" class="btn btn-primary">
                                    <i class="fa fa-plus"></i> Choisir un abonnement
                                </a>
                            </div>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Statistiques avec design dashboard -->
            <div class="col-md-8">
                <div class="row">
                    <div class="col-xl-4 col-md-6 col-12">
                        <div class="container text-black card-dashboard">
                            <div class="row justify-content-center">
                                <div class="col align-self-center">
                                    <div class="align-self-start">
                                        <i class="material-icons">receipt</i>
                                    </div>
                                    <div class="align-self-end">
                                        <span class="small">Total Factures</span>
                                    </div>
                                </div>
                                <div class="col align-self-center text-right">
                                    <span class="bold" style="font-size: 3rem">{{ $totalInvoices }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-4 col-md-6 col-12">
                        <div class="container text-black card-dashboard">
                            <div class="row justify-content-center">
                                <div class="col align-self-center">
                                    <div class="align-self-start">
                                        <i class="material-icons">check_circle</i>
                                    </div>
                                    <div class="align-self-end">
                                        <span class="small">Payées</span>
                                    </div>
                                </div>
                                <div class="col align-self-center text-right">
                                    <span class="bold" style="font-size: 3rem">{{ $paidInvoices }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-4 col-md-6 col-12">
                        <div class="container text-black card-dashboard">
                            <div class="row justify-content-center">
                                <div class="col align-self-center">
                                    <div class="align-self-start">
                                        <i class="material-icons">pending</i>
                                    </div>
                                    <div class="align-self-end">
                                        <span class="small">En attente</span>
                                    </div>
                                </div>
                                <div class="col align-self-center text-right">
                                    <span class="bold" style="font-size: 3rem">{{ $pendingInvoices }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Dernières factures -->
                <div class="card card-box mt-4">
                    <div class="card-head">
                        <header>Dernières Factures</header>
                        <div class="tools">
                            <a href="{{ route('subscription.invoices') }}" class="btn btn-sm btn-primary">
                                Voir tout <i class="fa fa-arrow-right"></i>
                            </a>
                        </div>
                    </div>
                    <div class="card-body">
                        @if($invoices->count() > 0)
                            <div class="table-responsive">
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th>Référence</th>
                                            <th>Date</th>
                                            <th>Montant</th>
                                            <th>Mode de paiement</th>
                                            <th>Statut</th>
                                            <th>Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($invoices->take(5) as $invoice)
                                            <tr>
                                                <td>{{ $invoice->paddle_invoice_number ?? $invoice->custom_id }}</td>
                                                <td>{{ \Carbon\Carbon::parse($invoice->created_at)->format('d/m/Y') }}</td>
                                                <td>
                                                    @if($company->trial > 0)
                                                        0 {{ $invoice->currency ?? '€' }}
                                                    @else
                                                        {{ number_format($invoice->amount_paid, 2, ',', ' ') }}
                                                        {{ $invoice->currency ?? '€' }}
                                                    @endif
                                                </td>
                                                <td>
                                                    @if($invoice->mode == 'stripe')
                                                        <i class="fab fa-stripe text-primary"></i> Stripe
                                                    @elseif($invoice->mode == 'paypal')
                                                        <i class="fab fa-paypal text-primary"></i> PayPal
                                                    @elseif($invoice->mode == 'cash')
                                                        <i class="fa fa-money-bill text-success"></i> Espèces
                                                    @elseif($invoice->mode == 'paddle')
                                                        @if($invoice->paddle_mode)
                                                            @php
                                                                $paddleModeLower = strtolower($invoice->paddle_mode);
                                                                $icon = 'fa-credit-card';
                                                                if(str_starts_with($paddleModeLower, 'visa')) {
                                                                    $icon = 'fab fa-cc-visa';
                                                                } elseif(str_starts_with($paddleModeLower, 'mastercard')) {
                                                                    $icon = 'fab fa-cc-mastercard';
                                                                } elseif(str_starts_with($paddleModeLower, 'amex') || str_starts_with($paddleModeLower, 'american')) {
                                                                    $icon = 'fab fa-cc-amex';
                                                                } elseif(str_starts_with($paddleModeLower, 'paypal')) {
                                                                    $icon = 'fab fa-paypal';
                                                                } elseif(str_starts_with($paddleModeLower, 'apple')) {
                                                                    $icon = 'fab fa-apple-pay';
                                                                } elseif(str_starts_with($paddleModeLower, 'google')) {
                                                                    $icon = 'fab fa-google-pay';
                                                                }
                                                            @endphp
                                                            <i class="{{ $icon }} text-dark"></i> {{ ucfirst($invoice->paddle_mode) }}
                                                        @else
                                                            <i class="fab fa-cc-visa text-dark"></i> Paddle
                                                        @endif
                                                    @else
                                                        {{ ucfirst($invoice->mode ?? 'N/A') }}
                                                    @endif
                                                </td>
                                                <td>
                                                    @if($invoice->status == 'paid')
                                                        <span class="badge badge-success">Payée</span>
                                                    @elseif($invoice->status == 'approved')
                                                        <span class="badge badge-success">Approuvé</span>
                                                    @elseif($invoice->status == 'pending')
                                                        <span class="badge badge-warning">En attente</span>
                                                    @elseif($invoice->status == 'cancelled')
                                                        <span class="badge badge-danger">Annulée</span>
                                                    @else
                                                        <span class="badge badge-secondary">{{ ucfirst($invoice->status) }}</span>
                                                    @endif
                                                </td>
                                                <td>
                                                    <a href="{{ route('subscription.invoice.show', $invoice->custom_id) }}" class="btn btn-light btn-sm m-2" title="Voir détails">
                                                        <i class="fa fa-eye"></i>
                                                    </a>
                                                    @if($invoice->mode == 'paddle' && $invoice->paddle_transaction_id)
                                                        <button onclick="downloadPaddlePdf({{ $invoice->id }})" class="btn btn-sm btn-light m-2" title="Télécharger PDF">
                                                            <i class="fa fa-download"></i>
                                                        </button>
                                                    @endif
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        @else
                            <div class="text-center py-4">
                                <i class="fa fa-file-invoice text-muted" style="font-size: 48px;"></i>
                                <p class="text-muted mt-3">Aucune facture pour le moment.</p>
                            </div>
                        @endif
                    </div>
                </div>

                <!-- Informations supplémentaires -->
                <div class="card card-box mt-4">
                    <div class="card-head">
                        <header>Informations Complémentaires</header>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <h6>Mode de paiement</h6>
                                <p class="text-muted">
                                    @if($invoices->whereIn('status', ['paid', 'approved'])->isNotEmpty())
                                        @php
                                            $paymentModes = $invoices->whereIn('status', ['paid', 'approved'])->pluck('mode')->unique()->filter();
                                        @endphp
                                        @foreach($paymentModes as $mode)
                                            @if($mode == 'stripe')
                                                <i class="fab fa-stripe text-primary"></i> Stripe
                                            @elseif($mode == 'paypal')
                                                <i class="fab fa-paypal text-primary"></i> PayPal
                                            @elseif($mode == 'cash')
                                                <i class="fa fa-money-bill text-success"></i> Espèces
                                            @else
                                                {{ ucfirst($mode) }}
                                            @endif
                                            @if(!$loop->last), @endif
                                        @endforeach
                                    @else
                                        Aucun paiement effectué
                                    @endif
                                </p>
                            </div>
                            <div class="col-md-6">
                                <h6>Total dépensé</h6>
                                <p class="text-muted font-weight-bold">
                                    {{ number_format($totalAmount, 2, ',', ' ') }} EUR
                                </p>
                            </div>
                        </div>

                        @if($company->trial > 0)
                            <div class="alert alert-info mt-3" style="border-radius: 30px"">
                                <strong>Période d'essai :</strong>
                                Vous êtes actuellement en période d'essai. Profitez de toutes les fonctionnalités gratuitement !
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal de confirmation de suspension -->
    <div class="modal fade" id="suspendSubscriptionModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">
                        <i class="fa fa-exclamation-triangle text-warning mr-2"></i>
                        Confirmer la suspension
                    </h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>Êtes-vous sûr de vouloir suspendre votre abonnement ?</p>
                    <p style="font-weight: bold">
                        <i class="fa fa-info-circle"></i>
                        Cette action annulera votre abonnement et désactivera votre accès aux fonctionnalités payantes.
                    </p>

                    <div id="suspendReasonSection" style="display: none;" class="mt-4">
                        <h6 class="mb-3">Pourquoi souhaitez-vous suspendre votre abonnement ?</h6>
                        <div class="form-group">
                            <div class="custom-control custom-radio">
                                <input type="radio" id="reason1" name="reason" value="too_expensive" class="custom-control-input">
                                <label class="custom-control-label" for="reason1">Trop cher</label>
                            </div>
                            <div class="custom-control custom-radio">
                                <input type="radio" id="reason2" name="reason" value="not_using" class="custom-control-input">
                                <label class="custom-control-label" for="reason2">N'utilise pas assez les fonctionnalités</label>
                            </div>
                            <div class="custom-control custom-radio">
                                <input type="radio" id="reason3" name="reason" value="technical_issues" class="custom-control-input">
                                <label class="custom-control-label" for="reason3">Problèmes techniques</label>
                            </div>
                            <div class="custom-control custom-radio">
                                <input type="radio" id="reason4" name="reason" value="found_alternative" class="custom-control-input">
                                <label class="custom-control-label" for="reason4">Trouvé une alternative</label>
                            </div>
                            <div class="custom-control custom-radio">
                                <input type="radio" id="reason5" name="reason" value="temporary_pause" class="custom-control-input">
                                <label class="custom-control-label" for="reason5">Pause temporaire</label>
                            </div>
                            <div class="custom-control custom-radio">
                                <input type="radio" id="reason6" name="reason" value="other" class="custom-control-input">
                                <label class="custom-control-label" for="reason6">Autre</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-dismiss="modal">
                        Annuler
                    </button>
                    <button type="button" id="suspendContinueBtn" class="btn btn-primary">
                        Continuer
                    </button>
                    <form action="{{ route('subscription.suspend') }}" method="POST" class="d-inline d-none" id="suspendForm">
                        @csrf
                        <input type="hidden" name="reason" id="selectedReason">
                        <button type="submit" id="suspendSubmitBtn" class="btn btn-danger" style="display: none">
                            <i class="fa fa-pause mr-1"></i> Suspendre l'abonnement
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    @push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            console.log('DOM loaded - initializing suspend modal');

            var continueBtn = document.getElementById('suspendContinueBtn');
            var reasonSection = document.getElementById('suspendReasonSection');
            var suspendForm = document.getElementById('suspendForm');
            var selectedReason = document.getElementById('selectedReason');
            var suspendSubmitBtn = document.getElementById('suspendSubmitBtn');
            var modal = document.getElementById('suspendSubscriptionModal');

            if (continueBtn) {
                continueBtn.addEventListener('click', function(e) {
                    e.preventDefault();
                    console.log('Continue button clicked');
                    reasonSection.style.display = 'block';
                    continueBtn.style.display = 'none';
                    suspendForm.style.display = 'inline-block';
                    suspendSubmitBtn.style.display = 'inline-block';
                });
            }

            var reasonInputs = document.querySelectorAll('input[name="reason"]');
            reasonInputs.forEach(function(input) {
                input.addEventListener('change', function() {
                    selectedReason.value = this.value;
                });
            });

            if (suspendForm) {
                suspendForm.addEventListener('submit', function(e) {
                    if (!selectedReason.value) {
                        e.preventDefault();
                        alert('Veuillez sélectionner une raison');
                    }
                });
            }

            if (modal) {
                modal.addEventListener('hidden.bs.modal', function() {
                    reasonSection.style.display = 'none';
                    continueBtn.style.display = 'inline-block';
                    suspendForm.style.display = 'none';
                    reasonInputs.forEach(function(input) {
                        input.checked = false;
                    });
                    selectedReason.value = '';
                });
            }
        });

        function downloadPaddlePdf(invoiceId) {
            var btn = event.target.closest('button');
            btn.disabled = true;
            btn.innerHTML = '<i class="fa fa-spinner fa-spin"></i> Chargement...';

            fetch('{{ route('subscription.invoice.pdf', ['invoiceId' => '__ID__']) }}'.replace('__ID__', invoiceId))
                .then(response => response.json())
                .then(data => {
                    if (data.url) {
                        window.open(data.url, '_blank');
                    } else {
                        alert('Erreur lors de la récupération du PDF');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('Erreur lors de la récupération du PDF');
                })
                .finally(() => {
                    btn.disabled = false;
                    btn.innerHTML = '<i class="fa fa-download"></i> PDF';
                });
        }
    </script>
    @endpush
@endsection