@extends('admin.layouts.main')
@section('title', 'Thêm Sản phẩm')

@section('css')
    <link href="{{ asset('lib/select2/css/select2.min.css') }}" rel="stylesheet" />
    <style>
        #search-result .item-product.active {
            border: 2px solid #007bff !important;
        }

        #search-result {
            position: absolute;
            z-index: 1000;
            width: 100%;
            overflow-y: auto;
            border: 1px solid #ddd;
            background: #fff;
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
        }

        .related-box {
            position: relative;
        }

        .related-item {
            padding: 6px;
            margin: 4px 0;
            border: 1px solid #ddd;
            cursor: pointer;
            display: flex;
            align-items: center;
        }

        .related-item.selected {
            border-color: #4f46e5;
            background: #eef2ff;
        }

        .related-item img {
            width: 40px;
            height: 40px;
            margin-right: 10px;
        }

        .gy-2 {
            row-gap: 1rem;
            /* khoảng cách theo chiều dọc giữa các hàng là 1rem */
        }

        .option-item {
            position: relative;
            padding: 16px;
            border: 1px solid #ddd;
            border-radius: 8px;
            margin-bottom: 12px;
            background-color: #f9f9f9;
        }

        .option-item .remove-option {
            position: absolute;
            top: 8px;
            right: 8px;
            border-radius: 50%;
            width: 28px;
            height: 28px;
            padding: 0;
            text-align: center;
            line-height: 28px;
            font-weight: bold;
            z-index: 100;
        }

        .option-item input.form-control {
            border-radius: 6px;
        }

        #add-option {
            display: inline-block;
        }

        .attribute-group {
            display: flex;
            gap: 16px;
            flex-wrap: nowrap;
            align-items: flex-start;

            padding-bottom: 8px;
            border-bottom: 1px solid #e5e7eb;
            /* xám nhẹ */
        }

        .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
        }

        .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;
        }

        .select2-container--default .select2-selection--multiple .select2-selection__choice {
            background-color: #000 !important;
        }

        .select2-container .select2-selection--single {
            height: auto;
        }

        .tinymce_editor_init {
            height: 300px !important;
        }

        .taiphieu1 {
            text-align: center;
            text-transform: uppercase;
            background: #138496;
            font-size: 14px;
            border: #5bc0de;
            padding: 5px 20px;
            border-radius: 0;
            font-weight: 600;
            color: #fff;
        }

        .taiphieu2 {
            text-align: center;
            text-transform: uppercase;
            background: #333;
            font-size: 14px;
            border: #5bc0de;
            padding: 5px 20px;
            border-radius: 0;
            font-weight: 600;
            color: #fff;
        }

        .card-header {
            border-bottom: 0;
        }

        .box_list_danhmuc {
            border: 1px solid #ddd;
            padding: 10px;
        }

        .list_danhmuc {
            height: 200px;
            overflow-y: auto;
        }

        .list_danhmuc li {
            list-style: none;
        }

        .body_result .variant {
            display: flex;
            gap: 10px;
        }
    </style>
