
    <x-admin-panel-layout>
        <x-slot name="title">
            لیست  محصولات گروهی
        </x-slot>
        <x-slot name="main">
            <div class="content-header">
                <div class="container-fluid">
                    <div class="row mb-4">
                        <div class="col-sm-6">
                            <h3 class="m-0 text-dark">لیست  محصولات گروهی</h3>
                        </div><!-- /.col -->
                        <div class="col-sm-6">
                            <ol class="breadcrumb float-sm-left">
                                <li class="breadcrumb-item"><a href="{{ route("admin.dashboard") }}">داشبورد</a></li>
                                <li class="breadcrumb-item active">لیست  محصولات گروهی</li>
                            </ol>
                        </div><!-- /.col -->
                    </div>
                </div>
            </div>

    <div class="admin-order-select-box mt-3">
        <div class="admin-order-by-box">

            <label>مرتب سازی بر اساس : </label>


            <a href="{{ route("group_product.list" ,["orderBy"=>"desc"]) }}"
               class="btn btn-sm btn-outline-dark @if(!isset($_GET["orderBy"]) || request("orderBy")=="desc" ) btn-dark text-white @endif">تاریخ
                انتشار نزولی</a>
            <a href="{{ route("group_product.list" ,["orderBy"=>"asc"]) }}"
               class="btn btn-sm btn-outline-dark @if(request("orderBy")=="asc" ) btn-dark text-white @endif">تاریخ
                انتشار صعودی</a>
            <a href="{{ route("group_product.list" ,["orderBy"=>"name"]) }}"
               class="btn btn-sm btn-outline-dark @if(request("orderBy")=="name") btn-dark text-white @endif">نام</a>

        </div>
        <div>
            <form style="display: flex;margin-bottom: 12px;" action="{{ route("group_product.list") }}" method="get">
                <input type="text" name="name" placeholder="نام زیر محصول را تایپ کنید">
                <button type="submit" class="btn btn-primary">جستجو</button>
            </form>
        </div>
    </div>
    <table class="admin-table">
        <tr>

            <th>نام محصول گروهی</th>
            <th>تعداد زیر محصولات</th>
            <th>دسته بندی</th>
            <th>تاریخ انتشار</th>
        </tr>
        @foreach($products as $product)
            <tr>

                <td>
                    <a href="{{ route('group_product.edit', ['id'=>$product->id]) }}">{{ $product->title }}</a>
                    <div class="admin-table-actions">
                        <a href="{{ route('group_product.edit', ['id'=>$product->id]) }}"><span>ویرایش</span></a>
                        <a class="admin-table-actions-delete" href="{{ route('group_product.delete', ['id'=>$product->id]) }}"><span>حذف</span></a>
                        <button class="btn btn-sm btn-success edit-price-btn" data-id="{{ $product->id }}">ویرایش قیمت</button>
                    </div>
                </td>

                <td>

                    {{  count($product->children_product) }}</td>

                <td>
                    @if($product->category)
                    @foreach($product->category  as $cat){{$cat->name." | "}}@endforeach
                        @endif
                </td>

                <td>{{ $product->created_at }}</td>
            </tr>
        @endforeach
    </table>
            <!-- Modal -->
            <div class="modal fade" id="editPriceModal" tabindex="-1" aria-labelledby="editPriceModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-xl">
                    <div class="modal-content">
                        <div class="modal-body">
                            <!-- Nav tabs -->
                            <ul class="custom-tabs" id="brandTabs" role="tablist">
                            </ul>

                            <!-- Tab content -->
                            <div class="custom-tabs-content" id="brandTabsContent">
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">بستن</button>
                        </div>
                    </div>
                </div>
            </div>

    <div class="admin-paginator">
        {{ $products->links() }}
    </div>


            <style>.modal-dialog.modal-xl {
                    width: 700px;
                    max-width: unset;
                }button.btn.btn-sm.btn-outline-primary.toggle-price-form {
                                        margin-top: -6px;
                                        float: left;
                 }
                /* استایل ساده تب‌ها */
                .custom-tabs {
                    list-style: none;
                    padding: 0;
                    display: flex;
                    border-bottom: 1px solid #ccc;
                    margin-bottom: 10px;
                }
                .custom-tabs li {
                    margin-right: 5px;
                }
                .custom-tabs button {
                    padding: 5px 15px;
                    border: 1px solid #ccc;
                    border-bottom: none;
                    background: #f5f5f5;
                    cursor: pointer;
                }
                .custom-tabs button.active {
                    background: #fff;
                    font-weight: bold;
                }
                .custom-tabs-content .tab-pane {
                    display: none;
                }
                .custom-tabs-content .tab-pane.active {
                    display: block;
                }div#editPriceModal {
                     opacity: 1;
                     background: #ffffff9c;
                 }.modal-dialog.modal-xl {
                      position: absolute;
                      left: 50%;
                      top: 50%;
                      transform: translate(-50%, -50%) !important;
                  }    .modal-content {
                           box-shadow: 0 .5rem 1rem rgb(0 0 0 / 16%) !important;
                           border: 0 !important;
                       }div#brandTabsContent {
                            height: 249px;
                            overflow: auto;
                        }.jq-toast-wrap, .jq-toast-wrap * {
                             font-family: 'Vazir' !important;
                         }
            </style>

            @push("admin-scripts")
                <script>

                    $(document).ready(function(){
                        $('.btn.btn-secondary').on('click', function() {
                            $('#editPriceModal').hide();
                        });

                        document.getElementById('editPriceModal').addEventListener('click', function(e) {
                            // اگر روی خود modal-dialog کلیک نشده باشه
                            if (!e.target.closest('.modal-dialog.modal-xl')) {
                                $('#editPriceModal').hide();
                            }
                        });


                        $('.edit-price-btn').on('click', function(){
                            let groupId = $(this).data('id');

                            $('#brandTabs').empty();
                            $('#brandTabsContent').empty();
                            @php
                                $products = $products->map(function($product) {
        $product->children_product->map(function($child){
            // اضافه کردن قیمت‌ها و متا به خود مدل child
            $child->regular_price = $child->regular_price; // از getRegularPriceAttribute
            $child->offer_price = $child->offer_price;     // از getOfferPriceAttribute
            $child->offer_1_min_qty = $child->offer_1_min_qty; // از getLowStockAmountAttribute
            $child->offer_1_percent = $child->offer_1_percent; // از getLowStockAmountAttribute
            $child->offer_2_min_qty = $child->offer_2_min_qty; // از getLowStockAmountAttribute
            $child->offer_2_percent = $child->offer_2_percent; // از getLowStockAmountAttribute
            $child->offer_3_min_qty = $child->offer_3_min_qty; // از getLowStockAmountAttribute
            $child->offer_3_percent = $child->offer_3_percent; // از getLowStockAmountAttribute
            return $child;
        });
        return $product;
    });

                            @endphp
                            let products = @json($products->keyBy('id'));
                            let children = products[groupId].children_product;

                            let brands = {};
                            children.forEach(function(child){
                                child.brand.forEach(function(b){
                                    if(!brands[b.id]) brands[b.id] = {name: b.name, products: []};
                                    brands[b.id].products.push(child);
                                });
                            });

                            // تب همه محصولات
                            let allTabBtn = $('<li><button class="active" data-target="brand-all">همه محصولات</button></li>');
                            $('#brandTabs').append(allTabBtn);

                            let allTabContent = $('<div class="tab-pane active" id="brand-all"></div>');
                            children.forEach(function(p){
                                allTabContent.append(renderChildProduct(p));
                                initChildProductSearch();

                            });
                            $('#brandTabsContent').append(allTabContent);

                            // تب‌های برند
                            for(let brandId in brands){
                                let brand = brands[brandId];

                                let btn = $(`<li><button data-target="brand-${brandId}">${brand.name}</button></li>`);
                                $('#brandTabs').append(btn);

                                let tabContent = $('<div class="tab-pane" id="brand-'+brandId+'"></div>');
                                brand.products.forEach(function(p){
                                    console.log(p)
                                    tabContent.append(renderChildProduct(p));
                                    initChildProductSearch();

                                });
                                $('#brandTabsContent').append(tabContent);
                            }

                            // فعال کردن تب‌ها
                            $('#brandTabs button').on('click', function(){
                                let target = $(this).data('target');
                                $('#brandTabs button').removeClass('active');
                                $(this).addClass('active');

                                $('.tab-pane').removeClass('active');
                                $('#'+target).addClass('active');
                            });

                            $('#editPriceModal').show();
                        });


                        function initChildProductSearch() {
                            // اگر قبلاً ساخته شده بود حذفش کن
                            $('#childProductSearch').remove();

                            // اضافه کردن فیلد سرچ بالای تب‌ها
                            let searchInput = $('<input type="text" id="childProductSearch" class="form-control mb-3" placeholder="جستجو زیرمحصول...">');
                            $('#brandTabs').before(searchInput);

                            // فیلتر کردن محصولات هنگام تایپ
                            $('#childProductSearch').on('input', function() {
                                let query = $(this).val().toLowerCase();

                                $('.tab-pane').each(function() {
                                    $(this).find('.child-product-section').each(function() {
                                        let title = $(this).find('strong').text().toLowerCase();
                                        if(title.includes(query)) {
                                            $(this).show();
                                        } else {
                                            $(this).hide();
                                        }
                                    });
                                });
                            });
                        }

                        // تابع رندر محصول
                        function renderChildProduct(p){
                            return `
        <div class="child-product-section mb-3 border p-2" data-child-id="${p.id}">
            <strong>${p.title}</strong>
            <button class="btn btn-sm btn-outline-primary toggle-price-form">ویرایش قیمت</button>
            <div class="price-form mt-4 d-none">
               <div class="discount-section">
  <div class="row mt-3">
    <div class="col-md-6">
      <label>قیمت اصلی (تومان) :</label>
      <input type="text" class="admin-input-price form-control" name="price"
             value="${(p.regular_price != null && !isNaN(p.regular_price)) ? p.regular_price : ''}"
             oninput="this.value = this.value.replace(/[^0-9]/g,'');">
    </div>
    <div class="col-md-6">
      <label>قیمت فروش فوق‌العاده (تومان) :</label>
      <input type="text" class="admin-input-price-offer form-control" name="offer_price"
             value="${(p.offer_price != null && !isNaN(p.offer_price)) ? p.offer_price : ''}"
             oninput="this.value = this.value.replace(/[^0-9]/g,'');">
      <span class="d-none btn-danger admin-span-price-offer btn">قیمت فروش فوق‌العاده باید کوچک‌تر از قیمت اصلی باشد</span>
    </div>
  </div>

  <div class="row mt-3">
    <div class="col-md-6">
      <label>حداقل تعداد برای تخفیف اول</label>
      <input type="text" class="form-control" name="offer_1_min_qty"
             value="${(p.offer_1_min_qty != null && !isNaN(p.offer_1_min_qty)) ? p.offer_1_min_qty : ''}"
             oninput="this.value = this.value.replace(/[^0-9]/g,'');">
    </div>
    <div class="col-md-6">
      <label>درصد تخفیف اول</label>
      <input type="text" class="form-control" name="offer_1_percent"
             value="${(p.offer_1_percent != null && !isNaN(p.offer_1_percent)) ? p.offer_1_percent : ''}"
             oninput="this.value = this.value.replace(/[^0-9]/g,'');">
    </div>

    <div class="col-md-6">
      <label>حداقل تعداد برای تخفیف دوم</label>
      <input type="text" class="form-control" name="offer_2_min_qty"
             value="${(p.offer_2_min_qty != null && !isNaN(p.offer_2_min_qty)) ? p.offer_2_min_qty : ''}"
             oninput="this.value = this.value.replace(/[^0-9]/g,'');">
    </div>
    <div class="col-md-6">
      <label>درصد تخفیف دوم</label>
      <input type="text" class="form-control" name="offer_2_percent"
             value="${(p.offer_2_percent != null && !isNaN(p.offer_2_percent)) ? p.offer_2_percent : ''}"
             oninput="this.value = this.value.replace(/[^0-9]/g,'');">
    </div>

    <div class="col-md-6">
      <label>حداقل تعداد برای تخفیف سوم</label>
      <input type="text" class="form-control" name="offer_3_min_qty"
             value="${(p.offer_3_min_qty != null && !isNaN(p.offer_3_min_qty)) ? p.offer_3_min_qty : ''}"
             oninput="this.value = this.value.replace(/[^0-9]/g,'');">
    </div>
    <div class="col-md-6">
      <label>درصد تخفیف سوم</label>
      <input type="text" class="form-control" name="offer_3_percent"
             value="${(p.offer_3_percent != null && !isNaN(p.offer_3_percent)) ? p.offer_3_percent : ''}"
             oninput="this.value = this.value.replace(/[^0-9]/g,'');">
    </div>
  </div>

  <button class="btn btn-success mt-2 save-price-btn w-100">ثبت قیمت</button>
</div>

            </div>
        </div>
        `;
                        }

                        // باز و بسته کردن فرم قیمت
                        $(document).on('click', '.toggle-price-form', function(){
                            $(this).siblings('.price-form').toggleClass('d-none');
                        });

                        // ذخیره قیمت با Ajax
                        $(document).on('click', '.save-price-btn', function(){
                            let section = $(this).closest('.child-product-section');
                            let childId = section.data('child-id');

                            let data = {
                                _token: '{{ csrf_token() }}',
                                price: section.find('[name="price"]').val(),
                                offer_price: section.find('[name="offer_price"]').val(),
                                offer_1_min_qty: section.find('[name="offer_1_min_qty"]').val(),
                                offer_1_percent: section.find('[name="offer_1_percent"]').val(),
                                id:childId,
                                offer_2_min_qty: section.find('[name="offer_2_min_qty"]').val(),
                                offer_2_percent: section.find('[name="offer_2_percent"]').val(),


                                offer_3_min_qty: section.find('[name="offer_3_min_qty"]').val(),
                                offer_3_percent: section.find('[name="offer_3_percent"]').val(),


                            };

                            let btn = $(this);
                            btn.prop('disabled', true).text('در حال ذخیره ...');

                            $.post('{{ route("ajax_update_products") }}', data, function(res){
                                btn.prop('disabled', false).text('ثبت قیمت');
                                section.find('.price-form').addClass('d-none');

                                $.toast({
                                    heading: 'موفقیت',
                                    text: 'قیمت محصول بروز شد',
                                    showHideTransition: 'slide',
                                    icon: 'success',
                                    position: 'bottom-left'
                                });
                            });
                        });

                    });
                </script>
            @endpush

            @includeIf("admin.partials.delete_modal")
        </x-slot>
    </x-admin-panel-layout>
