@extends('admin.layouts.app')

@section('content')
<div class="row">
    <div class="col-xl-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between bg-galaxy-transparent">
            <h4 class="mb-sm-0">{{ __('admin/push.show.title') }}</h4>

            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="{{ route('admin.pushes.index') }}">{{ __('admin/push.breadcrumb.module') }}</a></li>
                    <li class="breadcrumb-item active">{{ __('admin/push.breadcrumb.detail') }}</li>
                </ol>
            </div>
        </div>

        <!-- Menu bar -->
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header">
                    <div class="d-flex align-items-center flex-wrap gap-2">
                        <div class="flex-grow-1">
                            <a href="{{ route('admin.pushes.index') }}" class="btn btn-light me-2">
                                <i class="ri-arrow-left-line me-1"></i>{{ __('admin/push.buttons.back') }}
                            </a>
                            @can('pushes.edit')
                            <a href="{{ route('admin.pushes.edit', $push->id) }}" class="btn btn-primary">
                                <i class="ri-pencil-line me-1"></i>{{ __('admin/push.buttons.edit') }}
                            </a>
                            @endcan
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <!-- Contenu principal -->
            <div class="col-lg-8">
                <!-- Image -->
                @if($push->image)
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">{{ __('admin/push.sections.image') }}</h5>
                    </div>
                    <div class="card-body text-center">
                        <img src="{{ $push->image_url }}" alt="{{ __('admin/push.alt.image') }}" class="img-fluid rounded" style="max-height: 400px;">
                    </div>
                </div>
                @endif

                <!-- Onglets de langues -->
                <div class="card">
                    <div class="card-header">
                        <ul class="nav nav-tabs-custom rounded card-header-tabs border-bottom-0" role="tablist">
                            @foreach(config('translatable.locales') as $index => $locale)
                            <li class="nav-item">
                                <a class="nav-link {{ $index === 0 ? 'active' : '' }}" data-bs-toggle="tab" href="#{{ $locale }}" role="tab">
                                    {{ strtoupper($locale) }}
                                </a>
                            </li>
                            @endforeach
                        </ul>
                    </div>
                    <div class="card-body p-4">
                        <div class="tab-content">
                            @foreach(config('translatable.locales') as $index => $locale)
                            @php
                                $translation = $push->translations->where('locale', $locale)->first();
                            @endphp
                            <div class="tab-pane {{ $index === 0 ? 'active' : '' }}" id="{{ $locale }}" role="tabpanel">
                                @php
                                    $hasTitle = $translation && !empty($translation->title);
                                    $hasContent = $translation && !empty($translation->content);
                                    $hasButtonText = $translation && !empty($translation->button_text);
                                @endphp

                                @if(!$hasTitle && !$hasContent && !$hasButtonText)
                                <div class="mb-4">
                                    <div class="alert alert-info">
                                        <i class="ri-information-line me-2"></i>
                                        {{ __('admin/push.messages.no_translation_available', ['locale' => strtoupper($locale)]) }}
                                    </div>
                                    <div class="text-center">
                                        <a href="{{ route('admin.pushes.edit', $push->id) }}" class="btn btn-primary">
                                            <i class="ri-add-line me-1"></i>{{ __('admin/push.buttons.add_translation', ['locale' => strtoupper($locale)]) }}
                                        </a>
                                    </div>
                                </div>
                                @else
                                <div class="mb-4">
                                    @if($hasTitle)
                                    <div class="mb-4">
                                        <h5 class="text-muted mb-2">{{ __('admin/push.fields.title') }}</h5>
                                        <h3 class="mb-3">{{ $translation->title }}</h3>
                                    </div>
                                    @endif

                                    @if($hasContent)
                                    <div class="mb-4">
                                        <h5 class="text-muted mb-3">{{ __('admin/push.fields.content') }}</h5>
                                        <div class="">
                                            {!! nl2br(e($translation->content)) !!}
                                        </div>
                                    </div>
                                    @endif

                                    @if($push->display_button && $hasButtonText)
                                    <div class="mb-4">
                                        <h5 class="text-muted mb-3">{{ __('admin/push.fields.button') }}</h5>
                                        <div class="d-flex flex-column gap-2">
                                            <div>
                                                <span class="btn btn-primary">
                                                    {{ $translation->button_text }}
                                                </span>
                                            </div>
                                            <div>
                                                <small class="text-muted">
                                                    @if($push->button_link_type === 'external')
                                                        <i class="ri-external-link-line me-1"></i>{{ __('admin/push.fields.button_link_external') }}: {{ $push->button_link }}
                                                    @elseif($push->button_link_type === 'internal')
                                                        <i class="ri-links-line me-1"></i>{{ __('admin/push.fields.button_link_internal') }}:
                                                        @if($push->internal_link_type === 'training' && $push->training)
                                                            {{ __('admin/push.fields.internal_link_training') }} - {{ $push->training->title }}
                                                        @elseif($push->internal_link_type === 'page' && $push->page)
                                                            {{ __('admin/push.fields.internal_link_page') }} - {{ $push->page->title }}
                                                        @elseif($push->internal_link_type === 'route')
                                                            {{ __('admin/push.fields.internal_link_route') }} - {{ $push->route_name }}
                                                        @endif
                                                    @endif
                                                </small>
                                            </div>
                                        </div>
                                    </div>
                                    @endif
                                </div>
                                @endif
                            </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>

            <!-- Sidebar -->
            <div class="col-lg-4">
                <!-- Informations de publication -->
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">{{ __('admin/push.sections.information') }}</h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <div class="d-flex align-items-center gap-2">
                                <p class="form-label">{{ __('admin/push.fields.status') }}:

                                    @if($push->is_active)
                                    <span class="badge bg-success-subtle text-success">
                                        <i class="ri-check-line me-1"></i>{{ __('admin/push.status.active') }}
                                    </span>
                                    @else
                                    <span class="badge bg-danger-subtle text-danger">
                                        <i class="ri-close-line me-1"></i>{{ __('admin/push.status.inactive') }}
                                    </span>
                                    @endif
                                </p>
                            </div>
                        </div>

                        <div class="mb-3">
                            <div class="d-flex align-items-center gap-2">
                                <p class="form-label">{{ __('admin/push.fields.display_text') }}:

                                    @if($push->display_text)
                                    <span class="badge bg-info-subtle text-info">
                                        <i class="ri-eye-line me-1"></i>{{ __('admin/push.status.displayed') }}
                                    </span>
                                    @else
                                    <span class="badge bg-secondary-subtle text-secondary">
                                        <i class="ri-eye-off-line me-1"></i>{{ __('admin/push.status.hidden') }}
                                    </span>
                                    @endif
                                </p>
                            </div>
                        </div>

                        <div class="mb-3">
                            <div class="d-flex align-items-center gap-2">
                                <p class="form-label">{{ __('admin/push.fields.display_button') }}:

                                    @if($push->display_button)
                                    <span class="badge bg-success-subtle text-success">
                                        <i class="ri-check-line me-1"></i>{{ __('admin/push.status.displayed') }}
                                    </span>
                                    @else
                                    <span class="badge bg-secondary-subtle text-secondary">
                                        <i class="ri-close-line me-1"></i>{{ __('admin/push.status.hidden') }}
                                    </span>
                                    @endif
                                </p>
                            </div>
                        </div>

                        <div class="mb-3">
                            <p class="form-label">{{ __('admin/push.fields.order') }}: <span class="badge bg-primary-subtle text-primary">{{ $push->order }}</span></p>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">{{ __('admin/push.fields.created_at') }}</label>
                            <div>{{ $push->created_at->format('d/m/Y à H:i') }}</div>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">{{ __('admin/push.fields.updated_at') }}</label>
                            <div>{{ $push->updated_at->format('d/m/Y à H:i') }}</div>
                        </div>
                    </div>
                </div>

                <!-- Actions -->
                @canany(['pushes.edit', 'pushes.delete'])
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">{{ __('admin/push.sections.actions') }}</h5>
                    </div>
                    <div class="card-body">
                        <div class="d-grid gap-2">
                            @can('pushes.edit')
                            <a href="{{ route('admin.pushes.edit', $push->id) }}" class="btn btn-primary">
                                <i class="ri-pencil-line me-1"></i>{{ __('admin/push.buttons.edit_push') }}
                            </a>
                            @endcan
                            
                            @can('pushes.delete')
                            <button class="btn btn-danger w-100 open-delete-modal"
                                data-bs-toggle="modal"
                                href="#deleteRecordModal"
                                data-delete-url="{{ route('admin.pushes.destroy', $push->id) }}"
                                data-item-name="{{ Str::limit($push->translate()->title ?? 'Push #' . $push->id, 30) }}"
                                data-item-type="{{ __('admin/push.messages.push_type') }}"
                                id="delete-record-{{ $push->id }}">
                                <i class="ri-delete-bin-line me-1"></i>{{ __('admin/push.buttons.delete_push') }}
                            </button>
                            @endcan
                        </div>
                    </div>
                </div>
                @endcanany

                <!-- Langues disponibles -->
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">{{ __('admin/push.sections.translations') }}</h5>
                    </div>
                    <div class="card-body">
                        @foreach(config('translatable.locales') as $locale)
                        @php
                            $trans = $push->translations->where('locale', $locale)->first();
                            $isTranslated = $trans && (!empty($trans->title) || !empty($trans->content) || !empty($trans->button_text));
                        @endphp
                        <div class="d-flex align-items-center mb-2">
                            @if($isTranslated)
                                <i class="ri-check-line text-success me-2"></i>
                                <span>{{ strtoupper($locale) }} - {{ __('admin/push.status.translated') }}</span>
                            @else
                                <i class="ri-close-line text-danger me-2"></i>
                                <span class="text-muted">{{ strtoupper($locale) }} - {{ __('admin/push.status.not_translated') }}</span>
                            @endif
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal de suppression -->
<x-admin.delete-modal
    item-type="{{ __('admin/push.messages.push_type') }}"
    confirm-text="{{ __('admin/push.messages.delete_confirmation') }}"
    delete-text="{{ __('admin/push.buttons.delete_push') }}" />
@endsection