@endsection
@section('content')


    <div class="content-wrapper">

        @include('admin.partials.content-header', ['name' => 'Sản phẩm', 'key' => 'Thêm Sản phẩm'])

        <!-- Main content -->
        <div class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12">
                        @if (session()->has('alert'))
                            <div class="alert alert-success">
                                {{ session()->get('alert') }}
                            </div>
                        @elseif(session()->has('error'))
                            <div class="alert alert-warning">
                                {{ session('error') }}
                            </div>
                        @endif
                        <form class="form-horizontal" action="{{ route('admin.product.store') }}" method="POST"
                            enctype="multipart/form-data">
                            @csrf
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="card-header">
                                        @foreach ($errors->all() as $message)
                                            <div class="invalid-feedback d-block">{{ $message }}</div>
                                        @endforeach
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="card-tool p-3 text-right">
                                        <button type="submit" class="btn btn-primary btn-lg taiphieu1">CHẤP NHẬN</button>
                                        <button type="reset" class="btn btn-danger btn-lg taiphieu2">LÀM LẠI</button>
                                    </div>
                                </div>
                            </div>
                            <div class="row">

                                <div class="col-md-8">
                                    <div class="card card-outline card-primary">
                                        <div class="card-header">
                                            <h3 class="card-title">Thông tin Sản phẩm</h3>
                                        </div>
                                        <div class="card-body  p-3">
                                            <ul class="nav nav-tabs">
                                                <li class="nav-item">
                                                    <a class="nav-link active" data-toggle="tab" href="#tong_quan">Thông tin
                                                        chung
                                                    </a>
                                                </li>
                                                <li class="nav-item">
                                                    <a class="nav-link" data-toggle="tab" href="#thuoctinh">Thuộc tính</a>
                                                </li>
                                                <li class="nav-item">
                                                    <a class="nav-link" data-toggle="tab" href="#hinh_anh">Hình ảnh liên
                                                        quan</a>
                                                </li>
                                                <li class="nav-item">
                                                    <a class="nav-link" data-toggle="tab" href="#video">Video</a>
                                                </li>
                                                  <li class="nav-item">
                                                    <a class="nav-link" data-toggle="tab" href="#option">
                                                        Màu sắc
                                                    </a>
                                                </li>
                                                {{--<li class="nav-item">
                                                    <a class="nav-link" data-toggle="tab" href="#faqs">Câu hỏi thường gặp
                                                    </a>
                                                </li>
                                              
                                                <li class="nav-item">
                                                    <a class="nav-link" data-toggle="tab" href="#product-accompanying">
                                                        Sản phẩm đi kèm
                                                    </a>
                                                </li>--}}
                                                {{-- <li class="nav-item">
                                                <a class="nav-link" data-toggle="tab" href="#rank">Cấu hình rank</a>
                                            </li> --}}
                                                {{-- <li class="nav-item">
                                                    <a class="nav-link" data-toggle="tab" href="#hinh_anh2">Hình ảnh thực
                                                        tế</a>
                                                </li> --}}
                                                {{-- <li class="nav-item">
                                                    <a class="nav-link" data-toggle="tab" href="#seo">Seo</a>
                                                </li> --}}
                                            </ul>

                                            <div class="tab-content">
                                                <!-- START Tổng Quan -->
                                                <div id="tong_quan" class="container tab-pane active wrapChangeSlug"><br>

                                                    <ul class="nav nav-tabs">
                                                        @foreach ($langConfig as $langItem)
                                                            <li class="nav-item">
                                                                <a class="nav-link {{ $langItem['value'] == $langDefault ? 'active' : '' }}"
                                                                    data-toggle="tab"
                                                                    href="#tong_quan_{{ $langItem['value'] }}">{{ $langItem['name'] }}</a>
                                                            </li>
                                                        @endforeach

                                                    </ul>
                                                    <div class="tab-content">
                                                        @foreach ($langConfig as $key => $langItem)
                                                            <div id="tong_quan_{{ $langItem['value'] }}"
                                                                class="container wrapChangeSlug tab-pane {{ $langItem['value'] == $langDefault ? 'active show' : '' }} fade">
                                                                <div class="form-group">
                                                                    <div class="row">
                                                                        <label class="col-sm-2 control-label"
                                                                            for="">Tên sản phẩm</label>
                                                                        <div class="col-sm-10">
                                                                            <input type="text"
                                                                                class="form-control nameChangeSlug {{ $langItem['value'] }}
                                                                        @error('name_' . $langItem['value']) is-invalid @enderror"
                                                                                id="name_{{ $langItem['value'] }}"
                                                                                data-lg="{{ $langItem['value'] }}"
                                                                                value="{{ old('name_' . $langItem['value']) }}"
                                                                                name="name_{{ $langItem['value'] }}"
                                                                                placeholder="Nhập tên sản phẩm">
                                                                            @error('name_' . $langItem['value'])
                                                                                <div class="invalid-feedback d-block">
                                                                                    {{ $message }}
                                                                                </div>
                                                                            @enderror
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="form-group">
                                                                    <div class="row">
                                                                        <label class="col-sm-2 control-label"
                                                                            for="">Slug</label>
                                                                        <div class="col-sm-10">
                                                                            <input type="text"
                                                                                class="form-control resultSlug_{{ $langItem['value'] }} changeAlias1 {{ $langItem['value'] }}
                                                                        @error('slug_' . $langItem['value']) is-invalid  @enderror"
                                                                                id="slug_{{ $langItem['value'] }}"
                                                                                data-lg="{{ $langItem['value'] }}"
                                                                                value="{{ old('slug_' . $langItem['value']) }}"
                                                                                name="slug_{{ $langItem['value'] }}"
                                                                                placeholder="Nhập slug">
                                                                            @error('slug_' . $langItem['value'])
                                                                                <div class="invalid-feedback d-block">
                                                                                    {{ $message }}
                                                                                </div>
                                                                            @enderror
                                                                        </div>
                                                                    </div>
                                                                </div>


                                                                {{-- <div class="form-group">
                                                                    <div class="row">
                                                                        <div class="col-md-3">
                                                                            <label class="control-label" for="">Tham
                                                                                chiếu nội
                                                                                bộ</label>
                                                                        </div>
                                                                        <div class="col-md-9">
                                                                            <input type="text"
                                                                                   class="form-control  @error('tham_chieu_nb') is-invalid  @enderror"
                                                                                   value="{{ old('tham_chieu_nb') }}"
                                                        name="tham_chieu_nb"
                                                        placeholder="Tự động tính bằng tên hãng sản xuất + model"
                                                        readonly>
                                                        @error('tham_chieu_nb')
                                                        <div class="invalid-feedback d-block">
                                                            {{ $message }}
                                                        </div>
                                                        @enderror
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="row">
                                                    <div class="col-md-3">
                                                        <label class="control-label" for="">Mã
                                                            vạch</label>
                                                    </div>
                                                    <div class="col-md-9">
                                                        <input type="text"
                                                            class="form-control  @error('ma_vach') is-invalid  @enderror"
                                                            value="{{ old('ma_vach') }}"
                                                            name="ma_vach"
                                                            placeholder="Nhập mã vạch">
                                                        @error('ma_vach')
                                                        <div class="invalid-feedback d-block">
                                                            {{ $message }}
                                                        </div>
                                                        @enderror
                                                    </div>
                                                </div>
                                            </div> --}}


                                                                {{-- <div class="form-group field-required">
                                                                    <div class="row">
                                                                        <div class="col-md-3">
                                                                            <label class="control-label" for="">Chọn
                                                                                thương hiệu</label>

                                                                        </div>
                                                                        <script>
                                                                            var supplier = [];
                                                                        </script>
                                                                        <div class="col-md-9">
                                                                            <select
                                                                                    class="form-control @error('supplier_id')
                                                                                            is-invalid
                                                                                            @enderror"
                                                                                    id=""
                                                                                    value="{{ old('supplier_id') }}"
                                            name="supplier_id">

                                            <option value="">--- Chọn thương hiệu
                                                ---
                                            </option>
                                            @foreach ($supplier as $item)
                                            <script>
                                                supplier[{
                                                    {
                                                        $item - > id
                                                    }
                                                }] = (({
                                                    !!$item - > toJson() !!
                                                }));
                                            </script>
                                            <option value="{{ $item->id }}" @if (old('supplier_id')) {{ old('supplier_id') == $item->id ? 'selected' : '' }} @endif>
                                                {{ $item->name }}
                                            </option>
                                            @endforeach
                                            </select>
                                            @error('supplier_id')
                                            <div class="invalid-feedback d-block">
                                                {{ $message }}
                                            </div>
                                            @enderror
                                        </div>
                                    </div>
                                </div> --}}
                                                                {{-- <div class="form-group field-required">
                                    <div class="row">
                                        <div class="col-md-2">
                                            <label class="control-label" for="">Mã
                                                sản phẩm</label>
                                        </div>
                                        <div class="col-md-10">
                                            <input type="text" min="0"
                                                class="form-control @error('masp') is-invalid  @enderror"
                                                value="{{ old('masp') }}" name="masp"
                                placeholder="Nhập mã sản phẩm">
                                @error('masp')
                                <div class="invalid-feedback d-block">
                                    {{ $message }}
                                </div>
                                @enderror
                            </div>
                        </div>
                </div> --}}
                                                                {{-- <div class="form-group">
                    <div class="row">
                        <label class="col-sm-2 control-label"
                            for="">Barcode</label>
                        <div class="col-sm-10">
                            <input type="text"
                                class="form-control {{ $langItem['value'] }}
                @error('description4_' . $langItem['value']) is-invalid @enderror"
                id=""
                data-lg="{{ $langItem['value'] }}"
                value="{{ old('description4_' . $langItem['value']) }}"
                name="description4_{{ $langItem['value'] }}"
                placeholder="Barcode">
                @error('description4_' . $langItem['value'])
                <div class="invalid-feedback d-block">
                    {{ $message }}
                </div>
                @enderror
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="row">
            <label class="col-sm-2 control-label" for="">Xuất xứ</label>
            <div class="col-sm-10">
                <input type="text" class="form-control {{$langItem['value']}}
    @error('description3_' . $langItem['value']) is-invalid @enderror" id="description3_{{$langItem['value']}}" data-lg="{{$langItem['value']}}" value="{{ old('description3_'.$langItem['value']) }}" name="description3_{{$langItem['value']}}" placeholder="Xuất xứ">
                @error('description3_' . $langItem['value'])
                <div class="invalid-feedback d-block">{{ $message }}</div>
                @enderror
            </div>
        </div>
    </div> --}}
                                                                {{-- <div class="form-group">
                    <div class="row">
                        <label class="col-sm-2 control-label"
                            for="">Quy cách đóng gói</label>
                        <div class="col-sm-10">
                            <input type="text"
                                class="form-control {{ $langItem['value'] }}
    @error('content4_' . $langItem['value']) is-invalid @enderror"
    id="content4_{{ $langItem['value'] }}"
    data-lg="{{ $langItem['value'] }}"
    value="{{ old('content4_' . $langItem['value']) }}"
    name="content4_{{ $langItem['value'] }}"
    placeholder="Quy cách đóng gói">
    @error('content4_' . $langItem['value'])
    <div class="invalid-feedback d-block">
        {{ $message }}
    </div>
    @enderror
</div>
</div>
</div> --}}
                                                                {{-- <div class="form-group">
                    <div class="row">
                        <label class="col-sm-2 control-label"
                            for="">Link video</label>
                        <div class="col-sm-10">
                            <input type="text"
                                class="form-control {{ $langItem['value'] }}
@error('content3_' . $langItem['value']) is-invalid @enderror"
id="content3_{{ $langItem['value'] }}"
data-lg="{{ $langItem['value'] }}"
value="{{ old('content3_' . $langItem['value']) }}"
name="content3_{{ $langItem['value'] }}"
placeholder="Link video">
@error('content3_' . $langItem['value'])
<div class="invalid-feedback d-block">
    {{ $message }}
</div>
@enderror
</div>
</div>
</div> --}}


                                                                {{-- <div class="form-group">
                                    <div class="row">
                                        <label class="col-sm-2 control-label" for="">Giới thiệu ngắn</label>
                                        <div class="col-sm-10">
                                            <input type="text" class="form-control {{$langItem['value']}}
@error('description4_' . $langItem['value']) is-invalid @enderror" id="description4_{{$langItem['value']}}" data-lg="{{$langItem['value']}}" value="{{ old('description4_'.$langItem['value']) }}" name="description4_{{$langItem['value']}}" placeholder="Giới thiệu ngắn">
@error('description4_' . $langItem['value'])
<div class="invalid-feedback d-block">{{ $message }}</div>
@enderror
</div>
</div>
</div> --}}
                                                                {{-- <div class="form-group">
    <div class="row">
        <div class="col-md-2">
            <label class="control-label" for="">
                Công dụng
            </label>
        </div>

        <div class="col-sm-10">
            <textarea class="form-control tinymce_editor_init @error('description_' . $langItem['value']) is-invalid  @enderror"
                name="description_{{ $langItem['value'] }}" id="description_{{ $langItem['value'] }}" rows="3" value=""
placeholder="Giới thiệu">
{{ old('description_' . $langItem['value']) }}
</textarea>
@error('description_' . $langItem['value'])
<div class="invalid-feedback d-block">
    {{ $message }}
</div>
@enderror
</div>
</div>
</div> --}}
                                                                <div class="form-group">
                                                                    <div class="row">
                                                                        <div class="col-md-2">
                                                                            <label class="control-label" for="">
                                                                                Mô tả
                                                                            </label>
                                                                        </div>

                                                                        <div class="col-sm-10">
                                                                            <textarea class="form-control tinymce_editor_init @error('description2_' . $langItem['value']) is-invalid  @enderror"
                                                                                name="description2_{{ $langItem['value'] }}" id="description2_{{ $langItem['value'] }}" rows="3"
                                                                                value="" placeholder="Giới thiệu">
            {{ old('description2_' . $langItem['value']) }}
            </textarea>
                                                                            @error('description2_' . $langItem['value'])
                                                                                <div class="invalid-feedback d-block">
                                                                                    {{ $message }}
                                                                                </div>
                                                                            @enderror
                                                                        </div>
                                                                    </div>
                                                                </div>



                                                                <div class="form-group">
                                                                    <div class="row">
                                                                        <label class="col-sm-2 control-label"
                                                                            for="">Nội dung sản phẩm</label>
                                                                        <div class="col-sm-10">
                                                                            <textarea class="form-control tinymce_editor_init @error('phukien_' . $langItem['value']) is-invalid  @enderror"
                                                                                name="phukien_{{ $langItem['value'] }}" id="ckeditor2{{ $key }}" rows="20" value=""
                                                                                placeholder="Nhập mô tả">
            {{ old('phukien_' . $langItem['value']) }}
            </textarea>
                                                                            @error('phukien_' . $langItem['value'])
                                                                                <div class="invalid-feedback d-block">
                                                                                    {{ $message }}
                                                                                </div>
                                                                            @enderror
                                                                        </div>
                                                                    </div>
                                                                </div>

                                                                <div class="form-group">
                                                                    <div class="row">
                                                                        <div class="col-md-2">
                                                                            <label class="control-label" for="">
                                                                                Thông số kỹ thuật
                                                                            </label>
                                                                        </div>

                                                                        <div class="col-sm-10">
                                                                            <textarea class="form-control tinymce_editor_init @error('description3_' . $langItem['value']) is-invalid  @enderror"
                                                                                name="description3_{{ $langItem['value'] }}" id="description3_{{ $langItem['value'] }}" rows="3"
                                                                                value="" placeholder="Giới thiệu">
            {{ old('description3_' . $langItem['value']) }}
            </textarea>
                                                                            @error('description3_' . $langItem['value'])
                                                                                <div class="invalid-feedback d-block">
                                                                                    {{ $message }}
                                                                                </div>
                                                                            @enderror
                                                                        </div>
                                                                    </div>
                                                                </div>

                                                                <div class="form-group">
                                                                    <div class="row">
                                                                        <label class="col-sm-2 control-label"
                                                                            for="">Khuyến mãi</label>
                                                                        <div class="col-sm-10">
                                                                            <textarea class="form-control tinymce_editor_init @error('content2_' . $langItem['value']) is-invalid  @enderror"
                                                                                name="content2_{{ $langItem['value'] }}" id="content2_{{ $langItem['value'] }}" rows="20" value=""
placeholder="Nội dung bên cạnh thông số">
{{ old('content2_' . $langItem['value']) }}
</textarea>
@error('content2_' . $langItem['value'])
<div class="invalid-feedback d-block">
    {{ $message }}
