@extends('admin.layouts.master')

@php
    function renderCategoryOptions($categories, $parentId = 0, $level = 0, $selected = [])
    {
        $html = '';

        foreach ($categories as $category) {
            if ((int) $category->parent_id === (int) $parentId) {
                $prefix = str_repeat('--- ', $level);
                $isSelected = in_array($category->id, (array) $selected) ? 'selected' : '';
                $html .= "<option value='{$category->id}' {$isSelected}>{$prefix}{$category->name}</option>";
                $html .= renderCategoryOptions($categories, $category->id, $level + 1, $selected);
            }
        }

        return $html;
    }
@endphp

@section('style')
    <style>
        .filter-level-card,
        .option-group-card {
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 12px;
            background: #fff;
        }

        .filter-level-title,
        .option-group-title {
            font-weight: 700;
            margin-bottom: 12px;
            color: #334155;
        }

        .preview-image-box {
            width: 90px;
            height: 90px;
            border: 1px dashed #cbd5e1;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            background: #f8fafc;
        }

        .preview-image-box img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .variant-table input[type="number"],
        .variant-table input[type="text"] {
            min-width: 120px;
        }

        .remove-btn-inline {
            white-space: nowrap;
        }

        .select2-container {
            width: 100% !important;
        }
    </style>
@endsection

