@extends('layouts.base')

@section('content')
    @section('breadcrumb')
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item"><a href="{{ route('front.index') }}">Tableau de bord</a></li>
                <li class="breadcrumb-item active" aria-current="page">Abonnements</li>
            </ol>
        </nav>
    @endsection

    <div class="container-fluid py-2">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <div>
                <h1 class="h3 mb-1 text-primary">
                    <i class="fas fa-credit-card me-2"></i>Gestion des abonnements
                </h1>
                <p class="text-muted mb-0">Liste des abonnements par application</p>
            </div>
            <div>
                <a href="{{ route('admin.subscriptions.create') }}" class="btn btn-primary">
                    <i class="fas fa-plus me-2"></i>Nouvel abonnement
                </a>
            </div>
        </div>

        <div class="card shadow mb-4">
            <div class="card-header py-3 d-flex justify-content-between align-items-center">
                <h6 class="m-0 font-weight-bold text-primary d-flex align-items-center gap-2">
                    <i class="fas fa-table me-2"></i>Liste des abonnements
                </h6>
                <div class="d-flex align-items-center">
                    <form method="GET" class="d-flex align-items-center">
                        <div class="input-group me-2">
                            <span class="input-group-text"><i class="fas fa-search"></i></span>
                            <input type="text" name="search" value="{{ request('search') }}" class="form-control" placeholder="Recherche (nom, description)...">
                        </div>
                        <select class="form-select form-select-sm me-2" name="status">
                            <option value="">Tous</option>
                            <option value="active" {{ request('status')=='active'?'selected':'' }}>Actifs</option>
                            <option value="inactive" {{ request('status')=='inactive'?'selected':'' }}>Inactifs</option>
                        </select>
                        <select class="form-select form-select-sm me-2" name="application_id">
                            <option value="">Toutes les applications</option>
                            @foreach($applications as $app)
                                <option value="{{ $app->id }}" {{ request('application_id')==$app->id?'selected':'' }}>{{ $app->name }}</option>
                            @endforeach
                        </select>
                        <select class="form-select form-select-sm me-2" name="per_page" onchange="this.form.submit()">
                            @foreach([10,15,25,50] as $n)
                                <option value="{{ $n }}" {{ (int)request('per_page',15)===$n?'selected':'' }}>{{ $n }}</option>
                            @endforeach
                        </select>
                        <button class="btn btn-primary" type="submit"><i class="fas fa-filter me-1"></i>Filtrer</button>
                    </form>
                </div>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered table-hover" id="subscriptionsTable">
                        <thead class="table-light">
                            <tr>
                                <th class="text-center">
                                    <i class="fas fa-credit-card me-1"></i>Abonnement
                                </th>
                                <th class="text-center">
                                    <i class="fas fa-th-large me-1"></i>Applications associées
                                </th>
                                <th class="text-center">
                                    <i class="fas fa-info-circle me-1"></i>Description
                                </th>
                                <th class="text-center">
                                    <i class="fas fa-euro-sign me-1"></i>Prix Mensuel
                                </th>
                                <th class="text-center">
                                    <i class="fas fa-euro-sign me-1"></i>Prix Annuel
                                </th>
                                <th class="text-center">
                                    <i class="fas fa-users me-1"></i>Utilisateurs
                                </th>
                                <th class="text-center">
                                    <i class="fas fa-toggle-on me-1"></i>Statut
                                </th>
                                <th class="text-center">
                                    <i class="fas fa-eye me-1"></i>Visible
                                </th>
                                <th class="text-center">
                                    <i class="fas fa-calendar me-1"></i>Créé le
                                </th>
                                <th class="text-center">
                                    <i class="fas fa-cog me-1"></i>Actions
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($subscriptions as $subscription)
                            <tr class="clickable-row cursor-pointer" data-href="{{ route('admin.subscriptions.show', $subscription) }}">
                                <td>
                                    <div class="d-flex align-items-center">
                                        <div class="subscription-icon-sm bg-primary text-white rounded-circle d-flex align-items-center justify-content-center me-3">
                                            <i class="fas fa-credit-card"></i>
                                        </div>
                                        <div>
                                            <div class="fw-bold">{{ $subscription->name }}</div>
                                            <small class="text-muted">{{ $subscription->slug }}</small>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <div class="text-center">
                                        <span>{{ $subscription->applications ? $subscription->applications->count() : 0 }}</span>
                                    </div>
                                </td>
                                <td>
                                    <div class="text-truncate" style="max-width: 200px;" title="{{ $subscription->description }}">
                                        {{ $subscription->description ?: 'Aucune description' }}
                                    </div>
                                </td>
                                <td class="text-center">
                                    @if($subscription->price_monthly)
                                        <span class="fw-bold text-success">{{ number_format($subscription->price_monthly, 2) }} €</span>
                                    @else
                                        <span class="text-muted">Gratuit</span>
                                    @endif
                                </td>
                                <td class="text-center">
                                    @if($subscription->price_yearly)
                                        <span class="fw-bold text-success">{{ number_format($subscription->price_yearly, 2) }} €</span>
                                    @else
                                        <span class="text-muted">Gratuit</span>
                                    @endif
                                </td>
                                <td class="text-center">
                                    @php
                                        $users = is_array($subscription->users) ? $subscription->users : [];
                                    @endphp
                                    <span class="badge bg-info">{{ count($users) }} utilisateur(s)</span>
                                </td>
                                <td class="text-center">
                                    @if($subscription->is_active)
                                        <span class="badge bg-success">
                                            <i class="fas fa-check me-1"></i>Actif
                                        </span>
                                    @else
                                        <span class="badge bg-danger">
                                            <i class="fas fa-pause me-1"></i>Inactif
                                        </span>
                                    @endif
                                </td>
                                <td class="text-center">
                                    @if($subscription->visible)
                                        <span class="badge bg-primary">
                                            <i class="fas fa-eye me-1"></i>Visible
                                        </span>
                                    @else
                                        <span class="badge bg-secondary">
                                            <i class="fas fa-eye-slash me-1"></i>Masqué
                                        </span>
                                    @endif
                                </td>
                                <td class="text-center">
                                    <div class="text-muted">
                                        <i class="fas fa-calendar me-1"></i>
                                        {{ $subscription->created_at->format('d/m/Y') }}
                                    </div>
                                    <small class="text-muted">{{ $subscription->created_at->format('H:i') }}</small>
                                </td>
                                <td class="text-center">
                                    <div class="btn-group" role="group">
                                        <a href="{{ route('admin.subscriptions.show', $subscription) }}" class="btn btn-sm btn-outline-primary" title="Voir" onclick="event.stopPropagation();">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                        <a href="{{ route('admin.subscriptions.edit', $subscription) }}" class="btn btn-sm btn-outline-warning" title="Modifier" onclick="event.stopPropagation();">
                                            <i class="fas fa-edit"></i>
                                        </a>
                                        <form action="{{ route('developer.subscriptions.destroy', $subscription) }}" method="POST">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-sm btn-outline-danger" title="Supprimer" onclick="event.stopPropagation();">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="9" class="text-center py-4">
                                    <div class="text-muted">
                                        <i class="fas fa-credit-card fa-3x mb-3"></i>
                                        <h5>Aucun abonnement trouvé</h5>
                                        <p>Essayez de modifier vos critères de recherche</p>
                                    </div>
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                @if($subscriptions->hasPages())
                <div class="d-flex justify-content-between align-items-center mt-3">
                    <div class="text-muted">
                        Affichage de {{ $subscriptions->firstItem() }} à {{ $subscriptions->lastItem() }} sur {{ $subscriptions->total() }} résultats
                    </div>
                    <div>
                        {{ $subscriptions->links() }}
                    </div>
                </div>
                @endif
            </div>
        </div>
    </div>

    <style>
    .subscription-icon-sm {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
    .clickable-row {
        cursor: pointer;
    }
    .clickable-row:hover {
        background-color: #f8f9fa;
    }
    </style>

    <script>
    document.addEventListener('DOMContentLoaded', function() {
        const rows = document.querySelectorAll('.clickable-row');
        rows.forEach(row => {
            row.addEventListener('click', function() {
                const href = this.getAttribute('data-href');
                if (href) {
                    window.location.href = href;
                }
            });
        });
    });
    </script>
@endsection