</div>
@enderror
</div>
</div>
</div>

 {{--<div class="form-group">
    <div class="row">
        <label class="col-sm-2 control-label"
            for="">Thông số kỹ thuật</label>
        <div class="col-sm-10">
            <textarea class="form-control tinymce_editor_init @error('model_' . $langItem['value']) is-invalid  @enderror"
                name="model_{{ $langItem['value'] }}" id="" rows="20" value=""
                placeholder="Thông số kỹ thuật">
            {{ old('model_' . $langItem['value']) }}
            </textarea>
            @error('model_' . $langItem['value'])
            <div class="invalid-feedback d-block">
                {{ $message }}
            </div>
            @enderror
        </div>
    </div>
</div> --}}
                                                                {{-- <div class="form-group">
                                    <div class="row">
                                        <div class="col-md-2">
                                            <label class="control-label" for="">
                                                Công năng
                                            </label>
                                        </div>
                                        <div class="col-sm-10">
                                            <textarea class="form-control tinymce_editor_init @error('content4_' . $langItem['value']) is-invalid  @enderror" name="content4_{{ $langItem['value'] }}" id="" rows="20" value="" placeholder="Nhập công năng">
{{ old('content4_' . $langItem['value']) }}
</textarea>
@error('content4_' . $langItem['value'])
<div class="invalid-feedback d-block">
    {{ $message }}
</div>
@enderror
</div>
</div>
</div> --}}
                                                                {{-- <div class="form-group">
                                    <div class="row">
                                        <label class="col-sm-2 control-label" for="">Thông số kỹ thuật </label>
                                        <div class="col-sm-10">
                                            <textarea class="form-control tinymce_editor_init @error('tainguyen_' . $langItem['value']) is-invalid  @enderror" name="tainguyen_{{$langItem['value']}}" id="" rows="20" value="" placeholder="Nhập thông số kỹ thuật">
{{ old('tainguyen_'.$langItem['value']) }}
</textarea>
@error('tainguyen_' . $langItem['value'])
<div class="invalid-feedback d-block">{{ $message }}</div>
@enderror
</div>
</div>
</div> --}}
                                                                {{-- <div class="form-group">
                                    <div class="row">
                                        <label class="col-sm-2 control-label" for="">Chinh sách hỗ trợ </label>
                                        <div class="col-sm-10">
                                            <textarea class="form-control tinymce_editor_init @error('hotro_' . $langItem['value']) is-invalid  @enderror" name="hotro_{{$langItem['value']}}" id="" rows="20" value="" placeholder="Nhập chính sách hỗ trợ">
{{ old('hotro_'.$langItem['value']) }}
</textarea>
@error('hotro_' . $langItem['value'])
<div class="invalid-feedback d-block">{{ $message }}</div>
@enderror
</div>
</div>
</div>
                                                                <div class="form-group">
                                                                    <div class="row">
                                                                        <label class="col-sm-2 control-label"
                                                                            for="">Nhập tags</label>
                                                                        <div class="col-sm-10">

                                                                            <select
                                                                                class="form-control tag-select-choose w-100"
                                                                                multiple="multiple"
                                                                                name="tags_{{ $langItem['value'] }}[]">
                                                                                @if (old('tags_' . $langItem['value']))
                                                                                    @foreach (old('tags_' . $langItem['value']) as $tag)
                                                                                        <option
                                                                                            value="{{ $tag }}"
                                                                                            selected>{{ $tag }}
                                                                                        </option>
                                                                                    @endforeach
                                                                                @endif
                                                                                @if (isset($listTags))
                                                                                    @foreach ($listTags as $tag)
                                                                                        <option
                                                                                            value="{{ $tag->name }}">
                                                                                            {{ $tag->name }}</option>
                                                                                    @endforeach
                                                                                @endif
                                                                            </select>
                                                                            @error('tags')
                                                                                <div class="invalid-feedback d-block">
                                                                                    {{ $message }}</div>
                                                                            @enderror
                                                                        </div>
                                                                    </div>
                                                                </div> --}}
                                                                <div class="form-group">
                                                                    <div class="row">
                                                                        <label class="col-sm-2 control-label"
                                                                            for="">Nhập
                                                                            title seo</label>
                                                                        <div class="col-sm-10">
                                                                            <input type="text"
                                                                                class="form-control @error('title_seo_' . $langItem['value']) is-invalid @enderror"
                                                                                id=""
                                                                                value="{{ old('title_seo_' . $langItem['value']) }}"
                                                                                name="title_seo_{{ $langItem['value'] }}"
                                                                                placeholder="Nhập title seo">
                                                                            @error('title_seo_' . $langItem['value'])
                                                                                <div class="invalid-feedback d-block">
                                                                                    {{ $message }}
                                                                                </div>
                                                                            @enderror
                                                                            <div class="invalid-feedback2 d-block"
                                                                                id="title_seo_{{ $langItem['value'] }}">
                                                                                (META title <span
                                                                                    id="da-nhap-title">70</span>
                                                                                ký tự
                                                                                và từ)
                                                                            </div>
                                                                        </div>
                                                                    </div>

                                                                </div>

                                                                <div class="form-group">
                                                                    <div class="row">
                                                                        <label class="col-sm-2 control-label"
                                                                            for="">Nhập mô
                                                                            tả seo</label>
                                                                        <div class="col-sm-10">
                                                                            <input type="text"
                                                                                class="form-control @error('description_seo_' . $langItem['value']) is-invalid @enderror"
                                                                                id=""
                                                                                value="{{ old('description_seo_' . $langItem['value']) }}"
                                                                                name="description_seo_{{ $langItem['value'] }}"
                                                                                placeholder="Nhập mô tả seo">
                                                                            @error('description_seo_' . $langItem['value'])
                                                                                <div class="invalid-feedback d-block">
                                                                                    {{ $message }}
                                                                                </div>
                                                                            @enderror
                                                                            <div class="invalid-feedback2 d-block"
                                                                                id="description_seo_{{ $langItem['value'] }}">
                                                                                (Trích lược SEO <span
                                                                                    id="da-nhap-title">160</span> ký tự
                                                                                và từ)
                                                                            </div>
                                                                        </div>
                                                                    </div>

                                                                </div>
                                                                <div class="form-group">
                                                                    <div class="row">
                                                                        <label class="col-sm-2 control-label"
                                                                            for="">Nhập từ
                                                                            khóa seo</label>
                                                                        <div class="col-sm-10">
                                                                            <input type="text"
                                                                                class="form-control @error('keyword_seo_' . $langItem['value']) is-invalid @enderror"
                                                                                id=""
                                                                                value="{{ old('keyword_seo_' . $langItem['value']) }}"
                                                                                name="keyword_seo_{{ $langItem['value'] }}"
                                                                                placeholder="Nhập từ khóa seo">
                                                                            @error('keyword_seo_' . $langItem['value'])
                                                                                <div class="invalid-feedback d-block">
                                                                                    {{ $message }}
                                                                                </div>
                                                                            @enderror
                                                                            <div class="invalid-feedback2 d-block"
                                                                                id="keyword_seo_{{ $langItem['value'] }}">
                                                                                (Từ khóa cách nhau bằng dấu phẩy, tối đa
                                                                                <span id="da-nhap-title">5</span> từ khóa)
                                                                            </div>
                                                                        </div>

                                                                    </div>

                                                                </div>
                                                                <div class="form-group">
                                                                    <div class="row">
                                                                        <label class="col-sm-2 control-label"
                                                                            for="">Đường dẫn / Alias</label>
                                                                        <div class="col-sm-10">
                                                                            <div class="next-input--stylized">
                                                                                <span
                                                                                    class="next-input__add-on next-input__add-on--before"
                                                                                    style="padding-right:0">{{ $url }}/</span>
                                                                                <input type="text"
                                                                                    class="next-input next-input--invisible resultSlug_{{ $langItem['value'] }} changeAlias2 {{ $langItem['value'] }}
                                                                            @error('slug_' . $langItem['value']) is-invalid  @enderror"
                                                                                    id="slug_{{ $langItem['value'] }}"
                                                                                    data-lg="{{ $langItem['value'] }}"
                                                                                    value="{{ old('slug_' . $langItem['value']) }}"
                                                                                    name="slug_{{ $langItem['value'] }}">
                                                                                @error('slug_' . $langItem['value'])
                                                                                    <div class="invalid-feedback d-block">
                                                                                        {{ $message }}
                                                                                    </div>
                                                                                @enderror
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="card card-outline card-primary">
                                                                    <div class="body_result">

                                                                    </div>
                                                                </div>
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                </div>

                                                <!-- END Tổng Quan -->

                                                <!-- START Dữ Liệu -->
                                                <!-- <div id="du_lieu" class="container tab-pane fade"><br>

                                                                                            </div> -->
                                                <!-- END Dữ Liệu -->

                                                <!-- START Hình Ảnh -->

                                                <!-- END Hình Ảnh -->
                                                <div id="hinh_anh" class="container tab-pane fade">
                                                    <div class="wrap-load-image mb-3">
                                                        <div class="form-group">
                                                            <label for="">Ảnh liên quan</label>
                                                            <input type="file"
                                                                class="form-control-file img-load-input-multiple border @error('image')
                                                                is-invalid
                                                                @enderror"
                                                                id="" name="image[]" multiple>
                                                        </div>
                                                        @error('image')
                                                            <div class="invalid-feedback d-block">{{ $message }}</div>
                                                        @enderror
                                                        <div class="load-multiple-img">
                                                            <img class=""
                                                                src="{{ asset('admin_asset/images/upload-image.png') }}">
                                                            <img class=""
                                                                src="{{ asset('admin_asset/images/upload-image.png') }}">
                                                            <img class=""
                                                                src="{{ asset('admin_asset/images/upload-image.png') }}">
                                                        </div>
                                                    </div>
                                                </div>

                                                <div id="video" class="container tab-pane fade">
                                                    <div id="video-wrapper">

                                                    </div>

                                                    <button type="button" class="btn btn-sm btn-primary mt-2"
                                                        id="add-video">
                                                        + Thêm video
                                                    </button>
                                                </div>

                                                <div id="faqs" class="container tab-pane fade">
                                                    <div id="faq-wrapper"></div> <button type="button"
                                                        class="btn btn-sm btn-primary mt-2" id="add-faq"> + Thêm FAQ
                                                    </button>
                                                </div>

                                                <div id="thuoctinh" class="container tab-pane fade">



                                                </div>

                                                <div id="option" class="container tab-pane fade">
                                                     <ul class="nav nav-tabs">
        @foreach ($langConfig as $langItem)
        <li class="nav-item">
            <a class="nav-link {{ $langItem['value'] == $langDefault ? 'active' : '' }}"
                data-toggle="tab"
                href="#profits_tab_{{ $langItem['value'] }}">{{ $langItem['name'] }}</a>
        </li>
        @endforeach
    </ul>

    <div class="tab-content mt-3">
        @foreach ($langConfig as $langItem)
        <div id="profits_tab_{{ $langItem['value'] }}" 
             class="tab-pane fade {{ $langItem['value'] == $langDefault ? 'show active' : '' }}">

            <div id="profits-container-{{ $langItem['value'] }}"></div>
            <button type="button" 
                    class="btn btn-success mb-3 add-profit" 
                    data-lang="{{ $langItem['value'] }}">
                + Thêm màu ({{ $langItem['name'] }})
            </button>

        </div>
        @endforeach
    </div>
                                                </div>

                                                <div id="news" class="container tab-pane fade">
                                                    <div class="form-group">
                                                        <label for="posts_ids">Chọn bài viết liên quan</label>
                                                        <select name="posts_ids[]" id="posts_ids" class="form-control"
                                                            multiple="multiple">
                                                            @foreach ($posts as $post)
                                                                <option value="{{ $post->id }}">
                                                                    {{ $post->name }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>

                                                <div id="product-accompanying" class="container tab-pane fade">
                                                    <div class="related-box" id="search-box-wrapper"
                                                        style="position: relative;">
                                                        <label>Tìm sản phẩm bán kèm:</label>

                                                        <input type="text" id="search-related" class="form-control"
                                                            placeholder="Nhập tối thiểu 3 ký tự...">

                                                        <!-- Popup kết quả -->
                                                        <div id="search-result" class="list-group mt-2"
                                                            style="display:none; position:absolute; top:60px; left:0; width:100%; z-index:1000;">
                                                        </div>

                                                        <!-- Danh sách sản phẩm đã chọn -->
                                                        <div id="related-selected" class="mt-3"></div>

                                                        <input type="hidden" name="related_products"
                                                            id="related_products_hidden" value="">
                                                    </div>
                                                </div>

                                                <div id="rank" class="container tab-pane fade">
                                                    <div>
                                                        <label style="margin-left: 20px;">
                                                            <input type="radio" name="tabOption" value="tab1"
                                                                checked>
                                                            Giảm theo số tiền
                                                        </label>
                                                        <label>
                                                            <input type="radio" name="tabOption" value="tab2">
                                                            Giảm theo %
                                                        </label>

                                                    </div>


                                                    <div id="tab1" class="tab-content" style="margin-top: 20px;">
                                                        <div class="wrap-load-image mb-3">
                                                            @foreach ($ranks as $item)
                                                                <div class="form-group">
                                                                    <div class="row">
                                                                        <label class="col-sm-2 control-label"
                                                                            for="">{{ $item->name }}</label>
                                                                        <input type="hidden" name="amount_rank_id[]"
                                                                            value="{{ $item->id }}">
                                                                        <div class="col-sm-5">
                                                                            <div class="input-group">
                                                                                <input type="number" class="form-control"
                                                                                    id="amount_rank_{{ $item->id }}"
                                                                                    name="amount_rank[]"
                                                                                    placeholder="Nhập giá bán hạng thành viên">
                                                                                <div class="input-group-append">
                                                                                    <span
                                                                                        class="input-group-text">VNĐ</span>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            @endforeach
                                                            @error('amount_rank')
                                                                <div class="invalid-feedback d-block">{{ $message }}
                                                                </div>
                                                            @enderror
                                                        </div>
                                                    </div>


                                                    <div id="tab2" class="tab-content"
                                                        style="display: none; margin-top: 20px;">
                                                        <div class="wrap-load-image mb-3">
                                                            @foreach ($ranks as $item)
                                                                <div class="form-group">
                                                                    <div class="row">
                                                                        <label class="col-sm-2 control-label"
                                                                            for="">{{ $item->name }}</label>
                                                                        <input type="hidden" name="percent_rank_id[]"
                                                                            value="{{ $item->id }}">
                                                                        <div class="col-sm-5">
                                                                            <div class="input-group">
                                                                                <input type="number" class="form-control"
                                                                                    id="percent_rank_{{ $item->id }}"
                                                                                    name="percent_rank[]"
                                                                                    placeholder="Nhập % giảm giá">
                                                                                <div class="input-group-append">
                                                                                    <span class="input-group-text">%</span>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            @endforeach
                                                            @error('percent_rank')
                                                                <div class="invalid-feedback d-block">{{ $message }}
                                                                </div>
                                                            @enderror
                                                        </div>
                                                    </div>



                                                </div>
                                                
                                                <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
                                                <script>
                                                    $(document).ready(function() {
                                                        $('#rank input[name="tabOption"]').on('change', function() {
                                                            // Ẩn tất cả tab con bên trong #rank
                                                            $('#rank .tab-content').hide();

                                                            // Hiện tab được chọn
                                                            const selectedTab = $(this).val();
                                                            $('#rank #' + selectedTab).show();
                                                        });
                                                    });
                                                </script>



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

                                <div class="col-md-4">
                                    <div class="card card-outline card-primary">
                                        <div class="card-header">
                                            <h3 class="card-title">Cấu hình bài viết</h3>
                                        </div>
                                        <div class="card-body">
                                            <div class="form-group wrap-permission">
                                                <div style="border: 1px solid; padding: 5px;">
                                                    <label class="control-label" for="">Lựa chọn chuyên
                                                        mục</label>
                                                    <div class="row">
                                                        <div class="col-md-12">
                                                            <div class="mb-2">
                                                                <input type="text"
                                                                    id="search-category"
                                                                    class="form-control form-control-sm"
                                                                    placeholder="🔍 Tìm chuyên mục theo tên...">
                                                            </div>

                                                            <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 category-item">
                                                                        <div class="form-check permission-title">
                                                                            <label class="form-check-label p-2">
                                                                                <input type="checkbox"
                                                                                    class="form-check-input check-parent"
                                                                                    value="{{ $item->id }}"
                                                                                    name="category[]">{{ $item->name }}
                                                                            </label>
                                                                        </div>

                                                                        @if (count($item->childs) > 0)
                                                                            <div class="list-permission p-2 pl-4">

                                                                                @foreach ($item->childs()->with('translationsLanguage')->where('active', 1)->orderBy('order')->get() as $itemChild)
                                                                                    <div class="form-check mb-1">
                                                                                        <label class="form-check-label">
                                                                                            <input type="checkbox"
                                                                                                class="form-check-input check-children category-select"
                                                                                                name="category[]"
                                                                                                value="{{ $itemChild->id }}">{{ $itemChild->name }}
                                                                                        </label>
                                                                                        @if (count($itemChild->childs) > 0)
                                                                                            <div class="childs">
                                                                                                @php
                                                                                                    $sumItemChilds = count(
                                                                                                        $itemChild
                                                                                                            ->childs()
                                                                                                            ->with(
                                                                                                                'translationsLanguage',
                                                                                                            )
                                                                                                            ->where(
                                                                                                                'active',
                                                                                                                1,
                                                                                                            )
                                                                                                            ->orderBy(
                                                                                                                'order',
                                                                                                            )
                                                                                                            ->get(),
                                                                                                    );
                                                                                                @endphp
                                                                                                @foreach ($itemChild->childs()->with('translationsLanguage')->where('active', 1)->orderBy('order')->get() as $keyChils => $itemChild2)
                                                                                                    <div
                                                                                                        class="form-check {{ $keyChils != $sumItemChilds - 1 ? 'mb-1' : '' }}">
                                                                                                        <label
                                                                                                            class="form-check-label">
                                                                                                            <input
                                                                                                                type="checkbox"
                                                                                                                class="form-check-input check-children category-select"
                                                                                                                name="category[]"
                                                                                                                value="{{ $itemChild2->id }}">{{ $itemChild2->name }}
                                                                                                        </label>
                                                                                                        @if (count($itemChild2->childs) > 0)
                                                                                                            <div
                                                                                                                class="child-childs">
                                                                                                                @php
                                                                                                                    $sumItemChildChilds = count(
                                                                                                                        $itemChild2
                                                                                                                            ->childs()
                                                                                                                            ->with(
                                                                                                                                'translationsLanguage',
                                                                                                                            )
                                                                                                                            ->where(
                                                                                                                                'active',
                                                                                                                                1,
                                                                                                                            )
                                                                                                                            ->orderBy(
                                                                                                                                'order',
                                                                                                                            )
                                                                                                                            ->get(),
                                                                                                                    );
                                                                                                                @endphp
                                                                                                                @foreach ($itemChild2->childs()->with('translationsLanguage')->where('active', 1)->orderBy('order')->get() as $indexChildChild => $itemChild3)
                                                                                                                    <div
                                                                                                                        class="form-check {{ $indexChildChild != $sumItemChildChilds - 1 ? 'mb-1' : '' }}">
                                                                                                                        <label
                                                                                                                            class="form-check-label">
                                                                                                                            <input
                                                                                                                                type="checkbox"
                                                                                                                                class="form-check-input check-children category-select"
                                                                                                                                name="category[]"
                                                                                                                                value="{{ $itemChild3->id }}">{{ $itemChild3->name }}
                                                                                                                        </label>
                                                                                                                    </div>
                                                                                                                @endforeach
                                                                                                            </div>
                                                                                                        @endif
                                                                                                    </div>
                                                                                                @endforeach
                                                                                            </div>
                                                                                        @endif
                                                                                    </div>
                                                                                @endforeach

                                                                            </div>
                                                                        @endif
                                                                    </div>
                                                                @endforeach


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

                                            <div class="form-group field-required">
            <div class="row">
                <div class="col-md-12">
                    <label class="control-label" for="supplier_id">Chọn thương hiệu</label>
                </div>

                <div class="col-md-12">
                    <select class="form-control select2 @error('supplier_id') is-invalid @enderror"
                            name="supplier_id"
                            id="supplier_id">
                        <option value="">--- Chọn thương hiệu ---</option>
                        @foreach ($supplier as $item)
    <option value="{{ $item->id }}"
                                {{ old('supplier_id') == $item->id ? 'selected' : '' }}>
                                {{ $item->name }}
                            </option>
    @endforeach
                    </select>

                    @error('supplier_id')
        <div class="invalid-feedback d-block">
                                    {{ $message }}
                                </div>
    @enderror
                </div>
            </div>
        </div> 

                                            <script>
                                                $(document).ready(function() {
                                                    $('#supplier_id').select2({
                                                        placeholder: "--- Chọn thương hiệu ---",
                                                        allowClear: true,
                                                        width: '100%'
                                                    });
                                                });
                                            </script>

                                            <div class="form-group field-required">
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <label class="control-label" for="">Mã
                                                            sản phẩm</label>
                                                    </div>
                                                    <div class="col-md-12">
                                                        <input type="text" min="0"
                                                            class="form-control @error('masp') is-invalid  @enderror"
                                                            value="{{ old('masp') }}" name="masp"
                                                            placeholder="Nhập mã sản phẩm">
                                                        @error('masp')
                                                            <div class="invalid-feedback d-block">
                                                                {{ $message }}
                                                            </div>
                                                        @enderror
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row mb-3">
                                                <div class="col-12">
                                                    <label class="control-label" for="stock_status">
                                                        Trạng thái tồn kho
                                                    </label>
                                                </div>
                                                <div class="col-md-12">
                                                    <select name="stock_status" id="stock_status"
                                                        class="form-control @error('stock_status') is-invalid @enderror">
                                                        <option value="in_stock"
                                                            {{ old('stock_status') === 'in_stock' ? 'selected' : '' }}>
                                                            Còn hàng
                                                        </option>
                                                        <option value="out_of_stock"
                                                            {{ old('stock_status') === 'out_of_stock' ? 'selected' : '' }}>
                                                            Hết hàng
                                                        </option>
                                                    </select>

                                                    @error('stock_status')
                                                        <div class="invalid-feedback d-block">
                                                            {{ $message }}
                                                        </div>
                                                    @enderror
                                                </div>
                                            </div>

                                            {{-- <div class="form-group field-required">
                <div class="row">
                    <div class="col-md-12">
                        <label class="control-label" for="">Mã màu bán chạy</label>
                    </div>
                    <div class="col-md-12">
                        <input type="color" min="0"
                            class="form-control @error('color') is-invalid  @enderror"
                            value="{{ old('color') }}" name="color"
            placeholder="Nhập mã sản phẩm">
            @error('color')
            <div class="invalid-feedback d-block">
                {{ $message }}
            </div>
            @enderror
        </div>
    </div>
</div> --}}



                                            <div class="wrap-load-image mb-3">
    <label class="font-weight-bold d-block mb-2">Ảnh đại diện</label>

    {{-- Chọn kiểu tải --}}
    <div class="mb-2">
        <div class="custom-control custom-radio custom-control-inline">
            <input type="radio"
                   id="avatar_upload"
                   name="avatar_type"
                   class="custom-control-input js-image-type"
                   value="upload"
                   checked>
            <label class="custom-control-label" for="avatar_upload">
                Tải từ máy
            </label>
        </div>

        <div class="custom-control custom-radio custom-control-inline">
            <input type="radio"
                   id="avatar_library"
                   name="avatar_type"
                   class="custom-control-input js-image-type"
                   value="library">
            <label class="custom-control-label" for="avatar_library">
                Chọn từ thư viện
            </label>
        </div>
    </div>

    {{-- Upload từ máy --}}
    <div class="form-group avatar-upload">
        <input type="file"
               class="form-control-file img-load-input border
               @error('avatar_path') is-invalid @enderror"
               name="avatar_path"
               accept="image/*">
        @error('avatar_path')
            <div class="invalid-feedback d-block">{{ $message }}</div>
        @enderror
    </div>

    {{-- Chọn từ thư viện --}}
    <div class="form-group avatar-library d-none">
        <div class="input-group">
            <input type="text"
                   class="form-control input-image-path"
                   name="avatar_path_select"
                   placeholder="Chọn ảnh từ thư viện"
                   readonly>
            <div class="input-group-append">
                <button type="button"
                        class="btn btn-secondary btn-open-filemanager">
                    <i class="fas fa-folder-open"></i>
                </button>
            </div>
        </div>
    </div>

    {{-- Preview --}}
    <div class="image-preview mt-2">
        <img class="img-load border p-1 w-100"
             src="{{ asset('admin_asset/images/upload-image.png') }}"
             style="height:200px;object-fit:cover;max-width:260px;">
    </div>
</div>

                                            {{-- <div class="wrap-load-image mb-3">
 <div class="form-group">
        <label for="">Ảnh đại diện video</label>
        <input type="file"
            class="form-control-file img-load-input border @error('avatar_path2')
    is-invalid
    @enderror"
            id="" name="avatar_path2">
        <!-- Select avatar -->
        <input type="hidden" name="avatar_path_select"
            id="avatar_path_select">
        <!--/ Select avatar -->
        @error('avatar_path2')
        <div class="invalid-feedback d-block">{{ $message }}
</div>
@enderror
</div>
<img class="img-load border p-1 w-100" id="img_avatar_path"
    src="{{ asset('admin_asset/images/upload-image.png') }}"
    style="height: 200px;object-fit:cover; max-width: 260px;">
</div> --}}
                                            {{-- <div class="wrap-load-image mb-3">
    <div class="form-group">
        <label for="">Ảnh hover</label>
        <input type="file" class="form-control-file img-load-input border @error('avatar_path3') is-invalid
                                                    @enderror" id="" name="avatar_path3">
        <!-- Select avatar -->
        <input type="hidden" name="avatar_path3_select" id="avatar_path3_select">
        <!--/ Select avatar -->
        @error('avatar_path3')
        <div class="invalid-feedback d-block">{{ $message }}</div>
@enderror
</div>
<img class="img-load border p-1 w-100" id="img_avatar_path" src="{{ asset('admin_asset/images/upload-image.png') }}" style="height: 200px;object-fit:cover; max-width: 260px;">
</div> --}}
                                            {{-- <div class="form-group field-required">
                <div class="row">
                    <div class="col-md-3">
                        <label class="control-label" for="">Tiền
                            tệ</label>
                    </div>
                    <div class="col-md-9">
                        <select name="type_price" class="form-control" required>
                            @foreach (config('web_default.typePrice') as $key => $item)
                            <option value="{{ $key }}" {{ old('type_price') == $key ? 'selected' : '' }}>
{{ $item['name'] }}
</option>
@endforeach
</select>
@error('type_price')
<div class="invalid-feedback d-block">
    {{ $message }}
</div>
@enderror
</div>
</div>
</div> --}}
                                            {{-- <div class="form-group">
                <div class="row">
                    <div class="col-md-3">
                        <label class="control-label" for="">Số lượng đã bán</label>
                    </div>
                    <div class="col-md-9">
                        <input type="number" min="0" class="form-control  @error('pay') is-invalid  @enderror" value="{{ old('pay') }}" name="pay" placeholder="Nhập số lượng đã bán">
@error('price')
<div class="invalid-feedback d-block">
    {{ $message }}
</div>
@enderror
</div>
</div>
</div> --}}
<div class="form-group">
                                                <div class="row">
                                                    <div class="col-md-3">
                                                        <label class="control-label" for="">Đã bán</label>
                                                    </div>
                                                    <div class="col-md-9">
                                                     
                                                        <input id="sold" type="number" min="0"
                                                            class="form-control  @error('sold') is-invalid  @enderror"
                                                            value="{{ old('sold') }}" name="sold"
                                                            placeholder="Nhập đã bán">
                                                        @error('sold')
                                                            <div class="invalid-feedback d-block">
                                                                {{ $message }}
                                                            </div>
                                                        @enderror
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="row">
                                                    <div class="col-md-3">
                                                        <label class="control-label" for="">Giá bán</label>
                                                    </div>
                                                    <div class="col-md-9">
                                                        <input id="price" type="text"
                                                            class="form-control  @error('price') is-invalid  @enderror"
                                                            placeholder="Nhập giá">
                                                        <input id="price_hide" type="hidden" min="0"
                                                            class="form-control  @error('price') is-invalid  @enderror"
                                                            value="{{ old('price') }}" name="price"
                                                            placeholder="Nhập giá">
                                                        @error('price')
                                                            <div class="invalid-feedback d-block">
                                                                {{ $message }}
                                                            </div>
                                                        @enderror
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="row">
                                                    <div class="col-md-3">
                                                        <label class="control-label" for="">Giá cũ</label>
                                                    </div>
                                                    <div class="col-md-9">
                                                        <input id="old_price" type="text"
                                                            class="form-control  @error('old_price') is-invalid   @enderror"
                                                            placeholder="Nhập giá">
                                                        <input id="old_price_hide" type="hidden" min="0"
                                                            class="form-control  @error('old_price') is-invalid  @enderror"
                                                            value="{{ old('old_price') }}" name="old_price"
                                                            placeholder="Nhập giá">
                                                        @error('old_price')
                                                            <div class="invalid-feedback d-block">
                                                                {{ $message }}
                                                            </div>
                                                        @enderror
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="form-group">
                                                <div class="row">
                                                    <div class="col-md-3">
                                                        <label class="control-label">Tài liệu</label>
                                                    </div>

                                                    <div class="col-md-9">
                                                        <input type="file" name="document"
                                                            class="form-control @error('document') is-invalid @enderror"
                                                            accept=".pdf,.doc,.docx,.xls,.xlsx,.png,.jpg,.jpeg,.gif,.zip,.rar">

                                                        @error('document')
                                                            <div class="invalid-feedback d-block">{{ $message }}</div>
                                                        @enderror

                                                    </div>
                                                </div>
                                            </div>
                                            {{-- <div class="form-group">
    <div class="row">
        <div class="col-md-3">
            <label class="control-label" for="">
                Bảo hành
            </label>
        </div>

        <div class="col-md-9">
            <input class="form-control @error('description3_' . $langItem['value']) is-invalid  @enderror"
                name="description3_{{ $langItem['value'] }}" id="description3_{{ $langItem['value'] }}" rows="3" value=" {{ old('description3_' . $langItem['value']) }}"
placeholder="Nhập thời gian">

@error('description3_' . $langItem['value'])
<div class="invalid-feedback d-block">
    {{ $message }}
</div>
@enderror
</div>
</div>
</div> --}}

                                            <div class="col-md-12">
                                                <div class="card shadow-sm p-3 mb-3">
                                                    <h6 class="text-success mb-3"><i class="fas fa-cog"></i> Tùy chọn khác
                                                    </h6>

                                                    <div class="form-check mb-2">
                                                        <input type="checkbox" class="form-check-input"
                                                            id="is_bestseller" name="is_bestseller" value="1"
                                                            @if (old('is_bestseller') === '1') checked @endif>
                                                        <label class="form-check-label" for="is_bestseller">Bán
                                                            chạy</label>
                                                        @error('sale')
                                                            <div class="invalid-feedback d-block">{{ $message }}</div>
                                                        @enderror
                                                    </div>

                                                    <div class="form-check mb-2">
                                                        <input type="checkbox" class="form-check-input" id="is_vat"
                                                            name="is_vat" value="1"
                                                            @if (old('is_vat') === '1') checked @endif>
                                                        <label class="form-check-label" for="is_vat">Hiển thị Flash</label>
                                                        @error('sale')
                                                            <div class="invalid-feedback d-block">{{ $message }}</div>
                                                        @enderror
                                                    </div>

                                                    <div class="form-check mb-2">
                                                        <input type="checkbox" class="form-check-input"
                                                            id="is_midnight_sale" name="is_midnight_sale" value="1"
                                                            @if (old('is_midnight_sale') === '1') checked @endif>
                                                        <label class="form-check-label" for="is_midnight_sale">Giá đã bao
                                                            gồm VAT</label>
                                                        @error('sale')
                                                            <div class="invalid-feedback d-block">{{ $message }}</div>
                                                        @enderror
                                                    </div>

                                                    <div class="form-check mb-2">
                                                        <input type="checkbox" class="form-check-input" id="sale"
                                                            name="sale" value="1"
                                                            @if (old('sale') === '1') checked @endif>
                                                        <label class="form-check-label" for="sale">Flash Sale</label>
                                                        @error('sale')
                                                            <div class="invalid-feedback d-block">{{ $message }}</div>
                                                        @enderror
                                                    </div>

                                                    <div class="form-check mb-2">
                                                        <input type="checkbox" class="form-check-input" id="hot_sell"
                                                            name="hot_sell" value="1"
                                                            @if (old('hot_sell') === '1') checked @endif>
                                                        <label class="form-check-label" for="hot_sell">Khuyến mãi hôm
                                                            nay</label>
                                                        @error('hot_sell')
                                                            <div class="invalid-feedback d-block">{{ $message }}</div>
                                                        @enderror
                                                    </div>

                                                    <div class="form-check mb-2">
                                                        <input type="checkbox" class="form-check-input" id="hot"
                                                            name="hot" value="1"
                                                            @if (old('hot') === '1') checked @endif>
                                                        <label class="form-check-label" for="hot">Nổi bật</label>
                                                        @error('hot')
                                                            <div class="invalid-feedback d-block">{{ $message }}</div>
                                                        @enderror
                                                    </div>
                                                </div>
                                            </div>


                                            {{-- <div class="form-group">
    <div class="row">
        <div class="col-md-3">
            <label class="control-label" for="">Bán chạy</label>
        </div>
        <div class="col-md-9">
            <div class="form-check-inline">
                <label class="form-check-label">
                    <input type="checkbox"
                        class="form-check-input @error('hot_sell')
                                                                    is-invalid
                                                                    @enderror"
                        value="1" name="hot_sell"
                        @if (old('hot_sell') === '1') {{ 'checked' }} @endif>
</label>
</div>
@error('hot_sell')
<div class="invalid-feedback d-block">
    {{ $message }}
</div>
@enderror
</div>
</div>
</div>
<div class="form-group">
    <div class="row">
        <div class="col-md-3">
            <label class="control-label" for="">Hết hàng</label>
        </div>
        <div class="col-md-9">
            <div class="form-check-inline">
                <label class="form-check-label">
                    <input type="checkbox"
                        class="form-check-input @error('out_stock')
                                                                    is-invalid
                                                                    @enderror"
                        value="1" name="out_stock"
                        @if (old('out_stock') === '1') {{ 'checked' }} @endif>
                </label>
            </div>
            @error('out_stock')
            <div class="invalid-feedback d-block">
                {{ $message }}
            </div>
            @enderror
        </div>
    </div>
</div>
<div class="form-group">
    <div class="row">
        <div class="col-md-3">
            <label class="control-label" for="">Landing Page 01</label>
        </div>
        <div class="col-md-9">
            <div class="form-check-inline">
                <label class="form-check-label">
                    <input type="checkbox"
                        class="form-check-input"
                        value="1" name="landing1"
                        @if (old('landing1') === '1') {{ 'checked' }} @endif>
                </label>
            </div>
        </div>
    </div>
</div>
<div class="form-group">
    <div class="row">
        <div class="col-md-3">
            <label class="control-label" for="">Landing Page 02</label>
        </div>
        <div class="col-md-9">
            <div class="form-check-inline">
                <label class="form-check-label">
                    <input type="checkbox"
                        class="form-check-input"
                        value="1" name="landing2"
                        @if (old('landing2') === '1') {{ 'checked' }} @endif>
                </label>
            </div>
        </div>
    </div>
</div> --}}
                                            <!-- <div class="form-group">
                                        <div class="row">
                                            <div class="col-md-3">
                                                <label class="control-label" for="">Ngày bắt đầu(Sale)</label>
                                            </div>
                                            <div class="col-md-9">
                                                <input type="datetime-local" class="form-control  @error('updated_at')
            is-invalid
            @enderror" id="" name="updated_at" value="{{ old('updated_at') }}">
                                                @error('updated_at')
        <div class="invalid-feedback d-block">{{ $message }}</div>
    @enderror
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="row">
                                            <div class="col-md-3">
                                                <label class="control-label" for="">Ngày kết thúc(Sale)</label>
                                            </div>
                                            <div class="col-md-9">
                                                <input type="datetime-local" class="form-control  @error('deleted_at')
            is-invalid
            @enderror" id="" name="deleted_at" value="{{ old('deleted_at') }}">
                                                @error('deleted_at')
        <div class="invalid-feedback d-block">{{ $message }}</div>
    @enderror
                                            </div>
                                        </div>
                                    </div> -->
                                            <div class="form-group">
                                                <div class="row">
                                                    <div class="col-md-3">
                                                        <label class="control-label" for="">Hiện trên
                                                            website</label>
                                                    </div>
                                                    <div class="col-md-9">
                                                        <div class="form-check-inline">
                                                            <label class="form-check-label">
                                                                <input type="radio" class="form-check-input"
                                                                    value="1" name="active"
                                                                    @if (old('active') === '1' || old('active') === null) {{ 'checked' }} @endif>Hiện
                                                            </label>
                                                        </div>
                                                        <div class="form-check-inline">
                                                            <label class="form-check-label">
                                                                <input type="radio" class="form-check-input"
                                                                    value="0"
                                                                    @if (old('active') === '0') {{ 'checked' }} @endif
                                                                    name="active">Ẩn
                                                            </label>
                                                        </div>
                                                        @error('active')
                                                            <div class="invalid-feedback d-block">{{ $message }}</div>
                                                        @enderror
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    {{-- <div class="card card-outline card-primary">
    <div class="card-header">
        <h3 class="card-title">Danh sách dung tích</h3>
    </div>
    <div class="card-body table-responsive p-3">
        <div class="">Thêm  <a data-url="{{ route('admin.product.loadOptionProduct') }}" class="btn btn-info btn-md float-right " id="addOptionProduct">+ Thêm </a></div>
<div class="list-item-option wrap-option mt-3" id="wrapOption">

</div>
</div>
</div> --}}
                                </div>
                            </div>
                    </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    </div>


@endsection
@section('js')
<script src="{{ asset('admin_asset/js/image-uploader.min.js') }}"></script>
    <script>
        $(function() {
            $(".select-2-init").select2({
                placeholder: "Chọn nhóm sản phẩm",
                allowClear: true
            })
        })
    </script>
    <script>
        $(function() {
            $(document).on('change', '.changeSupplier', function() {
                let val = parseInt($(this).val());
                if (val) {
                    $(".xacthuc a").text(supplier[val].link_verify);
                    $(".xacthuc a").attr('href', supplier[val].link_verify);
                }
            });
        });

        $(document).on('change', '.js_change_arr', function() {
            event.preventDefault();

            let id = $(this).val();
            let urlRequest = $(this).data('url');
            if (id) {
                $.ajax({
                    type: "GET",
                    url: urlRequest,
                    data: {
                        id: id
                    },
                    dataType: "json",
                    success: function(response) {
                        if (response.code == 200) {
                            $("#attribute").html(response.html);
                        }
                    },
                });
            }
        });


        $(document).ready(function() {
            $('#price').number(true, 0, '.', ',');
            let price_show = $('#price').val();
            let price_hide = $('#price_hide').val(price_show);

            $('#old_price').number(true, 0, '.', ',');
            let old_price_show = $('#old_price').val();
            let old_price_hide = $('#old_price_hide').val(old_price_show);

            $('#capital').number(true, 0, '.', ',');
            let capital_show = $('#capital').val();
            let capital_hide = $('#capital_hide').val(capital_show);
        });

        $('#price').on('change', function() {
            let price_show = $('#price').val();
            let price_hide = $('#price_hide').val(price_show);
        });

        $('#old_price').on('change', function() {
            let old_price_show = $('#old_price').val();
            let old_price_hide = $('#old_price_hide').val(old_price_show);
        });

        $('#capital').on('change', function() {
            let capital_show = $('#capital').val();
            let capital_hide = $('#capital_hide').val(capital_show);
        });
    </script>
    <script>
        // Lấy slug theo name
        $(document).ready(function() {
            $('.nameChangeSlug').on('input', function() {
                let language = $(this).data('lg');
                let name = $('.nameChangeSlug.' + language).val();
                let slug = createSlug(name);
                $('.resultSlug_' + language).val(slug);
            });
        });
        $(document).ready(function() {
            $('.changeAlias1').on('input', function() {
                let language = $(this).data('lg');
                let name = $('.changeAlias1.' + language).val();
                let slug = createSlug(name);
                $('.resultSlug_' + language).val(slug);
            });
        });
        $(document).ready(function() {
            $('.changeAlias2').on('input', function() {
                let language = $(this).data('lg');
                let name = $('.changeAlias2.' + language).val();
                let slug = createSlug(name);
                $('.resultSlug_' + language).val(slug);
            });
        });

        function createSlug(name) {
            return name
                // Loại bỏ khoảng trắng đầu và cuối chuỗi
                .trim()
                .toLowerCase()
                // Loại bỏ dấu gạch ngang ở đầu và cuối chuỗi
                .replace(/^-+|-+$/g, '')
                //Đổi ký tự có dấu thành không dấu
                .replace(/á|à|ả|ạ|ã|ă|ắ|ằ|ẳ|ẵ|ặ|â|ấ|ầ|ẩ|ẫ|ậ/gi, 'a')
                .replace(/é|è|ẻ|ẽ|ẹ|ê|ế|ề|ể|ễ|ệ/gi, 'e')
                .replace(/i|í|ì|ỉ|ĩ|ị/gi, 'i')
                .replace(/ó|ò|ỏ|õ|ọ|ô|ố|ồ|ổ|ỗ|ộ|ơ|ớ|ờ|ở|ỡ|ợ/gi, 'o')
                .replace(/ú|ù|ủ|ũ|ụ|ư|ứ|ừ|ử|ữ|ự/gi, 'u')
                .replace(/ý|ỳ|ỷ|ỹ|ỵ/gi, 'y')
                .replace(/đ/gi, 'd')
                //Xóa các ký tự đặt biệt
                .replace(/\`|\~|\!|\@|\#|\||\$|\%|\^|\&|\*|\(|\)|\+|\=|\,|\/|\?|\>|\<|\'|\"|\:|\;|_/gi, '')
                //Đổi khoảng trắng thành ký tự gạch ngang
                .replace(/ /gi, "-")
                //Đổi nhiều ký tự gạch ngang liên tiếp thành 1 ký tự gạch ngang
                //Phòng trường hợp người nhập vào quá nhiều ký tự trắng
                .replace(/\-\-\-\-\-/gi, '-')
                .replace(/\-\-\-\-/gi, '-')
                .replace(/\-\-\-/gi, '-')
                .replace(/\-\-/gi, '-');
        }
    </script>
    <script>
        function updateAlias(input) {
            var slug = input.value;
            var langValue = input.name.split('_')[1];
            var aliasInput = document.getElementById('alias_' + langValue);
            aliasInput.value = slug;
        }
    </script>

    <script>
        $('.add_all_attribute').click(function() {
            $.ajax({
                url: '/admin/product/callAjaxAttributes',
                type: "GET",
                data: {
                    type: 0
                },
                success: function(res) {
                    console.log(res)
                    var html = '';
                    $('.body_result').html(res['html']);

                },
                errors: function(err) {
                    console.log(err)
                }
            })
        })
    </script>

    <script>
        (function() {
            // Hàm format số với dấu chấm nghìn
            function formatNumber(input) {
                // Xóa tất cả ký tự không phải số
                let value = input.value.replace(/\D/g, '');
                // Format lại với dấu chấm
                input.value = value.replace(/\B(?=(\d{3})+(?!\d))/g, '.');
            }

            // Gắn event cho tất cả input number muốn format
            $(document).on('input', 'input[name*="[price]"], input[name*="[sale_price]"]', function() {
                formatNumber(this);
            });


            let optionIndex = 0;

            $('#add-option').on('click', function() {
                optionIndex++;

                const html = `
        <div class="option-item">
            <button type="button" class="btn btn-danger btn-sm remove-option">×</button>
            <div class="row gy-2">
                <div class="col-md-12">
                    <label>Tên</label>
                    <input type="text" name="options[${optionIndex}][name]" class="form-control">
                </div>
                <div class="col-md-12">
                    <label>Đường dẫn</label>
                    <input type="text" name="options[${optionIndex}][link]" class="form-control">
                </div>
                <div class="col-md-6">
                    <label>Giá bán</label>
                    <input type="text" name="options[${optionIndex}][sale_price]" class="form-control">
                </div>
                <div class="col-md-6">
                    <label>Giá cũ</label>
                    <input type="text" name="options[${optionIndex}][price]" class="form-control">
                </div>
                <div class="col-md-6 d-flex align-items-center mt-2">
                    <label class="mb-0">
                        <input type="radio" class="default-radio" name="default_option" value="${optionIndex}">
                        Mặc định
                    </label>
                </div>
            </div>
        </div>
    `;

                $('#option-wrapper').append(html);

                // Nếu chưa có radio nào được chọn → tự chọn cái đầu tiên
                if (!$('input[name="default_option"]:checked').length) {
                    $('input[name="default_option"]').first().prop('checked', true);
                }
            });


            // Xóa option
            $(document).on('click', '.remove-option', function() {
                const item = $(this).closest('.option-item');
                const wasChecked = item.find('input[name="default_option"]').is(':checked');

                item.remove();

                // Nếu cái bị xoá là cái đang checked → check cái đầu tiên còn lại
                if (wasChecked) {
                    $('input[name="default_option"]').first().prop('checked', true);
                }
            });

            let faqIndex = 0; // index để tạo ID duy nhất cho CKEditor

            // Hàm render FAQ
            function renderFaq(value = {
                question: '',
                answer: ''
            }) {
                faqIndex++;
                const id = `faq-answer-${faqIndex}`;

                return `
        <div class="card mb-2 faq-item">
            <div class="card-header d-flex justify-content-between align-items-center">
                <input type="text" name="faqs[${faqIndex}][question]" class="form-control me-2" placeholder="Câu hỏi" value="${value.question}">
                <button type="button" class="btn btn-danger btn-sm remove-faq">X</button>
            </div>
            <div class="card-body">
                <textarea name="faqs[${faqIndex}][answer]" id="${id}" class="form-control tinymce_editor_init" placeholder="Câu trả lời">${value.answer}</textarea>
            </div>
        </div>
    `;
            }

            // Thêm FAQ mới
            $('#add-faq').on('click', function() {
                const $faq = $(renderFaq());
                $('#faq-wrapper').append($faq);

                // Lấy textarea vừa thêm
                const textarea = $faq.find('textarea.tinymce_editor_init')[0];

                // Khởi tạo CKEditor cho textarea này
                CKEDITOR.replace(textarea.id, {
                    extraPlugins: 'nofollow',
                    allowedContent: true,
                    extraAllowedContent: 'svg[*]{*}; path[*]{*};',
                    removeDialogTabs: 'image:Upload;image:advanced',
                    toolbar: [{
                            name: 'document',
                            items: ['Source', '-', 'Undo', 'Redo']
                        },
                        {
                            name: 'clipboard',
                            items: ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord']
                        },
                        {
                            name: 'editing',
                            items: ['Find', 'Replace', '-', 'SelectAll']
                        },
                        {
                            name: 'basicstyles',
                            items: ['Bold', 'Italic', 'Underline', 'Strike', '-', 'RemoveFormat']
                        },
                        {
                            name: 'paragraph',
                            items: [
                                'NumberedList', 'BulletedList', '-',
                                'Outdent', 'Indent', '-',
                                'Blockquote', '-',
                                'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'
                            ]
                        },
                        {
                            name: 'links',
                            items: ['Link', 'Unlink', 'Anchor']
                        },
                        {
                            name: 'insert',
                            items: ['Image', 'Table', 'HorizontalRule', 'Iframe']
                        },
                        {
                            name: 'styles',
                            items: ['Format', 'FontSize']
                        },
                        {
                            name: 'colors',
                            items: ['TextColor', 'BGColor']
                        },
                        {
                            name: 'tools',
                            items: ['Maximize']
                        }
                    ],
                    height: 300,
                });
            });


            // Xóa FAQ
            $(document).on('click', '.remove-faq', function() {
                const $faqItem = $(this).closest('.faq-item');

                // Nếu dùng CKEditor, hủy instance trước khi remove
                const textareaId = $faqItem.find('textarea').attr('id');
                if (CKEDITOR.instances[textareaId]) {
                    CKEDITOR.instances[textareaId].destroy(true);
                }

                $faqItem.remove();
            });

            // Hàm render video
            function renderVideo(value = '') {
                return `
        <div class="video-item" style="display:flex; gap:10px; margin-bottom:8px;">
            <input type="text" name="videos[]" class="form-control" placeholder="Nhập link YouTube..." value="${value}">

            <button type="button" class="btn btn-danger btn-sm remove-video">
                X
            </button>
        </div>
    `;
            }

            // Sự kiện thêm ô video mới
            $('#add-video').on('click', function() {
                $('#video-wrapper').append(renderVideo());
            });

            // Sự kiện xóa ô video
            $(document).on('click', '.remove-video', function() {
                $(this).closest('.video-item').remove();
            });

            const checkboxes = document.querySelectorAll('.attr-checkbox');

            function getAllDescendants(parentId) {
                const result = [];
                const direct = document.querySelectorAll('.attribute-group[data-id="' + parentId +
                    '"] > .children .attr-checkbox');
                direct.forEach(ch => {
                    result.push(ch);
                    result.push(...getAllDescendants(ch.closest('.attribute-group').dataset.id));
                });
                return result;
            }

            checkboxes.forEach(cb => {
                cb.addEventListener('change', function() {
                    const group = cb.closest('.attribute-group');
                    const id = group.dataset.id;

                    // check/uncheck all descendants
                    getAllDescendants(id).forEach(d => d.checked = cb.checked);
                });
            });

            $(document).on('change', '.selected-attribute', function() {
                const categoryId = $(this).val();

                // Chỉ chạy khi được CHECK
                if (!$(this).is(':checked')) {
                    return; // bỏ check → không làm gì
                }

                if (!categoryId) return;

                $.ajax({
                    url: `/admin/categoryproduct/${categoryId}/attributes`,
                    method: 'GET',
                    headers: {
                        'X-CSRF-TOKEN': "{{ csrf_token() }}"
                    },
                    success: (res) => {
                        $('.attr-checkbox').each(function() {
                            const val = parseInt($(this).val());
                            $(this).prop('checked', res.includes(val));
                        });

                    },
                    error: (xhr) => {
                        console.log(xhr);
                    }
                });
            });

        })();
    </script>

    <script>
        $('.nameChangeSlug').on('keyup', function() {
            let language = $(this).data('lg');
            var value = $(this).val();
            $('#title_seo_' + language).val(value);
            $('#description_seo_' + language).val(value);
            $('input[name="keyword_seo_' + language + '"]').val(value);
        });
    </script>
    @foreach (config('languages.supported') as $langItem)
        <script>
            $(document).ready(function() {
                $("input[name='name_{{ $langItem['value'] }}']").keyup(function() {
                    // Lấy giá trị của input
                    var name = $(this).val();
                    $("input[name='title_seo_{{ $langItem['value'] }}']").val(name);
                    $("input[name='description_seo_{{ $langItem['value'] }}']").val(name);
                });

                const BASE_URL = "{{ config('app.url') }}"
                let relatedSelected = []; // list sản phẩm đã chọn
                let currentPageUrl = "{{ route('admin.product.searchV2') }}";

                // Render sản phẩm đã chọn
                function renderSelected() {
                    let html = "";

                    relatedSelected.forEach(item => {
                        html += `
            <div class="d-flex align-items-center mb-2" data-id="${item.id}">
                <img src="${BASE_URL}/${item.image}" width="40" class="mr-2">
                <span class="mr-2">${item.name}</span>
                <button class="btn btn-danger btn-sm remove-related" data-id="${item.id}">X</button>
            </div>
        `;
                    });

                    $("#related-selected").html(html);
                    $("#related_products_hidden").val(JSON.stringify(relatedSelected.map(i => i.id)));
                }

                // Debounce function
                function debounce(func, delay) {
                    let timer;
                    return function() {
                        clearTimeout(timer);
                        timer = setTimeout(() => func.apply(this, arguments), delay);
                    };
                }

                // Load sản phẩm bằng AJAX
                function loadProductPage(keyword, pageUrl = null) {
                    $.ajax({
                        url: pageUrl ?? currentPageUrl,
                        data: {
                            q: keyword
                        },
                        success: function(res) {
                            let html = "";

                            res.data.forEach(p => {
                                let isSelected = relatedSelected.some(i => i.id === p.id) ?
                                    "active border-primary" : "";

                                html += `
                    <a href="#" class="list-group-item list-group-item-action item-product ${isSelected}"
                        data-id="${p.id}" data-name="${p.name}" data-image="${p.image}">
                        <img src="${BASE_URL}/${p.image}" width="35" class="mr-2"> ${p.name}
                    </a>
                `;
                            });

                            html += `
                <div class="d-flex justify-content-between p-2 bg-light">
                    <button class="btn btn-sm btn-secondary prev-page"
                        data-url="${res.prev_page ?? ''}" ${res.prev_page ? '' : 'disabled'}>Prev</button>

                    <button class="btn btn-sm btn-secondary next-page"
                        data-url="${res.next_page ?? ''}" ${res.next_page ? '' : 'disabled'}>Next</button>
                </div>
            `;

                            $("#search-result").html(html).show();
                        }
                    });
                }

                // Khi gõ chữ vào input
                $(document).on('keyup', '#search-related', debounce(function() {
                    let keyword = $(this).val();

                    if (keyword.length < 3) {
                        $("#search-result").hide();
                        return;
                    }

                    loadProductPage(keyword);
                }, 300));

                // Phân trang
                $(document).on('click', '.prev-page, .next-page', function(e) {
                    e.preventDefault();
                    const url = $(this).data('url');
                    const keyword = $("#search-related").val();

                    if (url) loadProductPage(keyword, url);
                });

                // Chọn / bỏ chọn sản phẩm
                $(document).on('click', '.item-product', function(e) {
                    e.preventDefault();

                    const id = $(this).data('id');
                    const name = $(this).data('name');
                    const image = $(this).data('image');

                    const exists = relatedSelected.find(i => i.id === id);

                    if (exists) {
                        relatedSelected = relatedSelected.filter(i => i.id !== id);
                    } else {
                        relatedSelected.push({
                            id,
                            name,
                            image
                        });
                    }

                    renderSelected();

                    // Làm mới danh sách và cập nhật màu active
                    loadProductPage($("#search-related").val());
                });

                // Xóa 1 sản phẩm đã chọn
                $(document).on('click', '.remove-related', function(e) {
                    e.preventDefault();
                    e.stopPropagation(); // ✨ Quan trọng: chặn click lan ra ngoài

                    const id = $(this).data('id');

                    relatedSelected = relatedSelected.filter(i => i.id !== id);

                    renderSelected();

                    // Cập nhật border highlight trong popup nếu đang mở
                    if ($("#search-result").is(':visible')) {
                        loadProductPage($("#search-related").val());
                    }
                });


                // Ẩn popup khi click ra ngoài
                $(document).on('click', function(e) {
                    if (!$(e.target).closest('#search-box-wrapper').length) {
                        $("#search-result").hide();
                    }
                });

                $(document).ready(function() {
                    $('[name="category[]"]:checked').first().trigger('change');
                });

                $(document).on('change', '[name="category[]"]', function() {

                    let categoryIds = [];

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

                    $.get("{{ route('admin.product.get-attr-by-category') }}", {
                        category: categoryIds,
                        product_id: ""
                    }, function(data) {
                        $("#thuoctinh").html(data.html);
                    });
                });
            });
        </script>
    @endforeach

    <script>
$(document).on('change', '.js-image-type', function () {
    let $wrap = $(this).closest('.wrap-load-image');
    let type = $(this).val();

    if (type === 'upload') {
        $wrap.find('.avatar-upload').removeClass('d-none');
        $wrap.find('.avatar-library').addClass('d-none');
        $wrap.find('.input-image-path').val('');
        $wrap.find('.image-preview').html('');
    } else {
        $wrap.find('.avatar-upload').addClass('d-none');
        $wrap.find('.avatar-library').removeClass('d-none');
        $wrap.find('input[type="file"]').val('');
    }
});
</script>

<script>
$(document).on('click', '.btn-open-filemanager', function () {
    let $wrap = $(this).closest('.wrap-load-image');
    let route_prefix = '/laravel-filemanager';

    window.open(route_prefix + '?type=image', 'FileManager', 'width=1200,height=700');

    window.SetUrl = function (items) {
        let fileUrl = items[0].url;

        $wrap.find('.input-image-path').val(fileUrl);

        $wrap.find('.image-preview').html(`
            <img src="${fileUrl}"
                 class="img-load border p-1"
                 style="height:200px;object-fit:cover;max-width:260px;">
        `);
    };
});
</script>
<script>
    function removeVietnameseTones(str) {
    return str
        .normalize("NFD")
        .replace(/[\u0300-\u036f]/g, "")
        .replace(/đ/g, "d")
        .replace(/Đ/g, "D")
        .toLowerCase();
}
$(document).ready(function () {


    $('#search-category').on('keyup', function () {
        let keyword = removeVietnameseTones($(this).val().trim());

        // reset
        if (keyword === '') {
            $('.list-permission .form-check').show();
            return;
        }

        // Ẩn toàn bộ
        $('.list-permission .form-check').hide();

        // Duyệt từng label
        $('.list-permission label').each(function () {

            // Lấy text CHỈ của label này (không dính con)
            let labelText = $(this).clone()
                .children()
                .remove()
                .end()
                .text()
                .trim();

            let textNoSign = removeVietnameseTones(labelText);

            if (textNoSign.includes(keyword)) {
                let $current = $(this).closest('.form-check');

                // Hiện chính nó
                $current.show();

                // Hiện toàn bộ CHA
                $current.parents('.form-check').show();

                // Hiện toàn bộ CON
                $current.find('.form-check').show();
            }
        });
    });

});
</script>

<script>
$(function(){
    $('.input-images').imageUploader({
        preloaded: [],
        imagesInputName: 'photos',
        preloadedInputName: 'old',
        maxSize: 2 * 1024 * 1024,
        maxFiles: 10
    });

    function randomKey(length = 8) {
        const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
        let result = '';
        for (let i = 0; i < length; i++) {
            result += chars.charAt(Math.floor(Math.random() * chars.length));
        }
        return result;
    }

    const defaultImage = "{{ asset('images/image-default.jpg') }}";

    // ================== Tạo option (có đa ngôn ngữ)
    function createStep(lang, path = null, title = '', price = '', old_price = '', id = null) {
        const key = id ?? randomKey();
        const imageSrc = path ? path : defaultImage;

        const $step = $(`
            <div class="row mb-4 step-item border p-3 position-relative">
                <button type="button" class="btn btn-danger btn-sm position-absolute top-0 end-0 remove-step" style="z-index: 1000">Xóa</button>
                
                <div class="col-md-3">
                    <div class="image-uploader text-center">
                        <img class="img-fluid img-thumbnail preview-img mb-2" 
                             src="${imageSrc}" 
                             style="cursor: pointer; width: 100%; aspect-ratio: 1 / 1; object-fit: cover;">
                        <input type="file" name="procedures[${lang}][${key}][path]" class="d-none input-file" accept="image/*">
                        ${path ? `<button type="button" class="btn btn-outline-danger btn-sm mt-2 remove-image">Xóa ảnh</button>` : ''}
                    </div>
                </div>

                <div class="col-md-9">
                    <div class="mb-3">
                        <label class="form-label">Tên màu</label>
                        <input type="text"
                            class="form-control"
                            name="procedures[${lang}][${key}][title]"
                            value="${title}"
                            placeholder="Nhập tên màu">
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Giá bán</label>
                            <input type="text"
                                class="form-control price-input"
                                name="procedures[${lang}][${key}][price]"
                                value="${price}"
                                placeholder="Nhập giá bán">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Giá gốc</label>
                            <input type="text"
                                class="form-control price-input"
                                name="procedures[${lang}][${key}][old_price]"
                                value="${old_price}"
                                placeholder="Nhập giá gốc">
                        </div>
                    </div>
                </div>
            </div>
        `);

        $(`#profits-container-${lang}`).append($step);
    }

    // Thêm option mới
    $(document).on('click', '.add-profit', function() {
        const lang = $(this).data('lang');
        createStep(lang);
    });

    // Xóa option
    $(document).on('click', '.remove-step', function() {
        $(this).closest('.step-item').remove();
    });

    // ================== Xử lý ảnh
    $(document).on('click', '.image-uploader .preview-img', function() {
        $(this).siblings('.input-file').click();
    });

    $(document).on('change', '.image-uploader .input-file', function(e) {
        const file = this.files[0];
        if (!file) return;
        
        const reader = new FileReader();
        const $img = $(this).siblings('.preview-img');
        const $wrapper = $(this).closest('.image-uploader');
        
        reader.onload = () => {
            $img.attr('src', reader.result);
            // Thêm nút xóa ảnh nếu chưa có
            if ($wrapper.find('.remove-image').length === 0) {
                $wrapper.append('<button type="button" class="btn btn-outline-danger btn-sm mt-2 remove-image">Xóa ảnh</button>');
            }
        };
        reader.readAsDataURL(file);
    });

    // Xóa ảnh
    $(document).on('click', '.remove-image', function() {
        const $wrapper = $(this).closest('.image-uploader');
        $wrapper.find('.preview-img').attr('src', defaultImage);
        $wrapper.find('.input-file').val('');
        $(this).remove();
    });

    // ================== Xử lý input giá - CHỈ CHO PHÉP NHẬP SỐ
    $(document).on('input', '.price-input', function() {
        // Chỉ giữ lại số và xóa ký tự không hợp lệ
        this.value = this.value.replace(/[^0-9]/g, '');
    });

});
</script>

@endsection