@extends('admin.layout')
@section('title', 'Quản lý hướng dẫn')

@section('content')
    <div style="margin-bottom: 24px;">
        <h2 style="font-size: 20px; font-weight: 800; color: var(--text); margin-bottom: 4px;">Quản lý nội dung <span style="color: var(--accent);">Hướng dẫn</span></h2>
        <p style="font-size: 12px; color: var(--text-muted);">Cập nhật video và các bước quy trình kích hoạt Gold</p>
    </div>

    <div class="dash-grid-3" style="gap:20px; align-items: flex-start; margin-bottom: 24px;">
        
        {{-- Video Settings Card --}}
        <div class="card" style="grid-column: span 1;">
            <div class="card-header" style="background: linear-gradient(to right, var(--card), var(--accent-light));">
                <h3><i class="fas fa-play-circle" style="color:var(--accent);margin-right:8px;"></i>Video hướng dẫn</h3>
            </div>
            <div style="padding: 20px;">
                {{-- Plan selection tabs --}}
                <div style="display: flex; gap: 6px; overflow-x: auto; padding-bottom: 10px; margin-bottom: 18px; border-bottom: 1px solid var(--border);">
                    <button type="button" onclick="switchVideoTab('default')" class="video-tab-btn active-tab" id="btn-tab-default" style="padding: 6px 12px; border-radius: 8px; border: 1px solid var(--accent); background: var(--accent-light); color: var(--accent); font-weight: 700; font-size: 11px; cursor: pointer; white-space: nowrap; transition: all 0.2s;">
                        Mặc định
                    </button>
                    @foreach($plans as $p)
                        <button type="button" onclick="switchVideoTab('{{ $p->plan_id }}')" class="video-tab-btn" id="btn-tab-{{ $p->plan_id }}" style="padding: 6px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--card); color: var(--text-muted); font-weight: 600; font-size: 11px; cursor: pointer; white-space: nowrap; transition: all 0.2s;">
                            {{ $p->name }}
                        </button>
                    @endforeach
                </div>

                <form action="{{ route('admin.guide.video.update') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="plan_id" id="video_plan_id" value="">
                    
                    <div style="margin-bottom: 20px;">
                        <label id="preview-label" style="display:block;font-size:11px;font-weight:700;color:var(--text);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:10px;">Video hiện tại (Mặc định)</label>
                        
                        <div id="current-video-preview" style="background: #000; border-radius: 12px; overflow: hidden; aspect-ratio: 16/9; margin-bottom: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); position: relative; height: 140px;">
                            @if($videoUrl)
                                @if($videoType == 'embed' || $videoType == 'url')
                                    <iframe src="{{ $videoUrl }}" style="width: 100%; height: 100%; border: none;" allowfullscreen></iframe>
                                @else
                                    <video src="{{ $videoUrl }}" style="width: 100%; height: 100%; object-fit: cover;" controls></video>
                                @endif
                            @else
                                <div style="background: var(--bg); border-radius: 12px; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--text-muted); border: 2px dashed var(--border);">
                                    <i class="fas fa-video-slash fa-2x"></i>
                                </div>
                            @endif
                        </div>
                        
                        <div id="current-video-link" style="font-size: 10px; color: var(--text-muted); word-break: break-all; background: var(--bg); padding: 6px 10px; border-radius: 6px; {{ $videoUrl ? '' : 'display: none;' }}">
                            <i class="fas fa-link"></i> <span id="current-video-link-text">{{ $videoUrl }}</span>
                        </div>
                    </div>

                    <div style="margin-bottom: 18px;">
                        <label style="display:block;font-size:11px;font-weight:700;color:var(--text);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:8px;">Hoặc nhập URL Video (YouTube/Google Drive)</label>
                        <div style="position: relative;">
                            <input type="url" name="video_url" class="ad-input" style="width: 100%; height: 40px; padding-left: 36px;" placeholder="https://www.youtube.com/embed/xxx hoặc Google Drive link">
                            <i class="fas fa-link" style="position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--accent);"></i>
                        </div>
                    </div>

                    <div style="margin-bottom: 18px;">
                        <label style="display:block;font-size:11px;font-weight:700;color:var(--text);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:8px;">Hoặc tải lên file (.mp4)</label>
                        <div style="position: relative;">
                            <input type="file" name="video" accept="video/mp4" class="ad-input" style="width: 100%; padding-left: 36px;">
                            <i class="fas fa-cloud-upload-alt" style="position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--accent);"></i>
                        </div>
                    </div>

                    <button type="submit" class="btn btn-primary w-full" style="justify-content: center; height: 42px; border-radius: 10px; box-shadow: 0 4px 12px rgba(201,169,110,0.25);">
                        <i class="fas fa-sync-alt"></i> Cập nhật Video
                    </button>
                </form>
            </div>
        </div>

        {{-- Add Step Card --}}
        <div class="card" style="grid-column: span 2;">
            <div class="card-header" style="background: linear-gradient(to right, var(--card), var(--accent-light));">
                <h3><i class="fas fa-plus-circle" style="color:var(--accent);margin-right:8px;"></i>Thêm bước hướng dẫn mới</h3>
            </div>
            <div style="padding: 20px;">
                <form action="{{ route('admin.guide.steps.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div style="display: grid; grid-template-columns: 2fr 1fr; gap: 16px; margin-bottom: 16px;">
                        <div>
                            <label style="display:block;font-size:11px;font-weight:700;color:var(--text);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:6px;">Tiêu đề bước</label>
                            <input type="text" name="title" class="ad-input" style="width:100%; height: 40px;" placeholder="Ví dụ: Lấy link Locket" required>
                        </div>
                        <div>
                            <label style="display:block;font-size:11px;font-weight:700;color:var(--text);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:6px;">Thứ tự hiển thị</label>
                            <input type="number" name="order" class="ad-input" style="width:100%; height: 40px;" placeholder="1, 2, 3...">
                        </div>
                    </div>

                    <div style="margin-bottom: 16px;">
                        <label style="display:block;font-size:11px;font-weight:700;color:var(--text);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:6px;">Nội dung chi tiết (Dùng &lt;strong&gt; để làm đậm)</label>
                        <textarea name="description" class="ad-input" style="width:100%; min-height: 80px; padding: 12px;" placeholder="Nhập mô tả bước..." required></textarea>
                    </div>

                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px;">
                        <div>
                            <label style="display:block;font-size:11px;font-weight:700;color:var(--text);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:6px;">Ảnh minh họa</label>
                            <div style="position: relative;">
                                <input type="file" name="image" accept="image/*" class="ad-input" style="width:100%; height: 40px; padding-left: 36px;">
                                <i class="fas fa-image" style="position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--accent);"></i>
                            </div>
                        </div>
                        <div>
                            <label style="display:block;font-size:11px;font-weight:700;color:var(--text);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:6px;">Lưu ý màu đỏ (Nếu có)</label>
                            <div style="position: relative;">
                                <input type="text" name="important_note" class="ad-input" style="width:100%; height: 40px; padding-left: 36px;" placeholder="Ví dụ: Bước này rất quan trọng!">
                                <i class="fas fa-exclamation-triangle" style="position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #ef4444;"></i>
                            </div>
                        </div>
                    </div>

                    <div style="display: flex; justify-content: flex-end;">
                        <button type="submit" class="btn btn-primary" style="padding: 10px 24px; border-radius: 10px; font-weight: 700; box-shadow: 0 4px 12px rgba(201,169,110,0.25);">
                            <i class="fas fa-save" style="margin-right: 6px;"></i> Lưu bước mới
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header" style="display: flex; justify-content: space-between; align-items: center; padding: 16px 20px;">
            <h3 style="font-size: 14px;"><i class="fas fa-stream" style="color:var(--accent);margin-right:8px;"></i>Cấu trúc quy trình hiện tại (Kéo thả để sắp xếp)</h3>
            <span style="font-size: 11px; background: var(--bg); color: var(--text-muted); padding: 4px 10px; border-radius: 20px; font-weight: 600;">Tổng cộng: {{ count($steps) }} bước</span>
        </div>
        <div style="overflow-x: auto;">
            <table class="ad-table" style="min-width: 800px;">
                <thead>
                    <tr>
                        <th style="width: 40px; text-align: center;"></th>
                        <th style="width: 60px; text-align: center;">Vị trí</th>
                        <th style="width: 100px;">Ảnh</th>
                        <th>Chi tiết nội dung bước</th>
                        <th style="width: 180px;">Lưu ý nổi bật</th>
                        <th style="width: 120px; text-align: right;">Thao tác</th>
                    </tr>
                </thead>
                <tbody id="sortableSteps">
                    @foreach($steps as $step)
                    <tr data-id="{{ $step->id }}">
                        <td style="text-align: center; cursor: grab;" class="drag-handle">
                            <i class="fas fa-grip-vertical" style="color: var(--text-muted); opacity: 0.5;"></i>
                        </td>
                        <td style="text-align: center;">
                            <div class="step-order" style="width: 28px; height: 28px; background: var(--accent-light); color: var(--accent); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px; margin: 0 auto;">
                                {{ $step->order }}
                            </div>
                        </td>
                        <td>
                            <div style="width: 70px; height: 70px; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); box-shadow: 0 2px 6px rgba(0,0,0,0.05);">
                                @if($step->image)
                                    <img src="{{ Str::startsWith($step->image, 'http') ? $step->image : (Str::startsWith($step->image, '/') ? $step->image : '/huong-dan/'.$step->image) }}" style="width: 100%; height: 100%; object-fit: cover;">
                                @else
                                    <div style="width: 100%; height: 100%; background: var(--bg); display: flex; align-items: center; justify-content: center; color: var(--text-muted);">
                                        <i class="fas fa-image"></i>
                                    </div>
                                @endif
                            </div>
                        </td>
                        <td>
                            <div style="font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 4px;">{{ $step->title }}</div>
                            <div style="font-size: 12px; color: var(--text-muted); line-height: 1.5; max-width: 500px;">{!! $step->description !!}</div>
                        </td>
                        <td>
                            @if($step->important_note)
                                <div style="display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: #fff1f2; color: #e11d48; border-radius: 8px; font-size: 11px; font-weight: 600; border: 1px solid #fecdd3;">
                                    <i class="fas fa-exclamation-circle"></i> {{ $step->important_note }}
                                </div>
                            @else
                                <span style="color: #cbd5e1; font-size: 11px;">Không có</span>
                            @endif
                        </td>
                        <td style="text-align: right;">
                            <div style="display: flex; gap: 8px; justify-content: flex-end;">
                                <button onclick="editStep({{ json_encode($step) }})" class="btn btn-outline" style="width: 34px; height: 34px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 8px;">
                                    <i class="fas fa-pen" style="font-size: 12px;"></i>
                                </button>
                                <form action="{{ route('admin.guide.steps.delete', $step->id) }}" method="POST" onsubmit="return confirm('Bạn có chắc chắn muốn xóa bước này?')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-danger" style="width: 34px; height: 34px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: #fff1f2; border: 1px solid #fecdd3; color: #e11d48;">
                                        <i class="fas fa-trash-alt" style="font-size: 12px;"></i>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

    {{-- Redesigned Edit Modal --}}
    <div id="editModal" style="display:none; position:fixed; inset:0; z-index:9999; align-items:center; justify-content:center; background:rgba(61, 50, 41, 0.4); backdrop-filter:blur(8px); padding: 20px;">
        <div class="card" style="width: 100%; max-width: 550px; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); animation: modalIn 0.3s ease-out;">
            <div class="card-header" style="display: flex; justify-content: space-between; align-items: center; padding: 18px 24px; background: var(--accent-light);">
                <h3 style="font-size: 15px; color: var(--text);"><i class="fas fa-edit" style="margin-right: 8px; color: var(--accent);"></i>Chỉnh sửa bước hướng dẫn</h3>
                <button onclick="document.getElementById('editModal').style.display='none'" style="background:none; border:none; color: var(--text-muted); cursor:pointer; font-size: 20px;"><i class="fas fa-times"></i></button>
            </div>
            <div style="padding: 24px;">
                <form id="editForm" method="POST" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')
                    <div style="display: grid; grid-template-columns: 2fr 1fr; gap: 16px; margin-bottom: 16px;">
                        <div>
                            <label style="display:block;font-size:11px;font-weight:700;color:var(--text);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:6px;">Tiêu đề</label>
                            <input type="text" name="title" id="edit_title" class="ad-input" style="width:100%; height: 40px;" required>
                        </div>
                        <div>
                            <label style="display:block;font-size:11px;font-weight:700;color:var(--text);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:6px;">Thứ tự</label>
                            <input type="number" name="order" id="edit_order" class="ad-input" style="width:100%; height: 40px;">
                        </div>
                    </div>
                    <div style="margin-bottom: 16px;">
                        <label style="display:block;font-size:11px;font-weight:700;color:var(--text);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:6px;">Mô tả chi tiết</label>
                        <textarea name="description" id="edit_description" class="ad-input" style="width:100%; min-height: 120px; padding: 12px;" required></textarea>
                    </div>
                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px;">
                        <div>
                            <label style="display:block;font-size:11px;font-weight:700;color:var(--text);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:6px;">Ảnh minh họa hiện tại</label>
                            <div id="edit_image_preview" style="width: 100%; height: 100px; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); background: var(--bg); margin-bottom: 8px; display: flex; align-items: center; justify-content: center;">
                                <img src="" id="current_step_img" style="width: 100%; height: 100%; object-fit: cover;">
                            </div>
                            <label style="display:block;font-size:11px;font-weight:700;color:var(--text);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:6px;">Thay đổi ảnh mới</label>
                            <input type="file" name="image" accept="image/*" class="ad-input" style="width:100%; height: 40px;">
                        </div>
                        <div>
                            <label style="display:block;font-size:11px;font-weight:700;color:var(--text);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:6px;">Lưu ý nổi bật</label>
                            <input type="text" name="important_note" id="edit_important_note" class="ad-input" style="width:100%; height: 40px;">
                        </div>
                    </div>
                    <div style="display: flex; gap: 12px;">
                        <button type="button" onclick="document.getElementById('editModal').style.display='none'" class="btn btn-outline" style="flex: 1; height: 44px; border-radius: 12px; font-weight: 600;">Hủy bỏ</button>
                        <button type="submit" class="btn btn-primary" style="flex: 1; height: 44px; border-radius: 12px; font-weight: 700; box-shadow: 0 4px 12px rgba(201,169,110,0.25);">
                            <i class="fas fa-check-circle" style="margin-right: 6px;"></i> Xác nhận thay đổi
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <style>
        @keyframes modalIn {
            from { opacity: 0; transform: scale(0.95) translateY(20px); }
            to { opacity: 1; transform: scale(1) translateY(0); }
        }
        .ad-input:focus {
            background: #fff;
            border-color: var(--accent);
            box-shadow: 0 0 0 4px var(--accent-light);
        }
        .btn:active {
            transform: scale(0.98);
        }
        .sortable-ghost {
            opacity: 0.3;
            background: var(--accent-light) !important;
        }
    </style>

    <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.2/Sortable.min.js"></script>
    <script>
        // Data containing current configured video for each plan
        const planVideos = {
            'default': {
                url: '{{ $videoUrl }}',
                type: '{{ $videoType }}'
            },
            @foreach($plans as $p)
            '{{ $p->plan_id }}': {
                url: '{{ DB::table('settings')->where('key', 'guide_video_url_' . $p->plan_id)->value('value') }}',
                type: '{{ DB::table('settings')->where('key', 'guide_video_type_' . $p->plan_id)->value('value') ?? 'file' }}'
            },
            @endforeach
        };

        function switchVideoTab(planId) {
            // Update active tab buttons styling
            document.querySelectorAll('.video-tab-btn').forEach(btn => {
                btn.style.borderColor = 'var(--border)';
                btn.style.background = 'var(--card)';
                btn.style.color = 'var(--text-muted)';
                btn.style.fontWeight = '600';
            });
            
            const activeBtn = document.getElementById('btn-tab-' + planId);
            if (activeBtn) {
                activeBtn.style.borderColor = 'var(--accent)';
                activeBtn.style.background = 'var(--accent-light)';
                activeBtn.style.color = 'var(--accent)';
                activeBtn.style.fontWeight = '700';
            }
            
            // Set hidden plan_id input
            document.getElementById('video_plan_id').value = planId === 'default' ? '' : planId;
            
            // Update label
            const label = document.getElementById('preview-label');
            if (planId === 'default') {
                label.textContent = "Video hiện tại (Mặc định)";
            } else {
                const planName = activeBtn ? activeBtn.textContent.trim() : planId;
                label.textContent = `Video hiện tại (Gói: ${planName})`;
            }

            // Update preview and link
            const videoData = planVideos[planId];
            const previewContainer = document.getElementById('current-video-preview');
            const linkContainer = document.getElementById('current-video-link');
            const linkText = document.getElementById('current-video-link-text');
            
            if (videoData && videoData.url) {
                let previewHtml = '';
                if (videoData.type === 'embed' || videoData.type === 'url') {
                    previewHtml = `<iframe src="${videoData.url}" style="width: 100%; height: 100%; border: none;" allowfullscreen></iframe>`;
                } else {
                    previewHtml = `<video src="${videoData.url}" style="width: 100%; height: 100%; object-fit: cover;" controls></video>`;
                }
                
                previewContainer.innerHTML = previewHtml;
                previewContainer.style.background = '#000';
                linkText.textContent = videoData.url;
                linkContainer.style.display = 'block';
            } else {
                previewContainer.innerHTML = `
                    <div style="background: var(--bg); border-radius: 12px; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-muted); border: 2px dashed var(--border); font-size: 11px; padding: 10px; text-align: center; box-sizing: border-box;">
                        <i class="fas fa-video-slash fa-lg" style="margin-bottom: 6px;"></i>
                        Chưa cấu hình video riêng<br>(Sẽ dùng video mặc định)
                    </div>
                `;
                previewContainer.style.background = 'transparent';
                linkContainer.style.display = 'none';
            }
        }

        function editStep(step) {
            document.getElementById('editForm').action = `/admin/guide/steps/${step.id}`;
            document.getElementById('edit_title').value = step.title;
            document.getElementById('edit_description').value = step.description;
            document.getElementById('edit_important_note').value = step.important_note || '';
            document.getElementById('edit_order').value = step.order;
            
            // Show current image in modal
            const imgPath = step.image.startsWith('http') ? step.image : (step.image.startsWith('/') ? step.image : '/huong-dan/' + step.image);
            document.getElementById('current_step_img').src = imgPath;
            
            document.getElementById('editModal').style.display = 'flex';
        }

        // Initialize Sortable
        const el = document.getElementById('sortableSteps');
        new Sortable(el, {
            handle: '.drag-handle',
            animation: 150,
            ghostClass: 'sortable-ghost',
            onEnd: function() {
                const orders = [];
                document.querySelectorAll('#sortableSteps tr').forEach((tr, index) => {
                    orders.push(tr.dataset.id);
                    // Update visual order badge
                    tr.querySelector('.step-order').textContent = index + 1;
                });

                // Send to server
                fetch('{{ route("admin.guide.steps.reorder") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({ orders: orders })
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        // Show a small success toast if needed
                        console.log('Order saved');
                    }
                });
            }
        });
    </script>
@endsection