@section('content')
    <div class="row">
        <div class="col-12">
            <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                <h4 class="mb-sm-0 font-size-18">Thêm mới sản phẩm</h4>

                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item">
                            <a href="{{ route('admin.products.index') }}">Danh sách sản phẩm</a>
                        </li>
                        <li class="breadcrumb-item active">Thêm mới sản phẩm</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>

    <form action="{{ route('admin.products.store') }}" method="POST" enctype="multipart/form-data" id="productForm">
        @csrf

        <div class="row">
            <div class="col-xl-9">
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            {{-- Tên sản phẩm --}}
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="key_name" class="form-label fw-bold">
                                        Tên sản phẩm <span class="text-danger">*</span>
                                    </label>
                                    <input type="text" class="form-control @error('name') is-invalid @enderror"
                                        id="key_name" name="name" placeholder="Nhập tên sản phẩm"
                                        value="{{ old('name') }}">
                                    @error('name')
                                        <small class="text-danger fw-bold fst-italic">{{ $message }}</small>
                                    @enderror
                                </div>
                            </div>

                            {{-- Danh mục --}}
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label fw-bold">
                                        Danh mục <span class="text-danger">*</span>
                                    </label>
                                    <select name="product_category_id[]"
                                        class="form-select select2 @error('product_category_id') is-invalid @enderror"
                                        multiple>
                                        {!! renderCategoryOptions($categories, 0, 0, old('product_category_id', [])) !!}
                                    </select>
                                    @error('product_category_id')
                                        <small class="text-danger fw-bold fst-italic">{{ $message }}</small>
                                    @enderror
                                </div>
                            </div>

                            {{-- Mã sản phẩm MISA --}}
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="code_misa" class="form-label fw-bold">Mã sản phẩm MISA</label>
                                    <input type="text" class="form-control @error('code_misa') is-invalid @enderror"
                                        id="code_misa" name="code_misa" placeholder="Nhập mã MISA"
                                        value="{{ old('code_misa') }}">
                                    @error('code_misa')
                                        <small class="text-danger fw-bold fst-italic">{{ $message }}</small>
                                    @enderror
                                </div>
                            </div>




                            {{-- Giá hệ thống --}}
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="price" class="form-label fw-bold">
                                        Giá hệ thống <span class="text-danger">*</span>
                                    </label>
                                    <input type="text" id="price" name="price"
                                        class="form-control price-format @error('price') is-invalid @enderror"
                                        placeholder="Nhập giá hệ thống" value="{{ old('price', 0) }}">
                                    @error('price')
                                        <small class="text-danger fw-bold fst-italic">{{ $message }}</small>
                                    @enderror
                                </div>
                            </div>

                            {{-- Giá bán --}}
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="price_sale" class="form-label fw-bold">Giá khuyến mãi</label>
                                    <input type="text" id="price_sale" name="price_sale"
                                        class="form-control price-format @error('price_sale') is-invalid @enderror"
                                        placeholder="Nhập giá khuyến mãi" value="{{ old('price_sale', 0) }}">
                                    @error('price_sale')
                                        <small class="text-danger fw-bold fst-italic">{{ $message }}</small>
                                    @enderror
                                </div>
                            </div>

                            {{-- Giá NPP --}}
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="province_price" class="form-label fw-bold">Giá nhà phân phối</label>
                                    <input type="text" id="province_price" name="province_price"
                                        class="form-control price-format @error('province_price') is-invalid @enderror"
                                        placeholder="Nhập giá nhà phân phối" value="{{ old('province_price', 0) }}">
                                    @error('province_price')
                                        <small class="text-danger fw-bold fst-italic">{{ $message }}</small>
                                    @enderror
                                </div>
                            </div>

                            {{-- Giá đại lý --}}
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="district_price" class="form-label fw-bold">Giá đại lý</label>
                                    <input type="text" id="district_price" name="district_price"
                                        class="form-control price-format @error('district_price') is-invalid @enderror"
                                        placeholder="Nhập giá đại lý" value="{{ old('district_price', 0) }}">
                                    @error('district_price')
                                        <small class="text-danger fw-bold fst-italic">{{ $message }}</small>
                                    @enderror
                                </div>
                            </div>

                            {{-- Giá CTV --}}
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="ctv_price" class="form-label fw-bold">Giá CTV</label>
                                    <input type="text" id="ctv_price" name="ctv_price"
                                        class="form-control price-format @error('ctv_price') is-invalid @enderror"
                                        placeholder="Nhập giá CTV" value="{{ old('ctv_price', 0) }}">
                                    @error('ctv_price')
                                        <small class="text-danger fw-bold fst-italic">{{ $message }}</small>
                                    @enderror
                                </div>
                            </div>


                            {{-- Số cấp lọc --}}
                            <div class="col-md-12">
                                <div class="mb-3">
                                    <label for="so_cap_loc" class="form-label fw-bold">Số cấp lọc</label>
                                    <input type="number" min="0"
                                        class="form-control @error('so_cap_loc') is-invalid @enderror" id="so_cap_loc"
                                        name="so_cap_loc" value="{{ old('so_cap_loc', 0) }}"
                                        placeholder="Nhập số cấp lọc">
                                    @error('so_cap_loc')
                                        <small class="text-danger fw-bold fst-italic">{{ $message }}</small>
                                    @enderror
                                </div>
                            </div>

                            {{-- Chi tiết cấp lọc --}}
                            <div class="col-md-12">
                                <div class="mb-3">
                                    <label class="form-label fw-bold">Chi tiết cấp lọc</label>
                                    <div id="filter-levels-container"></div>
                                </div>
                            </div>

                            {{-- Mô tả ngắn --}}
                            <div class="col-md-12">
                                <div class="mb-3">
                                    <label for="description" class="form-label fw-bold">Mô tả</label>
                                    <textarea class="form-control ckeditor @error('description') is-invalid @enderror" id="description"
                                        name="description">{{ old('description') }}</textarea>
                                    @error('description')
                                        <small class="text-danger fw-bold fst-italic">{{ $message }}</small>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Cột phải --}}
            <div class="col-xl-3">
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            {{-- Hình ảnh sản phẩm --}}
                            <div class="col-md-12">
                                <div class="mb-3">
                                    <label class="form-label fw-bold">Hình ảnh sản phẩm</label>
                                    <div id="image-preview-list" class="d-flex flex-wrap gap-2 mb-2"></div>
                                    <label class="btn btn-outline-secondary btn-sm w-100" for="product_images_input">
                                        <i class="mdi mdi-plus"></i> Thêm ảnh
                                    </label>
                                    <input type="file" id="product_images_input" name="product_images[]" multiple
                                        accept="image/*" class="d-none">
                                </div>
                            </div>

                        </div>

                        <div>
                            <button type="submit" class="btn btn-primary w-100" id="submitProductBtn">Thêm mới</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
@endsection

