@extends('admin.layouts.main')
@section('title',"Cấu hình sản phẩm theo danh mục")

@section('css')
<style>
.attribute-group {
    display: flex;
    gap: 16px;
    flex-wrap: nowrap;
    align-items: flex-start;
    padding-bottom: 8px;
    border-bottom: 1px solid #e5e7eb;
}

.attribute-group.level-1 {
    display: grid;
    grid-template-columns: 150px auto;
    padding: 10px 0;
}

.children { 
    display: flex; 
    gap: 10px 20px; 
    flex-wrap: wrap; 
    align-items: center; 
    margin-left: 4px; 
}

.attribute-label { 
    display: inline-flex; 
    align-items: center; 
    gap: 6px;  
    margin-bottom: 0;
    cursor: pointer;
}

.level-1 .attribute-label { font-weight: 600; }
.level-2 .attribute-label { font-size: 0.95rem; }
.level-3 .attribute-label { font-size: 0.9rem; opacity: 0.95; }

.main-container {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 20px;
    margin-top: 20px;
}

.products-section, .categories-section {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.categories-section {
    max-height: 600px;
    overflow-y: auto;
}

.product-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    margin-bottom: 10px;
    transition: all 0.2s;
    position: relative;
}

.product-item:hover {
    border-color: #3b82f6;
    background-color: #f0f9ff;
}

.product-item.flash-active {
    border-color: #ef4444;
    background-color: #fef2f2;
}

.product-item.flash-active::before {
    content: "⚡";
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 20px;
}

.product-checkbox {
    flex-shrink: 0;
}

.product-image {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}

.product-info {
    flex: 1;
}

.product-name {
    font-weight: 500;
    margin-bottom: 4px;
    color: #1f2937;
}

.product-price {
    color: #059669;
    font-size: 14px;
}

.product-flash-badge {
    display: inline-block;
    background: #ef4444;
    color: white;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px;
    margin-left: 8px;
}

.btn-delete {
    padding: 6px 10px;
    background: #ef4444;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
}

.btn-delete:hover {
    background: #dc2626;
}

.btn-remove-flash {
    padding: 4px 8px;
    background: #f59e0b;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    margin-left: 8px;
}

.btn-remove-flash:hover {
    background: #d97706;
}

.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: #6b7280;
}

.empty-state i {
    font-size: 40px;
    margin-bottom: 10px;
    opacity: 0.5;
}

.section-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px;
    color: #1f2937;
}

/* Toast Notification */
.toast-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background: white;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 9999;
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.toast-notification.success {
    border-left: 4px solid #10b981;
}

.toast-notification.error {
    border-left: 4px solid #ef4444;
}

.toast-notification .icon {
    font-size: 24px;
}

.toast-notification.success .icon {
    color: #10b981;
}

.toast-notification.error .icon {
    color: #ef4444;
}

/* Loading Overlay */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9998;
}

.loading-spinner {
    background: white;
    padding: 30px;
    border-radius: 10px;
    text-align: center;
}

