@extends('layouts-v2.app')

@section('content')
<div class="flex-1 space-y-6">
    <!-- Header -->
    <div class="flex items-center gap-2 text-slate-500 text-sm mb-2">
        <a href="{{ route('dashboard') }}" class="hover:text-blue-600 cursor-pointer">Trang chủ</a>
        <i data-lucide="chevron-right" class="w-4 h-4"></i>
        <span>Danh sách sản phẩm</span>
    </div>
    <h1 class="text-2xl sm:text-3xl font-bold text-slate-900 mb-4 sm:mb-6">Danh sách sản phẩm</h1>

    <!-- Message Notification V2 -->
    <div class="message-product hidden fixed top-4 right-2 sm:right-4 left-2 sm:left-auto max-w-md w-auto sm:w-full" style="z-index: 9999;">
        <div class="notification-v2 bg-white rounded-lg shadow-xl border-l-4 p-3 sm:p-4 flex items-start gap-2 sm:gap-3 animate-slide-in">
            <div class="notification-icon flex-shrink-0 mt-0.5">
                <i data-lucide="check-circle" class="w-6 h-6 text-green-500 notification-icon-success hidden"></i>
                <i data-lucide="x-circle" class="w-6 h-6 text-red-500 notification-icon-error hidden"></i>
            </div>
            <div class="flex-1 min-w-0">
                <div id="content_message" class="text-sm font-medium text-slate-800"></div>
            </div>
            <button type="button" class="notification-close flex-shrink-0 text-slate-400 hover:text-slate-600 transition-colors" aria-label="Close">
                <i data-lucide="x" class="w-5 h-5"></i>
            </button>
        </div>
    </div>

    <!-- Split Layout -->
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-4 sm:gap-6 h-auto lg:h-[calc(100vh-200px)] min-h-[600px] lg:min-h-0">
        
        <!-- LEFT COLUMN: TREE VIEW -->
        @include('products.left.product_left_part-v2', [
            'name1' => 'Tên sản phẩm',
            'products' => $products ?? []
        ])

        <!-- RIGHT COLUMN: CONTENT (Swappable Views) -->
        @include('products.right.product_right_part-v2')
    </div>

    <!-- Hidden Inputs -->
    <input type="hidden" id="currentUserEmail" value="{{ $currentEmail }}">
    <input type="hidden" id="product_id" value="0">
    <input type="hidden" id="product_children" value="[]">
    <input type="hidden" id="mode_change_course_parent" value="0">
    <input type="hidden" id="mode_change_product_parent" value="0">
    
    <!-- Tenant information for AJAX requests -->
    <input type="hidden" name="selected_tenant_id" value="{{ session('selected_tenant_id') }}">
    <input type="hidden" name="selected_tenant_code" value="{{ session('selected_tenant_code') }}">
    <input type="hidden" name="selected_tenant_name" value="{{ session('selected_tenant_name') }}">
    <input type="hidden" name="selected_tenant_db" value="{{ session('selected_tenant_db') }}">
    <input type="hidden" name="tenant_connection" value="{{ session('tenant_connection') }}">

    <!-- Confirm Modal V2 (Reusable) -->
    <div id="confirmModalV2" class="hidden fixed inset-0 z-50 overflow-y-auto" aria-labelledby="confirm-modal-title" role="dialog" aria-modal="true">
        <!-- Backdrop -->
        <div class="fixed inset-0 bg-black bg-opacity-50 transition-opacity" id="confirm-modal-backdrop"></div>
        
        <!-- Modal Container -->
        <div class="flex min-h-full items-center justify-center p-3 sm:p-4">
            <div class="relative transform overflow-hidden rounded-lg bg-white shadow-xl transition-all w-full max-w-md mx-2 sm:mx-0">
                <!-- Header -->
                <div class="flex items-center justify-between px-4 sm:px-6 py-3 sm:py-4 border-b border-slate-200">
                    <div class="flex items-center gap-2 sm:gap-3 min-w-0 flex-1">
                        <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0">
                            <i data-lucide="help-circle" class="w-4 h-4 sm:w-5 sm:h-5 text-blue-600"></i>
                        </div>
                        <h3 class="text-base sm:text-lg font-semibold text-slate-900 truncate" id="confirm-modal-title">Xác nhận</h3>
                    </div>
                    <button type="button" class="text-slate-400 hover:text-slate-600 transition-colors flex-shrink-0" id="confirm-modal-close">
                        <i data-lucide="x" class="w-5 h-5"></i>
                    </button>
                </div>
                
                <!-- Body -->
                <div class="px-4 sm:px-6 py-4 sm:py-6">
                    <p class="text-sm text-slate-600 text-center" id="confirm-modal-message">
                        Bạn có chắc chắn muốn thực hiện hành động này?
                    </p>
                </div>
                
                <!-- Footer -->
                <div class="flex flex-col sm:flex-row items-stretch sm:items-center justify-end gap-2 sm:gap-3 px-4 sm:px-6 py-3 sm:py-4 border-t border-slate-200 bg-slate-50">
                    <button type="button" class="w-full sm:w-auto px-4 py-2 text-sm font-medium text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors" id="confirm-modal-cancel">
                        Hủy bỏ
                    </button>
                    <button type="button" class="w-full sm:w-auto px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 transition-colors" id="confirm-modal-ok">
                        Xác nhận
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Delete Modal V2 -->
    <div id="deleteOrArchiveModalV2" class="hidden fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
        <!-- Backdrop -->
        <div class="fixed inset-0 bg-black bg-opacity-50 transition-opacity" id="delete-modal-backdrop"></div>
        
        <!-- Modal Container -->
        <div class="flex min-h-full items-center justify-center p-3 sm:p-4">
            <div class="relative transform overflow-hidden rounded-lg bg-white shadow-xl transition-all w-full max-w-md mx-2 sm:mx-0">
                <!-- Header -->
                <div class="flex items-center justify-between px-4 sm:px-6 py-3 sm:py-4 border-b border-slate-200">
                    <div class="flex items-center gap-2 sm:gap-3 min-w-0 flex-1">
                        <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-red-100 flex items-center justify-center flex-shrink-0">
                            <i data-lucide="alert-triangle" class="w-4 h-4 sm:w-5 sm:h-5 text-red-600"></i>
                        </div>
                        <h3 class="text-base sm:text-lg font-semibold text-slate-900 truncate" id="delete-modal-title">Xóa sản phẩm</h3>
                    </div>
                    <button type="button" class="text-slate-400 hover:text-slate-600 transition-colors flex-shrink-0" id="delete-modal-close">
                        <i data-lucide="x" class="w-5 h-5"></i>
                    </button>
                </div>
                
                <!-- Body -->
                <div class="px-4 sm:px-6 py-4 sm:py-6">
                    <p class="text-sm text-slate-600 text-center">
                        Bạn có chắc chắn muốn xóa
                        <span class="font-semibold text-slate-900" id="modal_name_product_v2">sản phẩm</span>
                        này không?
                    </p>
                    <p class="text-xs text-slate-500 text-center mt-2">
                        Hành động này không thể hoàn tác.
                    </p>
                </div>
                
                <!-- Footer -->
                <div class="flex flex-col sm:flex-row items-stretch sm:items-center justify-end gap-2 sm:gap-3 px-4 sm:px-6 py-3 sm:py-4 border-t border-slate-200 bg-slate-50">
                    <button type="button" class="w-full sm:w-auto px-4 py-2 text-sm font-medium text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors" id="delete-modal-cancel">
                        Hủy bỏ
                    </button>
                    <button type="button" class="w-full sm:w-auto px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-lg hover:bg-red-700 transition-colors delete-product-v2" data-product-id="" data-product-type="">
                        <i data-lucide="trash-2" class="w-4 h-4 inline-block mr-1"></i>
                        Xóa
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
    <script src="{{ URL::asset('js/products/products-v2.js') }}"></script>
    <script>
        // Image upload form handlers - must run after jQuery is loaded
        let imageFormLoadTrigger = false;
        $(document).on('click', '.btn-edit-image.fa-edit', function(){
            const $button = $(this);
            console.log(imageFormLoadTrigger);
            $('#info_course #course_image').toggleClass('hidden');
            $('.course-upload-image').toggleClass('hidden');
            if ($('.course-upload-image').is(':empty')) {
                $.get('{{ route("load.image.form") }}', function (htmlContent) {
                    $button.removeClass('fa-edit');
                    $button.addClass('fa-undo');
                    $('.course-upload-image').html(htmlContent);
                }).fail(function (error) {
                    console.error('Error loading form:', error);
                });
            }
        });

        $(document).on('click', '.btn-edit-image.fa-undo', function(){
            const $button = $(this);
            $button.removeClass('fa-undo');
            $button.addClass('fa-edit');
            $('#info_course #course_image').toggleClass('hidden');
            $('.course-upload-image').toggleClass('hidden');
        });
        
        // H5P Popup handlers
        $(document).ready(function() {
            $('#h5p-popup fieldset.collapsible legend a').click(function(e) {
                e.preventDefault();
                $(this).closest('fieldset.collapsible').toggleClass('collapsed');
            });
        });

        // Delete confirm popup handlers
        $(document).on('click', '.fp-dlg-butcancel', function(event) {
            if (typeof closePopupDelete === 'function') {
                closePopupDelete();
            }
        });
    </script>
@endsection