@extends('layouts.app')

@section('content')

@include('h5p_tool.partials.styles')

<div id="main-content">
    <div class="container-fluid">
        <div class="row">
            <div id="region-main" class="content-col col-md-12">
                <div id="page-content">
                    <div role="main">
                        <div class="d-flex justify-content-between align-items-center mb-4">
                            <h2>Chi tiết Video H5P</h2>
                            <div>
                                <a href="{{ route('h5p-videos.edit', $h5pVideo) }}" class="btn btn-warning me-2">
                                    <i class="fa fa-edit"></i> Chỉnh sửa
                                </a>
                                <button type="button" class="btn btn-danger me-2" data-bs-toggle="modal" data-bs-target="#deleteModal">
                                    <i class="fa fa-trash"></i> Xóa
                                </button>
                                <a href="{{ route('h5p-videos.index') }}" class="btn btn-secondary">
                                    <i class="fa fa-arrow-left"></i> Quay lại
                                </a>
                            </div>
                        </div>

                        <!-- Thông tin video -->
                        <div class="card mb-4">
                            <div class="card-header">
                                <h5 class="mb-0">
                                    <i class="fa fa-video me-2"></i>
                                    Thông tin Video
                                </h5>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-8">
                                        <table class="table table-borderless">
                                            <tr>
                                                <td class="fw-bold" style="width: 150px;">Tiêu đề:</td>
                                                <td>{{ $h5pVideo->title }}</td>
                                            </tr>
                                            <tr>
                                                <td class="fw-bold">Link Video:</td>
                                                <td>
                                                    <a href="{{ $h5pVideo->video_url }}" target="_blank" class="text-primary">
                                                        {{ $h5pVideo->video_url }}
                                                        <i class="fa fa-external-link-alt ms-1"></i>
                                                    </a>
                                                </td>
                                            </tr>
                                            @if($h5pVideo->description)
                                            <tr>
                                                <td class="fw-bold">Mô tả:</td>
                                                <td>{{ $h5pVideo->description }}</td>
                                            </tr>
                                            @endif
                                            <tr>
                                                <td class="fw-bold">Số lượng H5P:</td>
                                                <td>
                                                    <span class="badge bg-info">{{ $h5pVideo->items->count() }} items</span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="fw-bold">Ngày tạo:</td>
                                                <td>{{ $h5pVideo->created_at->format('d/m/Y H:i:s') }}</td>
                                            </tr>
                                            <tr>
                                                <td class="fw-bold">Cập nhật lần cuối:</td>
                                                <td>{{ $h5pVideo->updated_at->format('d/m/Y H:i:s') }}</td>
                                            </tr>
                                        </table>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="video-preview">
                                            <h6 class="mb-3">Preview Video</h6>
                                            <div class="video-thumbnail" id="video-preview">
                                                <div class="placeholder-video">
                                                    <i class="fa fa-play-circle fa-3x text-muted"></i>
                                                    <p class="mt-2 text-muted">Click để xem video</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Video Player -->
                        <div class="card mb-4" id="video-player-card" style="display: none;">
                            <div class="card-header d-flex justify-content-between align-items-center">
                                <h5 class="mb-0">
                                    <i class="fa fa-play me-2"></i>
                                    Video Player
                                </h5>
                                <button type="button" class="btn btn-sm btn-outline-secondary" onclick="hideVideoPlayer()">
                                    <i class="fa fa-times"></i> Đóng
                                </button>
                            </div>
                            <div class="card-body">
                                <div class="video-container">
                                    <div id="video-embed"></div>
                                </div>
                                <div class="video-controls mt-3">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="current-time-display">
                                                <strong>Thời gian hiện tại: </strong>
                                                <span id="current-time">00:00</span>
                                            </div>
                                        </div>
                                        <div class="col-md-6 text-end">
                                            <button type="button" class="btn btn-sm btn-primary" onclick="jumpToNextH5P()">
                                                <i class="fa fa-forward"></i> H5P tiếp theo
                                            </button>
                                            <button type="button" class="btn btn-sm btn-secondary" onclick="hideH5PContent()">
                                                <i class="fa fa-eye-slash"></i> Ẩn H5P
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- H5P Content Display -->
                        <div class="card mb-4" id="h5p-display-card" style="display: none;">
                            <div class="card-header d-flex justify-content-between align-items-center">
                                <h5 class="mb-0">
                                    <i class="fa fa-puzzle-piece me-2"></i>
                                    H5P Content: <span id="current-h5p-title"></span>
                                </h5>
                                <div>
                                    <small class="text-muted me-3">Nhấn 'H' để ẩn nhanh</small>
                                    <button type="button" class="btn btn-sm btn-outline-secondary" onclick="hideH5PContent()">
                                        <i class="fa fa-times"></i> Đóng
                                    </button>
                                </div>
                            </div>
                            <div class="card-body">
                                <div id="h5p-container" style="max-width: 1000px; margin: auto; min-height: 400px;"></div>
                            </div>
                        </div>

                        <!-- Danh sách H5P Items -->
                        <div class="card">
                            <div class="card-header">
                                <h5 class="mb-0">
                                    <i class="fa fa-list me-2"></i>
                                    Danh sách H5P Items
                                    <small class="text-muted">({{ $h5pVideo->items->count() }} items)</small>
                                </h5>
                            </div>
                            <div class="card-body">
                                @if($h5pVideo->items->count() > 0)
                                    <div class="timeline">
                                        @foreach($h5pVideo->items->sortBy('time_seconds') as $index => $item)
                                            <div class="timeline-item" data-time="{{ $item->time_seconds }}" data-h5p-path="{{ $item->h5p_unpacked_path }}">
                                                <div class="timeline-marker">
                                                    <span class="timeline-number">{{ $index + 1 }}</span>
                                                </div>
                                                <div class="timeline-content">
                                                    <div class="card h5p-item-card">
                                                        <div class="card-body">
                                                            <div class="row align-items-center">
                                                                <div class="col-md-2">
                                                                    <div class="time-badge">
                                                                        <i class="fa fa-clock me-1"></i>
                                                                        <strong>{{ $item->formatted_time }}</strong>
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-6">
                                                                    <div class="file-info">
                                                                        <h6 class="mb-1">
                                                                            <i class="fa fa-file-alt me-1"></i>
                                                                            {{ $item->h5p_file_name }}
                                                                        </h6>
                                                                        <small class="text-muted">
                                                                            Tải lên: {{ $item->created_at->format('d/m/Y H:i') }}
                                                                        </small>
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-4 text-end">
                                                                    <div class="btn-group" role="group">
                                                                        <button type="button" class="btn btn-sm btn-outline-primary" 
                                                                                onclick="jumpToTime({{ $item->time_seconds }})">
                                                                            <i class="fa fa-play"></i> Phát tại thời điểm này
                                                                        </button>
                                                                        <a href="{{ Storage::url($item->h5p_file_path) }}" 
                                                                           class="btn btn-sm btn-outline-success" download>
                                                                            <i class="fa fa-download"></i> Tải xuống
                                                                        </a>
                                                                        <button type="button" class="btn btn-sm btn-outline-info" 
                                                                                onclick="showH5PContent('{{ $item->h5p_file_name }}', '{{ $item->h5p_unpacked_path }}', false, {{ $item->id }})">
                                                                            <i class="fa fa-eye"></i> Xem H5P
                                                                        </button>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                @else
                                    <div class="text-center py-5">
                                        <i class="fa fa-inbox fa-3x text-muted mb-3"></i>
                                        <h5 class="text-muted">Chưa có H5P items nào</h5>
                                        <p class="text-muted">Hãy chỉnh sửa video để thêm H5P items</p>
                                        <a href="{{ route('h5p-videos.edit', $h5pVideo) }}" class="btn btn-primary">
                                            <i class="fa fa-plus"></i> Thêm H5P Items
                                        </a>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal xác nhận xóa -->
<div class="modal fade" id="deleteModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Xác nhận xóa</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="text-center">
                    <i class="fa fa-exclamation-triangle fa-3x text-warning mb-3"></i>
                    <h5>Bạn có chắc chắn muốn xóa video H5P này?</h5>
                    <p class="text-muted">
                        Hành động này sẽ xóa vĩnh viễn video "<strong>{{ $h5pVideo->title }}</strong>" 
                        và tất cả {{ $h5pVideo->items->count() }} H5P items liên quan.
                    </p>
                    <div class="alert alert-danger">
                        <small><i class="fa fa-warning"></i> Dữ liệu đã xóa không thể khôi phục!</small>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="fa fa-times"></i> Hủy
                </button>
                <form action="{{ route('h5p-videos.destroy', $h5pVideo) }}" method="POST" class="d-inline">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-danger">
                        <i class="fa fa-trash"></i> Xóa vĩnh viễn
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Hidden inputs for tenant connection -->
<input type="hidden" id="currentUserEmail" value="{{ $currentEmail ?? '' }}">
<input type="hidden" name="tenant_connection" value="{{ $tenantConnection ?? '' }}">

@include('h5p_tool.partials.show_scripts')
@endsection