.loading-spinner .spinner {
    border: 4px solid #f3f4f6;
    border-top: 4px solid #3b82f6;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
    margin: 0 auto 15px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
</style>
@endsection

@section('content')
<div class="content-wrapper">
    @include('admin.partials.content-header',['name'=>"Danh mục","key"=>"Cấu hình sản phẩm theo danh mục"])
    
    <div class="content">
        <div class="container-fluid">
            <div class="main-container">
                <!-- Phần sản phẩm bên trái -->
                <div class="products-section">
                    <div class="section-title">Danh sách sản phẩm</div>
                   
                    <div id="productsList">
                        <div class="empty-state">
                            <i class="fas fa-box-open"></i>
                            <p>Chọn danh mục để hiển thị sản phẩm</p>
                        </div>
                    </div>
                </div>

                <!-- Phần danh mục bên phải -->
                <div class="categories-section">
                    <div class="section-title">Chọn danh mục</div>
                    
                    <div id="categoriesTree">
                        <div style="height: 250px; overflow: auto;border: 1px solid #eee;font-size: 12px;line-height: 18px;">
                            @foreach ($data_cate as $item)
                            <div class="item-permission mt-2 mb-2">
                                <div class="form-check permission-title">
                                    <label class="form-check-label p-2">
                                        <input type="checkbox" class="form-check-input check-parent selected-attribute" value="{{ $item->id }}" name="category[]">{{ $item->name }}
                                    </label>
                                </div>
                                @if (count($item->childs) > 0)
                                <div class="list-permission p-2 pl-4">
                                    <div class="row">
                                        @foreach ($item->childs()->with('translationsLanguage')->where('active', 1)->orderBy('order')->get() as $itemChild)
                                        <div class="col-lg-12 col-md-12 col-sm-12">
                                            <div class="form-check">
                                                <label class="form-check-label">
                                                    <input type="checkbox" class="form-check-input check-children selected-attribute" name="category[]" value="{{ $itemChild->id }}">{{ $itemChild->name }}
                                                </label>
                                            </div>
                                            @if (count($itemChild->childs) > 0)
                                            <div class="row">
                                                @foreach ($itemChild->childs()->with('translationsLanguage')->where('active', 1)->orderBy('order')->get() as $itemChild2)
                                                <div class="col-lg-12 col-md-12 col-sm-12">
                                                    <div class="form-check pl-5">
                                                        <label class="form-check-label">
                                                            <input type="checkbox" class="form-check-input check-children selected-attribute" name="category[]" value="{{ $itemChild2->id }}">{{ $itemChild2->name }}
                                                        </label>
                                                    </div>
                                                    @if (count($itemChild2->childs) > 0)
                                                    <div class="row">
                                                        @foreach ($itemChild2->childs()->with('translationsLanguage')->where('active', 1)->orderBy('order')->get() as $itemChild3)
                                                        <div class="col-lg-12 col-md-12 col-sm-12">
                                                            <div class="form-check" style="margin-left:55px;">
                                                                <label class="form-check-label">
                                                                    <input type="checkbox" class="form-check-input check-children selected-attribute" name="category[]" value="{{ $itemChild3->id }}">{{ $itemChild3->name }}
                                                                </label>
                                                            </div>
                                                        </div>
                                                        @endforeach
                                                    </div>
                                                    @endif
                                                </div>
                                                @endforeach
                                            </div>
                                            @endif
                                        </div>
                                        @endforeach
                                    </div>
                                </div>
                                @endif
                            </div>
                            @endforeach
                        </div>
                    </div>

                    <!-- Form cấu hình bên phải -->
                    <div style="margin-top: 25px; padding-top: 20px; border-top: 2px solid #e5e7eb;">
                        <div class="section-title">Chọn cấu hình</div>
                        <div style="display: flex; gap: 20px; margin-bottom: 15px;">
                            <label style="display:flex;align-items:center;gap:8px;cursor:pointer;">
                                <input type="radio" name="config_option" value="discount">
                                <strong>Giảm giá hàng loạt</strong>
                            </label>

                            <label style="display:flex;align-items:center;gap:8px;cursor:pointer;">
                                <input type="radio" name="config_option" value="flash">
                                <strong>Flash Sale</strong>
                            </label>
                        </div>

                        <!-- ===== FORM GIẢM GIÁ ===== -->
                        <div id="discountForm" style="display:none;flex-direction:column;gap:12px;">
                            <div>
                                <label style="display:block;margin-bottom:5px;font-weight:500;">
                                    Nhập % giảm
                                </label>
                                <input type="number" id="discountValue" class="form-control" placeholder="Nhập số %" min="0" max="100">
                            </div>
                            <button class="btn btn-primary btn-block mt-2" id="btnApplyDiscount">
                                <i class="fas fa-check"></i> Áp dụng giảm giá
                            </button>
                        </div>

                        <!-- ===== FORM FLASH SALE ===== -->
                        <div id="flashForm" style="display:none;flex-direction:column;gap:12px;">
                          

                            <button class="btn btn-danger btn-block" id="btnApplyFlash">
                                <i class="fas fa-bolt"></i> Bật Flash Sale
                            </button>

                            <button class="btn btn-warning btn-block" id="btnRemoveFlash">
                                <i class="fas fa-times"></i> Hạ Flash Sale
                            </button>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('js')
<script>
/**
 * Biến trung tâm lưu danh sách ID sản phẩm hiện tại
 */
let currentProductIds = [];

/**
 * Hiển thị toast notification
 */
function showToast(message, type = 'success') {
    const iconClass = type === 'success' ? 'fas fa-check-circle' : 'fas fa-exclamation-circle';
    
    const toast = $(`
        <div class="toast-notification ${type}">
            <i class="${iconClass} icon"></i>
            <span>${message}</span>
        </div>
    `);
    
    $('body').append(toast);
    
    setTimeout(() => {
        toast.fadeOut(300, function() {
            $(this).remove();
        });
    }, 3000);
}

/**
 * Hiển thị loading overlay
 */
function showLoading() {
    const overlay = $(`
        <div class="loading-overlay">
            <div class="loading-spinner">
                <div class="spinner"></div>
                <div>Đang xử lý...</div>
            </div>
        </div>
    `);
    $('body').append(overlay);
}

/**
 * Ẩn loading overlay
 */
function hideLoading() {
    $('.loading-overlay').remove();
}

$(document).ready(function () {

    /* =======================
     * CẬP NHẬT INPUT ẨN
     * ======================= */
    function syncProductIdsInput() {
        console.log('Danh sách ID hiện tại:', currentProductIds);
    }

    /* =======================
     * XÓA SẢN PHẨM
     * ======================= */
    $(document).on('click', '.btn-delete', function (e) {
        e.preventDefault();

        const productId = $(this).data('product-id');
        const $item = $(this).closest('.product-item');

        if (!productId) return;

        // Xóa khỏi mảng ID
        currentProductIds = currentProductIds.filter(id => id != productId);

        // Xóa khỏi giao diện
        $item.remove();                         

        // Sync lại
        syncProductIdsInput();
        
        showToast('Đã xóa sản phẩm khỏi danh sách', 'success');
    });

    /* =======================
     * LOAD SẢN PHẨM THEO CATEGORY
     * ======================= */
    $(document).on('change', '[name="category[]"]', function () {
        let categoryIds = [];

        $('[name="category[]"]:checked').each(function () {
            categoryIds.push($(this).val());
        });

        if (categoryIds.length === 0) {
            $('#productsList').html(`
                <div class="empty-state">
                    <i class="fas fa-box-open"></i>
                    <p>Chọn danh mục để hiển thị sản phẩm</p>
                </div>
            `);
            return;
        }

        showLoading();

        $.get("{{ route('admin.categoryproduct.get_config_product_by_category') }}", {
            category: categoryIds,
            product_id: ""
        }, function (res) {
            hideLoading();

            if (!res || res.code !== 200) {
                showToast('Không thể tải sản phẩm', 'error');
                return;
            }

            // Render HTML
            $('#productsList').html(res.html);

            let listId = [];

            // Fix: backend trả object {0:49,1:138,...}
            if (Array.isArray(res.listIdProduct)) {
                listId = res.listIdProduct;
            } else if (typeof res.listIdProduct === 'object' && res.listIdProduct !== null) {
                listId = Object.values(res.listIdProduct);
            }

            // Remove duplicate
            currentProductIds = [...new Set(listId)];

            syncProductIdsInput();

        }).fail(function() {
            hideLoading();
            showToast('Lỗi khi tải sản phẩm', 'error');
        });
    });

    /* =======================
     * CHỌN LOẠI CẤU HÌNH
     * ======================= */
    $(document).on('change', 'input[name="config_option"]', function () {
        const type = $(this).val();

        if (type === 'discount') {
            $('#discountForm').slideDown(200);
            $('#flashForm').slideUp(200);
        }

        if (type === 'flash') {
            $('#flashForm').slideDown(200);
            $('#discountForm').slideUp(200);
        }
    });

    /* =======================
     * ÁP DỤNG GIẢM GIÁ
     * ======================= */
    $(document).on('click', '#btnApplyDiscount', function (e) {
        e.preventDefault();

        const discountValue = $('#discountValue').val();

        if (!discountValue || discountValue <= 0) {
            showToast('Vui lòng nhập % giảm giá hợp lệ', 'error');
            return;
        }

        if (currentProductIds.length === 0) {
            showToast('Vui lòng chọn danh mục có sản phẩm', 'error');
            return;
        }

        showLoading();

        $.ajax({
            url: "{{ route('admin.categoryproduct.post_config_product_by_category') }}",
            method: 'POST',
            data: {
                _token: "{{ csrf_token() }}",
                product_ids: currentProductIds.join(','),
                config_type: 'discount',
                perent: discountValue
            },
            success: function(response) {
                hideLoading();
                
                if (response.code === 200) {
                    showToast('Áp dụng giảm giá thành công!', 'success');
                    $('#discountValue').val('');
                    
                    // Reload lại danh sách sản phẩm
                    $('[name="category[]"]:checked').first().trigger('change');
                } else {
                    showToast(response.message || 'Có lỗi xảy ra', 'error');
                }
            },
            error: function() {
                hideLoading();
                showToast('Lỗi kết nối server', 'error');
            }
        });
    });

    /* =======================
     * BẬT FLASH SALE
     * ======================= */
    $(document).on('click', '#btnApplyFlash', function (e) {
        e.preventDefault();

        if (currentProductIds.length === 0) {
            showToast('Vui lòng chọn danh mục có sản phẩm', 'error');
            return;
        }

        showLoading();

        $.ajax({
            url: "{{ route('admin.categoryproduct.post_config_product_by_category') }}",
            method: 'POST',
            data: {
                _token: "{{ csrf_token() }}",
                product_ids: currentProductIds.join(','),
                config_type: 'flash',
                action: 'enable'
            },
            success: function(response) {
                hideLoading();
                
                if (response.code === 200) {
                    showToast('Bật Flash Sale thành công!', 'success');
                    
                    // Reload lại danh sách sản phẩm
                    $('[name="category[]"]:checked').first().trigger('change');
                } else {
                    showToast(response.message || 'Có lỗi xảy ra', 'error');
                }
            },
            error: function() {
                hideLoading();
                showToast('Lỗi kết nối server', 'error');
            }
        });
    });

    /* =======================
     * HẠ FLASH SALE
     * ======================= */
    $(document).on('click', '#btnRemoveFlash', function (e) {
        e.preventDefault();

        if (currentProductIds.length === 0) {
            showToast('Vui lòng chọn danh mục có sản phẩm', 'error');
            return;
        }

        if (!confirm('Bạn có chắc muốn hạ Flash Sale cho các sản phẩm này?')) {
            return;
        }

        showLoading();

        $.ajax({
            url: "{{ route('admin.categoryproduct.post_config_product_by_category') }}",
            method: 'POST',
            data: {
                _token: "{{ csrf_token() }}",
                product_ids: currentProductIds.join(','),
                config_type: 'flash',
                action: 'disable'
            },
            success: function(response) {
                hideLoading();
                
                if (response.code === 200) {
                    showToast('Hạ Flash Sale thành công!', 'success');
                    
                    // Reload lại danh sách sản phẩm
                    $('[name="category[]"]:checked').first().trigger('change');
                } else {
                    showToast(response.message || 'Có lỗi xảy ra', 'error');
                }
            },
            error: function() {
                hideLoading();
                showToast('Lỗi kết nối server', 'error');
            }
        });
    });

    /* =======================
     * HẠ FLASH SALE CHO TỪNG SẢN PHẨM
     * ======================= */
    $(document).on('click', '.btn-remove-flash', function (e) {
        e.preventDefault();

        const productId = $(this).data('product-id');
        const $item = $(this).closest('.product-item');

        if (!productId) return;

        if (!confirm('Hạ Flash Sale cho sản phẩm này?')) {
            return;
        }

        showLoading();

        $.ajax({
            url: "{{ route('admin.categoryproduct.post_config_product_by_category') }}",
            method: 'POST',
            data: {
                _token: "{{ csrf_token() }}",
                product_ids: productId,
                config_type: 'flash',
                action: 'disable'
            },
            success: function(response) {
                hideLoading();
                
                if (response.code === 200) {
                    showToast('Đã hạ Flash Sale', 'success');
                    
                    // Remove flash badge và class
                    $item.removeClass('flash-active');
                    $item.find('.product-flash-badge').remove();
                    $item.find('.btn-remove-flash').remove();
                } else {
                    showToast(response.message || 'Có lỗi xảy ra', 'error');
                }
            },
            error: function() {
                hideLoading();
                showToast('Lỗi kết nối server', 'error');
            }
        });
    });

});
</script>

@endsection