@section('script')
    <script src="{{ asset('theme/admin/assets/libs/ckeditor/ckeditor.js') }}"></script>
    <script>
        // Products data with images for filter level select
        const productsData = @json($products);

        function getFirstImage(productId) {
            const p = productsData.find(x => x.id == productId);
            if (p && p.product_images && p.product_images.length) return p.product_images[0].link;
            return null;
        }

        function buildFilterRow(index) {
            return `
            <div class="filter-level-card" id="filter-level-${index}">
                <div class="filter-level-title">Chi tiết cấp lọc ${index}</div>
                <div class="row align-items-center g-2">
                    <div class="col-md-6">
                        <label class="form-label">Tên lõi</label>
                        <select class="form-select select2 filter-product-select"
                            name="filter_levels[${index}][product_id]"
                            data-index="${index}">
                            <option value="">-- Chọn sản phẩm --</option>
                            ${productsData.map(p => `<option value="${p.id}">${p.name}</option>`).join('')}
                        </select>
                    </div>
                    <div class="col-md-3 text-center">
                        <label class="form-label">Ảnh lõi</label>
                        <div class="preview-image-box mx-auto" id="filter-img-box-${index}">
                            <span class="text-muted small">Chưa có ảnh</span>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">Thời gian (tháng)</label>
                        <input type="number" min="0" class="form-control"
                            name="filter_levels[${index}][replace_month]" value="0">
                    </div>
                </div>
            </div>`;
        }

        function renderFilterLevels(count) {
            const container = document.getElementById('filter-levels-container');
            container.innerHTML = '';
            for (let i = 1; i <= count; i++) {
                container.insertAdjacentHTML('beforeend', buildFilterRow(i));
            }
            // Re-init select2 on new selects
            container.querySelectorAll('.filter-product-select').forEach(el => {
                $(el).select2({
                    placeholder: 'Chọn sản phẩm'
                });
                $(el).on('change', function() {
                    const idx = this.dataset.index;
                    const img = getFirstImage(this.value);
                    const box = document.getElementById(`filter-img-box-${idx}`);
                    if (img) {
                        box.innerHTML = `<img src="${img}" alt="ảnh lõi">`;
                    } else {
                        box.innerHTML = `<span class="text-muted small">Chưa có ảnh</span>`;
                    }
                });
            });
        }

        document.getElementById('so_cap_loc').addEventListener('input', function() {
            const val = parseInt(this.value) || 0;
            renderFilterLevels(val);
        });

        // Init on page load if old value exists
        const initCount = parseInt(document.getElementById('so_cap_loc').value) || 0;
        if (initCount > 0) renderFilterLevels(initCount);

        // Multi-image upload preview
        const imageInput = document.getElementById('product_images_input');
        const previewList = document.getElementById('image-preview-list');
        let selectedFiles = [];

        imageInput.addEventListener('change', function() {
            Array.from(this.files).forEach(file => {
                selectedFiles.push(file);
                const reader = new FileReader();
                const idx = selectedFiles.length - 1;
                reader.onload = e => {
                    const wrapper = document.createElement('div');
                    wrapper.className = 'position-relative';
                    wrapper.style.cssText = 'width:80px;height:80px';
                    wrapper.innerHTML = `
                        <img src="${e.target.result}" class="w-100 h-100 rounded" style="object-fit:cover">
                        <button type="button" class="btn-close position-absolute top-0 end-0 bg-white rounded-circle"
                            style="font-size:10px;padding:2px" data-idx="${idx}"></button>`;
                    previewList.appendChild(wrapper);
                    wrapper.querySelector('.btn-close').addEventListener('click', function() {
                        selectedFiles[this.dataset.idx] = null;
                        wrapper.remove();
                        syncFileInput();
                    });
                };
                reader.readAsDataURL(file);
            });
            this.value = '';
        });

        function syncFileInput() {
            const dt = new DataTransfer();
            selectedFiles.filter(Boolean).forEach(f => dt.items.add(f));
            imageInput.files = dt.files;
        }

        // ===== FORMAT GIÁ TIỀN =====
        function formatNumber(num) {
            // Chỉ giữ lại số
            var str = String(num).replace(/[^\d]/g, '');
            if (!str) return '';
            // Thêm dấu chấm ngăn cách hàng nghìn
            return str.replace(/\B(?=(\d{3})+(?!\d))/g, '.');
        }

        function unformatNumber(str) {
            return String(str).replace(/\./g, '');
        }

        // Khởi tạo cho tất cả input giá
        document.querySelectorAll('.price-format').forEach(function(el) {
            // Khi focus: xóa giá trị 0 mặc định
            el.addEventListener('focus', function() {
                if (this.value === '0') {
                    this.value = '';
                }
            });

            // Khi blur: nếu trống thì trả về 0
            el.addEventListener('blur', function() {
                var raw = unformatNumber(this.value);
                if (raw === '') {
                    this.value = '0';
                }
            });

            // Format realtime khi nhập
            el.addEventListener('input', function() {
                var raw = unformatNumber(this.value);
                
                // Giới hạn 15 chữ số
                if (raw.length > 15) {
                    raw = raw.substring(0, 15);
                }
                
                // Format và cập nhật
                var formatted = formatNumber(raw);
                this.value = formatted;
                
                // Đặt con trỏ về cuối
                var len = formatted.length;
                this.setSelectionRange(len, len);
            });

            // Chặn ký tự không phải số
            el.addEventListener('keypress', function(e) {
                if (e.key && !/[0-9]/.test(e.key)) {
                    e.preventDefault();
                }
            });
        });

        // Trước khi submit: gửi số thuần và sync file
        document.getElementById('productForm').addEventListener('submit', function() {
            // Sync file trước
            syncFileInput();

            // Bỏ dấu chấm giá
            document.querySelectorAll('.price-format').forEach(function(input) {
                input.value = unformatNumber(input.value);
            });
        });
    </script>
@endsection