@extends('layouts.main_dashboard.app')

@section('title', __('dashboard.Posts'))
@section('page_heading', __('dashboard.Posts'))

@section('breadcrumb')
    <li class="breadcrumb-item text-muted"><a href="{{ route('admin.home') }}" class="text-muted text-hover-primary">{{ __('dashboard.Home') }}</a></li>
    <li class="breadcrumb-item"><span class="bullet bg-gray-500 w-5px h-2px"></span></li>
    <li class="breadcrumb-item text-muted"><a href="{{ route('admin.courses.show', $course->id) }}" class="text-muted text-hover-primary">{{ $course->name }}</a></li>
    <li class="breadcrumb-item"><span class="bullet bg-gray-500 w-5px h-2px"></span></li>
    <li class="breadcrumb-item text-muted">{{ __('dashboard.Posts') }}</li>
@endsection

@section('actions')
    <a href="{{ route('admin.courses.posts.create', $course->id) }}" class="btn btn-primary btn-sm">{{ __('dashboard.Create Post') }}</a>
@endsection

@section('content')
<div id="kt_app_content" class="app-content flex-column-fluid">
    <div id="kt_app_content_container" class="app-container container-fluid">

        <div class="row justify-content-center">
            <div class="col-lg-8">
                @forelse($posts as $post)
                    <div class="card card-flush mb-5 @if(!$post->is_published) opacity-75 border-dashed border-gray-400 @endif">
                        <div class="card-header pt-5">
                            <div class="d-flex align-items-center">
                                <div class="symbol symbol-45px symbol-circle me-3">
                                    @if($post->user->avatar)
                                        <img src="{{ asset('storage/'.$post->user->avatar) }}" alt="user">
                                    @else
                                        <span class="symbol-label bg-light-primary text-primary fw-bold fs-5">{{ substr($post->user->name, 0, 1) }}</span>
                                    @endif
                                </div>
                                <div class="d-flex flex-column">
                                    <div class="d-flex align-items-center">
                                        <span class="text-gray-800 fw-bold me-2">{{ $post->user->name }}</span>
                                        @if(!$post->is_published)
                                            <span class="badge badge-light-warning">{{ __('dashboard.Unpublished') }}</span>
                                        @endif
                                        @if($post->type == 'poll')
                                            <span class="badge badge-light-info ms-2">{{ __('dashboard.Poll') }}</span>
                                        @endif
                                    </div>
                                    <span class="text-gray-400 fs-7">{{ $post->created_at->diffForHumans() }}</span>
                                </div>
                            </div>

                            <div class="card-toolbar">
                                @if(auth()->id() == $post->user_id || auth()->user()->type == 'admin')
                                <button class="btn btn-sm btn-icon btn-color-gray-500 btn-active-light-primary" data-bs-toggle="dropdown">
                                    <i class="ki-outline ki-dots-square fs-1"></i>
                                </button>
                                <div class="dropdown-menu dropdown-menu-end menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold w-150px py-4">
                                    <div class="menu-item px-3">
                                        <a href="{{ route('admin.courses.posts.edit', [$course->id, $post->id]) }}" class="menu-link px-3">{{ __('dashboard.Edit') }}</a>
                                    </div>
                                    <div class="menu-item px-3">
                                        <form action="{{ route('admin.courses.posts.destroy', [$course->id, $post->id]) }}" method="POST">
                                            @csrf @method('DELETE')
                                            <button type="submit" class="menu-link px-3 w-100 bg-transparent border-0 text-start text-danger" onclick="return confirm('{{ __('dashboard.Are you sure you want to delete this item?') }}')">{{ __('dashboard.Delete') }}</button>
                                        </form>
                                    </div>
                                </div>
                                @endif
                            </div>
                        </div>

                        <div class="p-6">
                            <div class="fs-6 fw-bold text-gray-800 mb-5" style="white-space: pre-line;">{{ $post->body }}</div>

                            @if($post->type == 'normal' && $post->attachments->count() > 0)
                                <div class="row g-2">
                                    @foreach($post->attachments as $attachment)
                                        @if($attachment->file_type == 'video')
                                            <div class="col-12">
                                                <video controls class="w-100 rounded" style="max-height: 400px; background: black;">
                                                    <source src="{{ $attachment->url }}" type="video/mp4">
                                                    Your browser does not support the video tag.
                                                </video>
                                            </div>
                                        @else
                                            <div class="{{ $post->attachments->count() == 1 ? 'col-12' : 'col-6' }}">
                                                <a href="{{ $attachment->url }}" target="_blank">
                                                    <img src="{{ $attachment->url }}" class="w-100 rounded object-fit-cover" style="height: 250px; width: 100%; object-fit: cover;" alt="">
                                                </a>
                                            </div>
                                        @endif
                                    @endforeach
                                </div>

                            @elseif($post->type == 'poll')
                                @php
                                    $totalVotes = $post->total_votes;
                                @endphp
                                <div class="d-flex flex-column gap-3">
                                    @foreach($post->pollOptions as $option)
                                        @php
                                            $percentage = $totalVotes > 0 ? round(($option->votes_count / $totalVotes) * 100) : 0;
                                        @endphp
                                        <div class="border border-gray-300 border-dashed rounded p-3 position-relative overflow-hidden">
                                            <div class="position-absolute top-0 start-0 h-100 bg-light-primary" style="width: {{ $percentage }}%; z-index: 0; opacity: 0.5;"></div>

                                            <div class="d-flex justify-content-between align-items-center position-relative" style="z-index: 1;">
                                                <span class="text-gray-800 fw-bold">{{ $option->option_text }}</span>
                                                <div class="d-flex align-items-center">
                                                    <span class="fw-bold me-2">{{ $percentage }}%</span>
                                                    <span class="text-muted fs-7">({{ $option->votes_count }} {{ __('dashboard.votes') }})</span>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                                <div class="mt-3 text-muted fs-7">
                                    {{ __('dashboard.Total Votes') }}: {{ $totalVotes }} |
                                    {{ $post->allow_multiple_choice ? __('dashboard.Multiple Choice') : __('dashboard.Single Choice') }}
                                </div>
                            @endif
                        </div>
                    </div>
                @empty
                    <div class="rounded-[1.75rem] border border-zinc-200 bg-white shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
                        <div class="card-body text-center p-10">
                            <i class="ki-outline ki-messages fs-3x text-muted mb-3"></i>
                            <p class="fs-5 fw-bold text-gray-600">{{ __('dashboard.No posts found yet.') }}</p>
                        </div>
                    </div>
                @endforelse

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