@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"><a href="{{ route('admin.applications') }}">Applications</a></li>
                <li class="breadcrumb-item active" aria-current="page">{{ isset($application) ? 'Modifier' : 'Créer' }}</li>
            </ol>
        </nav>
    @endsection

    <div class="container py-2">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="card shadow-sm">
                    <div class="card-header d-flex align-items-center justify-content-between">
                        <div>
                            <h5 class="mb-1"><i class="fas fa-th-large me-2"></i>{{ isset($application) ? 'Modifier une application' : 'Créer une application' }}</h5>
                        </div>
                    </div>
                    <div class="card-body">
                        @if ($errors->any())
                            <div class="alert alert-danger">
                                <ul class="mb-0">
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif
                        
                        <form method="POST" action="{{ isset($application) ? route('applications.update', $application) : route('applications.store') }}" onsubmit="console.log('Form submitted!', this); return true;">
                            @csrf
                            @if(isset($application))
                                @method('PUT')
                            @endif

                            <div class="mb-3">
                                <label class="form-label">Nom</label>
                                <input type="text" name="name" class="form-control" value="{{ old('name', isset($application) ? $application->name : '') }}" required>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Slug</label>
                                <input type="text" name="slug" class="form-control" value="{{ old('slug', isset($application) ? $application->slug : '') }}" required>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Domaine</label>
                                <input type="url" name="domain" class="form-control" value="{{ old('domain', isset($application) ? $application->domain : '') }}" placeholder="https://example.com">
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Description</label>
                                <textarea name="description" class="form-control" rows="3">{{ old('description', isset($application) ? $application->description : '') }}</textarea>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Token</label>
                                <div class="input-group">
                                    <input type="text" name="token" class="form-control text-info" value="{{ old('token', isset($application) ? $application->token : '') }}" readonly>
                                    @if(!isset($application))
                                    <button class="btn btn-outline-secondary" type="button" onclick="generateToken()">
                                            <i class="fas fa-sync-alt"></i> Générer
                                        </button>
                                    @endif
                                </div>
                                <small class="text-muted">Token unique pour l'API</small>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Partenaires (ROLE_PARTNER)</label>
                                <select name="partner_user_ids[]" class="form-select" multiple>
                                    @foreach($partners as $p)
                                        <option value="{{ $p->id }}"
                                            @if(isset($application) && $application->users->pluck('id')->contains($p->id)) selected @endif>
                                            {{ ucfirst($p->lastname) }} {{ ucfirst($p->firstname) }}
                                        </option>
                                    @endforeach
                                </select>
                                <small class="text-muted">Sélection multiple possible</small>
                                
                                {{-- @if(isset($application))
                                    <div class="mt-2">
                                        <small class="text-info">
                                            Debug: Application ID: {{ $application->id }}<br>
                                            Utilisateurs associés: {{ $application->users->pluck('id')->implode(', ') }}<br>
                                            Nombre de partenaires disponibles: {{ $partners->count() }}
                                        </small>
                                    </div>
                                @else
                                    <div class="mt-2">
                                        <small class="text-info">
                                            Debug: Création d'une nouvelle application<br>
                                            Utilisateurs associés: (vide)<br>
                                            Nombre de partenaires disponibles: {{ $partners->count() }}
                                        </small>
                                    </div>
                                @endif --}}
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Abonnement</label>
                                <select name="subscription_id" class="form-select">
                                    <option value="">— Aucun —</option>
                                    @php $currentSubId = isset($application) ? optional($application->subscription)->id : null; @endphp
                                    @foreach($subscriptions as $subscription)
                                        <option value="{{ $subscription->id }}" {{ (old('subscription_id', $currentSubId) == $subscription->id) ? 'selected' : '' }}>
                                            {{ $subscription->name }}
                                            @if($subscription->price_monthly || $subscription->price_yearly)
                                                - Mensuel: {{ $subscription->price_monthly ? number_format($subscription->price_monthly, 2) . ' €' : 'Gratuit' }} | Annuel: {{ $subscription->price_yearly ? number_format($subscription->price_yearly, 2) . ' €' : 'Gratuit' }}
                                            @else
                                                - Gratuit
                                            @endif
                                        </option>
                                    @endforeach
                                </select>
                                <small class="text-muted">Un seul abonnement peut être sélectionné</small>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Fonctionnalités actives</label>
                                @php
                                    $selectedFeatureIds = !is_null(old('feature_ids'))
                                        ? (array) old('feature_ids')
                                        : (isset($application) ? $application->features->pluck('id')->toArray() : []);
                                @endphp
                                <div class="row g-3">
                                    @if(isset($features) && $features->count())
                                        @foreach($features as $feature)
                                            <div class="col-md-6 col-lg-4">
                                                <input type="checkbox" class="d-none feature-checkbox" id="feature_{{ $feature->id }}" name="feature_ids[]" value="{{ $feature->id }}" {{ in_array($feature->id, $selectedFeatureIds) ? 'checked' : '' }}>
                                                <label for="feature_{{ $feature->id }}" class="feature-tile card border h-100 p-3 d-block cursor-pointer">
                                                    <div class="d-flex align-items-start">
                                                        <div class="me-3">
                                                            <div class="avatar-sm bg-primary text-white rounded-circle d-flex align-items-center justify-content-center">
                                                                @if(!empty($feature->icon))
                                                                    <i class="{{ $feature->icon }}"></i>
                                                                @else
                                                                    <i class="fas fa-puzzle-piece"></i>
                                                                @endif
                                                            </div>
                                                        </div>
                                                        <div class="flex-grow-1">
                                                            <div class="fw-bold">{{ $feature->name }}</div>
                                                            <small class="text-muted">{{ $feature->slug }}</small>
                                                        </div>
                                                        <div class="ms-2 check-icon text-success" title="Sélectionné" aria-hidden="true">
                                                            <i class="fas fa-check-circle"></i>
                                                        </div>
                                                    </div>
                                                </label>
                                            </div>
                                        @endforeach
                                    @else
                                        <div class="col-12 text-muted">Aucune fonctionnalité active disponible</div>
                                    @endif
                                </div>
                                <small class="text-muted">Cliquez sur une carte pour sélectionner/désélectionner.</small>
                            </div>

                            <h5 class="text-primary">Prix spécifique à l'application</h5>

                            <div class="row g-3 mb-3">
                                <div class="col-md-4">
                                    <label class="form-label">Prix Mensuel (€)</label>
                                    <input type="number" name="price_monthly" class="form-control" step="0.01" min="0" value="{{ old('price_monthly', isset($application) ? $application->price_monthly : '') }}" placeholder="0.00">
                                    <small class="text-muted">Laissez vide pour une application gratuite</small>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">Prix Annuel (€)</label>
                                    <input type="number" name="price_yearly" class="form-control" step="0.01" min="0" value="{{ old('price_yearly', isset($application) ? $application->price_yearly : '') }}" placeholder="0.00">
                                    <small class="text-muted">Laissez vide pour une application gratuite</small>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">
                                        <i class="fas fa-users me-1"></i>Nombre max d'utilisateurs
                                    </label>
                                    <input type="number" name="max_users" class="form-control" min="1" value="{{ old('max_users', isset($application) ? $application->max_users : '') }}" placeholder="Illimité">
                                    <small class="text-muted">Vide = ∞ Illimité</small>
                                </div>
                            </div>

                            <div class="row g-3 mb-3">
                                <div class="col-md-6">
                                    <label class="form-label">Date de début d'abonnement</label>
                                    <input type="datetime-local" name="subscription_created_at" class="form-control" value="{{ old('subscription_created_at', isset($application) && $application->subscription_created_at ? $application->subscription_created_at->format('Y-m-d\TH:i') : '') }}">
                                    <small class="text-muted">Date de début de l'abonnement</small>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Date d'expiration d'abonnement</label>
                                    <input type="datetime-local" name="subscription_expires_at" class="form-control" value="{{ old('subscription_expires_at', isset($application) && $application->subscription_expires_at ? $application->subscription_expires_at->format('Y-m-d\TH:i') : '') }}">
                                    <small class="text-muted">Date d'expiration de l'abonnement</small>
                                </div>
                            </div>

                            <div class="form-check form-switch mb-3">
                                <input class="form-check-input" type="checkbox" role="switch" id="is_active" name="is_active" value="1" {{ old('is_active', isset($application) ? $application->is_active : true) ? 'checked' : '' }}>
                                <label class="form-check-label" for="is_active">Active</label>
                            </div>

                            <div class="form-check form-switch mb-3">
                                <input class="form-check-input" type="checkbox" role="switch" id="subscription_manager" name="subscription_manager" value="1" {{ old('subscription_manager', isset($application) ? $application->subscription_manager : false) ? 'checked' : '' }}>
                                <label class="form-check-label" for="subscription_manager">
                                    <i class="fas fa-cog me-1"></i>Activer gestionnaire d'abonnement
                                </label>
                                <small class="d-block text-muted mt-1">Permet de gérer les abonnements au sein de l'application</small>
                            </div>

                            <div class="d-flex justify-content-end gap-2">
                                <a href="{{ route('admin.applications') }}" class="btn btn-outline-secondary">Annuler</a>
                                <button type="submit" class="btn btn-primary">{{ isset($application) ? 'Mettre à jour' : 'Créer' }}</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
    // Toggle check visually when clicking on tile
    document.addEventListener('click', function (e) {
        const tile = e.target.closest('.feature-tile');
        if (!tile) return;
        const inputId = tile.getAttribute('for');
        if (!inputId) return;
        const checkbox = document.getElementById(inputId);
        if (!checkbox) return;
        // Let the default label-click toggle the checkbox first, then update classes
        setTimeout(() => {
            tile.classList.toggle('selected', checkbox.checked);
        }, 0);
    });
    function generateToken() {
        const tokenInput = document.querySelector('input[name="token"]');
        const newToken = 'token_' + Math.random().toString(36).substr(2, 9) + '_' + Date.now();
        tokenInput.value = newToken;
        
        // Visual feedback
        const button = event.target.closest('button');
        const originalIcon = button.innerHTML;
        button.innerHTML = '<i class="fas fa-check text-success"></i>';
        setTimeout(() => {
            button.innerHTML = originalIcon;
        }, 1500);
    }
    </script>

    <style>
    .avatar-sm { width: 40px; height: 40px; font-size: 14px; font-weight: bold; }
    .feature-tile { transition: all .15s ease-in-out; border-radius: .5rem; position: relative; }
    .feature-tile:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.08); border-color: #0d6efd; }
    .feature-checkbox:checked + .feature-tile { border-color: #198754 !important; box-shadow: 0 0 0 .15rem rgba(25,135,84,.15); }
    .feature-tile .check-icon { opacity: 0; transition: opacity .15s ease-in-out; }
    .feature-checkbox:checked + .feature-tile .check-icon, .feature-tile.selected .check-icon { opacity: 1; }
    .cursor-pointer { cursor: pointer; }
    </style>
@endsection