@extends('layouts.app')

@section('title', 'Posts Agendados')

@section('content')
<div class="row g-3 mb-4">
    <div class="col-auto">
        <h2 class="mb-0">Posts Agendados</h2>
    </div>
    <div class="col-auto ms-auto">
        @if(auth()->user()->hasPermission('posts.create'))
        <div class="btn-group" role="group">
            <a href="{{ route('posts.create') }}" class="btn btn-outline-primary">
                <span class="fas fa-plus me-2"></span>Criar Simples
            </a>
            <a href="{{ route('posts.wizard.create') }}" class="btn btn-primary">
                <span class="fas fa-magic me-2"></span>Criar com Wizard
            </a>
        </div>
        @endif
    </div>
</div>

<div class="card">
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>Título</th>
                        <th>Agendado para</th>
                        <th>Redes Sociais</th>
                        <th>Status</th>
                        <th>Criado por</th>
                        <th width="150">Ações</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($posts as $post)
                    <tr>
                        <td>
                            <a href="{{ route('posts.show', $post) }}" class="text-decoration-none">
                                {{ $post->title }}
                            </a>
                        </td>
                        <td>
                            {{ $post->scheduled_at->format('d/m/Y H:i') }}
                            <small class="text-muted d-block">
                                {{ $post->scheduled_at->diffForHumans() }}
                            </small>
                        </td>
                        <td>
                            <div class="d-flex flex-wrap gap-1">
                                @foreach($post->tasks as $task)
                                <span class="badge rounded-pill position-relative"
                                    style="background-color: {{ $task->socialNetwork->color }}">
                                    <i class="{{ $task->socialNetwork->icon }} me-1"></i>
                                    {{ $task->socialNetwork->name }}
                                    @if($task->check)
                                        <span class="position-absolute top-0 start-100 translate-middle p-1 bg-success border border-light rounded-circle"
                                            style="width: 8px; height: 8px;">
                                            <span class="visually-hidden">Publicado</span>
                                        </span>
                                    @endif
                                </span>
                                @endforeach
                            </div>
                        </td>
                        <td>
                            <div class="d-flex flex-column gap-1">
                                <span class="badge badge-phoenix badge-phoenix-{{ $post->status_color }}">
                                    {{ $post->status_label }}
                                </span>
                                <x-post-publish-progress :post="$post" />
                            </div>
                        </td>
                        <td>{{ $post->creator->name }}</td>
                        <td>
                            <div class="btn-group btn-group-sm" role="group">
                                <a href="{{ route('posts.show', $post) }}"
                                   class="btn btn-phoenix-secondary">
                                    <i class="fas fa-eye"></i>
                                </a>
                                @if(auth()->user()->hasPermission('posts.edit'))
                                <a href="{{ route('posts.edit', $post) }}"
                                   class="btn btn-phoenix-secondary">
                                    <i class="fas fa-edit"></i>
                                </a>
                                @endif
                                @if(auth()->user()->hasPermission('posts.delete'))
                                <form action="{{ route('posts.destroy', $post) }}"
                                      method="POST"
                                      class="d-inline"
                                      onsubmit="return confirm('Tem certeza?')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-phoenix-danger">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </form>
                                @endif
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="6" class="text-center py-4">
                            <p class="mb-0 text-muted">Nenhum post agendado ainda.</p>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div class="mt-3">
            {{ $posts->links() }}
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Inicializar tooltips
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl)
    });
});
</script>
@endpush