@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('partner.applications') }}">Applications</a></li>
                <li class="breadcrumb-item"><a href="{{ route('partner.application.display-parameters', $application) }}">Paramètres d'affichage</a></li>
                <li class="breadcrumb-item active" aria-current="page">Gestion du thème</li>
            </ol>
        </nav>
    @endsection

    <div class="container-fluid py-4">
        <!-- Header Section -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h1 class="h3 mb-2 text-success">
                            <i class="fas fa-paint-brush me-2"></i>Gestion du thème
                        </h1>
                        <p class="text-muted mb-0">Gérez les thèmes de l'application <strong>{{ $application->name }}</strong></p>
                    </div>
                    <div class="d-flex gap-2">
                        <a href="{{ route('partner.application.themes.create', $application) }}" class="btn btn-primary">
                            <i class="fas fa-plus me-2"></i>Créer un thème
                        </a>
                        <a href="{{ route('partner.application.display-parameters', $application) }}" class="btn btn-outline-secondary">
                            <i class="fas fa-arrow-left me-2"></i>Retour
                        </a>
                    </div>
                </div>
            </div>
        </div>

        @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <i class="fas fa-check-circle me-2"></i>{{ 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">
                <i class="fas fa-exclamation-circle me-2"></i>{{ session('error') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif

        <!-- Active Theme Section -->
        @if($activeTheme)
            <div class="row mb-4">
                <div class="col-12">
                    <div class="card border-success shadow-sm">
                        <div class="card-header bg-success">
                            <h5 class="mb-0 text-dark">
                                <i class="fas fa-check-circle me-2"></i>Thème actif
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="row align-items-center">
                                <div class="col-md-8">
                                    <h4 class="mb-2">{{ $activeTheme->name }}</h4>
                                    <div class="d-flex align-items-center gap-3 mb-3 flex-wrap">
                                        <div class="d-flex align-items-center">
                                            <span class="me-2">Couleur primaire :</span>
                                            <div class="d-flex align-items-center">
                                                <div class="rounded border" style="width: 40px; height: 40px; background-color: {{ $activeTheme->primary_color }};"></div>
                                                <code class="ms-2">{{ $activeTheme->primary_color }}</code>
                                            </div>
                                        </div>
                                        @if($activeTheme->dark_mode)
                                            <div class="d-flex align-items-center">
                                                <span class="badge bg-dark">
                                                    <i class="fas fa-moon me-1"></i>Mode sombre
                                                </span>
                                            </div>
                                        @endif
                                    </div>
                                    <small class="text-muted">
                                        <i class="fas fa-calendar me-1"></i>Créé le {{ $activeTheme->created_at->format('d/m/Y à H:i') }}
                                    </small>
                                </div>
                                <div class="col-md-4 text-end">
                                    <div class="btn-group">
                                        <a href="{{ route('partner.application.themes.edit', [$application, $activeTheme]) }}" class="btn btn-outline-primary">
                                            <i class="fas fa-edit me-1"></i>Modifier
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @else
            <div class="row mb-4">
                <div class="col-12">
                    <div class="alert alert-warning">
                        <i class="fas fa-exclamation-triangle me-2"></i>Aucun thème actif. Veuillez activer un thème pour l'appliquer à votre application.
                    </div>
                </div>
            </div>
        @endif

        <!-- Themes List -->
        <div class="row">
            <div class="col-12">
                <div class="card shadow-sm">
                    <div class="card-header bg-white">
                        <h5 class="mb-0">
                            <i class="fas fa-list me-2"></i>Thèmes disponibles
                        </h5>
                    </div>
                    <div class="card-body p-0">
                        @if($themes->count() > 0)
                            <div class="table-responsive">
                                <table class="table table-hover align-middle mb-0">
                                    <thead class="table-light">
                                        <tr>
                                            <th style="width: 5%;">Statut</th>
                                            <th style="width: 20%;">Nom</th>
                                            <th style="width: 18%;">Couleur primaire</th>
                                            <th style="width: 12%;">Mode sombre</th>
                                            <th style="width: 15%;">Date de création</th>
                                            <th style="width: 30%;" class="text-center">Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($themes as $theme)
                                            <tr class="{{ $theme->is_active ? 'table-success' : '' }}">
                                                <td>
                                                    @if($theme->is_active)
                                                        <span class="badge bg-success">
                                                            <i class="fas fa-check-circle me-1"></i>Actif
                                                        </span>
                                                    @else
                                                        <span class="badge bg-secondary">Inactif</span>
                                                    @endif
                                                </td>
                                                <td>
                                                    <strong>{{ $theme->name }}</strong>
                                                </td>
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        <div class="rounded border" style="width: 30px; height: 30px; background-color: {{ $theme->primary_color }};"></div>
                                                        <code class="ms-2">{{ $theme->primary_color }}</code>
                                                    </div>
                                                </td>
                                                <td>
                                                    @if($theme->dark_mode)
                                                        <span class="badge bg-dark">
                                                            <i class="fas fa-moon me-1"></i>Oui
                                                        </span>
                                                    @else
                                                        <span class="badge bg-secondary">
                                                            <i class="fas fa-sun me-1"></i>Non
                                                        </span>
                                                    @endif
                                                </td>
                                                <td>
                                                    <small class="text-muted">
                                                        {{ $theme->created_at->format('d/m/Y à H:i') }}
                                                    </small>
                                                </td>
                                                <td class="text-center">
                                                    <div class="d-flex gap-1 justify-content-center align-items-center">
                                                        @if(!$theme->is_active)
                                                            <form action="{{ route('partner.application.themes.activate', [$application, $theme]) }}" method="POST" class="d-inline m-0">
                                                                @csrf
                                                                <button type="submit" class="btn btn-sm btn-outline-success" title="Activer">
                                                                    <i class="fas fa-power-off me-1"></i>
                                                                </button>
                                                            </form>
                                                        @endif
                                                        <a href="{{ route('partner.application.themes.edit', [$application, $theme]) }}" class="btn btn-sm btn-outline-primary" title="Modifier">
                                                            <i class="fas fa-edit"></i>
                                                        </a>
                                                        @if(!$theme->is_active)
                                                            <form action="{{ route('partner.application.themes.destroy', [$application, $theme]) }}"
                                                                  method="POST"
                                                                  class="d-inline m-0"
                                                                  onsubmit="return confirm('Êtes-vous sûr de vouloir supprimer ce thème ?')">
                                                                @csrf
                                                                @method('DELETE')
                                                                <button type="submit" class="btn btn-sm btn-outline-danger" title="Supprimer">
                                                                    <i class="fas fa-trash"></i>
                                                                </button>
                                                            </form>
                                                        @endif
                                                    </div>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        @else
                            <div class="text-center py-5">
                                <i class="fas fa-paint-brush fa-3x text-muted mb-3"></i>
                                <h5 class="mb-1">Aucun thème</h5>
                                <p class="text-muted mb-3">Commencez par créer votre premier thème.</p>
                                <a href="{{ route('partner.application.themes.create', $application) }}" class="btn btn-success">
                                    <i class="fas fa-plus me-2"></i>Créer un thème
                                </a>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection